Skip to content

Commit 2f224cc

Browse files
fan-zhang-svfan-zhang-sv
authored
Interactive Example for for Sub Account (#2084)
* update * bug * yarn * remove console.log * dep * no copy
1 parent a575edc commit 2f224cc

File tree

5 files changed

+496
-25
lines changed

5 files changed

+496
-25
lines changed

‎apps/base-docs/docs/components/smart-wallet/Illustration.tsx

+294
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
export function SubAccountIllustration({
2+
universalAccount,
3+
subAccount,
4+
universalAccountSigning,
5+
subAccountSigning,
6+
}: {
7+
universalAccount: React.ReactNode;
8+
subAccount: React.ReactNode;
9+
universalAccountSigning: () => void;
10+
subAccountSigning: () => void;
11+
}) {
12+
return (
13+
<div className="my-12 flex flex-col items-center">
14+
<div className="relative w-full max-w-3xl">
15+
{/* SVG Illustration with defs for gradients */}
16+
<svg viewBox="0 0 800 550" className="w-full">
17+
{/* Gradients and filters definitions */}
18+
<defs>
19+
{/* Universal Account Gradient - Brighter for dark mode */}
20+
<linearGradient id="universalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
21+
<stop offset="0%" stopColor="#1E40AF" />
22+
<stop offset="100%" stopColor="#3B82F6" />
23+
</linearGradient>
24+
25+
{/* Sub Account Gradient - Vibrant teal for dark mode */}
26+
<linearGradient id="subAccountGradient" x1="0%" y1="0%" x2="100%" y2="100%">
27+
<stop offset="0%" stopColor="#0F766E" />
28+
<stop offset="100%" stopColor="#2DD4BF" />
29+
</linearGradient>
30+
31+
{/* Local Signing Gradient - Vibrant aqua for dark mode */}
32+
<linearGradient id="localSigningGradient" x1="0%" y1="0%" x2="100%" y2="100%">
33+
<stop offset="0%" stopColor="#0369A1" />
34+
<stop offset="100%" stopColor="#38BDF8" />
35+
</linearGradient>
36+
37+
{/* Coinbase Wallet Gradient - Deep blue for dark mode */}
38+
<linearGradient id="coinbaseGradient" x1="0%" y1="0%" x2="100%" y2="100%">
39+
<stop offset="0%" stopColor="#1E3A8A" />
40+
<stop offset="100%" stopColor="#2563EB" />
41+
</linearGradient>
42+
43+
{/* App with Signer Gradient - Rich purple for dark mode */}
44+
<linearGradient id="appSignerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
45+
<stop offset="0%" stopColor="#6B21A8" />
46+
<stop offset="100%" stopColor="#A855F7" />
47+
</linearGradient>
48+
49+
{/* Inner Shadow */}
50+
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
51+
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
52+
<feOffset in="blur" dx="0" dy="3" result="offsetBlur" />
53+
<feComposite in="SourceGraphic" in2="offsetBlur" operator="over" />
54+
</filter>
55+
56+
{/* Glow effect for dark mode */}
57+
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
58+
<feGaussianBlur stdDeviation="2" result="blur" />
59+
<feComposite in="SourceGraphic" in2="blur" operator="over" />
60+
</filter>
61+
</defs>
62+
63+
{/* Coinbase Wallet Container - Wider to accommodate text */}
64+
<rect
65+
x="70"
66+
y="80"
67+
width="260"
68+
height="200"
69+
rx="15"
70+
fill="url(#coinbaseGradient)"
71+
filter="url(#glow)"
72+
/>
73+
<text
74+
x="200"
75+
y="115"
76+
fontSize="18"
77+
fontWeight="bold"
78+
fill="white"
79+
textAnchor="middle"
80+
letterSpacing="0.5"
81+
>
82+
Coinbase Wallet
83+
</text>
84+
<text x="200" y="140" fontSize="13" fill="white" textAnchor="middle" opacity="0.9">
85+
keys.coinbase.com
86+
</text>
87+
88+
{/* Universal Account - Inside Coinbase Wallet */}
89+
<rect
90+
x="100"
91+
y="155"
92+
width="200"
93+
height="90"
94+
rx="10"
95+
fill="url(#universalGradient)"
96+
filter="url(#innerShadow)"
97+
opacity="0.9"
98+
/>
99+
<text
100+
x="200"
101+
y="185"
102+
fontSize="16"
103+
fontWeight="bold"
104+
fill="white"
105+
textAnchor="middle"
106+
letterSpacing="0.5"
107+
>
108+
Universal Account
109+
</text>
110+
111+
{/* Render ReactNode in a foreign object for universalAccount */}
112+
<foreignObject x="120" y="195" width="160" height="40">
113+
<div className="flex h-full w-full items-center justify-center text-xs text-white">
114+
{universalAccount}
115+
</div>
116+
</foreignObject>
117+
118+
{/* Your App Container - Wider to accommodate text */}
119+
<rect
120+
x="470"
121+
y="80"
122+
width="260"
123+
height="200"
124+
rx="15"
125+
fill="url(#appSignerGradient)"
126+
filter="url(#glow)"
127+
/>
128+
<text
129+
x="600"
130+
y="115"
131+
fontSize="18"
132+
fontWeight="bold"
133+
fill="white"
134+
textAnchor="middle"
135+
letterSpacing="0.5"
136+
>
137+
Your App
138+
</text>
139+
<text x="600" y="140" fontSize="13" fill="white" textAnchor="middle" opacity="0.9">
140+
Contains Sub Account Signer
141+
</text>
142+
143+
{/* Sub Account - Inside Your App */}
144+
<rect
145+
x="500"
146+
y="155"
147+
width="200"
148+
height="90"
149+
rx="10"
150+
fill="url(#subAccountGradient)"
151+
filter="url(#innerShadow)"
152+
opacity="0.9"
153+
/>
154+
<text
155+
x="600"
156+
y="185"
157+
fontSize="16"
158+
fontWeight="bold"
159+
fill="white"
160+
textAnchor="middle"
161+
letterSpacing="0.5"
162+
>
163+
Sub Account
164+
</text>
165+
166+
{/* Render ReactNode in a foreign object for subAccount */}
167+
<foreignObject x="520" y="195" width="160" height="40">
168+
<div className="flex h-full w-full items-center justify-center text-xs text-white">
169+
{subAccount}
170+
</div>
171+
</foreignObject>
172+
173+
{/* Local Signing Box - Wider with additional padding */}
174+
<rect
175+
x="500"
176+
y="350"
177+
width="200"
178+
height="90"
179+
rx="12"
180+
fill="url(#localSigningGradient)"
181+
filter="url(#glow)"
182+
/>
183+
<text
184+
x="600"
185+
y="380"
186+
fontSize="16"
187+
fontWeight="bold"
188+
fill="white"
189+
textAnchor="middle"
190+
letterSpacing="0.5"
191+
>
192+
Local Signing
193+
</text>
194+
<text x="600" y="405" fontSize="13" fill="white" textAnchor="middle" opacity="0.9">
195+
Sign with Sub Account
196+
</text>
197+
198+
{/* Local Signing Button */}
199+
<foreignObject x="560" y="420" width="80" height="35">
200+
<div className="flex h-full w-full items-center justify-center">
201+
<button
202+
onClick={subAccountSigning}
203+
type="button"
204+
className="rounded-md bg-white/90 px-4 py-1.5 text-xs font-medium text-blue-600 shadow-sm transition-colors hover:bg-blue-50"
205+
>
206+
Sign
207+
</button>
208+
</div>
209+
</foreignObject>
210+
211+
{/* Universal Account Signing Box - Wider with additional padding */}
212+
<rect
213+
x="100"
214+
y="350"
215+
width="200"
216+
height="90"
217+
rx="12"
218+
fill="url(#universalGradient)"
219+
filter="url(#glow)"
220+
/>
221+
<text
222+
x="200"
223+
y="380"
224+
fontSize="16"
225+
fontWeight="bold"
226+
fill="white"
227+
textAnchor="middle"
228+
letterSpacing="0.5"
229+
>
230+
Universal Account Signing
231+
</text>
232+
<text x="200" y="405" fontSize="13" fill="white" textAnchor="middle" opacity="0.9">
233+
Sign with Universal Account
234+
</text>
235+
236+
{/* Universal Signing Button */}
237+
<foreignObject x="160" y="420" width="80" height="35">
238+
<div className="flex h-full w-full items-center justify-center">
239+
<button
240+
type="button"
241+
onClick={universalAccountSigning}
242+
className="rounded-md bg-white/90 px-4 py-1.5 text-xs font-medium text-blue-600 shadow-sm transition-colors hover:bg-blue-50"
243+
>
244+
Sign
245+
</button>
246+
</div>
247+
</foreignObject>
248+
249+
{/* Universal to Sub Account relationship */}
250+
<path d="M300 200 L500 200" stroke="rgba(255,255,255,0.5)" strokeWidth="2.5" />
251+
<polygon points="490,195 500,200 490,205" fill="rgba(255,255,255,0.7)" />
252+
253+
{/* Universal Account to Universal Signing */}
254+
<path d="M200 245 L200 350" stroke="rgba(255,255,255,0.5)" strokeWidth="2.5" />
255+
<polygon points="195,340 200,350 205,340" fill="rgba(255,255,255,0.7)" />
256+
257+
{/* Connection Label */}
258+
<rect x="360" y="175" width="80" height="25" rx="12" fill="rgba(255,255,255,0.15)" />
259+
<text x="400" y="192" fontSize="13" fill="white" textAnchor="middle" fontWeight="500">
260+
Creates
261+
</text>
262+
263+
{/* Sub Account to Local Transaction */}
264+
<path d="M600 245 L600 350" stroke="rgba(255,255,255,0.5)" strokeWidth="2.5" />
265+
<polygon points="595,340 600,350 605,340" fill="rgba(255,255,255,0.7)" />
266+
</svg>
267+
</div>
268+
269+
<div className="mt-8 max-w-lg rounded-xl border border-slate-700/30 bg-gradient-to-r from-slate-800/50 to-slate-900/50 p-6 text-center text-sm text-slate-300 shadow-sm">
270+
<h4 className="mb-3 text-base font-medium text-white">
271+
Your Universal Smart Wallet Ecosystem
272+
</h4>
273+
<p className="mb-3">
274+
Your universal Smart Wallet creates (or imports) and owns this app-specific Sub Account
275+
with the following capabilities:
276+
</p>
277+
<ul className="mt-4 list-none space-y-2 text-left">
278+
<li className="flex items-center">
279+
<span className="mr-2 inline-block h-4 w-4 rounded-full bg-sky-500 opacity-80" />
280+
<span>Manage its own assets and sign transactions independently</span>
281+
</li>
282+
<li className="flex items-center">
283+
<span className="mr-2 inline-block h-4 w-4 rounded-full bg-teal-400 opacity-80" />
284+
<span>Spend assets from universal account using user-approved Spend Permission</span>
285+
</li>
286+
<li className="flex items-center">
287+
<span className="mr-2 inline-block h-4 w-4 rounded-full bg-blue-400 opacity-80" />
288+
<span>Be controlled by both your universal wallet and authorized app logic</span>
289+
</li>
290+
</ul>
291+
</div>
292+
</div>
293+
);
294+
}

0 commit comments

Comments
 (0)