@svp-chain-sdk/ui 0.1.3 → 0.1.4

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/dist/styles.css CHANGED
@@ -1,2 +1,91 @@
1
1
  @import "tailwindcss";
2
2
  @theme { --color-background: oklch(0.99 0.01 220); --color-foreground: oklch(0.24 0.04 235); --color-primary: oklch(0.55 0.16 220); --color-primary-foreground: oklch(0.99 0.01 220); --color-secondary: oklch(0.93 0.04 205); --color-secondary-foreground: oklch(0.28 0.07 225); --color-accent: oklch(0.9 0.06 195); --color-accent-foreground: oklch(0.25 0.07 225); --color-destructive: oklch(0.58 0.2 25); --color-destructive-foreground: white; --color-input: oklch(0.86 0.03 220); --color-ring: oklch(0.6 0.14 195); }
3
+
4
+ /* 钱包控件与 SVP 应用保持同一视觉基线,消费方只负责摆放。 */
5
+ .svp-header-wallet {
6
+ display: flex;
7
+ min-width: 0;
8
+ align-items: center;
9
+ justify-content: flex-end;
10
+ font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
11
+ }
12
+
13
+ .svp-header-wallet,
14
+ .svp-header-wallet * {
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ .svp-wallet-group {
19
+ display: flex;
20
+ min-width: 0;
21
+ align-items: center;
22
+ gap: 0.5rem;
23
+ }
24
+
25
+ .svp-wallet-btn,
26
+ .svp-network-btn {
27
+ flex: none;
28
+ height: 40px;
29
+ cursor: pointer;
30
+ overflow: hidden;
31
+ border-radius: 10px;
32
+ font-family: inherit;
33
+ white-space: nowrap;
34
+ transition: opacity 150ms, background 150ms;
35
+ }
36
+
37
+ .svp-wallet-btn {
38
+ display: inline-flex;
39
+ width: 140px;
40
+ align-items: center;
41
+ justify-content: center;
42
+ border: 0;
43
+ padding: 0 1.2rem;
44
+ background: linear-gradient(90deg, #2563eb, #38bdf8);
45
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
46
+ color: #fff;
47
+ font-size: 0.875rem;
48
+ font-weight: 700;
49
+ }
50
+
51
+ .svp-wallet-btn:hover {
52
+ opacity: 0.9;
53
+ }
54
+
55
+ .svp-wallet-btn-error {
56
+ background: linear-gradient(90deg, #ef4444, #f87171);
57
+ box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
58
+ }
59
+
60
+ .svp-network-btn {
61
+ display: inline-flex;
62
+ width: 140px;
63
+ align-items: center;
64
+ justify-content: center;
65
+ gap: 0.4rem;
66
+ border: 1px solid rgba(0, 0, 0, 0.08);
67
+ padding: 0 0.9rem;
68
+ background: #fff;
69
+ box-shadow: 0 2px 8px rgba(15, 30, 61, 0.08);
70
+ color: #0f1e3d;
71
+ font-size: 0.85rem;
72
+ font-weight: 600;
73
+ }
74
+
75
+ .svp-network-btn:hover {
76
+ background: #f8fafc;
77
+ }
78
+
79
+ @media (max-width: 640px) {
80
+ .svp-network-btn,
81
+ .svp-wallet-btn {
82
+ width: 93px;
83
+ height: 32px;
84
+ padding: 0 0.5rem;
85
+ font-size: 0.75rem;
86
+ }
87
+
88
+ .svp-wallet-btn-connect {
89
+ width: 104px;
90
+ }
91
+ }
@@ -0,0 +1,338 @@
1
+ import * as React from 'react';
2
+ import { type Locale, type Wallet, type WalletList } from '@rainbow-me/rainbowkit';
3
+ import type { EIP1193Provider } from 'viem';
4
+ export declare const SVP_WALLET_DOWNLOAD_URL = "https://chromewebstore.google.com/detail/svp-wallet/ejfcghljbmabpemhifkcbankmdfjafbb";
5
+ export declare const svpTestnet: {
6
+ readonly id: 2517;
7
+ readonly name: "SVP TESTNET";
8
+ readonly nativeCurrency: {
9
+ readonly name: "SVP Coin";
10
+ readonly symbol: "SVP";
11
+ readonly decimals: 18;
12
+ };
13
+ readonly rpcUrls: {
14
+ readonly default: {
15
+ readonly http: readonly ["https://svp-dataseed2-testnet.svpchain.org"];
16
+ };
17
+ };
18
+ readonly testnet: true;
19
+ };
20
+ type SvpProvider = EIP1193Provider & {
21
+ isSVPWallet?: boolean;
22
+ providers?: SvpProvider[];
23
+ };
24
+ export declare function resolveSvpProvider(): SvpProvider | undefined;
25
+ export declare function resolveSvpProviderForConnection(redirect?: (url: string) => void): SvpProvider | undefined;
26
+ export declare const svpWallet: () => Wallet;
27
+ /** 钱包能力的唯一默认配置入口。业务项目不再重复声明链、钱包分组和主题。 */
28
+ export interface SvpWalletDefaults {
29
+ appName: string;
30
+ chains: typeof defaultChains;
31
+ walletGroups: WalletList;
32
+ }
33
+ declare const defaultChains: readonly [{
34
+ blockExplorers: {
35
+ readonly default: {
36
+ readonly name: "Etherscan";
37
+ readonly url: "https://sepolia.etherscan.io";
38
+ readonly apiUrl: "https://api-sepolia.etherscan.io/api";
39
+ };
40
+ };
41
+ blockTime?: number | undefined | undefined;
42
+ contracts: {
43
+ readonly multicall3: {
44
+ readonly address: "0xca11bde05977b3631167028862be2a173976ca11";
45
+ readonly blockCreated: 751532;
46
+ };
47
+ readonly ensUniversalResolver: {
48
+ readonly address: "0xeeeeeeee14d718c2b47d9923deab1335e144eeee";
49
+ readonly blockCreated: 8928790;
50
+ };
51
+ };
52
+ ensTlds?: readonly string[] | undefined;
53
+ id: 11155111;
54
+ name: "Sepolia";
55
+ nativeCurrency: {
56
+ readonly name: "Sepolia Ether";
57
+ readonly symbol: "ETH";
58
+ readonly decimals: 18;
59
+ };
60
+ experimental_preconfirmationTime?: number | undefined | undefined;
61
+ rpcUrls: {
62
+ readonly default: {
63
+ readonly http: readonly ["https://11155111.rpc.thirdweb.com"];
64
+ };
65
+ };
66
+ sourceId?: number | undefined | undefined;
67
+ supportsTransactionReplacementDetection?: boolean | undefined | undefined;
68
+ testnet: true;
69
+ custom?: Record<string, unknown> | undefined;
70
+ extendSchema?: Record<string, unknown> | undefined;
71
+ fees?: import("viem").ChainFees<undefined> | undefined;
72
+ formatters?: undefined;
73
+ prepareTransactionRequest?: ((args: import("viem").PrepareTransactionRequestParameters, options: {
74
+ client: import("viem").Client;
75
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
76
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | [fn: ((args: import("viem").PrepareTransactionRequestParameters, options: {
77
+ client: import("viem").Client;
78
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
79
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | undefined, options: {
80
+ runAt: readonly ("beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters")[];
81
+ }] | undefined;
82
+ serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
83
+ verifyHash?: ((client: import("viem").Client, parameters: import("viem").VerifyHashActionParameters) => Promise<import("viem").VerifyHashActionReturnType>) | undefined;
84
+ }, {
85
+ readonly id: 2517;
86
+ readonly name: "SVP TESTNET";
87
+ readonly nativeCurrency: {
88
+ readonly name: "SVP Coin";
89
+ readonly symbol: "SVP";
90
+ readonly decimals: 18;
91
+ };
92
+ readonly rpcUrls: {
93
+ readonly default: {
94
+ readonly http: readonly ["https://svp-dataseed2-testnet.svpchain.org"];
95
+ };
96
+ };
97
+ readonly testnet: true;
98
+ }, {
99
+ blockExplorers: {
100
+ readonly default: {
101
+ readonly name: "Arbiscan";
102
+ readonly url: "https://sepolia.arbiscan.io";
103
+ readonly apiUrl: "https://api-sepolia.arbiscan.io/api";
104
+ };
105
+ };
106
+ blockTime: 250;
107
+ contracts: {
108
+ readonly multicall3: {
109
+ readonly address: "0xca11bde05977b3631167028862be2a173976ca11";
110
+ readonly blockCreated: 81930;
111
+ };
112
+ };
113
+ ensTlds?: readonly string[] | undefined;
114
+ id: 421614;
115
+ name: "Arbitrum Sepolia";
116
+ nativeCurrency: {
117
+ readonly name: "Arbitrum Sepolia Ether";
118
+ readonly symbol: "ETH";
119
+ readonly decimals: 18;
120
+ };
121
+ experimental_preconfirmationTime?: number | undefined | undefined;
122
+ rpcUrls: {
123
+ readonly default: {
124
+ readonly http: readonly ["https://sepolia-rollup.arbitrum.io/rpc"];
125
+ };
126
+ };
127
+ sourceId?: number | undefined | undefined;
128
+ supportsTransactionReplacementDetection?: boolean | undefined | undefined;
129
+ testnet: true;
130
+ custom?: Record<string, unknown> | undefined;
131
+ extendSchema?: Record<string, unknown> | undefined;
132
+ fees?: import("viem").ChainFees<undefined> | undefined;
133
+ formatters?: undefined;
134
+ prepareTransactionRequest?: ((args: import("viem").PrepareTransactionRequestParameters, options: {
135
+ client: import("viem").Client;
136
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
137
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | [fn: ((args: import("viem").PrepareTransactionRequestParameters, options: {
138
+ client: import("viem").Client;
139
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
140
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | undefined, options: {
141
+ runAt: readonly ("beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters")[];
142
+ }] | undefined;
143
+ serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
144
+ verifyHash?: ((client: import("viem").Client, parameters: import("viem").VerifyHashActionParameters) => Promise<import("viem").VerifyHashActionReturnType>) | undefined;
145
+ }];
146
+ export declare const walletDefaults: SvpWalletDefaults;
147
+ export declare const walletTheme: {
148
+ readonly colors: {
149
+ readonly modalBackground: "#ffffff";
150
+ readonly modalBorder: "rgba(37, 99, 235, 0.20)";
151
+ readonly modalText: "#0f1e3d";
152
+ readonly modalTextSecondary: "#4f5a75";
153
+ readonly modalTextDim: "rgba(15, 30, 61, 0.3)";
154
+ readonly modalBackdrop: "rgba(15, 30, 61, 0.45)";
155
+ readonly generalBorder: "rgba(37, 99, 235, 0.20)";
156
+ readonly generalBorderDim: "rgba(37, 99, 235, 0.10)";
157
+ readonly actionButtonBorder: "rgba(37, 99, 235, 0.20)";
158
+ readonly actionButtonBorderMobile: "rgba(37, 99, 235, 0.20)";
159
+ readonly actionButtonSecondaryBackground: "rgba(37, 99, 235, 0.06)";
160
+ readonly closeButton: "#4f5a75";
161
+ readonly closeButtonBackground: "rgba(37, 99, 235, 0.08)";
162
+ readonly profileAction: "#ffffff";
163
+ readonly profileActionHover: "rgba(37, 99, 235, 0.08)";
164
+ readonly profileForeground: "rgba(37, 99, 235, 0.06)";
165
+ readonly menuItemBackground: "rgba(37, 99, 235, 0.08)";
166
+ readonly selectedOptionBorder: "rgba(37, 99, 235, 0.32)";
167
+ readonly connectButtonBackground: "#ffffff";
168
+ readonly connectButtonInnerBackground: "linear-gradient(90deg, rgba(37,99,235,0.08) 0%, rgba(56,189,248,0.08) 100%)";
169
+ readonly connectButtonText: "#0f1e3d";
170
+ readonly connectionIndicator: "#34d399";
171
+ readonly standby: "#fbbf24";
172
+ readonly error: "#f87171";
173
+ readonly connectButtonBackgroundError: "#f87171";
174
+ readonly connectButtonTextError: "#ffffff";
175
+ readonly accentColor: string;
176
+ readonly accentColorForeground: string;
177
+ readonly downloadBottomCardBackground: string;
178
+ readonly downloadTopCardBackground: string;
179
+ };
180
+ readonly shadows: {
181
+ readonly dialog: "0 20px 60px rgba(37, 99, 235, 0.20), 0 0 0 1px rgba(37, 99, 235, 0.08)";
182
+ readonly connectButton: "0 6px 28px rgba(37, 99, 235, 0.35)";
183
+ readonly profileDetailsAction: "0 2px 8px rgba(37, 99, 235, 0.10)";
184
+ readonly selectedOption: "0 2px 8px rgba(37, 99, 235, 0.18)";
185
+ readonly selectedWallet: "0 2px 8px rgba(37, 99, 235, 0.12)";
186
+ readonly walletLogo: "0 2px 16px rgba(37, 99, 235, 0.16)";
187
+ };
188
+ readonly fonts: {
189
+ body: string;
190
+ };
191
+ readonly radii: {
192
+ actionButton: string;
193
+ connectButton: string;
194
+ menuButton: string;
195
+ modal: string;
196
+ modalMobile: string;
197
+ };
198
+ readonly blurs: {
199
+ modalOverlay: string;
200
+ };
201
+ };
202
+ export interface CreateSvpWalletConfigOptions {
203
+ projectId: string;
204
+ appName?: string;
205
+ }
206
+ export declare function createSvpWalletConfig({ projectId, appName, }: CreateSvpWalletConfigOptions): import("wagmi").Config<readonly [{
207
+ blockExplorers: {
208
+ readonly default: {
209
+ readonly name: "Etherscan";
210
+ readonly url: "https://sepolia.etherscan.io";
211
+ readonly apiUrl: "https://api-sepolia.etherscan.io/api";
212
+ };
213
+ };
214
+ blockTime?: number | undefined | undefined;
215
+ contracts: {
216
+ readonly multicall3: {
217
+ readonly address: "0xca11bde05977b3631167028862be2a173976ca11";
218
+ readonly blockCreated: 751532;
219
+ };
220
+ readonly ensUniversalResolver: {
221
+ readonly address: "0xeeeeeeee14d718c2b47d9923deab1335e144eeee";
222
+ readonly blockCreated: 8928790;
223
+ };
224
+ };
225
+ ensTlds?: readonly string[] | undefined;
226
+ id: 11155111;
227
+ name: "Sepolia";
228
+ nativeCurrency: {
229
+ readonly name: "Sepolia Ether";
230
+ readonly symbol: "ETH";
231
+ readonly decimals: 18;
232
+ };
233
+ experimental_preconfirmationTime?: number | undefined | undefined;
234
+ rpcUrls: {
235
+ readonly default: {
236
+ readonly http: readonly ["https://11155111.rpc.thirdweb.com"];
237
+ };
238
+ };
239
+ sourceId?: number | undefined | undefined;
240
+ supportsTransactionReplacementDetection?: boolean | undefined | undefined;
241
+ testnet: true;
242
+ custom?: Record<string, unknown> | undefined;
243
+ extendSchema?: Record<string, unknown> | undefined;
244
+ fees?: import("viem").ChainFees<undefined> | undefined;
245
+ formatters?: undefined;
246
+ prepareTransactionRequest?: ((args: import("viem").PrepareTransactionRequestParameters, options: {
247
+ client: import("viem").Client;
248
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
249
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | [fn: ((args: import("viem").PrepareTransactionRequestParameters, options: {
250
+ client: import("viem").Client;
251
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
252
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | undefined, options: {
253
+ runAt: readonly ("beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters")[];
254
+ }] | undefined;
255
+ serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
256
+ verifyHash?: ((client: import("viem").Client, parameters: import("viem").VerifyHashActionParameters) => Promise<import("viem").VerifyHashActionReturnType>) | undefined;
257
+ }, {
258
+ readonly id: 2517;
259
+ readonly name: "SVP TESTNET";
260
+ readonly nativeCurrency: {
261
+ readonly name: "SVP Coin";
262
+ readonly symbol: "SVP";
263
+ readonly decimals: 18;
264
+ };
265
+ readonly rpcUrls: {
266
+ readonly default: {
267
+ readonly http: readonly ["https://svp-dataseed2-testnet.svpchain.org"];
268
+ };
269
+ };
270
+ readonly testnet: true;
271
+ }, {
272
+ blockExplorers: {
273
+ readonly default: {
274
+ readonly name: "Arbiscan";
275
+ readonly url: "https://sepolia.arbiscan.io";
276
+ readonly apiUrl: "https://api-sepolia.arbiscan.io/api";
277
+ };
278
+ };
279
+ blockTime: 250;
280
+ contracts: {
281
+ readonly multicall3: {
282
+ readonly address: "0xca11bde05977b3631167028862be2a173976ca11";
283
+ readonly blockCreated: 81930;
284
+ };
285
+ };
286
+ ensTlds?: readonly string[] | undefined;
287
+ id: 421614;
288
+ name: "Arbitrum Sepolia";
289
+ nativeCurrency: {
290
+ readonly name: "Arbitrum Sepolia Ether";
291
+ readonly symbol: "ETH";
292
+ readonly decimals: 18;
293
+ };
294
+ experimental_preconfirmationTime?: number | undefined | undefined;
295
+ rpcUrls: {
296
+ readonly default: {
297
+ readonly http: readonly ["https://sepolia-rollup.arbitrum.io/rpc"];
298
+ };
299
+ };
300
+ sourceId?: number | undefined | undefined;
301
+ supportsTransactionReplacementDetection?: boolean | undefined | undefined;
302
+ testnet: true;
303
+ custom?: Record<string, unknown> | undefined;
304
+ extendSchema?: Record<string, unknown> | undefined;
305
+ fees?: import("viem").ChainFees<undefined> | undefined;
306
+ formatters?: undefined;
307
+ prepareTransactionRequest?: ((args: import("viem").PrepareTransactionRequestParameters, options: {
308
+ client: import("viem").Client;
309
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
310
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | [fn: ((args: import("viem").PrepareTransactionRequestParameters, options: {
311
+ client: import("viem").Client;
312
+ phase: "beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters";
313
+ }) => Promise<import("viem").PrepareTransactionRequestParameters>) | undefined, options: {
314
+ runAt: readonly ("beforeFillTransaction" | "beforeFillParameters" | "afterFillParameters")[];
315
+ }] | undefined;
316
+ serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
317
+ verifyHash?: ((client: import("viem").Client, parameters: import("viem").VerifyHashActionParameters) => Promise<import("viem").VerifyHashActionReturnType>) | undefined;
318
+ }], {
319
+ 11155111: import("viem").HttpTransport<undefined, false>;
320
+ 2517: import("viem").HttpTransport<undefined, false>;
321
+ 421614: import("viem").HttpTransport<undefined, false>;
322
+ }, import("wagmi").CreateConnectorFn[]>;
323
+ export interface SvpWalletProviderProps extends CreateSvpWalletConfigOptions {
324
+ children: React.ReactNode;
325
+ locale?: Locale;
326
+ }
327
+ export declare function SvpWalletProvider({ children, projectId, appName, locale, }: SvpWalletProviderProps): React.JSX.Element;
328
+ export interface ConnectWalletLabels {
329
+ connect?: string;
330
+ wrongNetwork?: string;
331
+ }
332
+ export interface ConnectWalletButtonProps {
333
+ className?: string;
334
+ labels?: ConnectWalletLabels;
335
+ showChain?: boolean;
336
+ }
337
+ export declare function ConnectWalletButton({ className, labels, showChain, }: ConnectWalletButtonProps): React.JSX.Element;
338
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@svp-chain-sdk/ui",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "Accessible UI primitives for SVP Chain SDK applications.",
5
5
  "type": "module",
6
6
  "files": [
@@ -21,8 +21,12 @@
21
21
  }
22
22
  },
23
23
  "peerDependencies": {
24
+ "@rainbow-me/rainbowkit": "2.2.11",
25
+ "@tanstack/react-query": "^5.62.11",
24
26
  "react": ">=18",
25
- "react-dom": ">=18"
27
+ "react-dom": ">=18",
28
+ "viem": "^2.21.54",
29
+ "wagmi": "^2.13.11"
26
30
  },
27
31
  "dependencies": {
28
32
  "@radix-ui/react-slot": "^1.1.2",
@@ -31,8 +35,12 @@
31
35
  "tailwind-merge": "^2.6.0"
32
36
  },
33
37
  "devDependencies": {
34
- "@testing-library/react": "^16.1.0",
38
+ "@rainbow-me/rainbowkit": "2.2.11",
39
+ "@tailwindcss/vite": "^4.1.11",
40
+ "@tanstack/react-query": "^5.62.11",
35
41
  "@testing-library/jest-dom": "^6.6.3",
42
+ "@testing-library/react": "^16.1.0",
43
+ "@types/node": "^22.10.2",
36
44
  "@types/react": "^19.0.0",
37
45
  "@types/react-dom": "^19.0.0",
38
46
  "@vitejs/plugin-react": "^4.3.4",
@@ -40,11 +48,11 @@
40
48
  "react": "^19.0.0",
41
49
  "react-dom": "^19.0.0",
42
50
  "tailwindcss": "^4.1.11",
43
- "@tailwindcss/vite": "^4.1.11",
44
- "@types/node": "^22.10.2",
45
51
  "typescript": "^5.7.2",
52
+ "viem": "^2.21.54",
46
53
  "vite": "^6.0.5",
47
- "vitest": "^2.1.8"
54
+ "vitest": "^2.1.8",
55
+ "wagmi": "^2.13.11"
48
56
  },
49
57
  "scripts": {
50
58
  "build": "rm -rf dist && vite build && vite build --config vite.tailwind.config.ts && cp src/styles.css dist/styles.css && tsc",