create-polygon-kit 0.2.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/templates/nextjs/typescript/app/page.tsx +148 -48
- package/templates/remix/typescript/.env.example +2 -0
- package/templates/remix/typescript/README.md +47 -0
- package/templates/remix/typescript/app/components/client-only.tsx +15 -0
- package/templates/remix/typescript/app/components/dashboard.tsx +285 -0
- package/templates/remix/typescript/app/components/landing-page.tsx +432 -0
- package/templates/remix/typescript/app/providers.tsx +18 -0
- package/templates/remix/typescript/app/root.tsx +44 -0
- package/templates/remix/typescript/app/routes/_index.tsx +25 -0
- package/templates/remix/typescript/package.json +37 -0
- package/templates/remix/typescript/tsconfig.json +30 -0
- package/templates/remix/typescript/vite.config.ts +16 -0
- package/templates/vite/typescript/src/App.tsx +151 -58
package/dist/index.js
CHANGED
|
@@ -54,6 +54,7 @@ async function main() {
|
|
|
54
54
|
choices: [
|
|
55
55
|
{ title: 'Next.js', value: 'nextjs', description: 'React framework with SSR' },
|
|
56
56
|
{ title: 'Vite', value: 'vite', description: 'Fast build tool with HMR' },
|
|
57
|
+
{ title: 'Remix', value: 'remix', description: 'Full stack web framework' },
|
|
57
58
|
],
|
|
58
59
|
initial: 0,
|
|
59
60
|
},
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAQ3C,KAAK,UAAU,IAAI;IACjB,2BAA2B;IAC3B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;CAWhC,CAAC,CAAC,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,6DAA6D,CAAC,CAAC,CAAC;IAE5F,oDAAoD;IACpD,IAAI,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElC,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC;YAC7B,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,6BAA6B;YACtC,OAAO,EAAE,gBAAgB;YACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B;SACvD,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC1B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC,CAAC;YACzD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;QAED,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;IACrC,CAAC;IAED,oCAAoC;IACpC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,WAAW,CAAC,CAAC;IAC3D,IAAI,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,WAAW,kBAAkB,CAAC,CAAC,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IAED,mCAAmC;IACnC,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC;QAC5B;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,wCAAwC;YACjD,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAC9E,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,0BAA0B,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
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://
|
|
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' | '
|
|
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">
|
|
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
|
|
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: '
|
|
189
|
-
{ id: '
|
|
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
|
|
221
|
-
<
|
|
222
|
-
|
|
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">
|
|
249
|
-
<span className="text-gray-900 dark:text-white font-semibold"
|
|
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',
|
|
259
|
-
{ icon: '🔄', title: 'Swap', desc: 'Exchange tokens',
|
|
260
|
-
{ icon: '
|
|
261
|
-
{ icon: '
|
|
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=
|
|
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
|
-
|
|
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-
|
|
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'
|
|
280
|
-
{ type: 'Sent', amount: '50 MATIC', time: '1 hour ago'
|
|
281
|
-
{ type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago'
|
|
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
|
-
{/*
|
|
309
|
-
{activeTab === '
|
|
310
|
-
<div className="
|
|
311
|
-
<
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
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
|
)}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# PolygonKit Remix App
|
|
2
|
+
|
|
3
|
+
This project was created with [create-polygon-kit](https://github.com/sanketsaagar/create-polygon-kit).
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
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
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm run dev
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
|
|
33
|
+
|
|
34
|
+
## Learn More
|
|
35
|
+
|
|
36
|
+
To learn more about PolygonKit and Remix, check out the following resources:
|
|
37
|
+
|
|
38
|
+
- [PolygonKit Documentation](https://docs.polygonkit.com) - learn about PolygonKit features and API
|
|
39
|
+
- [Remix Documentation](https://remix.run/docs) - learn about Remix features and API
|
|
40
|
+
- [GitHub Repository](https://github.com/sanketsaagar/polygonKit) - source code and issues
|
|
41
|
+
|
|
42
|
+
## Built With
|
|
43
|
+
|
|
44
|
+
- [Remix](https://remix.run/) - Full stack web framework
|
|
45
|
+
- [React](https://react.dev/) - The library for web and native user interfaces
|
|
46
|
+
- [PolygonKit](https://docs.polygonkit.com) - React components for Polygon apps
|
|
47
|
+
- [TailwindCSS](https://tailwindcss.com/) - A utility-first CSS framework
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode, useEffect, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
export function ClientOnly({ children }: { children: () => ReactNode }) {
|
|
4
|
+
const [hasMounted, setHasMounted] = useState(false);
|
|
5
|
+
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
setHasMounted(true);
|
|
8
|
+
}, []);
|
|
9
|
+
|
|
10
|
+
if (!hasMounted) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
return <>{children()}</>;
|
|
15
|
+
}
|