Skip to content

Commit fa51600

Browse files
Add Metamask Preset
1 parent 046f71c commit fa51600

File tree

8 files changed

+232
-15
lines changed

8 files changed

+232
-15
lines changed

src/features/ExportPaperWallet/ui/ExportPaperWallet.vue

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import highlight from "highlight.js/lib/core";
2121
import jsonStyle from "highlight.js/lib/languages/json";
2222
import copyToClipboard from "@/shared/lib/utils/copyToClipboard";
2323
24+
// todo simplify this component, move templates to entities
2425
const props = defineProps<{
2526
items: PaperWalletItem[];
2627
}>();
@@ -37,6 +38,7 @@ const message = useMessage();
3738
3839
const status = ref<"initial" | "coped" | "error">("initial");
3940
41+
// todo make common function
4042
async function handleSaveToClipboard() {
4143
try {
4244
await copyToClipboard(code.value);
@@ -68,18 +70,16 @@ async function handleSaveToClipboard() {
6870
aria-modal="true"
6971
style="max-width: 600px"
7072
>
71-
<NSpace vertical>
73+
<NSpace size="large" vertical>
7274
<div>
73-
<p>
74-
You can export design for
75-
<a
76-
href="https://github.com/getCryptoAddress/getCryptoAddress.github.io/tree/master/src/widgets/PaperWalletsPresetsWidget/model/presets"
77-
target="_blank"
78-
rel="noopener noreferrer"
79-
>
80-
Paper Wallets Presets
81-
</a>
82-
</p>
75+
You can export design for
76+
<a
77+
href="https://github.com/getCryptoAddress/getCryptoAddress.github.io/tree/master/src/widgets/PaperWalletsPresetsWidget/model/presets"
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
>
81+
Paper Wallets Presets
82+
</a>
8383
<p>P.s. Images need to be uploaded separately</p>
8484
<NButton @click="handleSaveToClipboard">
8585
<template #icon>
@@ -93,11 +93,21 @@ async function handleSaveToClipboard() {
9393
</NButton>
9494
</div>
9595
<NConfigProvider :hljs="highlight">
96-
<div style="overflow: auto">
96+
<div class="export-paper-wallet__code">
9797
<NCode :code="code" language="json" show-line-numbers />
9898
</div>
9999
</NConfigProvider>
100100
</NSpace>
101101
</NCard>
102102
</NModal>
103103
</template>
104+
105+
<style lang="scss" scoped>
106+
.export-paper-wallet__code {
107+
overflow: auto;
108+
max-height: 315px;
109+
border: 1px solid var(--borderColor);
110+
border-radius: 5px;
111+
padding: 10px 15px;
112+
}
113+
</style>

src/widgets/PaperWalletsPresetsWidget/model/presets/bitAddressPreset.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ async function getDefaultPresetItems(): Promise<PaperWalletItem[]> {
77
{
88
id: "background",
99
type: "IMAGE",
10-
src: await getCachedImageLink(await import("./bitaddress_org.png")),
10+
src: await getCachedImageLink(
11+
await import("./images/bitaddress_org.png")
12+
),
1113
position: {
1214
x: -3,
1315
y: 0,

src/widgets/PaperWalletsPresetsWidget/model/presets/defaultPreset.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ async function getDefaultPresetItems(): Promise<PaperWalletItem[]> {
143143
{
144144
id: "1689855959723",
145145
type: "IMAGE",
146-
src: await getCachedImageLink(await import("./logo.svg")),
146+
src: await getCachedImageLink(await import("./images/logo.svg")),
147147
position: {
148148
x: 180,
149149
y: 70,
Lines changed: 2 additions & 0 deletions
Loading
Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import type { PaperWalletItem } from "@/entities/PaperWallets/types/PaperWallet.types";
2+
import type Preset from "@/widgets/PaperWalletsPresetsWidget/types/Preset.type";
3+
import getCachedImageLink from "@/shared/lib/utils/getCachedImageLink";
4+
5+
async function getDefaultPresetItems(): Promise<PaperWalletItem[]> {
6+
return [
7+
{
8+
id: "QR_SecretKey",
9+
type: "QR_CODE",
10+
text: "{{ SecretKey }}",
11+
color: "#000000FF",
12+
background: "#00000000",
13+
position: {
14+
x: 10,
15+
y: 130,
16+
width: 120,
17+
rotate: 0,
18+
transformOrigin: "center center",
19+
},
20+
},
21+
{
22+
id: "QR_Address",
23+
type: "QR_CODE",
24+
text: "{{ Address }}",
25+
color: "#000000FF",
26+
background: "#00000000",
27+
position: {
28+
x: 10,
29+
y: 10,
30+
width: 120,
31+
rotate: 0,
32+
transformOrigin: "center center",
33+
},
34+
},
35+
{
36+
id: "Text_Address",
37+
font: "Trebuchet MS",
38+
type: "TEXT",
39+
text: "{{ Address }}",
40+
align: "left",
41+
alignLast: "auto",
42+
color: "#333333FF",
43+
size: 8,
44+
weight: 400,
45+
position: {
46+
x: 130,
47+
y: 40,
48+
width: 50,
49+
rotate: 0,
50+
transformOrigin: "top center",
51+
},
52+
},
53+
{
54+
id: "Text_SecretKey",
55+
font: "Trebuchet MS",
56+
type: "TEXT",
57+
text: "{{ SecretKey }}",
58+
align: "left",
59+
alignLast: "auto",
60+
color: "#333333FF",
61+
size: 8,
62+
weight: 400,
63+
position: {
64+
x: 130,
65+
y: 160,
66+
width: 50,
67+
rotate: 0,
68+
transformOrigin: "center center",
69+
},
70+
},
71+
{
72+
id: "Title_MetaMask",
73+
font: "Trebuchet MS",
74+
type: "TEXT",
75+
text: "MetaMask",
76+
align: "center",
77+
alignLast: "auto",
78+
color: "#333333FF",
79+
size: 19,
80+
weight: 400,
81+
position: {
82+
x: 243,
83+
y: 118,
84+
width: 200,
85+
rotate: 0,
86+
transformOrigin: "center center",
87+
},
88+
},
89+
{
90+
id: "QR_CODE_LINK",
91+
type: "QR_CODE",
92+
text: "https://metamask.io/",
93+
color: "#000000FF",
94+
background: "#00000000",
95+
position: {
96+
x: 343,
97+
y: 15,
98+
width: 100,
99+
rotate: 0,
100+
transformOrigin: "center center",
101+
},
102+
},
103+
{
104+
id: "Text_MetaMask_Info",
105+
font: "Trebuchet MS",
106+
type: "TEXT",
107+
text: "1. Download MetaMask from the link above\n2. Scan the Secret Key in the application and import the account\n3. Transfer money to your personal account",
108+
align: "left",
109+
alignLast: "auto",
110+
color: "#333333FF",
111+
size: 12,
112+
weight: 400,
113+
position: {
114+
x: 243,
115+
y: 143,
116+
width: 200,
117+
rotate: 0,
118+
transformOrigin: "center center",
119+
},
120+
},
121+
{
122+
id: "MetaMaskLogo",
123+
type: "IMAGE",
124+
src: await getCachedImageLink(await import("./images/metamask.svg")),
125+
position: {
126+
x: 241,
127+
y: 17,
128+
width: 100,
129+
rotate: 0,
130+
transformOrigin: "center center",
131+
},
132+
},
133+
{
134+
id: "Text_Link",
135+
font: "Courier New",
136+
type: "TEXT",
137+
text: "https://metamask.io/",
138+
align: "center",
139+
alignLast: "auto",
140+
color: "#333333FF",
141+
size: 6,
142+
weight: 400,
143+
position: {
144+
x: 343,
145+
y: 15,
146+
width: 100,
147+
rotate: 0,
148+
transformOrigin: "center center",
149+
},
150+
},
151+
{
152+
id: "Text_Address_title",
153+
font: "Trebuchet MS",
154+
type: "TEXT",
155+
text: "Address",
156+
align: "left",
157+
alignLast: "auto",
158+
color: "#333333FF",
159+
size: 16,
160+
weight: 400,
161+
position: {
162+
x: 130,
163+
y: 20,
164+
width: 100,
165+
rotate: 0,
166+
transformOrigin: "center center",
167+
},
168+
},
169+
{
170+
id: "Text_Secret_title",
171+
font: "Trebuchet MS",
172+
type: "TEXT",
173+
text: "Secret",
174+
align: "left",
175+
alignLast: "auto",
176+
color: "#333333FF",
177+
size: 16,
178+
weight: 400,
179+
position: {
180+
x: 130,
181+
y: 140,
182+
width: 100,
183+
rotate: 0,
184+
transformOrigin: "center center",
185+
},
186+
},
187+
];
188+
}
189+
190+
const metamaskPreset: Preset = {
191+
name: "Metamask",
192+
async preloadFn() {
193+
this.paperWalletItems = await getDefaultPresetItems();
194+
},
195+
paperWalletItems: [],
196+
status: "INIT",
197+
};
198+
export default metamaskPreset;

src/widgets/PaperWalletsPresetsWidget/model/usePaperWalletPresets.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ import { computed, ref } from "vue";
33
import type Preset from "@/widgets/PaperWalletsPresetsWidget/types/Preset.type";
44
import defaultPreset from "@/widgets/PaperWalletsPresetsWidget/model/presets/defaultPreset";
55
import bitAddressPreset from "@/widgets/PaperWalletsPresetsWidget/model/presets/bitAddressPreset";
6+
import metamaskPreset from "@/widgets/PaperWalletsPresetsWidget/model/presets/metamaskPreset";
67
import type { PaperWalletItem } from "@/entities/PaperWallets/types/PaperWallet.types";
78
import waitLoadedPage from "@/shared/lib/utils/waitLoadedPage";
89

910
export const usePaperWalletPresets = defineStore("presets", () => {
10-
const presets = ref<Preset[]>([defaultPreset, bitAddressPreset]);
11+
const presets = ref<Preset[]>([
12+
defaultPreset,
13+
bitAddressPreset,
14+
metamaskPreset,
15+
]);
1116
const secretKey = ref("");
1217
const address = ref("");
1318
const platform = ref("");

0 commit comments

Comments
 (0)