miniwallet 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/dist/miniwallet.css +1 -1
- package/dist/miniwallet.d.ts +1 -0
- package/dist/miniwallet.js +132 -93
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -10,6 +10,20 @@ React 钱包连接按钮组件：一键连接浏览器扩展钱包，展示账
|
|
|
10
10
|
- 多钱包支持（EIP-6963 发现）：MetaMask、OKX、Phantom、Coinbase
|
|
11
11
|
- 刷新后自动恢复上次连接（`localStorage` + `eth_accounts`）
|
|
12
12
|
|
|
13
|
+
### 安装
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add miniwallet
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
或使用其他包管理工具：
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install miniwallet
|
|
23
|
+
# 或
|
|
24
|
+
yarn add miniwallet
|
|
25
|
+
```
|
|
26
|
+
|
|
13
27
|
## 快速开始
|
|
14
28
|
|
|
15
29
|
### 本地 Demo
|
|
@@ -123,7 +137,7 @@ type WalletProvider = {
|
|
|
123
137
|
| 钱包 | EIP-6963 rdns |
|
|
124
138
|
|------|----------------|
|
|
125
139
|
| MetaMask | `io.metamask` |
|
|
126
|
-
| OKX | `com.okx.wallet
|
|
140
|
+
| OKX | `com.okex.wallet`（旧品牌okex问题，兼容 `com.okx.wallet`） |
|
|
127
141
|
| Phantom | `app.phantom` |
|
|
128
142
|
| Coinbase | `com.coinbase.wallet` |
|
|
129
143
|
|
package/dist/miniwallet.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--color-blue-500:oklch(62.3% .214 259.815);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-bold:700;--radius-md:.375rem;--radius-xl:.75rem}}@layer base,components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.top-1\/2{top:50%}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.mr-1{margin-right:var(--spacing)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.flex{display:flex}.inline-flex{display:inline-flex}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-\[22px\]{height:22px}.h-auto{height:auto}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-\[
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--color-blue-500:oklch(62.3% .214 259.815);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-bold:700;--radius-sm:.25rem;--radius-md:.375rem;--radius-xl:.75rem;--radius-3xl:1.5rem}}@layer base,components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.top-1\/2{top:50%}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.my-1\.5{margin-block:calc(var(--spacing) * 1.5)}.mr-1{margin-right:var(--spacing)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mb-0{margin-bottom:0}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.flex{display:flex}.inline-flex{display:inline-flex}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-\[22px\]{height:22px}.h-auto{height:auto}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-\[380px\]{width:380px}.w-full{width:100%}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-\[spin_2s_linear_infinite\]{animation:2s linear infinite spin}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-gray-300{border-color:var(--color-gray-300)}.bg-\[rgba\(0\,0\,0\,0\.5\)\]{background-color:#00000080}.bg-\[rgba\(255\,255\,255\,0\.9\)\]{background-color:#ffffffe6}.bg-blue-500{background-color:var(--color-blue-500)}.bg-white{background-color:var(--color-white)}.p-1{padding:var(--spacing)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.pt-36{padding-top:calc(var(--spacing) * 36)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-black{color:var(--color-black)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-white{color:var(--color-white)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.inset-ring-1{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-blue-500\/50{--tw-shadow-color:#3080ff80}@supports (color:color-mix(in lab, red, red)){.shadow-blue-500\/50{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 50%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-gray-200{--tw-shadow-color:oklch(92.8% .006 264.531)}@supports (color:color-mix(in lab, red, red)){.shadow-gray-200{--tw-shadow-color:color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent)}}.inset-ring-gray-100{--tw-inset-ring-color:var(--color-gray-100)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
|
|
3
3
|
/*$vite$:1*/
|
package/dist/miniwallet.d.ts
CHANGED
package/dist/miniwallet.js
CHANGED
|
@@ -43,6 +43,7 @@ var d = [
|
|
|
43
43
|
}
|
|
44
44
|
], f = {
|
|
45
45
|
"io.metamask": "metamask",
|
|
46
|
+
"com.okex.wallet": "okx",
|
|
46
47
|
"com.okx.wallet": "okx",
|
|
47
48
|
"app.phantom": "phantom",
|
|
48
49
|
"com.coinbase.wallet": "coinbase"
|
|
@@ -69,113 +70,126 @@ var d = [
|
|
|
69
70
|
//#endregion
|
|
70
71
|
//#region src/MiniWalletProvider.tsx
|
|
71
72
|
function m({ children: e, chains: n = [] }) {
|
|
72
|
-
let [s, l] = a(""), [m, h] = a(""), [g, _] = a(0), [v, y] = a(""), [b, x] = a({}),
|
|
73
|
-
let t =
|
|
74
|
-
if (!t) {
|
|
75
|
-
alert("请安装钱包");
|
|
76
|
-
return;
|
|
77
|
-
}
|
|
73
|
+
let [s, l] = a(""), [m, h] = a(""), [g, _] = a(0), [v, y] = a(""), [b, x] = a(null), [S, C] = a({}), w = i(() => n.length > 0 ? n : p, [n]), T = i(() => S[m] ?? null, [S, m]), E = i(() => d.find((e) => e.id === m), [m]), D = i(() => !!s, [s]), O = i(() => w.find((e) => e.id === g) || null, [w, g]), k = i(() => !O || !v || !O?.decimals ? "0" : Number(u(v, O.decimals)).toFixed(3), [v, O]), A = t(async (e) => {
|
|
74
|
+
let { id: t } = e;
|
|
78
75
|
try {
|
|
79
|
-
console.log("
|
|
80
|
-
let n =
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
76
|
+
console.log("eip6963Providers: ", S);
|
|
77
|
+
let n = S[t];
|
|
78
|
+
if (!n) {
|
|
79
|
+
alert("请安装钱包");
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
h(t), x(e), console.log("provider: ", n);
|
|
83
|
+
let r = await n.request({ method: "eth_requestAccounts" });
|
|
84
|
+
console.log("accounts: ", r), console.log("provider.chainId: ", n.chainId);
|
|
85
|
+
let i = parseInt(n.chainId, 16);
|
|
86
|
+
l(r[0]), _(i), localStorage.setItem("miniwallet:lastWalletId", t), x(null);
|
|
84
87
|
} catch (e) {
|
|
85
|
-
console.
|
|
88
|
+
console.log("error: ", e);
|
|
89
|
+
let t = e, n = t?.code ?? "", r = t?.message ?? "";
|
|
90
|
+
if (n === -32002) {
|
|
91
|
+
alert("连接已发起，请在扩展中确认连接");
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
alert(`Connect failed${n && `\n${n}`}${r && `\n${r}`}`);
|
|
95
|
+
} finally {
|
|
96
|
+
x(null);
|
|
86
97
|
}
|
|
87
|
-
}, [
|
|
98
|
+
}, [S]), j = t(async () => {
|
|
88
99
|
try {
|
|
89
|
-
if (!
|
|
100
|
+
if (!T) {
|
|
90
101
|
alert("请安装钱包");
|
|
91
102
|
return;
|
|
92
103
|
}
|
|
93
|
-
|
|
104
|
+
await T.request({
|
|
94
105
|
method: "wallet_revokePermissions",
|
|
95
106
|
params: [{ eth_accounts: {} }]
|
|
96
107
|
});
|
|
97
|
-
console.log("res: ", e);
|
|
98
108
|
} catch (e) {
|
|
99
|
-
console.error(e);
|
|
109
|
+
console.error("disconnect error: ", e);
|
|
100
110
|
} finally {
|
|
101
111
|
l(""), h(""), _(0), localStorage.removeItem("miniwallet:lastWalletId");
|
|
102
112
|
}
|
|
103
|
-
}, [
|
|
104
|
-
if (!
|
|
113
|
+
}, [T]), M = t(async (e) => {
|
|
114
|
+
if (!T) {
|
|
105
115
|
alert("钱包不存在");
|
|
106
116
|
return;
|
|
107
117
|
}
|
|
108
118
|
try {
|
|
109
|
-
await
|
|
119
|
+
await T.request({
|
|
110
120
|
method: "wallet_switchEthereumChain",
|
|
111
121
|
params: [{ chainId: `0x${e.id.toString(16)}` }]
|
|
112
122
|
}), _(e.id);
|
|
113
123
|
} catch (e) {
|
|
114
|
-
console.
|
|
124
|
+
console.log("switchError: ", e);
|
|
125
|
+
let t = e, n = t?.code ?? "", r = t?.message ?? "";
|
|
126
|
+
alert(`Switch failed${n && `\n${n}`}${r && `\n${r}`}`);
|
|
115
127
|
}
|
|
116
|
-
}, [
|
|
128
|
+
}, [T]), N = t(async () => {
|
|
117
129
|
try {
|
|
118
|
-
if (!s || !
|
|
119
|
-
let e = await
|
|
130
|
+
if (!s || !T) return;
|
|
131
|
+
let e = await T.request({
|
|
120
132
|
method: "eth_getBalance",
|
|
121
133
|
params: [s, "latest"]
|
|
122
134
|
});
|
|
123
|
-
|
|
135
|
+
y(BigInt(e).toString());
|
|
124
136
|
} catch (e) {
|
|
125
|
-
console.error(e);
|
|
137
|
+
console.error("getBalance error: ", e);
|
|
126
138
|
}
|
|
127
|
-
}, [s,
|
|
139
|
+
}, [s, T]), P = i(() => ({
|
|
128
140
|
account: s,
|
|
129
|
-
balance:
|
|
130
|
-
isConnected:
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
141
|
+
balance: k,
|
|
142
|
+
isConnected: D,
|
|
143
|
+
connectingWallet: b,
|
|
144
|
+
selectedChain: O,
|
|
145
|
+
wallet: E,
|
|
146
|
+
chains: w,
|
|
147
|
+
connect: A,
|
|
148
|
+
switchChain: M,
|
|
149
|
+
disconnect: j
|
|
137
150
|
}), [
|
|
138
151
|
s,
|
|
152
|
+
k,
|
|
139
153
|
D,
|
|
140
|
-
|
|
154
|
+
b,
|
|
155
|
+
O,
|
|
141
156
|
E,
|
|
142
157
|
w,
|
|
143
|
-
S,
|
|
144
|
-
O,
|
|
145
158
|
A,
|
|
146
|
-
|
|
159
|
+
M,
|
|
160
|
+
j
|
|
147
161
|
]);
|
|
148
162
|
return r(() => {
|
|
149
163
|
let e = ((e) => {
|
|
150
164
|
let { info: t, provider: n } = e.detail ?? {}, r = f[t?.rdns];
|
|
151
|
-
!r || !n?.request ||
|
|
165
|
+
!r || !n?.request || C((e) => e[r] === n ? e : {
|
|
152
166
|
...e,
|
|
153
167
|
[r]: n
|
|
154
168
|
});
|
|
155
169
|
});
|
|
156
170
|
return window.addEventListener("eip6963:announceProvider", e), window.dispatchEvent(new Event("eip6963:requestProvider")), () => {
|
|
157
|
-
window.removeEventListener("eip6963:announceProvider", e),
|
|
171
|
+
window.removeEventListener("eip6963:announceProvider", e), C({});
|
|
158
172
|
};
|
|
159
173
|
}, []), r(() => {
|
|
160
|
-
g &&
|
|
161
|
-
}, [
|
|
162
|
-
if (!T
|
|
174
|
+
g && N();
|
|
175
|
+
}, [N, g]), r(() => {
|
|
176
|
+
if (!T?.on) return;
|
|
163
177
|
let e = (e) => {
|
|
164
178
|
console.log("ChainChanged chainId: ", e), _(parseInt(e, 16));
|
|
165
179
|
}, t = (e) => {
|
|
166
180
|
console.log("AccountsChanged accounts: ", e), l(e[0]);
|
|
167
181
|
};
|
|
168
|
-
return console.log("
|
|
169
|
-
console.log("
|
|
182
|
+
return console.log("Listen chainChanged and accountsChanged"), T.on("chainChanged", e), T.on("accountsChanged", t), () => {
|
|
183
|
+
console.log("RemoveListener chainChanged and accountsChanged"), T.removeListener("chainChanged", e), T.removeListener("accountsChanged", t);
|
|
170
184
|
};
|
|
171
|
-
}, [T
|
|
185
|
+
}, [T]), r(() => {
|
|
172
186
|
if (!s) return;
|
|
173
|
-
let e = setInterval(
|
|
187
|
+
let e = setInterval(N, 1e4);
|
|
174
188
|
return () => clearInterval(e);
|
|
175
|
-
}, [s,
|
|
189
|
+
}, [s, N]), r(() => {
|
|
176
190
|
let e = localStorage.getItem("miniwallet:lastWalletId");
|
|
177
191
|
if (!e) return;
|
|
178
|
-
let t =
|
|
192
|
+
let t = S[e];
|
|
179
193
|
if (!t) return;
|
|
180
194
|
let n = !1;
|
|
181
195
|
return (async () => {
|
|
@@ -190,8 +204,8 @@ function m({ children: e, chains: n = [] }) {
|
|
|
190
204
|
})(), () => {
|
|
191
205
|
n = !0;
|
|
192
206
|
};
|
|
193
|
-
}, [
|
|
194
|
-
value:
|
|
207
|
+
}, [S]), /* @__PURE__ */ o(c.Provider, {
|
|
208
|
+
value: P,
|
|
195
209
|
children: e
|
|
196
210
|
});
|
|
197
211
|
}
|
|
@@ -208,27 +222,29 @@ var g = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOC
|
|
|
208
222
|
//#endregion
|
|
209
223
|
//#region src/MiniWalletButton.tsx
|
|
210
224
|
function _({ label: e = "Connect Wallet" }) {
|
|
211
|
-
let { account: n, balance:
|
|
212
|
-
|
|
213
|
-
}, []),
|
|
214
|
-
|
|
225
|
+
let { account: n, balance: i, isConnected: c, connectingWallet: l, selectedChain: u, wallet: f, switchChain: p, chains: m, connect: _, disconnect: v } = h(), [y, b] = a(!1), [x, S] = a(!1), C = t(() => {
|
|
226
|
+
b(!0);
|
|
227
|
+
}, []), w = t(() => {
|
|
228
|
+
b(!1);
|
|
215
229
|
}, []);
|
|
216
|
-
return
|
|
230
|
+
return r(() => {
|
|
231
|
+
l || b(!1);
|
|
232
|
+
}, [l]), c ? /* @__PURE__ */ s("section", {
|
|
217
233
|
className: "inline-flex items-center justify-center text-center",
|
|
218
234
|
children: [/* @__PURE__ */ o("select", {
|
|
219
|
-
value:
|
|
220
|
-
onChange: (e) =>
|
|
221
|
-
className: "mr-4 text-gray-600",
|
|
222
|
-
children:
|
|
235
|
+
value: u?.id,
|
|
236
|
+
onChange: (e) => p(m.find((t) => t.id === Number(e.target.value))),
|
|
237
|
+
className: "bg-transparent1 mr-4 cursor-pointer rounded-sm border-none p-1 text-gray-600 outline-none hover:bg-gray-100",
|
|
238
|
+
children: m.map((e) => /* @__PURE__ */ o("option", {
|
|
223
239
|
value: e.id,
|
|
224
240
|
children: e.name
|
|
225
241
|
}, e.id))
|
|
226
242
|
}), /* @__PURE__ */ s("div", {
|
|
227
|
-
className: "flex items-center justify-center space-x-2 rounded-md bg-white px-2 py-2.5 shadow-lg shadow-gray-200",
|
|
243
|
+
className: "flex items-center justify-center space-x-2 rounded-md bg-white px-2 py-2.5 shadow-lg inset-ring-1 shadow-gray-200 inset-ring-gray-100",
|
|
228
244
|
children: [
|
|
229
|
-
|
|
230
|
-
src:
|
|
231
|
-
alt:
|
|
245
|
+
f && /* @__PURE__ */ o("img", {
|
|
246
|
+
src: f.icon,
|
|
247
|
+
alt: f.name,
|
|
232
248
|
className: "h-6 w-6"
|
|
233
249
|
}),
|
|
234
250
|
/* @__PURE__ */ s("div", {
|
|
@@ -243,15 +259,15 @@ function _({ label: e = "Connect Wallet" }) {
|
|
|
243
259
|
className: "text-sm text-gray-400",
|
|
244
260
|
children: [
|
|
245
261
|
"(",
|
|
246
|
-
|
|
262
|
+
i,
|
|
247
263
|
" ",
|
|
248
|
-
|
|
264
|
+
u?.symbol ?? "",
|
|
249
265
|
")"
|
|
250
266
|
]
|
|
251
267
|
}),
|
|
252
268
|
/* @__PURE__ */ o("button", {
|
|
253
269
|
className: "h-6 w-6 cursor-pointer rounded-full",
|
|
254
|
-
onClick:
|
|
270
|
+
onClick: v,
|
|
255
271
|
children: /* @__PURE__ */ o("img", {
|
|
256
272
|
src: g,
|
|
257
273
|
alt: "disconnect",
|
|
@@ -262,13 +278,13 @@ function _({ label: e = "Connect Wallet" }) {
|
|
|
262
278
|
})]
|
|
263
279
|
}) : /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("button", {
|
|
264
280
|
type: "button",
|
|
265
|
-
onClick:
|
|
281
|
+
onClick: C,
|
|
266
282
|
className: "cursor-pointer rounded-xl bg-blue-500 px-4 py-2 text-white shadow-lg shadow-blue-500/50",
|
|
267
283
|
children: e
|
|
268
|
-
}),
|
|
284
|
+
}), y && /* @__PURE__ */ o("div", {
|
|
269
285
|
className: "z-index-10 fixed top-0 right-0 bottom-0 left-0 bg-[rgba(0,0,0,0.5)]",
|
|
270
286
|
children: /* @__PURE__ */ s("div", {
|
|
271
|
-
className: "absolute top-1/2 left-1/2 flex h-auto w-[
|
|
287
|
+
className: "absolute top-1/2 left-1/2 flex h-auto w-[380px] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 rounded-3xl bg-white p-6",
|
|
272
288
|
children: [/* @__PURE__ */ s("div", {
|
|
273
289
|
className: "mb-2 flex items-center justify-between",
|
|
274
290
|
children: [/* @__PURE__ */ o("span", {
|
|
@@ -278,7 +294,9 @@ function _({ label: e = "Connect Wallet" }) {
|
|
|
278
294
|
type: "button",
|
|
279
295
|
"aria-label": "Close",
|
|
280
296
|
className: "cursor-pointer rounded-full p-1 hover:bg-gray-100",
|
|
281
|
-
onClick:
|
|
297
|
+
onClick: () => {
|
|
298
|
+
S(!1), w();
|
|
299
|
+
},
|
|
282
300
|
children: /* @__PURE__ */ s("svg", {
|
|
283
301
|
xmlns: "http://www.w3.org/2000/svg",
|
|
284
302
|
viewBox: "0 0 24 24",
|
|
@@ -289,28 +307,49 @@ function _({ label: e = "Connect Wallet" }) {
|
|
|
289
307
|
children: [/* @__PURE__ */ o("path", { d: "M18 6 6 18" }), /* @__PURE__ */ o("path", { d: "m6 6 12 12" })]
|
|
290
308
|
})
|
|
291
309
|
})]
|
|
292
|
-
}),
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
"
|
|
310
|
-
|
|
310
|
+
}), /* @__PURE__ */ s("div", {
|
|
311
|
+
className: "relative w-full space-y-4",
|
|
312
|
+
children: [x && l && /* @__PURE__ */ s("div", {
|
|
313
|
+
className: "absolute inset-0 mb-0 flex flex-col items-center justify-center rounded-xl bg-[rgba(255,255,255,0.9)] text-black",
|
|
314
|
+
children: [
|
|
315
|
+
/* @__PURE__ */ s("div", { children: [
|
|
316
|
+
"正在连接",
|
|
317
|
+
l.name,
|
|
318
|
+
"..."
|
|
319
|
+
] }),
|
|
320
|
+
/* @__PURE__ */ o("div", {
|
|
321
|
+
className: "my-1.5 text-xs",
|
|
322
|
+
children: "请在扩展中确认连接"
|
|
323
|
+
}),
|
|
324
|
+
/* @__PURE__ */ o("img", {
|
|
325
|
+
src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1783646544006'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='78324'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='32'%20height='32'%3e%3cpath%20d='M512%20907c-24.852%200-45-20.148-45-45s20.148-45%2045-45c168.446%200%20305-136.554%20305-305S680.446%20207%20512%20207%20207%20343.554%20207%20512c0%2024.852-20.148%2045-45%2045S117%20536.852%20117%20512c0-218.152%20176.848-395%20395-395S907%20293.848%20907%20512%20730.152%20907%20512%20907z'%20fill='%23444444'%20p-id='78325'%3e%3c/path%3e%3c/svg%3e",
|
|
326
|
+
alt: "spin",
|
|
327
|
+
className: "h-8 w-8 animate-[spin_2s_linear_infinite]"
|
|
328
|
+
})
|
|
329
|
+
]
|
|
330
|
+
}), d.map((e) => /* @__PURE__ */ s("button", {
|
|
331
|
+
type: "button",
|
|
332
|
+
onClick: () => {
|
|
333
|
+
S(!0), _(e);
|
|
334
|
+
},
|
|
335
|
+
className: "flex w-full cursor-pointer items-center gap-2 rounded-xl border border-gray-300 px-4 py-2 hover:bg-gray-100",
|
|
336
|
+
children: [/* @__PURE__ */ o("img", {
|
|
337
|
+
src: e.icon,
|
|
338
|
+
alt: e.name,
|
|
339
|
+
className: "h-8 w-8"
|
|
340
|
+
}), /* @__PURE__ */ s("div", {
|
|
341
|
+
className: "flex flex-col justify-between text-left",
|
|
342
|
+
children: [/* @__PURE__ */ o("p", { children: e.name }), /* @__PURE__ */ s("span", {
|
|
343
|
+
className: "text-xs text-gray-500",
|
|
344
|
+
children: [
|
|
345
|
+
"Connect your ",
|
|
346
|
+
e.name,
|
|
347
|
+
" wallet"
|
|
348
|
+
]
|
|
349
|
+
})]
|
|
311
350
|
})]
|
|
312
|
-
})]
|
|
313
|
-
}
|
|
351
|
+
}, e.id))]
|
|
352
|
+
})]
|
|
314
353
|
})
|
|
315
354
|
})] });
|
|
316
355
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "miniwallet",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "React wallet connect button with multi-wallet support via EIP-6963",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/miniwallet.js",
|
|
@@ -22,8 +22,10 @@
|
|
|
22
22
|
"scripts": {
|
|
23
23
|
"dev": "vite",
|
|
24
24
|
"build": "tsc -b && vite build",
|
|
25
|
+
"build:demo": "tsc -b && vite build --mode demo",
|
|
25
26
|
"lint": "eslint .",
|
|
26
27
|
"preview": "vite preview",
|
|
28
|
+
"preview:demo": "vite preview --outDir dist-demo",
|
|
27
29
|
"prepublishOnly": "pnpm build"
|
|
28
30
|
},
|
|
29
31
|
"peerDependencies": {
|