create-polygon-kit 0.2.0 → 1.0.0
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/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/templates/nextjs/typescript/app/page.tsx +148 -48
- package/templates/remix/typescript/.env.example +2 -0
- package/templates/remix/typescript/README.md +47 -0
- package/templates/remix/typescript/app/components/client-only.tsx +15 -0
- package/templates/remix/typescript/app/components/dashboard.tsx +285 -0
- package/templates/remix/typescript/app/components/landing-page.tsx +432 -0
- package/templates/remix/typescript/app/providers.tsx +18 -0
- package/templates/remix/typescript/app/root.tsx +44 -0
- package/templates/remix/typescript/app/routes/_index.tsx +25 -0
- package/templates/remix/typescript/package.json +37 -0
- package/templates/remix/typescript/tsconfig.json +30 -0
- package/templates/remix/typescript/vite.config.ts +16 -0
- package/templates/vite/typescript/src/App.tsx +151 -58
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
</footer>
|
|
2
|
+
</div>
|
|
3
|
+
);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
function Dashboard() {
|
|
7
|
+
const { address, isConnected, chainId } = usePolygonKit();
|
|
8
|
+
const [activeTab, setActiveTab] = useState<'overview' | 'components' | 'transactions' | 'swap'>('overview');
|
|
9
|
+
const [txHash, setTxHash] = useState<string>('');
|
|
10
|
+
|
|
11
|
+
const getNetworkName = (chainId?: number) => {
|
|
12
|
+
switch (chainId) {
|
|
13
|
+
case 137:
|
|
14
|
+
return 'Polygon PoS';
|
|
15
|
+
case 1101:
|
|
16
|
+
return 'Polygon zkEVM';
|
|
17
|
+
case 80002:
|
|
18
|
+
return 'Amoy Testnet';
|
|
19
|
+
default:
|
|
20
|
+
return 'Unknown Network';
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
if (!isConnected || !address) {
|
|
25
|
+
return <LandingPage />;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-indigo-50 dark:from-gray-900 dark:via-purple-900/20 dark:to-indigo-900/20">
|
|
30
|
+
{/* Header */}
|
|
31
|
+
<header className="border-b border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-gray-900/50 backdrop-blur-lg sticky top-0 z-50">
|
|
32
|
+
<div className="container mx-auto px-4 py-4">
|
|
33
|
+
<div className="flex justify-between items-center">
|
|
34
|
+
<div className="flex items-center space-x-3">
|
|
35
|
+
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
|
|
36
|
+
<div>
|
|
37
|
+
<h1 className="text-xl font-bold text-gray-900 dark:text-white">PolygonKit Showcase</h1>
|
|
38
|
+
<p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
<Wallet>
|
|
42
|
+
<WalletDropdown />
|
|
43
|
+
</Wallet>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</header>
|
|
47
|
+
|
|
48
|
+
<div className="container mx-auto px-4 py-8">
|
|
49
|
+
{/* Tabs */}
|
|
50
|
+
<div className="flex flex-wrap gap-2 mb-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-1 rounded-lg w-fit">
|
|
51
|
+
{[
|
|
52
|
+
{ id: 'overview', label: 'Overview', icon: '📊' },
|
|
53
|
+
{ id: 'components', label: 'Components', icon: '🧩' },
|
|
54
|
+
{ id: 'transactions', label: 'Transactions', icon: '💸' },
|
|
55
|
+
{ id: 'swap', label: 'Swap', icon: '🔄' },
|
|
56
|
+
].map((tab) => (
|
|
57
|
+
<button
|
|
58
|
+
key={tab.id}
|
|
59
|
+
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
|
60
|
+
className={`px-6 py-2 rounded-md font-semibold transition-all duration-200 ${
|
|
61
|
+
activeTab === tab.id
|
|
62
|
+
? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
|
|
63
|
+
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
64
|
+
}`}
|
|
65
|
+
>
|
|
66
|
+
<span className="mr-2">{tab.icon}</span>
|
|
67
|
+
{tab.label}
|
|
68
|
+
</button>
|
|
69
|
+
))}
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
{/* Overview Tab */}
|
|
73
|
+
{activeTab === 'overview' && (
|
|
74
|
+
<div className="space-y-6">
|
|
75
|
+
{/* Wallet Overview */}
|
|
76
|
+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
77
|
+
<div className="lg:col-span-2 bg-gradient-to-br from-purple-500 to-pink-500 p-8 rounded-2xl text-white shadow-xl">
|
|
78
|
+
<h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
|
|
79
|
+
<Identity
|
|
80
|
+
address={address}
|
|
81
|
+
showAvatar
|
|
82
|
+
showAddress
|
|
83
|
+
showBalance
|
|
84
|
+
/>
|
|
85
|
+
<div className="mt-6 pt-6 border-t border-white/20">
|
|
86
|
+
<p className="text-sm opacity-75 mb-3">Native Balance</p>
|
|
87
|
+
<TokenBalance address={address} className="text-2xl font-bold" />
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-6 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
|
92
|
+
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-4">Network Status</h3>
|
|
93
|
+
<div className="space-y-4">
|
|
94
|
+
<div className="flex items-center justify-between">
|
|
95
|
+
<span className="text-gray-700 dark:text-gray-300">Status</span>
|
|
96
|
+
<span className="flex items-center gap-2 text-green-600 dark:text-green-400 font-semibold">
|
|
97
|
+
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
|
98
|
+
Connected
|
|
99
|
+
</span>
|
|
100
|
+
</div>
|
|
101
|
+
<div className="flex items-center justify-between">
|
|
102
|
+
<span className="text-gray-700 dark:text-gray-300">Chain ID</span>
|
|
103
|
+
<span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
|
|
104
|
+
</div>
|
|
105
|
+
<div className="flex items-center justify-between">
|
|
106
|
+
<span className="text-gray-700 dark:text-gray-300">Network</span>
|
|
107
|
+
<span className="text-gray-900 dark:text-white font-semibold">{getNetworkName(chainId)}</span>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
{/* Quick Actions */}
|
|
114
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
115
|
+
{[
|
|
116
|
+
{ icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', tab: 'transactions' },
|
|
117
|
+
{ icon: '🔄', title: 'Swap', desc: 'Exchange tokens', tab: 'swap' },
|
|
118
|
+
{ icon: '🧩', title: 'Components', desc: 'Explore all features', tab: 'components' },
|
|
119
|
+
{ icon: '📖', title: 'Documentation', desc: 'Learn more', link: 'https://polygonlabs.mintlify.app' },
|
|
120
|
+
].map((action) => (
|
|
121
|
+
<button
|
|
122
|
+
key={action.title}
|
|
123
|
+
onClick={() => action.tab ? setActiveTab(action.tab as typeof activeTab) : window.open(action.link, '_blank')}
|
|
124
|
+
className="p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-xl border border-gray-200 dark:border-gray-700 hover:scale-105 transition-all duration-200 text-left group shadow-lg hover:shadow-xl"
|
|
125
|
+
>
|
|
126
|
+
<div className="text-4xl mb-3 group-hover:scale-110 transition-transform">{action.icon}</div>
|
|
127
|
+
<h3 className="font-bold text-gray-900 dark:text-white mb-1">{action.title}</h3>
|
|
128
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{action.desc}</p>
|
|
129
|
+
</button>
|
|
130
|
+
))}
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
)}
|
|
134
|
+
|
|
135
|
+
{/* Components Showcase Tab */}
|
|
136
|
+
{activeTab === 'components' && (
|
|
137
|
+
<div className="space-y-6">
|
|
138
|
+
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
|
139
|
+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Identity Components</h2>
|
|
140
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
141
|
+
<div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
|
|
142
|
+
<h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Full Identity</h3>
|
|
143
|
+
<Identity address={address} showAvatar showAddress showBalance />
|
|
144
|
+
</div>
|
|
145
|
+
<div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
|
|
146
|
+
<h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Avatar Only</h3>
|
|
147
|
+
<div className="flex items-center gap-4">
|
|
148
|
+
<Avatar address={address} size={48} />
|
|
149
|
+
<Avatar address={address} size={64} />
|
|
150
|
+
<Avatar address={address} size={80} />
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
<div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
|
|
154
|
+
<h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Name/Address</h3>
|
|
155
|
+
<Name address={address} />
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
|
161
|
+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Components</h2>
|
|
162
|
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
163
|
+
<div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
|
|
164
|
+
<h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
|
|
165
|
+
<div className="space-y-3">
|
|
166
|
+
<div className="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg">
|
|
167
|
+
<span className="text-gray-600 dark:text-gray-400">Native (MATIC)</span>
|
|
168
|
+
<TokenBalance address={address} />
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
<div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
|
|
173
|
+
<h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
|
|
174
|
+
<div className="flex items-center gap-4">
|
|
175
|
+
<div className="text-center">
|
|
176
|
+
<TokenIcon symbol="MATIC" size={32} />
|
|
177
|
+
<p className="text-xs mt-1 text-gray-600 dark:text-gray-400">MATIC</p>
|
|
178
|
+
</div>
|
|
179
|
+
<div className="text-center">
|
|
180
|
+
<TokenIcon symbol="ETH" size={32} />
|
|
181
|
+
<p className="text-xs mt-1 text-gray-600 dark:text-gray-400">ETH</p>
|
|
182
|
+
</div>
|
|
183
|
+
<div className="text-center">
|
|
184
|
+
<TokenIcon symbol="USDC" size={32} />
|
|
185
|
+
<p className="text-xs mt-1 text-gray-600 dark:text-gray-400">USDC</p>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
)}
|
|
193
|
+
|
|
194
|
+
{/* Transactions Tab */}
|
|
195
|
+
{activeTab === 'transactions' && (
|
|
196
|
+
<div className="space-y-6">
|
|
197
|
+
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
|
198
|
+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
|
|
199
|
+
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
200
|
+
Send 0.001 MATIC to a recipient address. Replace the address below with your test address.
|
|
201
|
+
</p>
|
|
202
|
+
<TransactionButton
|
|
203
|
+
text="Send 0.001 MATIC"
|
|
204
|
+
calls={[
|
|
205
|
+
{
|
|
206
|
+
to: address, // Sending to self for demo
|
|
207
|
+
value: parseEther('0.001'),
|
|
208
|
+
},
|
|
209
|
+
]}
|
|
210
|
+
onSuccess={(hash) => {
|
|
211
|
+
console.log('Transaction successful:', hash);
|
|
212
|
+
setTxHash(hash);
|
|
213
|
+
}}
|
|
214
|
+
onError={(error) => {
|
|
215
|
+
console.error('Transaction failed:', error);
|
|
216
|
+
alert('Transaction failed: ' + error.message);
|
|
217
|
+
}}
|
|
218
|
+
className="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all"
|
|
219
|
+
/>
|
|
220
|
+
|
|
221
|
+
{txHash && (
|
|
222
|
+
<div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
|
223
|
+
<p className="font-semibold text-green-900 dark:text-green-100 mb-2">Transaction Sent!</p>
|
|
224
|
+
<p className="text-sm text-green-700 dark:text-green-300 break-all">
|
|
225
|
+
Hash: {txHash}
|
|
226
|
+
</p>
|
|
227
|
+
</div>
|
|
228
|
+
)}
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
|
232
|
+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
|
|
233
|
+
<div className="space-y-4">
|
|
234
|
+
{[
|
|
235
|
+
{ type: 'Received', amount: '100 MATIC', time: '2 mins ago' },
|
|
236
|
+
{ type: 'Sent', amount: '50 MATIC', time: '1 hour ago' },
|
|
237
|
+
{ type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago' },
|
|
238
|
+
].map((tx, idx) => (
|
|
239
|
+
<div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
|
240
|
+
<div className="flex items-center gap-4">
|
|
241
|
+
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
|
242
|
+
tx.type === 'Received' ? 'bg-green-100 dark:bg-green-900/30' :
|
|
243
|
+
tx.type === 'Sent' ? 'bg-red-100 dark:bg-red-900/30' :
|
|
244
|
+
'bg-blue-100 dark:bg-blue-900/30'
|
|
245
|
+
}`}>
|
|
246
|
+
{tx.type === 'Received' ? '↓' : tx.type === 'Sent' ? '↑' : '↔'}
|
|
247
|
+
</div>
|
|
248
|
+
<div>
|
|
249
|
+
<p className="font-semibold text-gray-900 dark:text-white">{tx.type}</p>
|
|
250
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{tx.amount}</p>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div className="text-right">
|
|
254
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{tx.time}</p>
|
|
255
|
+
<span className="text-xs text-green-600 dark:text-green-400">✓ Confirmed</span>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
))}
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
)}
|
|
263
|
+
|
|
264
|
+
{/* Swap Tab */}
|
|
265
|
+
{activeTab === 'swap' && (
|
|
266
|
+
<div className="max-w-2xl mx-auto">
|
|
267
|
+
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
|
268
|
+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Swap</h2>
|
|
269
|
+
<Swap
|
|
270
|
+
onSuccess={(hash) => {
|
|
271
|
+
console.log('Swap successful:', hash);
|
|
272
|
+
alert('Swap successful! Hash: ' + hash);
|
|
273
|
+
}}
|
|
274
|
+
onError={(error) => {
|
|
275
|
+
console.error('Swap failed:', error);
|
|
276
|
+
alert('Swap failed: ' + error.message);
|
|
277
|
+
}}
|
|
278
|
+
/>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
)}
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
);
|
|
285
|
+
}
|