create-polygon-kit 0.1.1 → 0.2.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/package.json +1 -1
- package/templates/nextjs/typescript/.env.local.example +2 -0
- package/templates/nextjs/typescript/README.md +20 -1
- package/templates/nextjs/typescript/app/page.tsx +308 -49
- package/templates/nextjs/typescript/app/providers.tsx +11 -1
- package/templates/nextjs/typescript/package.json +1 -0
- package/templates/nextjs/typescript/postcss.config.js +1 -1
- package/templates/vite/typescript/.env.example +2 -0
- package/templates/vite/typescript/README.md +20 -1
- package/templates/vite/typescript/src/App.tsx +316 -51
package/package.json
CHANGED
|
@@ -4,7 +4,26 @@ This project was created with [create-polygon-kit](https://github.com/sanketsaag
|
|
|
4
4
|
|
|
5
5
|
## Getting Started
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### 1. Set up your Reown Project ID
|
|
8
|
+
|
|
9
|
+
This app uses Reown (formerly WalletConnect) for wallet connections. You'll need a free project ID:
|
|
10
|
+
|
|
11
|
+
1. Go to [cloud.reown.com](https://cloud.reown.com) and create a free account
|
|
12
|
+
2. Create a new project
|
|
13
|
+
3. Copy your Project ID
|
|
14
|
+
4. Create a `.env.local` file in the root directory:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
cp .env.local.example .env.local
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
5. Add your project ID to `.env.local`:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
NEXT_PUBLIC_REOWN_PROJECT_ID=your_project_id_here
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 2. Run the development server
|
|
8
27
|
|
|
9
28
|
```bash
|
|
10
29
|
npm run dev
|
|
@@ -7,72 +7,331 @@ import {
|
|
|
7
7
|
Identity,
|
|
8
8
|
usePolygonKit,
|
|
9
9
|
} from '@sanketsaagar/polygon-kit';
|
|
10
|
+
import { useState } from 'react';
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
</
|
|
12
|
+
function LandingPage() {
|
|
13
|
+
return (
|
|
14
|
+
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
|
|
15
|
+
{/* Hero Section */}
|
|
16
|
+
<div className="container mx-auto px-4 py-16">
|
|
17
|
+
<nav className="flex justify-between items-center mb-20">
|
|
18
|
+
<div className="flex items-center space-x-2">
|
|
19
|
+
<div className="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg" />
|
|
20
|
+
<span className="text-2xl font-bold text-white">PolygonKit</span>
|
|
21
|
+
</div>
|
|
21
22
|
<ConnectWallet />
|
|
22
|
-
</
|
|
23
|
-
</div>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
23
|
+
</nav>
|
|
26
24
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
<div className="text-center max-w-4xl mx-auto mb-20">
|
|
26
|
+
<h1 className="text-6xl font-bold text-white mb-6 leading-tight">
|
|
27
|
+
Build Amazing Web3 Apps
|
|
28
|
+
<span className="block bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
|
|
29
|
+
On Polygon
|
|
30
|
+
</span>
|
|
33
31
|
</h1>
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
showBalance
|
|
49
|
-
/>
|
|
32
|
+
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
33
|
+
The fastest way to create decentralized applications with React components,
|
|
34
|
+
TypeScript utilities, and Web3 primitives.
|
|
35
|
+
</p>
|
|
36
|
+
<div className="flex gap-4 justify-center">
|
|
37
|
+
<ConnectWallet />
|
|
38
|
+
<a
|
|
39
|
+
href="https://docs.polygonkit.com"
|
|
40
|
+
target="_blank"
|
|
41
|
+
rel="noopener noreferrer"
|
|
42
|
+
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"
|
|
43
|
+
>
|
|
44
|
+
View Docs
|
|
45
|
+
</a>
|
|
50
46
|
</div>
|
|
47
|
+
</div>
|
|
51
48
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
49
|
+
{/* Network Badges */}
|
|
50
|
+
<div className="flex flex-wrap justify-center gap-4 mb-20">
|
|
51
|
+
{[
|
|
52
|
+
{ name: 'Polygon PoS', color: 'from-purple-500 to-purple-600' },
|
|
53
|
+
{ name: 'Polygon zkEVM', color: 'from-blue-500 to-blue-600' },
|
|
54
|
+
{ name: 'Amoy Testnet', color: 'from-pink-500 to-pink-600' },
|
|
55
|
+
].map((network) => (
|
|
56
|
+
<div
|
|
57
|
+
key={network.name}
|
|
58
|
+
className={`px-6 py-3 bg-gradient-to-r ${network.color} rounded-full text-white font-semibold shadow-lg`}
|
|
59
|
+
>
|
|
60
|
+
{network.name}
|
|
61
|
+
</div>
|
|
62
|
+
))}
|
|
60
63
|
</div>
|
|
61
64
|
|
|
62
|
-
|
|
65
|
+
{/* Features Grid */}
|
|
66
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
|
|
67
|
+
{[
|
|
68
|
+
{
|
|
69
|
+
icon: '⚡',
|
|
70
|
+
title: 'Lightning Fast',
|
|
71
|
+
description: 'Build and deploy in minutes with pre-built components and hooks',
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
icon: '🔒',
|
|
75
|
+
title: 'Secure by Default',
|
|
76
|
+
description: 'Battle-tested wallet connections and transaction handling',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
icon: '🎨',
|
|
80
|
+
title: 'Beautiful UI',
|
|
81
|
+
description: 'Modern, responsive components that work out of the box',
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
icon: '🔗',
|
|
85
|
+
title: 'Multi-Chain',
|
|
86
|
+
description: 'Support for Polygon PoS, zkEVM, and more chains',
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
icon: '📱',
|
|
90
|
+
title: 'Mobile Ready',
|
|
91
|
+
description: 'Responsive design that works on all devices',
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
icon: '🛠️',
|
|
95
|
+
title: 'Developer First',
|
|
96
|
+
description: 'TypeScript support, great DX, and detailed documentation',
|
|
97
|
+
},
|
|
98
|
+
].map((feature) => (
|
|
99
|
+
<div
|
|
100
|
+
key={feature.title}
|
|
101
|
+
className="p-8 bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 hover:bg-white/10 transition-all duration-300 hover:scale-105"
|
|
102
|
+
>
|
|
103
|
+
<div className="text-4xl mb-4">{feature.icon}</div>
|
|
104
|
+
<h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
|
|
105
|
+
<p className="text-gray-300">{feature.description}</p>
|
|
106
|
+
</div>
|
|
107
|
+
))}
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
{/* Stats */}
|
|
111
|
+
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
|
112
|
+
{[
|
|
113
|
+
{ label: 'Components', value: '20+' },
|
|
114
|
+
{ label: 'Networks', value: '3' },
|
|
115
|
+
{ label: 'Developers', value: '1000+' },
|
|
116
|
+
{ label: 'Open Source', value: '100%' },
|
|
117
|
+
].map((stat) => (
|
|
118
|
+
<div key={stat.label} className="text-center">
|
|
119
|
+
<div className="text-4xl font-bold text-white mb-2">{stat.value}</div>
|
|
120
|
+
<div className="text-gray-400">{stat.label}</div>
|
|
121
|
+
</div>
|
|
122
|
+
))}
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
{/* Footer */}
|
|
127
|
+
<footer className="border-t border-white/10 py-8">
|
|
128
|
+
<div className="container mx-auto px-4 text-center text-gray-400">
|
|
63
129
|
<p>
|
|
64
|
-
Built with{' '}
|
|
130
|
+
Built with ❤️ for the Polygon community •{' '}
|
|
65
131
|
<a
|
|
66
|
-
href="https://
|
|
132
|
+
href="https://github.com/sanketsaagar/polygonKit"
|
|
67
133
|
target="_blank"
|
|
68
134
|
rel="noopener noreferrer"
|
|
69
|
-
className="text-purple-
|
|
135
|
+
className="text-purple-400 hover:text-purple-300"
|
|
70
136
|
>
|
|
71
|
-
|
|
137
|
+
View on GitHub
|
|
72
138
|
</a>
|
|
73
139
|
</p>
|
|
74
140
|
</div>
|
|
141
|
+
</footer>
|
|
142
|
+
</div>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
function Dashboard() {
|
|
147
|
+
const { address, isConnected, chainId } = usePolygonKit();
|
|
148
|
+
const [activeTab, setActiveTab] = useState<'overview' | 'activity' | 'settings'>('overview');
|
|
149
|
+
|
|
150
|
+
const getNetworkName = (chainId?: number) => {
|
|
151
|
+
switch (chainId) {
|
|
152
|
+
case 137:
|
|
153
|
+
return 'Polygon PoS';
|
|
154
|
+
case 1101:
|
|
155
|
+
return 'Polygon zkEVM';
|
|
156
|
+
case 80002:
|
|
157
|
+
return 'Amoy Testnet';
|
|
158
|
+
default:
|
|
159
|
+
return 'Unknown Network';
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
return (
|
|
164
|
+
<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
|
+
{/* Header */}
|
|
166
|
+
<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">
|
|
167
|
+
<div className="container mx-auto px-4 py-4">
|
|
168
|
+
<div className="flex justify-between items-center">
|
|
169
|
+
<div className="flex items-center space-x-3">
|
|
170
|
+
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
|
|
171
|
+
<div>
|
|
172
|
+
<h1 className="text-xl font-bold text-gray-900 dark:text-white">My Polygon App</h1>
|
|
173
|
+
<p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
<Wallet>
|
|
177
|
+
<WalletDropdown />
|
|
178
|
+
</Wallet>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</header>
|
|
182
|
+
|
|
183
|
+
<div className="container mx-auto px-4 py-8">
|
|
184
|
+
{/* 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">
|
|
186
|
+
{[
|
|
187
|
+
{ id: 'overview', label: 'Overview', icon: '📊' },
|
|
188
|
+
{ id: 'activity', label: 'Activity', icon: '⚡' },
|
|
189
|
+
{ id: 'settings', label: 'Settings', icon: '⚙️' },
|
|
190
|
+
].map((tab) => (
|
|
191
|
+
<button
|
|
192
|
+
key={tab.id}
|
|
193
|
+
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
|
194
|
+
className={`px-6 py-2 rounded-md font-semibold transition-all duration-200 ${
|
|
195
|
+
activeTab === tab.id
|
|
196
|
+
? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
|
|
197
|
+
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
198
|
+
}`}
|
|
199
|
+
>
|
|
200
|
+
<span className="mr-2">{tab.icon}</span>
|
|
201
|
+
{tab.label}
|
|
202
|
+
</button>
|
|
203
|
+
))}
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
{/* Overview Tab */}
|
|
207
|
+
{activeTab === 'overview' && (
|
|
208
|
+
<div className="space-y-6">
|
|
209
|
+
{/* Wallet Overview */}
|
|
210
|
+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
211
|
+
<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
|
+
<h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
|
|
213
|
+
<Identity
|
|
214
|
+
address={address!}
|
|
215
|
+
showAvatar
|
|
216
|
+
showAddress
|
|
217
|
+
showBalance
|
|
218
|
+
className="scale-110"
|
|
219
|
+
/>
|
|
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>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<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">
|
|
234
|
+
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-4">Network Status</h3>
|
|
235
|
+
<div className="space-y-4">
|
|
236
|
+
<div className="flex items-center justify-between">
|
|
237
|
+
<span className="text-gray-700 dark:text-gray-300">Status</span>
|
|
238
|
+
<span className="flex items-center gap-2 text-green-600 dark:text-green-400 font-semibold">
|
|
239
|
+
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
|
240
|
+
Connected
|
|
241
|
+
</span>
|
|
242
|
+
</div>
|
|
243
|
+
<div className="flex items-center justify-between">
|
|
244
|
+
<span className="text-gray-700 dark:text-gray-300">Chain ID</span>
|
|
245
|
+
<span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
|
|
246
|
+
</div>
|
|
247
|
+
<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>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
|
|
255
|
+
{/* Quick Actions */}
|
|
256
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
257
|
+
{[
|
|
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
|
+
].map((action) => (
|
|
263
|
+
<button
|
|
264
|
+
key={action.title}
|
|
265
|
+
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
|
+
>
|
|
267
|
+
<div className={`text-4xl mb-3 group-hover:scale-110 transition-transform`}>{action.icon}</div>
|
|
268
|
+
<h3 className="font-bold text-gray-900 dark:text-white mb-1">{action.title}</h3>
|
|
269
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{action.desc}</p>
|
|
270
|
+
</button>
|
|
271
|
+
))}
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
{/* Recent Activity */}
|
|
275
|
+
<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>
|
|
277
|
+
<div className="space-y-4">
|
|
278
|
+
{[
|
|
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' },
|
|
282
|
+
].map((tx, idx) => (
|
|
283
|
+
<div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
|
284
|
+
<div className="flex items-center gap-4">
|
|
285
|
+
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
|
286
|
+
tx.type === 'Received' ? 'bg-green-100 dark:bg-green-900/30' :
|
|
287
|
+
tx.type === 'Sent' ? 'bg-red-100 dark:bg-red-900/30' :
|
|
288
|
+
'bg-blue-100 dark:bg-blue-900/30'
|
|
289
|
+
}`}>
|
|
290
|
+
{tx.type === 'Received' ? '↓' : tx.type === 'Sent' ? '↑' : '↔'}
|
|
291
|
+
</div>
|
|
292
|
+
<div>
|
|
293
|
+
<p className="font-semibold text-gray-900 dark:text-white">{tx.type}</p>
|
|
294
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{tx.amount}</p>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
<div className="text-right">
|
|
298
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{tx.time}</p>
|
|
299
|
+
<span className="text-xs text-green-600 dark:text-green-400">✓ Confirmed</span>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
))}
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
)}
|
|
307
|
+
|
|
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>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
)}
|
|
75
328
|
</div>
|
|
76
329
|
</div>
|
|
77
330
|
);
|
|
78
331
|
}
|
|
332
|
+
|
|
333
|
+
export default function Home() {
|
|
334
|
+
const { isConnected } = usePolygonKit();
|
|
335
|
+
|
|
336
|
+
return isConnected ? <Dashboard /> : <LandingPage />;
|
|
337
|
+
}
|
|
@@ -3,5 +3,15 @@
|
|
|
3
3
|
import { PolygonKitProvider } from '@sanketsaagar/polygon-kit';
|
|
4
4
|
|
|
5
5
|
export function Providers({ children }: { children: React.ReactNode }) {
|
|
6
|
-
|
|
6
|
+
const projectId = process.env.NEXT_PUBLIC_REOWN_PROJECT_ID;
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<PolygonKitProvider
|
|
10
|
+
config={{
|
|
11
|
+
projectId,
|
|
12
|
+
}}
|
|
13
|
+
>
|
|
14
|
+
{children}
|
|
15
|
+
</PolygonKitProvider>
|
|
16
|
+
);
|
|
7
17
|
}
|
|
@@ -4,7 +4,26 @@ This project was created with [create-polygon-kit](https://github.com/sanketsaag
|
|
|
4
4
|
|
|
5
5
|
## Getting Started
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### 1. Set up your Reown Project ID
|
|
8
|
+
|
|
9
|
+
This app uses Reown (formerly WalletConnect) for wallet connections. You'll need a free project ID:
|
|
10
|
+
|
|
11
|
+
1. Go to [cloud.reown.com](https://cloud.reown.com) and create a free account
|
|
12
|
+
2. Create a new project
|
|
13
|
+
3. Copy your Project ID
|
|
14
|
+
4. Create a `.env` file in the root directory:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
cp .env.example .env
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
5. Add your project ID to `.env`:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
VITE_REOWN_PROJECT_ID=your_project_id_here
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 2. Run the development server
|
|
8
27
|
|
|
9
28
|
```bash
|
|
10
29
|
npm run dev
|
|
@@ -6,81 +6,346 @@ import {
|
|
|
6
6
|
Identity,
|
|
7
7
|
usePolygonKit,
|
|
8
8
|
} from '@sanketsaagar/polygon-kit';
|
|
9
|
+
import { useState } from 'react';
|
|
9
10
|
import './App.css';
|
|
10
11
|
|
|
11
|
-
function
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
</
|
|
12
|
+
function LandingPage() {
|
|
13
|
+
return (
|
|
14
|
+
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
|
|
15
|
+
{/* Hero Section */}
|
|
16
|
+
<div className="container mx-auto px-4 py-16">
|
|
17
|
+
<nav className="flex justify-between items-center mb-20">
|
|
18
|
+
<div className="flex items-center space-x-2">
|
|
19
|
+
<div className="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg" />
|
|
20
|
+
<span className="text-2xl font-bold text-white">PolygonKit</span>
|
|
21
|
+
</div>
|
|
21
22
|
<ConnectWallet />
|
|
22
|
-
</
|
|
23
|
-
</div>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
23
|
+
</nav>
|
|
26
24
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
<div className="text-center max-w-4xl mx-auto mb-20">
|
|
26
|
+
<h1 className="text-6xl font-bold text-white mb-6 leading-tight">
|
|
27
|
+
Build Amazing Web3 Apps
|
|
28
|
+
<span className="block bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
|
|
29
|
+
On Polygon
|
|
30
|
+
</span>
|
|
33
31
|
</h1>
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
showBalance
|
|
49
|
-
/>
|
|
32
|
+
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
33
|
+
The fastest way to create decentralized applications with React components,
|
|
34
|
+
TypeScript utilities, and Web3 primitives.
|
|
35
|
+
</p>
|
|
36
|
+
<div className="flex gap-4 justify-center">
|
|
37
|
+
<ConnectWallet />
|
|
38
|
+
<a
|
|
39
|
+
href="https://docs.polygonkit.com"
|
|
40
|
+
target="_blank"
|
|
41
|
+
rel="noopener noreferrer"
|
|
42
|
+
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"
|
|
43
|
+
>
|
|
44
|
+
View Docs
|
|
45
|
+
</a>
|
|
50
46
|
</div>
|
|
47
|
+
</div>
|
|
51
48
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
49
|
+
{/* Network Badges */}
|
|
50
|
+
<div className="flex flex-wrap justify-center gap-4 mb-20">
|
|
51
|
+
{[
|
|
52
|
+
{ name: 'Polygon PoS', color: 'from-purple-500 to-purple-600' },
|
|
53
|
+
{ name: 'Polygon zkEVM', color: 'from-blue-500 to-blue-600' },
|
|
54
|
+
{ name: 'Amoy Testnet', color: 'from-pink-500 to-pink-600' },
|
|
55
|
+
].map((network) => (
|
|
56
|
+
<div
|
|
57
|
+
key={network.name}
|
|
58
|
+
className={`px-6 py-3 bg-gradient-to-r ${network.color} rounded-full text-white font-semibold shadow-lg`}
|
|
59
|
+
>
|
|
60
|
+
{network.name}
|
|
61
|
+
</div>
|
|
62
|
+
))}
|
|
60
63
|
</div>
|
|
61
64
|
|
|
62
|
-
|
|
65
|
+
{/* Features Grid */}
|
|
66
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
|
|
67
|
+
{[
|
|
68
|
+
{
|
|
69
|
+
icon: '⚡',
|
|
70
|
+
title: 'Lightning Fast',
|
|
71
|
+
description: 'Build and deploy in minutes with pre-built components and hooks',
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
icon: '🔒',
|
|
75
|
+
title: 'Secure by Default',
|
|
76
|
+
description: 'Battle-tested wallet connections and transaction handling',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
icon: '🎨',
|
|
80
|
+
title: 'Beautiful UI',
|
|
81
|
+
description: 'Modern, responsive components that work out of the box',
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
icon: '🔗',
|
|
85
|
+
title: 'Multi-Chain',
|
|
86
|
+
description: 'Support for Polygon PoS, zkEVM, and more chains',
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
icon: '📱',
|
|
90
|
+
title: 'Mobile Ready',
|
|
91
|
+
description: 'Responsive design that works on all devices',
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
icon: '🛠️',
|
|
95
|
+
title: 'Developer First',
|
|
96
|
+
description: 'TypeScript support, great DX, and detailed documentation',
|
|
97
|
+
},
|
|
98
|
+
].map((feature) => (
|
|
99
|
+
<div
|
|
100
|
+
key={feature.title}
|
|
101
|
+
className="p-8 bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 hover:bg-white/10 transition-all duration-300 hover:scale-105"
|
|
102
|
+
>
|
|
103
|
+
<div className="text-4xl mb-4">{feature.icon}</div>
|
|
104
|
+
<h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
|
|
105
|
+
<p className="text-gray-300">{feature.description}</p>
|
|
106
|
+
</div>
|
|
107
|
+
))}
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
{/* Stats */}
|
|
111
|
+
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
|
112
|
+
{[
|
|
113
|
+
{ label: 'Components', value: '20+' },
|
|
114
|
+
{ label: 'Networks', value: '3' },
|
|
115
|
+
{ label: 'Developers', value: '1000+' },
|
|
116
|
+
{ label: 'Open Source', value: '100%' },
|
|
117
|
+
].map((stat) => (
|
|
118
|
+
<div key={stat.label} className="text-center">
|
|
119
|
+
<div className="text-4xl font-bold text-white mb-2">{stat.value}</div>
|
|
120
|
+
<div className="text-gray-400">{stat.label}</div>
|
|
121
|
+
</div>
|
|
122
|
+
))}
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
{/* Footer */}
|
|
127
|
+
<footer className="border-t border-white/10 py-8">
|
|
128
|
+
<div className="container mx-auto px-4 text-center text-gray-400">
|
|
63
129
|
<p>
|
|
64
|
-
Built with{' '}
|
|
130
|
+
Built with ❤️ for the Polygon community •{' '}
|
|
65
131
|
<a
|
|
66
|
-
href="https://
|
|
132
|
+
href="https://github.com/sanketsaagar/polygonKit"
|
|
67
133
|
target="_blank"
|
|
68
134
|
rel="noopener noreferrer"
|
|
69
|
-
className="text-purple-
|
|
135
|
+
className="text-purple-400 hover:text-purple-300"
|
|
70
136
|
>
|
|
71
|
-
|
|
137
|
+
View on GitHub
|
|
72
138
|
</a>
|
|
73
139
|
</p>
|
|
74
140
|
</div>
|
|
141
|
+
</footer>
|
|
142
|
+
</div>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
function Dashboard() {
|
|
147
|
+
const { address, chainId } = usePolygonKit();
|
|
148
|
+
const [activeTab, setActiveTab] = useState<'overview' | 'activity' | 'settings'>('overview');
|
|
149
|
+
|
|
150
|
+
const getNetworkName = (chainId?: number) => {
|
|
151
|
+
switch (chainId) {
|
|
152
|
+
case 137:
|
|
153
|
+
return 'Polygon PoS';
|
|
154
|
+
case 1101:
|
|
155
|
+
return 'Polygon zkEVM';
|
|
156
|
+
case 80002:
|
|
157
|
+
return 'Amoy Testnet';
|
|
158
|
+
default:
|
|
159
|
+
return 'Unknown Network';
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
return (
|
|
164
|
+
<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
|
+
{/* Header */}
|
|
166
|
+
<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">
|
|
167
|
+
<div className="container mx-auto px-4 py-4">
|
|
168
|
+
<div className="flex justify-between items-center">
|
|
169
|
+
<div className="flex items-center space-x-3">
|
|
170
|
+
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
|
|
171
|
+
<div>
|
|
172
|
+
<h1 className="text-xl font-bold text-gray-900 dark:text-white">My Polygon App</h1>
|
|
173
|
+
<p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
<Wallet>
|
|
177
|
+
<WalletDropdown />
|
|
178
|
+
</Wallet>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</header>
|
|
182
|
+
|
|
183
|
+
<div className="container mx-auto px-4 py-8">
|
|
184
|
+
{/* 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">
|
|
186
|
+
{[
|
|
187
|
+
{ id: 'overview', label: 'Overview', icon: '📊' },
|
|
188
|
+
{ id: 'activity', label: 'Activity', icon: '⚡' },
|
|
189
|
+
{ id: 'settings', label: 'Settings', icon: '⚙️' },
|
|
190
|
+
].map((tab) => (
|
|
191
|
+
<button
|
|
192
|
+
key={tab.id}
|
|
193
|
+
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
|
194
|
+
className={`px-6 py-2 rounded-md font-semibold transition-all duration-200 ${
|
|
195
|
+
activeTab === tab.id
|
|
196
|
+
? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
|
|
197
|
+
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
198
|
+
}`}
|
|
199
|
+
>
|
|
200
|
+
<span className="mr-2">{tab.icon}</span>
|
|
201
|
+
{tab.label}
|
|
202
|
+
</button>
|
|
203
|
+
))}
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
{/* Overview Tab */}
|
|
207
|
+
{activeTab === 'overview' && (
|
|
208
|
+
<div className="space-y-6">
|
|
209
|
+
{/* Wallet Overview */}
|
|
210
|
+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
211
|
+
<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
|
+
<h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
|
|
213
|
+
<Identity
|
|
214
|
+
address={address!}
|
|
215
|
+
showAvatar
|
|
216
|
+
showAddress
|
|
217
|
+
showBalance
|
|
218
|
+
className="scale-110"
|
|
219
|
+
/>
|
|
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>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<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">
|
|
234
|
+
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-4">Network Status</h3>
|
|
235
|
+
<div className="space-y-4">
|
|
236
|
+
<div className="flex items-center justify-between">
|
|
237
|
+
<span className="text-gray-700 dark:text-gray-300">Status</span>
|
|
238
|
+
<span className="flex items-center gap-2 text-green-600 dark:text-green-400 font-semibold">
|
|
239
|
+
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
|
240
|
+
Connected
|
|
241
|
+
</span>
|
|
242
|
+
</div>
|
|
243
|
+
<div className="flex items-center justify-between">
|
|
244
|
+
<span className="text-gray-700 dark:text-gray-300">Chain ID</span>
|
|
245
|
+
<span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
|
|
246
|
+
</div>
|
|
247
|
+
<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>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
|
|
255
|
+
{/* Quick Actions */}
|
|
256
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
257
|
+
{[
|
|
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
|
+
].map((action) => (
|
|
263
|
+
<button
|
|
264
|
+
key={action.title}
|
|
265
|
+
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
|
+
>
|
|
267
|
+
<div className={`text-4xl mb-3 group-hover:scale-110 transition-transform`}>{action.icon}</div>
|
|
268
|
+
<h3 className="font-bold text-gray-900 dark:text-white mb-1">{action.title}</h3>
|
|
269
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{action.desc}</p>
|
|
270
|
+
</button>
|
|
271
|
+
))}
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
{/* Recent Activity */}
|
|
275
|
+
<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>
|
|
277
|
+
<div className="space-y-4">
|
|
278
|
+
{[
|
|
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' },
|
|
282
|
+
].map((tx, idx) => (
|
|
283
|
+
<div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
|
284
|
+
<div className="flex items-center gap-4">
|
|
285
|
+
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
|
286
|
+
tx.type === 'Received' ? 'bg-green-100 dark:bg-green-900/30' :
|
|
287
|
+
tx.type === 'Sent' ? 'bg-red-100 dark:bg-red-900/30' :
|
|
288
|
+
'bg-blue-100 dark:bg-blue-900/30'
|
|
289
|
+
}`}>
|
|
290
|
+
{tx.type === 'Received' ? '↓' : tx.type === 'Sent' ? '↑' : '↔'}
|
|
291
|
+
</div>
|
|
292
|
+
<div>
|
|
293
|
+
<p className="font-semibold text-gray-900 dark:text-white">{tx.type}</p>
|
|
294
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{tx.amount}</p>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
<div className="text-right">
|
|
298
|
+
<p className="text-sm text-gray-600 dark:text-gray-400">{tx.time}</p>
|
|
299
|
+
<span className="text-xs text-green-600 dark:text-green-400">✓ Confirmed</span>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
))}
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
)}
|
|
307
|
+
|
|
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>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
)}
|
|
75
328
|
</div>
|
|
76
329
|
</div>
|
|
77
330
|
);
|
|
78
331
|
}
|
|
79
332
|
|
|
333
|
+
function AppContent() {
|
|
334
|
+
const { isConnected } = usePolygonKit();
|
|
335
|
+
|
|
336
|
+
return isConnected ? <Dashboard /> : <LandingPage />;
|
|
337
|
+
}
|
|
338
|
+
|
|
80
339
|
function App() {
|
|
340
|
+
const projectId = import.meta.env.VITE_REOWN_PROJECT_ID;
|
|
341
|
+
|
|
81
342
|
return (
|
|
82
|
-
<PolygonKitProvider
|
|
83
|
-
|
|
343
|
+
<PolygonKitProvider
|
|
344
|
+
config={{
|
|
345
|
+
projectId,
|
|
346
|
+
}}
|
|
347
|
+
>
|
|
348
|
+
<AppContent />
|
|
84
349
|
</PolygonKitProvider>
|
|
85
350
|
);
|
|
86
351
|
}
|