create-polygon-kit 0.3.0 → 1.0.1

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.
Files changed (7) hide show
  1. package/dist/index.js +20 -1
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
  4. package/templates/nextjs/typescript/app/page.tsx +148 -48
  5. package/templates/remix/typescript/app/components/dashboard.tsx +142 -51
  6. package/templates/remix/typescript/app/components/landing-page.tsx +301 -4
  7. package/templates/vite/typescript/src/App.tsx +151 -58
package/dist/index.js CHANGED
@@ -90,6 +90,13 @@ async function createProject(options) {
90
90
  }
91
91
  // Copy template
92
92
  await fs.copy(templateDir, targetDir);
93
+ // Explicitly copy env example file
94
+ const envExampleName = framework === 'nextjs' ? '.env.local.example' : '.env.example';
95
+ const envExampleSource = path.join(templateDir, envExampleName);
96
+ const envExampleTarget = path.join(targetDir, envExampleName);
97
+ if (fs.existsSync(envExampleSource)) {
98
+ await fs.copy(envExampleSource, envExampleTarget);
99
+ }
93
100
  // Update package.json with project name
94
101
  const packageJsonPath = path.join(targetDir, 'package.json');
95
102
  const packageJson = await fs.readJSON(packageJsonPath);
@@ -113,7 +120,19 @@ async function createProject(options) {
113
120
  }
114
121
  // Show success message
115
122
  console.log(chalk.bold.green('\n✨ Your PolygonKit project is ready!\n'));
116
- console.log('Next steps:');
123
+ // Environment setup guidance
124
+ console.log(chalk.bold.yellow('⚠️ Important: Set up your Reown Project ID\n'));
125
+ console.log('1. Get a free project ID from ' + chalk.cyan('https://cloud.reown.com'));
126
+ console.log('2. Copy the env example file:');
127
+ if (framework === 'nextjs') {
128
+ console.log(chalk.cyan(' cp .env.local.example .env.local'));
129
+ console.log('3. Add your project ID to ' + chalk.cyan('.env.local'));
130
+ }
131
+ else {
132
+ console.log(chalk.cyan(' cp .env.example .env'));
133
+ console.log('3. Add your project ID to ' + chalk.cyan('.env'));
134
+ }
135
+ console.log(chalk.bold('\nNext steps:'));
117
136
  console.log(chalk.cyan(` cd ${projectName}`));
118
137
  if (!installDeps) {
119
138
  console.log(chalk.cyan(' npm install'));
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-polygon-kit",
3
- "version": "0.3.0",
3
+ "version": "1.0.1",
4
4
  "description": "CLI tool to create PolygonKit projects",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/nextjs/typescript/app/page.tsx CHANGED
@@ -5,14 +5,20 @@ import {
5
5
  ConnectWallet,
6
6
  WalletDropdown,
7
7
  Identity,
8
+ Avatar,
9
+ Name,
10
+ TokenBalance,
11
+ TokenIcon,
12
+ TransactionButton,
13
+ Swap,
8
14
  usePolygonKit,
9
15
  } from '@sanketsaagar/polygon-kit';
10
16
  import { useState } from 'react';
17
+ import { parseEther } from 'viem';
11
18
 
12
19
  function LandingPage() {
13
20
  return (
14
21
  <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
15
- {/* Hero Section */}
16
22
  <div className="container mx-auto px-4 py-16">
17
23
  <nav className="flex justify-between items-center mb-20">
18
24
  <div className="flex items-center space-x-2">
@@ -36,7 +42,7 @@ function LandingPage() {
36
42
  <div className="flex gap-4 justify-center">
37
43
  <ConnectWallet />
38
44
  <a
39
- href="https://docs.polygonkit.com"
45
+ href="https://polygonlabs.mintlify.app"
40
46
  target="_blank"
41
47
  rel="noopener noreferrer"
42
48
  className="px-8 py-3 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-all duration-200"
@@ -145,7 +151,8 @@ function LandingPage() {
145
151
 
146
152
  function Dashboard() {
147
153
  const { address, isConnected, chainId } = usePolygonKit();
148
- const [activeTab, setActiveTab] = useState<'overview' | 'activity' | 'settings'>('overview');
154
+ const [activeTab, setActiveTab] = useState<'overview' | 'components' | 'transactions' | 'swap'>('overview');
155
+ const [txHash, setTxHash] = useState<string>('');
149
156
 
150
157
  const getNetworkName = (chainId?: number) => {
151
158
  switch (chainId) {
@@ -160,6 +167,10 @@ function Dashboard() {
160
167
  }
161
168
  };
162
169
 
170
+ if (!isConnected || !address) {
171
+ return <LandingPage />;
172
+ }
173
+
163
174
  return (
164
175
  <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">
165
176
  {/* Header */}
@@ -169,7 +180,7 @@ function Dashboard() {
169
180
  <div className="flex items-center space-x-3">
170
181
  <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
171
182
  <div>
172
- <h1 className="text-xl font-bold text-gray-900 dark:text-white">My Polygon App</h1>
183
+ <h1 className="text-xl font-bold text-gray-900 dark:text-white">PolygonKit Showcase</h1>
173
184
  <p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
174
185
  </div>
175
186
  </div>
@@ -182,11 +193,12 @@ function Dashboard() {
182
193
 
183
194
  <div className="container mx-auto px-4 py-8">
184
195
  {/* Tabs */}
185
- <div className="flex space-x-2 mb-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-1 rounded-lg w-fit">
196
+ <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">
186
197
  {[
187
198
  { id: 'overview', label: 'Overview', icon: '📊' },
188
- { id: 'activity', label: 'Activity', icon: '⚡' },
189
- { id: 'settings', label: 'Settings', icon: '⚙️' },
199
+ { id: 'components', label: 'Components', icon: '🧩' },
200
+ { id: 'transactions', label: 'Transactions', icon: '💸' },
201
+ { id: 'swap', label: 'Swap', icon: '🔄' },
190
202
  ].map((tab) => (
191
203
  <button
192
204
  key={tab.id}
@@ -211,22 +223,14 @@ function Dashboard() {
211
223
  <div className="lg:col-span-2 bg-gradient-to-br from-purple-500 to-pink-500 p-8 rounded-2xl text-white shadow-xl">
212
224
  <h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
213
225
  <Identity
214
- address={address!}
226
+ address={address}
215
227
  showAvatar
216
228
  showAddress
217
229
  showBalance
218
- className="scale-110"
219
230
  />
220
- <div className="mt-6 flex gap-3">
221
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
222
- Send
223
- </button>
224
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
225
- Receive
226
- </button>
227
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
228
- Swap
229
- </button>
231
+ <div className="mt-6 pt-6 border-t border-white/20">
232
+ <p className="text-sm opacity-75 mb-3">Native Balance</p>
233
+ <TokenBalance address={address} className="text-2xl font-bold" />
230
234
  </div>
231
235
  </div>
232
236
 
@@ -245,8 +249,8 @@ function Dashboard() {
245
249
  <span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
246
250
  </div>
247
251
  <div className="flex items-center justify-between">
248
- <span className="text-gray-700 dark:text-gray-300">Gas Price</span>
249
- <span className="text-gray-900 dark:text-white font-semibold">~30 Gwei</span>
252
+ <span className="text-gray-700 dark:text-gray-300">Network</span>
253
+ <span className="text-gray-900 dark:text-white font-semibold">{getNetworkName(chainId)}</span>
250
254
  </div>
251
255
  </div>
252
256
  </div>
@@ -255,30 +259,128 @@ function Dashboard() {
255
259
  {/* Quick Actions */}
256
260
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
257
261
  {[
258
- { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', color: 'from-blue-500 to-cyan-500' },
259
- { icon: '🔄', title: 'Swap', desc: 'Exchange tokens', color: 'from-purple-500 to-pink-500' },
260
- { icon: '🌉', title: 'Bridge', desc: 'Cross-chain transfer', color: 'from-orange-500 to-red-500' },
261
- { icon: '📈', title: 'Stake', desc: 'Earn rewards', color: 'from-green-500 to-emerald-500' },
262
+ { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', tab: 'transactions' },
263
+ { icon: '🔄', title: 'Swap', desc: 'Exchange tokens', tab: 'swap' },
264
+ { icon: '🧩', title: 'Components', desc: 'Explore all features', tab: 'components' },
265
+ { icon: '📖', title: 'Documentation', desc: 'Learn more', link: 'https://polygonlabs.mintlify.app' },
262
266
  ].map((action) => (
263
267
  <button
264
268
  key={action.title}
269
+ onClick={() => action.tab ? setActiveTab(action.tab as typeof activeTab) : window.open(action.link, '_blank')}
265
270
  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"
266
271
  >
267
- <div className={`text-4xl mb-3 group-hover:scale-110 transition-transform`}>{action.icon}</div>
272
+ <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">{action.icon}</div>
268
273
  <h3 className="font-bold text-gray-900 dark:text-white mb-1">{action.title}</h3>
269
274
  <p className="text-sm text-gray-600 dark:text-gray-400">{action.desc}</p>
270
275
  </button>
271
276
  ))}
272
277
  </div>
278
+ </div>
279
+ )}
280
+
281
+ {/* Components Showcase Tab */}
282
+ {activeTab === 'components' && (
283
+ <div className="space-y-6">
284
+ <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">
285
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Identity Components</h2>
286
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
287
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
288
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Full Identity</h3>
289
+ <Identity address={address} showAvatar showAddress showBalance />
290
+ </div>
291
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
292
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Avatar Only</h3>
293
+ <div className="flex items-center gap-4">
294
+ <Avatar address={address} size={48} />
295
+ <Avatar address={address} size={64} />
296
+ <Avatar address={address} size={80} />
297
+ </div>
298
+ </div>
299
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
300
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Name/Address</h3>
301
+ <Name address={address} />
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <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">
307
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Components</h2>
308
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
309
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
310
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
311
+ <div className="space-y-3">
312
+ <div className="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg">
313
+ <span className="text-gray-600 dark:text-gray-400">Native (MATIC)</span>
314
+ <TokenBalance address={address} />
315
+ </div>
316
+ </div>
317
+ </div>
318
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
319
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
320
+ <div className="flex items-center gap-4">
321
+ <div className="text-center">
322
+ <TokenIcon symbol="MATIC" size={32} />
323
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">MATIC</p>
324
+ </div>
325
+ <div className="text-center">
326
+ <TokenIcon symbol="ETH" size={32} />
327
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">ETH</p>
328
+ </div>
329
+ <div className="text-center">
330
+ <TokenIcon symbol="USDC" size={32} />
331
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">USDC</p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ )}
273
339
 
274
- {/* Recent Activity */}
340
+ {/* Transactions Tab */}
341
+ {activeTab === 'transactions' && (
342
+ <div className="space-y-6">
275
343
  <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">
276
- <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
344
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
345
+ <p className="text-gray-600 dark:text-gray-400 mb-6">
346
+ Send 0.001 MATIC to a recipient address. Replace the address below with your test address.
347
+ </p>
348
+ <TransactionButton
349
+ text="Send 0.001 MATIC"
350
+ calls={[
351
+ {
352
+ to: address, // Sending to self for demo
353
+ value: parseEther('0.001'),
354
+ },
355
+ ]}
356
+ onSuccess={(hash) => {
357
+ console.log('Transaction successful:', hash);
358
+ setTxHash(hash);
359
+ }}
360
+ onError={(error) => {
361
+ console.error('Transaction failed:', error);
362
+ alert('Transaction failed: ' + error.message);
363
+ }}
364
+ 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"
365
+ />
366
+
367
+ {txHash && (
368
+ <div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
369
+ <p className="font-semibold text-green-900 dark:text-green-100 mb-2">Transaction Sent!</p>
370
+ <p className="text-sm text-green-700 dark:text-green-300 break-all">
371
+ Hash: {txHash}
372
+ </p>
373
+ </div>
374
+ )}
375
+ </div>
376
+
377
+ <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">
378
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
277
379
  <div className="space-y-4">
278
380
  {[
279
- { type: 'Received', amount: '100 MATIC', time: '2 mins ago', status: 'success' },
280
- { type: 'Sent', amount: '50 MATIC', time: '1 hour ago', status: 'success' },
281
- { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago', status: 'success' },
381
+ { type: 'Received', amount: '100 MATIC', time: '2 mins ago' },
382
+ { type: 'Sent', amount: '50 MATIC', time: '1 hour ago' },
383
+ { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago' },
282
384
  ].map((tx, idx) => (
283
385
  <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
284
386
  <div className="flex items-center gap-4">
@@ -305,23 +407,21 @@ function Dashboard() {
305
407
  </div>
306
408
  )}
307
409
 
308
- {/* Activity Tab */}
309
- {activeTab === 'activity' && (
310
- <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">
311
- <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Transaction History</h2>
312
- <p className="text-gray-600 dark:text-gray-400">Your transaction history will appear here.</p>
313
- </div>
314
- )}
315
-
316
- {/* Settings Tab */}
317
- {activeTab === 'settings' && (
318
- <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">
319
- <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Settings</h2>
320
- <div className="space-y-6">
321
- <div>
322
- <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Preferences</h3>
323
- <p className="text-gray-600 dark:text-gray-400">Configure your app settings here.</p>
324
- </div>
410
+ {/* Swap Tab */}
411
+ {activeTab === 'swap' && (
412
+ <div className="max-w-2xl mx-auto">
413
+ <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">
414
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Swap</h2>
415
+ <Swap
416
+ onSuccess={(hash) => {
417
+ console.log('Swap successful:', hash);
418
+ alert('Swap successful! Hash: ' + hash);
419
+ }}
420
+ onError={(error) => {
421
+ console.error('Swap failed:', error);
422
+ alert('Swap failed: ' + error.message);
423
+ }}
424
+ />
325
425
  </div>
326
426
  </div>
327
427
  )}
package/templates/remix/typescript/app/components/dashboard.tsx CHANGED
@@ -1,14 +1,12 @@
1
- import {
2
- Wallet,
3
- WalletDropdown,
4
- Identity,
5
- usePolygonKit,
6
- } from '@sanketsaagar/polygon-kit';
7
- import { useState } from 'react';
1
+ </footer>
2
+ </div>
3
+ );
4
+ }
8
5
 
9
- export function Dashboard() {
10
- const { address, chainId } = usePolygonKit();
11
- const [activeTab, setActiveTab] = useState<'overview' | 'activity' | 'settings'>('overview');
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>('');
12
10
 
13
11
  const getNetworkName = (chainId?: number) => {
14
12
  switch (chainId) {
@@ -23,6 +21,10 @@ export function Dashboard() {
23
21
  }
24
22
  };
25
23
 
24
+ if (!isConnected || !address) {
25
+ return <LandingPage />;
26
+ }
27
+
26
28
  return (
27
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">
28
30
  {/* Header */}
@@ -32,7 +34,7 @@ export function Dashboard() {
32
34
  <div className="flex items-center space-x-3">
33
35
  <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
34
36
  <div>
35
- <h1 className="text-xl font-bold text-gray-900 dark:text-white">My Polygon App</h1>
37
+ <h1 className="text-xl font-bold text-gray-900 dark:text-white">PolygonKit Showcase</h1>
36
38
  <p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
37
39
  </div>
38
40
  </div>
@@ -45,11 +47,12 @@ export function Dashboard() {
45
47
 
46
48
  <div className="container mx-auto px-4 py-8">
47
49
  {/* Tabs */}
48
- <div className="flex space-x-2 mb-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-1 rounded-lg w-fit">
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">
49
51
  {[
50
52
  { id: 'overview', label: 'Overview', icon: '📊' },
51
- { id: 'activity', label: 'Activity', icon: '⚡' },
52
- { id: 'settings', label: 'Settings', icon: '⚙️' },
53
+ { id: 'components', label: 'Components', icon: '🧩' },
54
+ { id: 'transactions', label: 'Transactions', icon: '💸' },
55
+ { id: 'swap', label: 'Swap', icon: '🔄' },
53
56
  ].map((tab) => (
54
57
  <button
55
58
  key={tab.id}
@@ -74,22 +77,14 @@ export function Dashboard() {
74
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">
75
78
  <h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
76
79
  <Identity
77
- address={address!}
80
+ address={address}
78
81
  showAvatar
79
82
  showAddress
80
83
  showBalance
81
- className="scale-110"
82
84
  />
83
- <div className="mt-6 flex gap-3">
84
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
85
- Send
86
- </button>
87
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
88
- Receive
89
- </button>
90
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
91
- Swap
92
- </button>
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" />
93
88
  </div>
94
89
  </div>
95
90
 
@@ -108,8 +103,8 @@ export function Dashboard() {
108
103
  <span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
109
104
  </div>
110
105
  <div className="flex items-center justify-between">
111
- <span className="text-gray-700 dark:text-gray-300">Gas Price</span>
112
- <span className="text-gray-900 dark:text-white font-semibold">~30 Gwei</span>
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>
113
108
  </div>
114
109
  </div>
115
110
  </div>
@@ -118,13 +113,14 @@ export function Dashboard() {
118
113
  {/* Quick Actions */}
119
114
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
120
115
  {[
121
- { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets' },
122
- { icon: '🔄', title: 'Swap', desc: 'Exchange tokens' },
123
- { icon: '🌉', title: 'Bridge', desc: 'Cross-chain transfer' },
124
- { icon: '📈', title: 'Stake', desc: 'Earn rewards' },
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' },
125
120
  ].map((action) => (
126
121
  <button
127
122
  key={action.title}
123
+ onClick={() => action.tab ? setActiveTab(action.tab as typeof activeTab) : window.open(action.link, '_blank')}
128
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"
129
125
  >
130
126
  <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">{action.icon}</div>
@@ -133,10 +129,107 @@ export function Dashboard() {
133
129
  </button>
134
130
  ))}
135
131
  </div>
132
+ </div>
133
+ )}
136
134
 
137
- {/* Recent Activity */}
135
+ {/* Components Showcase Tab */}
136
+ {activeTab === 'components' && (
137
+ <div className="space-y-6">
138
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-xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
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>
140
233
  <div className="space-y-4">
141
234
  {[
142
235
  { type: 'Received', amount: '100 MATIC', time: '2 mins ago' },
@@ -168,23 +261,21 @@ export function Dashboard() {
168
261
  </div>
169
262
  )}
170
263
 
171
- {/* Activity Tab */}
172
- {activeTab === 'activity' && (
173
- <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">
174
- <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Transaction History</h2>
175
- <p className="text-gray-600 dark:text-gray-400">Your transaction history will appear here.</p>
176
- </div>
177
- )}
178
-
179
- {/* Settings Tab */}
180
- {activeTab === 'settings' && (
181
- <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">
182
- <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Settings</h2>
183
- <div className="space-y-6">
184
- <div>
185
- <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Preferences</h3>
186
- <p className="text-gray-600 dark:text-gray-400">Configure your app settings here.</p>
187
- </div>
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
+ />
188
279
  </div>
189
280
  </div>
190
281
  )}
package/templates/remix/typescript/app/components/landing-page.tsx CHANGED
@@ -1,9 +1,22 @@
1
- import { ConnectWallet } from '@sanketsaagar/polygon-kit';
1
+
2
+ Wallet,
3
+ ConnectWallet,
4
+ WalletDropdown,
5
+ Identity,
6
+ Avatar,
7
+ Name,
8
+ TokenBalance,
9
+ TokenIcon,
10
+ TransactionButton,
11
+ Swap,
12
+ usePolygonKit,
13
+ } from '@sanketsaagar/polygon-kit';
14
+ import { useState } from 'react';
15
+ import { parseEther } from 'viem';
2
16
 
3
- export function LandingPage() {
17
+ function LandingPage() {
4
18
  return (
5
19
  <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
6
- {/* Hero Section */}
7
20
  <div className="container mx-auto px-4 py-16">
8
21
  <nav className="flex justify-between items-center mb-20">
9
22
  <div className="flex items-center space-x-2">
@@ -27,7 +40,7 @@ export function LandingPage() {
27
40
  <div className="flex gap-4 justify-center">
28
41
  <ConnectWallet />
29
42
  <a
30
- href="https://docs.polygonkit.com"
43
+ href="https://polygonlabs.mintlify.app"
31
44
  target="_blank"
32
45
  rel="noopener noreferrer"
33
46
  className="px-8 py-3 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-all duration-200"
@@ -133,3 +146,287 @@ export function LandingPage() {
133
146
  </div>
134
147
  );
135
148
  }
149
+
150
+ function Dashboard() {
151
+ const { address, isConnected, chainId } = usePolygonKit();
152
+ const [activeTab, setActiveTab] = useState<'overview' | 'components' | 'transactions' | 'swap'>('overview');
153
+ const [txHash, setTxHash] = useState<string>('');
154
+
155
+ const getNetworkName = (chainId?: number) => {
156
+ switch (chainId) {
157
+ case 137:
158
+ return 'Polygon PoS';
159
+ case 1101:
160
+ return 'Polygon zkEVM';
161
+ case 80002:
162
+ return 'Amoy Testnet';
163
+ default:
164
+ return 'Unknown Network';
165
+ }
166
+ };
167
+
168
+ if (!isConnected || !address) {
169
+ return <LandingPage />;
170
+ }
171
+
172
+ return (
173
+ <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">
174
+ {/* Header */}
175
+ <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">
176
+ <div className="container mx-auto px-4 py-4">
177
+ <div className="flex justify-between items-center">
178
+ <div className="flex items-center space-x-3">
179
+ <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
180
+ <div>
181
+ <h1 className="text-xl font-bold text-gray-900 dark:text-white">PolygonKit Showcase</h1>
182
+ <p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
183
+ </div>
184
+ </div>
185
+ <Wallet>
186
+ <WalletDropdown />
187
+ </Wallet>
188
+ </div>
189
+ </div>
190
+ </header>
191
+
192
+ <div className="container mx-auto px-4 py-8">
193
+ {/* Tabs */}
194
+ <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">
195
+ {[
196
+ { id: 'overview', label: 'Overview', icon: '📊' },
197
+ { id: 'components', label: 'Components', icon: '🧩' },
198
+ { id: 'transactions', label: 'Transactions', icon: '💸' },
199
+ { id: 'swap', label: 'Swap', icon: '🔄' },
200
+ ].map((tab) => (
201
+ <button
202
+ key={tab.id}
203
+ onClick={() => setActiveTab(tab.id as typeof activeTab)}
204
+ className={`px-6 py-2 rounded-md font-semibold transition-all duration-200 ${
205
+ activeTab === tab.id
206
+ ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
207
+ : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
208
+ }`}
209
+ >
210
+ <span className="mr-2">{tab.icon}</span>
211
+ {tab.label}
212
+ </button>
213
+ ))}
214
+ </div>
215
+
216
+ {/* Overview Tab */}
217
+ {activeTab === 'overview' && (
218
+ <div className="space-y-6">
219
+ {/* Wallet Overview */}
220
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
221
+ <div className="lg:col-span-2 bg-gradient-to-br from-purple-500 to-pink-500 p-8 rounded-2xl text-white shadow-xl">
222
+ <h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
223
+ <Identity
224
+ address={address}
225
+ showAvatar
226
+ showAddress
227
+ showBalance
228
+ />
229
+ <div className="mt-6 pt-6 border-t border-white/20">
230
+ <p className="text-sm opacity-75 mb-3">Native Balance</p>
231
+ <TokenBalance address={address} className="text-2xl font-bold" />
232
+ </div>
233
+ </div>
234
+
235
+ <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">
236
+ <h3 className="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-4">Network Status</h3>
237
+ <div className="space-y-4">
238
+ <div className="flex items-center justify-between">
239
+ <span className="text-gray-700 dark:text-gray-300">Status</span>
240
+ <span className="flex items-center gap-2 text-green-600 dark:text-green-400 font-semibold">
241
+ <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
242
+ Connected
243
+ </span>
244
+ </div>
245
+ <div className="flex items-center justify-between">
246
+ <span className="text-gray-700 dark:text-gray-300">Chain ID</span>
247
+ <span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
248
+ </div>
249
+ <div className="flex items-center justify-between">
250
+ <span className="text-gray-700 dark:text-gray-300">Network</span>
251
+ <span className="text-gray-900 dark:text-white font-semibold">{getNetworkName(chainId)}</span>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ {/* Quick Actions */}
258
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
259
+ {[
260
+ { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', tab: 'transactions' },
261
+ { icon: '🔄', title: 'Swap', desc: 'Exchange tokens', tab: 'swap' },
262
+ { icon: '🧩', title: 'Components', desc: 'Explore all features', tab: 'components' },
263
+ { icon: '📖', title: 'Documentation', desc: 'Learn more', link: 'https://polygonlabs.mintlify.app' },
264
+ ].map((action) => (
265
+ <button
266
+ key={action.title}
267
+ onClick={() => action.tab ? setActiveTab(action.tab as typeof activeTab) : window.open(action.link, '_blank')}
268
+ 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"
269
+ >
270
+ <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">{action.icon}</div>
271
+ <h3 className="font-bold text-gray-900 dark:text-white mb-1">{action.title}</h3>
272
+ <p className="text-sm text-gray-600 dark:text-gray-400">{action.desc}</p>
273
+ </button>
274
+ ))}
275
+ </div>
276
+ </div>
277
+ )}
278
+
279
+ {/* Components Showcase Tab */}
280
+ {activeTab === 'components' && (
281
+ <div className="space-y-6">
282
+ <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">
283
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Identity Components</h2>
284
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
285
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
286
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Full Identity</h3>
287
+ <Identity address={address} showAvatar showAddress showBalance />
288
+ </div>
289
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
290
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Avatar Only</h3>
291
+ <div className="flex items-center gap-4">
292
+ <Avatar address={address} size={48} />
293
+ <Avatar address={address} size={64} />
294
+ <Avatar address={address} size={80} />
295
+ </div>
296
+ </div>
297
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
298
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Name/Address</h3>
299
+ <Name address={address} />
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <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">
305
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Components</h2>
306
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
307
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
308
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
309
+ <div className="space-y-3">
310
+ <div className="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg">
311
+ <span className="text-gray-600 dark:text-gray-400">Native (MATIC)</span>
312
+ <TokenBalance address={address} />
313
+ </div>
314
+ </div>
315
+ </div>
316
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
317
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
318
+ <div className="flex items-center gap-4">
319
+ <div className="text-center">
320
+ <TokenIcon symbol="MATIC" size={32} />
321
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">MATIC</p>
322
+ </div>
323
+ <div className="text-center">
324
+ <TokenIcon symbol="ETH" size={32} />
325
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">ETH</p>
326
+ </div>
327
+ <div className="text-center">
328
+ <TokenIcon symbol="USDC" size={32} />
329
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">USDC</p>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ )}
337
+
338
+ {/* Transactions Tab */}
339
+ {activeTab === 'transactions' && (
340
+ <div className="space-y-6">
341
+ <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">
342
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
343
+ <p className="text-gray-600 dark:text-gray-400 mb-6">
344
+ Send 0.001 MATIC to a recipient address. Replace the address below with your test address.
345
+ </p>
346
+ <TransactionButton
347
+ text="Send 0.001 MATIC"
348
+ calls={[
349
+ {
350
+ to: address, // Sending to self for demo
351
+ value: parseEther('0.001'),
352
+ },
353
+ ]}
354
+ onSuccess={(hash) => {
355
+ console.log('Transaction successful:', hash);
356
+ setTxHash(hash);
357
+ }}
358
+ onError={(error) => {
359
+ console.error('Transaction failed:', error);
360
+ alert('Transaction failed: ' + error.message);
361
+ }}
362
+ 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"
363
+ />
364
+
365
+ {txHash && (
366
+ <div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
367
+ <p className="font-semibold text-green-900 dark:text-green-100 mb-2">Transaction Sent!</p>
368
+ <p className="text-sm text-green-700 dark:text-green-300 break-all">
369
+ Hash: {txHash}
370
+ </p>
371
+ </div>
372
+ )}
373
+ </div>
374
+
375
+ <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">
376
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
377
+ <div className="space-y-4">
378
+ {[
379
+ { type: 'Received', amount: '100 MATIC', time: '2 mins ago' },
380
+ { type: 'Sent', amount: '50 MATIC', time: '1 hour ago' },
381
+ { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago' },
382
+ ].map((tx, idx) => (
383
+ <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
384
+ <div className="flex items-center gap-4">
385
+ <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
386
+ tx.type === 'Received' ? 'bg-green-100 dark:bg-green-900/30' :
387
+ tx.type === 'Sent' ? 'bg-red-100 dark:bg-red-900/30' :
388
+ 'bg-blue-100 dark:bg-blue-900/30'
389
+ }`}>
390
+ {tx.type === 'Received' ? '↓' : tx.type === 'Sent' ? '↑' : '↔'}
391
+ </div>
392
+ <div>
393
+ <p className="font-semibold text-gray-900 dark:text-white">{tx.type}</p>
394
+ <p className="text-sm text-gray-600 dark:text-gray-400">{tx.amount}</p>
395
+ </div>
396
+ </div>
397
+ <div className="text-right">
398
+ <p className="text-sm text-gray-600 dark:text-gray-400">{tx.time}</p>
399
+ <span className="text-xs text-green-600 dark:text-green-400">✓ Confirmed</span>
400
+ </div>
401
+ </div>
402
+ ))}
403
+ </div>
404
+ </div>
405
+ </div>
406
+ )}
407
+
408
+ {/* Swap Tab */}
409
+ {activeTab === 'swap' && (
410
+ <div className="max-w-2xl mx-auto">
411
+ <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">
412
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Swap</h2>
413
+ <Swap
414
+ onSuccess={(hash) => {
415
+ console.log('Swap successful:', hash);
416
+ alert('Swap successful! Hash: ' + hash);
417
+ }}
418
+ onError={(error) => {
419
+ console.error('Swap failed:', error);
420
+ alert('Swap failed: ' + error.message);
421
+ }}
422
+ />
423
+ </div>
424
+ </div>
425
+ )}
426
+ </div>
427
+ </div>
428
+ );
429
+ }
430
+
431
+ function AppContent() {
432
+ const { isConnected } = usePolygonKit();
package/templates/vite/typescript/src/App.tsx CHANGED
@@ -4,15 +4,20 @@ import {
4
4
  ConnectWallet,
5
5
  WalletDropdown,
6
6
  Identity,
7
+ Avatar,
8
+ Name,
9
+ TokenBalance,
10
+ TokenIcon,
11
+ TransactionButton,
12
+ Swap,
7
13
  usePolygonKit,
8
14
  } from '@sanketsaagar/polygon-kit';
9
15
  import { useState } from 'react';
10
- import './App.css';
16
+ import { parseEther } from 'viem';
11
17
 
12
18
  function LandingPage() {
13
19
  return (
14
20
  <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
15
- {/* Hero Section */}
16
21
  <div className="container mx-auto px-4 py-16">
17
22
  <nav className="flex justify-between items-center mb-20">
18
23
  <div className="flex items-center space-x-2">
@@ -36,7 +41,7 @@ function LandingPage() {
36
41
  <div className="flex gap-4 justify-center">
37
42
  <ConnectWallet />
38
43
  <a
39
- href="https://docs.polygonkit.com"
44
+ href="https://polygonlabs.mintlify.app"
40
45
  target="_blank"
41
46
  rel="noopener noreferrer"
42
47
  className="px-8 py-3 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-all duration-200"
@@ -144,8 +149,9 @@ function LandingPage() {
144
149
  }
145
150
 
146
151
  function Dashboard() {
147
- const { address, chainId } = usePolygonKit();
148
- const [activeTab, setActiveTab] = useState<'overview' | 'activity' | 'settings'>('overview');
152
+ const { address, isConnected, chainId } = usePolygonKit();
153
+ const [activeTab, setActiveTab] = useState<'overview' | 'components' | 'transactions' | 'swap'>('overview');
154
+ const [txHash, setTxHash] = useState<string>('');
149
155
 
150
156
  const getNetworkName = (chainId?: number) => {
151
157
  switch (chainId) {
@@ -160,6 +166,10 @@ function Dashboard() {
160
166
  }
161
167
  };
162
168
 
169
+ if (!isConnected || !address) {
170
+ return <LandingPage />;
171
+ }
172
+
163
173
  return (
164
174
  <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">
165
175
  {/* Header */}
@@ -169,7 +179,7 @@ function Dashboard() {
169
179
  <div className="flex items-center space-x-3">
170
180
  <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
171
181
  <div>
172
- <h1 className="text-xl font-bold text-gray-900 dark:text-white">My Polygon App</h1>
182
+ <h1 className="text-xl font-bold text-gray-900 dark:text-white">PolygonKit Showcase</h1>
173
183
  <p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
174
184
  </div>
175
185
  </div>
@@ -182,11 +192,12 @@ function Dashboard() {
182
192
 
183
193
  <div className="container mx-auto px-4 py-8">
184
194
  {/* Tabs */}
185
- <div className="flex space-x-2 mb-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-1 rounded-lg w-fit">
195
+ <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">
186
196
  {[
187
197
  { id: 'overview', label: 'Overview', icon: '📊' },
188
- { id: 'activity', label: 'Activity', icon: '⚡' },
189
- { id: 'settings', label: 'Settings', icon: '⚙️' },
198
+ { id: 'components', label: 'Components', icon: '🧩' },
199
+ { id: 'transactions', label: 'Transactions', icon: '💸' },
200
+ { id: 'swap', label: 'Swap', icon: '🔄' },
190
201
  ].map((tab) => (
191
202
  <button
192
203
  key={tab.id}
@@ -211,22 +222,14 @@ function Dashboard() {
211
222
  <div className="lg:col-span-2 bg-gradient-to-br from-purple-500 to-pink-500 p-8 rounded-2xl text-white shadow-xl">
212
223
  <h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
213
224
  <Identity
214
- address={address!}
225
+ address={address}
215
226
  showAvatar
216
227
  showAddress
217
228
  showBalance
218
- className="scale-110"
219
229
  />
220
- <div className="mt-6 flex gap-3">
221
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
222
- Send
223
- </button>
224
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
225
- Receive
226
- </button>
227
- <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
228
- Swap
229
- </button>
230
+ <div className="mt-6 pt-6 border-t border-white/20">
231
+ <p className="text-sm opacity-75 mb-3">Native Balance</p>
232
+ <TokenBalance address={address} className="text-2xl font-bold" />
230
233
  </div>
231
234
  </div>
232
235
 
@@ -245,8 +248,8 @@ function Dashboard() {
245
248
  <span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
246
249
  </div>
247
250
  <div className="flex items-center justify-between">
248
- <span className="text-gray-700 dark:text-gray-300">Gas Price</span>
249
- <span className="text-gray-900 dark:text-white font-semibold">~30 Gwei</span>
251
+ <span className="text-gray-700 dark:text-gray-300">Network</span>
252
+ <span className="text-gray-900 dark:text-white font-semibold">{getNetworkName(chainId)}</span>
250
253
  </div>
251
254
  </div>
252
255
  </div>
@@ -255,30 +258,128 @@ function Dashboard() {
255
258
  {/* Quick Actions */}
256
259
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
257
260
  {[
258
- { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', color: 'from-blue-500 to-cyan-500' },
259
- { icon: '🔄', title: 'Swap', desc: 'Exchange tokens', color: 'from-purple-500 to-pink-500' },
260
- { icon: '🌉', title: 'Bridge', desc: 'Cross-chain transfer', color: 'from-orange-500 to-red-500' },
261
- { icon: '📈', title: 'Stake', desc: 'Earn rewards', color: 'from-green-500 to-emerald-500' },
261
+ { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', tab: 'transactions' },
262
+ { icon: '🔄', title: 'Swap', desc: 'Exchange tokens', tab: 'swap' },
263
+ { icon: '🧩', title: 'Components', desc: 'Explore all features', tab: 'components' },
264
+ { icon: '📖', title: 'Documentation', desc: 'Learn more', link: 'https://polygonlabs.mintlify.app' },
262
265
  ].map((action) => (
263
266
  <button
264
267
  key={action.title}
268
+ onClick={() => action.tab ? setActiveTab(action.tab as typeof activeTab) : window.open(action.link, '_blank')}
265
269
  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"
266
270
  >
267
- <div className={`text-4xl mb-3 group-hover:scale-110 transition-transform`}>{action.icon}</div>
271
+ <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">{action.icon}</div>
268
272
  <h3 className="font-bold text-gray-900 dark:text-white mb-1">{action.title}</h3>
269
273
  <p className="text-sm text-gray-600 dark:text-gray-400">{action.desc}</p>
270
274
  </button>
271
275
  ))}
272
276
  </div>
277
+ </div>
278
+ )}
279
+
280
+ {/* Components Showcase Tab */}
281
+ {activeTab === 'components' && (
282
+ <div className="space-y-6">
283
+ <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">
284
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Identity Components</h2>
285
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
286
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
287
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Full Identity</h3>
288
+ <Identity address={address} showAvatar showAddress showBalance />
289
+ </div>
290
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
291
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Avatar Only</h3>
292
+ <div className="flex items-center gap-4">
293
+ <Avatar address={address} size={48} />
294
+ <Avatar address={address} size={64} />
295
+ <Avatar address={address} size={80} />
296
+ </div>
297
+ </div>
298
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
299
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Name/Address</h3>
300
+ <Name address={address} />
301
+ </div>
302
+ </div>
303
+ </div>
273
304
 
274
- {/* Recent Activity */}
275
305
  <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">
276
- <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
306
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Components</h2>
307
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
308
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
309
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
310
+ <div className="space-y-3">
311
+ <div className="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg">
312
+ <span className="text-gray-600 dark:text-gray-400">Native (MATIC)</span>
313
+ <TokenBalance address={address} />
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
318
+ <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
319
+ <div className="flex items-center gap-4">
320
+ <div className="text-center">
321
+ <TokenIcon symbol="MATIC" size={32} />
322
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">MATIC</p>
323
+ </div>
324
+ <div className="text-center">
325
+ <TokenIcon symbol="ETH" size={32} />
326
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">ETH</p>
327
+ </div>
328
+ <div className="text-center">
329
+ <TokenIcon symbol="USDC" size={32} />
330
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">USDC</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ )}
338
+
339
+ {/* Transactions Tab */}
340
+ {activeTab === 'transactions' && (
341
+ <div className="space-y-6">
342
+ <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">
343
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
344
+ <p className="text-gray-600 dark:text-gray-400 mb-6">
345
+ Send 0.001 MATIC to a recipient address. Replace the address below with your test address.
346
+ </p>
347
+ <TransactionButton
348
+ text="Send 0.001 MATIC"
349
+ calls={[
350
+ {
351
+ to: address, // Sending to self for demo
352
+ value: parseEther('0.001'),
353
+ },
354
+ ]}
355
+ onSuccess={(hash) => {
356
+ console.log('Transaction successful:', hash);
357
+ setTxHash(hash);
358
+ }}
359
+ onError={(error) => {
360
+ console.error('Transaction failed:', error);
361
+ alert('Transaction failed: ' + error.message);
362
+ }}
363
+ 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"
364
+ />
365
+
366
+ {txHash && (
367
+ <div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
368
+ <p className="font-semibold text-green-900 dark:text-green-100 mb-2">Transaction Sent!</p>
369
+ <p className="text-sm text-green-700 dark:text-green-300 break-all">
370
+ Hash: {txHash}
371
+ </p>
372
+ </div>
373
+ )}
374
+ </div>
375
+
376
+ <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">
377
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
277
378
  <div className="space-y-4">
278
379
  {[
279
- { type: 'Received', amount: '100 MATIC', time: '2 mins ago', status: 'success' },
280
- { type: 'Sent', amount: '50 MATIC', time: '1 hour ago', status: 'success' },
281
- { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago', status: 'success' },
380
+ { type: 'Received', amount: '100 MATIC', time: '2 mins ago' },
381
+ { type: 'Sent', amount: '50 MATIC', time: '1 hour ago' },
382
+ { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago' },
282
383
  ].map((tx, idx) => (
283
384
  <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
284
385
  <div className="flex items-center gap-4">
@@ -305,23 +406,21 @@ function Dashboard() {
305
406
  </div>
306
407
  )}
307
408
 
308
- {/* Activity Tab */}
309
- {activeTab === 'activity' && (
310
- <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">
311
- <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Transaction History</h2>
312
- <p className="text-gray-600 dark:text-gray-400">Your transaction history will appear here.</p>
313
- </div>
314
- )}
315
-
316
- {/* Settings Tab */}
317
- {activeTab === 'settings' && (
318
- <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">
319
- <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Settings</h2>
320
- <div className="space-y-6">
321
- <div>
322
- <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Preferences</h3>
323
- <p className="text-gray-600 dark:text-gray-400">Configure your app settings here.</p>
324
- </div>
409
+ {/* Swap Tab */}
410
+ {activeTab === 'swap' && (
411
+ <div className="max-w-2xl mx-auto">
412
+ <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">
413
+ <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Swap</h2>
414
+ <Swap
415
+ onSuccess={(hash) => {
416
+ console.log('Swap successful:', hash);
417
+ alert('Swap successful! Hash: ' + hash);
418
+ }}
419
+ onError={(error) => {
420
+ console.error('Swap failed:', error);
421
+ alert('Swap failed: ' + error.message);
422
+ }}
423
+ />
325
424
  </div>
326
425
  </div>
327
426
  )}
@@ -336,18 +435,12 @@ function AppContent() {
336
435
  return isConnected ? <Dashboard /> : <LandingPage />;
337
436
  }
338
437
 
339
- function App() {
438
+ export default function App() {
340
439
  const projectId = import.meta.env.VITE_REOWN_PROJECT_ID;
341
440
 
342
441
  return (
343
- <PolygonKitProvider
344
- config={{
345
- projectId,
346
- }}
347
- >
442
+ <PolygonKitProvider config={{ projectId }}>
348
443
  <AppContent />
349
444
  </PolygonKitProvider>
350
445
  );
351
446
  }
352
-
353
- export default App;