create-polygon-kit 1.0.1 → 1.0.2

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 (5) hide show
  1. package/package.json +1 -1
  2. package/templates/nextjs/typescript/app/page.tsx +20 -9
  3. package/templates/remix/typescript/app/components/dashboard.tsx +20 -9
  4. package/templates/remix/typescript/app/components/landing-page.tsx +8 -8
  5. package/templates/vite/typescript/src/App.tsx +20 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-polygon-kit",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "CLI tool to create PolygonKit projects",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/nextjs/typescript/app/page.tsx CHANGED
@@ -155,6 +155,7 @@ function Dashboard() {
155
155
  const [txHash, setTxHash] = useState<string>('');
156
156
 
157
157
  const getNetworkName = (chainId?: number) => {
158
+ if (!chainId) return 'Not Connected';
158
159
  switch (chainId) {
159
160
  case 137:
160
161
  return 'Polygon PoS';
@@ -162,8 +163,18 @@ function Dashboard() {
162
163
  return 'Polygon zkEVM';
163
164
  case 80002:
164
165
  return 'Amoy Testnet';
166
+ case 1:
167
+ return 'Ethereum Mainnet';
168
+ case 11155111:
169
+ return 'Sepolia Testnet';
170
+ case 8453:
171
+ return 'Base';
172
+ case 10:
173
+ return 'Optimism';
174
+ case 42161:
175
+ return 'Arbitrum One';
165
176
  default:
166
- return 'Unknown Network';
177
+ return `Chain ${chainId}`;
167
178
  }
168
179
  };
169
180
 
@@ -310,7 +321,7 @@ function Dashboard() {
310
321
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
311
322
  <div className="space-y-3">
312
323
  <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>
324
+ <span className="text-gray-600 dark:text-gray-400">Native (POL)</span>
314
325
  <TokenBalance address={address} />
315
326
  </div>
316
327
  </div>
@@ -319,8 +330,8 @@ function Dashboard() {
319
330
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
320
331
  <div className="flex items-center gap-4">
321
332
  <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>
333
+ <TokenIcon symbol="POL" size={32} />
334
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">POL</p>
324
335
  </div>
325
336
  <div className="text-center">
326
337
  <TokenIcon symbol="ETH" size={32} />
@@ -343,10 +354,10 @@ function Dashboard() {
343
354
  <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">
344
355
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
345
356
  <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.
357
+ Send 0.001 POL to a recipient address. Replace the address below with your test address.
347
358
  </p>
348
359
  <TransactionButton
349
- text="Send 0.001 MATIC"
360
+ text="Send 0.001 POL"
350
361
  calls={[
351
362
  {
352
363
  to: address, // Sending to self for demo
@@ -378,9 +389,9 @@ function Dashboard() {
378
389
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
379
390
  <div className="space-y-4">
380
391
  {[
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' },
392
+ { type: 'Received', amount: '100 POL', time: '2 mins ago' },
393
+ { type: 'Sent', amount: '50 POL', time: '1 hour ago' },
394
+ { type: 'Swapped', amount: '25 POL → 40 USDC', time: '3 hours ago' },
384
395
  ].map((tx, idx) => (
385
396
  <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
386
397
  <div className="flex items-center gap-4">
package/templates/remix/typescript/app/components/dashboard.tsx CHANGED
@@ -9,6 +9,7 @@ function Dashboard() {
9
9
  const [txHash, setTxHash] = useState<string>('');
10
10
 
11
11
  const getNetworkName = (chainId?: number) => {
12
+ if (!chainId) return 'Not Connected';
12
13
  switch (chainId) {
13
14
  case 137:
14
15
  return 'Polygon PoS';
@@ -16,8 +17,18 @@ function Dashboard() {
16
17
  return 'Polygon zkEVM';
17
18
  case 80002:
18
19
  return 'Amoy Testnet';
20
+ case 1:
21
+ return 'Ethereum Mainnet';
22
+ case 11155111:
23
+ return 'Sepolia Testnet';
24
+ case 8453:
25
+ return 'Base';
26
+ case 10:
27
+ return 'Optimism';
28
+ case 42161:
29
+ return 'Arbitrum One';
19
30
  default:
20
- return 'Unknown Network';
31
+ return `Chain ${chainId}`;
21
32
  }
22
33
  };
23
34
 
@@ -164,7 +175,7 @@ function Dashboard() {
164
175
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
165
176
  <div className="space-y-3">
166
177
  <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>
178
+ <span className="text-gray-600 dark:text-gray-400">Native (POL)</span>
168
179
  <TokenBalance address={address} />
169
180
  </div>
170
181
  </div>
@@ -173,8 +184,8 @@ function Dashboard() {
173
184
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
174
185
  <div className="flex items-center gap-4">
175
186
  <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>
187
+ <TokenIcon symbol="POL" size={32} />
188
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">POL</p>
178
189
  </div>
179
190
  <div className="text-center">
180
191
  <TokenIcon symbol="ETH" size={32} />
@@ -197,10 +208,10 @@ function Dashboard() {
197
208
  <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
209
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
199
210
  <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.
211
+ Send 0.001 POL to a recipient address. Replace the address below with your test address.
201
212
  </p>
202
213
  <TransactionButton
203
- text="Send 0.001 MATIC"
214
+ text="Send 0.001 POL"
204
215
  calls={[
205
216
  {
206
217
  to: address, // Sending to self for demo
@@ -232,9 +243,9 @@ function Dashboard() {
232
243
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
233
244
  <div className="space-y-4">
234
245
  {[
235
- { type: 'Received', amount: '100 MATIC', time: '2 mins ago' },
236
- { type: 'Sent', amount: '50 MATIC', time: '1 hour ago' },
237
- { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago' },
246
+ { type: 'Received', amount: '100 POL', time: '2 mins ago' },
247
+ { type: 'Sent', amount: '50 POL', time: '1 hour ago' },
248
+ { type: 'Swapped', amount: '25 POL → 40 USDC', time: '3 hours ago' },
238
249
  ].map((tx, idx) => (
239
250
  <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
240
251
  <div className="flex items-center gap-4">
package/templates/remix/typescript/app/components/landing-page.tsx CHANGED
@@ -308,7 +308,7 @@ function Dashboard() {
308
308
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
309
309
  <div className="space-y-3">
310
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>
311
+ <span className="text-gray-600 dark:text-gray-400">Native (POL)</span>
312
312
  <TokenBalance address={address} />
313
313
  </div>
314
314
  </div>
@@ -317,8 +317,8 @@ function Dashboard() {
317
317
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
318
318
  <div className="flex items-center gap-4">
319
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>
320
+ <TokenIcon symbol="POL" size={32} />
321
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">POL</p>
322
322
  </div>
323
323
  <div className="text-center">
324
324
  <TokenIcon symbol="ETH" size={32} />
@@ -341,10 +341,10 @@ function Dashboard() {
341
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
342
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
343
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.
344
+ Send 0.001 POL to a recipient address. Replace the address below with your test address.
345
345
  </p>
346
346
  <TransactionButton
347
- text="Send 0.001 MATIC"
347
+ text="Send 0.001 POL"
348
348
  calls={[
349
349
  {
350
350
  to: address, // Sending to self for demo
@@ -376,9 +376,9 @@ function Dashboard() {
376
376
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
377
377
  <div className="space-y-4">
378
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' },
379
+ { type: 'Received', amount: '100 POL', time: '2 mins ago' },
380
+ { type: 'Sent', amount: '50 POL', time: '1 hour ago' },
381
+ { type: 'Swapped', amount: '25 POL → 40 USDC', time: '3 hours ago' },
382
382
  ].map((tx, idx) => (
383
383
  <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
384
384
  <div className="flex items-center gap-4">
package/templates/vite/typescript/src/App.tsx CHANGED
@@ -154,6 +154,7 @@ function Dashboard() {
154
154
  const [txHash, setTxHash] = useState<string>('');
155
155
 
156
156
  const getNetworkName = (chainId?: number) => {
157
+ if (!chainId) return 'Not Connected';
157
158
  switch (chainId) {
158
159
  case 137:
159
160
  return 'Polygon PoS';
@@ -161,8 +162,18 @@ function Dashboard() {
161
162
  return 'Polygon zkEVM';
162
163
  case 80002:
163
164
  return 'Amoy Testnet';
165
+ case 1:
166
+ return 'Ethereum Mainnet';
167
+ case 11155111:
168
+ return 'Sepolia Testnet';
169
+ case 8453:
170
+ return 'Base';
171
+ case 10:
172
+ return 'Optimism';
173
+ case 42161:
174
+ return 'Arbitrum One';
164
175
  default:
165
- return 'Unknown Network';
176
+ return `Chain ${chainId}`;
166
177
  }
167
178
  };
168
179
 
@@ -309,7 +320,7 @@ function Dashboard() {
309
320
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
310
321
  <div className="space-y-3">
311
322
  <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>
323
+ <span className="text-gray-600 dark:text-gray-400">Native (POL)</span>
313
324
  <TokenBalance address={address} />
314
325
  </div>
315
326
  </div>
@@ -318,8 +329,8 @@ function Dashboard() {
318
329
  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
319
330
  <div className="flex items-center gap-4">
320
331
  <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>
332
+ <TokenIcon symbol="POL" size={32} />
333
+ <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">POL</p>
323
334
  </div>
324
335
  <div className="text-center">
325
336
  <TokenIcon symbol="ETH" size={32} />
@@ -342,10 +353,10 @@ function Dashboard() {
342
353
  <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
354
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
344
355
  <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.
356
+ Send 0.001 POL to a recipient address. Replace the address below with your test address.
346
357
  </p>
347
358
  <TransactionButton
348
- text="Send 0.001 MATIC"
359
+ text="Send 0.001 POL"
349
360
  calls={[
350
361
  {
351
362
  to: address, // Sending to self for demo
@@ -377,9 +388,9 @@ function Dashboard() {
377
388
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
378
389
  <div className="space-y-4">
379
390
  {[
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' },
391
+ { type: 'Received', amount: '100 POL', time: '2 mins ago' },
392
+ { type: 'Sent', amount: '50 POL', time: '1 hour ago' },
393
+ { type: 'Swapped', amount: '25 POL → 40 USDC', time: '3 hours ago' },
383
394
  ].map((tx, idx) => (
384
395
  <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
385
396
  <div className="flex items-center gap-4">