@sanketsaagar/polygon-kit 0.1.5 → 0.1.8

package/README.md

@@ -4,6 +4,12 @@
 
 PolygonKit is a comprehensive React library inspired by OnchainKit, specifically designed for building web3 applications on Polygon. It provides battle-tested components, hooks, and utilities to create seamless onchain experiences.
 
+## 📚 Documentation
+
+**[View Full Documentation →](https://polygonlabs.mintlify.app/)**
+
+Complete guides, API reference, and examples available [here](https://polygonlabs.mintlify.app/)
+
 ## Features
 
 - **Wallet Management** - Easy wallet connection and account management

package/dist/index.d.mts

@@ -97,6 +97,11 @@ interface TokenBalanceProps {
     token?: Address;
     className?: string;
 }
+interface TokenIconProps {
+    symbol: string;
+    size?: number;
+    className?: string;
+}
 interface SwapProps {
     className?: string;
     onSuccess?: (hash: string) => void;
@@ -137,6 +142,8 @@ declare function Token({ amount, symbol, className }: TokenProps): react_jsx_run
 
 declare function TokenBalance({ address, token, className }: TokenBalanceProps): react_jsx_runtime.JSX.Element;
 
+declare function TokenIcon({ symbol, size, className }: TokenIconProps): react_jsx_runtime.JSX.Element;
+
 declare function Swap({ className, onSuccess, onError }: SwapProps): react_jsx_runtime.JSX.Element;
 
 interface UsePolygonKitReturn {
@@ -183,4 +190,4 @@ declare const polygonAmoy: Chain;
 declare const polygonZkEVM: Chain;
 declare const defaultChains: Chain[];
 
-export { Avatar, type AvatarProps, type Chain, ConnectWallet, type ConnectWalletProps, Identity, type IdentityProps, Name, type NameProps, type PolygonKitConfig, PolygonKitProvider, type PolygonKitProviderProps, Swap, type SwapProps, type ThemeMode, Token, TokenBalance, type TokenBalanceProps, type TokenProps, Transaction, TransactionButton, type TransactionButtonProps, type TransactionCall, type TransactionProps, TransactionStatus, Wallet, WalletDropdown, type WalletDropdownProps, type WalletProps, defaultChains, formatBalance, parseTokenAmount, polygon, polygonAmoy, polygonMumbai, polygonZkEVM, shortenAddress, truncateText, usePolygonBalance, usePolygonKit, usePolygonTransaction };
+export { Avatar, type AvatarProps, type Chain, ConnectWallet, type ConnectWalletProps, Identity, type IdentityProps, Name, type NameProps, type PolygonKitConfig, PolygonKitProvider, type PolygonKitProviderProps, Swap, type SwapProps, type ThemeMode, Token, TokenBalance, type TokenBalanceProps, TokenIcon, type TokenIconProps, type TokenProps, Transaction, TransactionButton, type TransactionButtonProps, type TransactionCall, type TransactionProps, TransactionStatus, Wallet, WalletDropdown, type WalletDropdownProps, type WalletProps, defaultChains, formatBalance, parseTokenAmount, polygon, polygonAmoy, polygonMumbai, polygonZkEVM, shortenAddress, truncateText, usePolygonBalance, usePolygonKit, usePolygonTransaction };

package/dist/index.d.ts

@@ -97,6 +97,11 @@ interface TokenBalanceProps {
     token?: Address;
     className?: string;
 }
+interface TokenIconProps {
+    symbol: string;
+    size?: number;
+    className?: string;
+}
 interface SwapProps {
     className?: string;
     onSuccess?: (hash: string) => void;
@@ -137,6 +142,8 @@ declare function Token({ amount, symbol, className }: TokenProps): react_jsx_run
 
 declare function TokenBalance({ address, token, className }: TokenBalanceProps): react_jsx_runtime.JSX.Element;
 
+declare function TokenIcon({ symbol, size, className }: TokenIconProps): react_jsx_runtime.JSX.Element;
+
 declare function Swap({ className, onSuccess, onError }: SwapProps): react_jsx_runtime.JSX.Element;
 
 interface UsePolygonKitReturn {
@@ -183,4 +190,4 @@ declare const polygonAmoy: Chain;
 declare const polygonZkEVM: Chain;
 declare const defaultChains: Chain[];
 
-export { Avatar, type AvatarProps, type Chain, ConnectWallet, type ConnectWalletProps, Identity, type IdentityProps, Name, type NameProps, type PolygonKitConfig, PolygonKitProvider, type PolygonKitProviderProps, Swap, type SwapProps, type ThemeMode, Token, TokenBalance, type TokenBalanceProps, type TokenProps, Transaction, TransactionButton, type TransactionButtonProps, type TransactionCall, type TransactionProps, TransactionStatus, Wallet, WalletDropdown, type WalletDropdownProps, type WalletProps, defaultChains, formatBalance, parseTokenAmount, polygon, polygonAmoy, polygonMumbai, polygonZkEVM, shortenAddress, truncateText, usePolygonBalance, usePolygonKit, usePolygonTransaction };
+export { Avatar, type AvatarProps, type Chain, ConnectWallet, type ConnectWalletProps, Identity, type IdentityProps, Name, type NameProps, type PolygonKitConfig, PolygonKitProvider, type PolygonKitProviderProps, Swap, type SwapProps, type ThemeMode, Token, TokenBalance, type TokenBalanceProps, TokenIcon, type TokenIconProps, type TokenProps, Transaction, TransactionButton, type TransactionButtonProps, type TransactionCall, type TransactionProps, TransactionStatus, Wallet, WalletDropdown, type WalletDropdownProps, type WalletProps, defaultChains, formatBalance, parseTokenAmount, polygon, polygonAmoy, polygonMumbai, polygonZkEVM, shortenAddress, truncateText, usePolygonBalance, usePolygonKit, usePolygonTransaction };

package/dist/index.js

@@ -28,6 +28,7 @@ __export(index_exports, {
   Swap: () => Swap,
   Token: () => Token,
   TokenBalance: () => TokenBalance,
+  TokenIcon: () => TokenIcon,
   Transaction: () => Transaction,
   TransactionButton: () => TransactionButton,
   TransactionStatus: () => TransactionStatus,
@@ -57,11 +58,11 @@ var import_appkit_adapter_wagmi = require("@reown/appkit-adapter-wagmi");
 // src/constants/chains.ts
 var polygon = {
   id: 137,
-  name: "Polygon",
+  name: "Polygon PoS",
   network: "matic",
   nativeCurrency: {
-    name: "MATIC",
-    symbol: "MATIC",
+    name: "POL",
+    symbol: "POL",
     decimals: 18
   },
   rpcUrls: {
@@ -105,11 +106,11 @@ var polygonMumbai = {
 };
 var polygonAmoy = {
   id: 80002,
-  name: "Polygon Amoy",
+  name: "Amoy Testnet",
   network: "polygon-amoy",
   nativeCurrency: {
-    name: "MATIC",
-    symbol: "MATIC",
+    name: "POL",
+    symbol: "POL",
     decimals: 18
   },
   rpcUrls: {
@@ -538,9 +539,22 @@ function TokenBalance({ address, token, className = "" }) {
   ] });
 }
 
+// src/components/Token/TokenIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function TokenIcon({ symbol, size = 24, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      className: `rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold ${className}`,
+      style: { width: size, height: size, fontSize: size * 0.5 },
+      children: symbol ? symbol.charAt(0).toUpperCase() : "?"
+    }
+  );
+}
+
 // src/components/Swap/Swap.tsx
 var import_react6 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Swap({ className = "", onSuccess, onError }) {
   const [fromAmount, setFromAmount] = (0, import_react6.useState)("");
   const [toAmount, setToAmount] = (0, import_react6.useState)("");
@@ -556,13 +570,13 @@ function Swap({ className = "", onSuccess, onError }) {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `bg-white dark:bg-gray-900 rounded-xl p-4 shadow-lg border border-gray-200 dark:border-gray-700 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-lg font-bold mb-4", children: "Swap Tokens" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "From" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `bg-white dark:bg-gray-900 rounded-xl p-4 shadow-lg border border-gray-200 dark:border-gray-700 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-bold mb-4", children: "Swap Tokens" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "number",
@@ -572,14 +586,14 @@ function Swap({ className = "", onSuccess, onError }) {
               className: "flex-1 bg-transparent text-2xl font-medium outline-none"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "MATIC" })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "MATIC" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "p-2 bg-purple-100 dark:bg-purple-900 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors", children: "\u2193" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "To" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "p-2 bg-purple-100 dark:bg-purple-900 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors", children: "\u2193" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "number",
@@ -589,11 +603,11 @@ function Swap({ className = "", onSuccess, onError }) {
               className: "flex-1 bg-transparent text-2xl font-medium outline-none"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "USDC" })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "USDC" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "button",
       {
         onClick: handleSwap,
@@ -602,7 +616,7 @@ function Swap({ className = "", onSuccess, onError }) {
         children: isLoading ? "Swapping..." : "Swap"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-3 text-xs text-gray-500 dark:text-gray-400 text-center", children: "Powered by Polygon DEX Aggregators" })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mt-3 text-xs text-gray-500 dark:text-gray-400 text-center", children: "Powered by Polygon DEX Aggregators" })
   ] });
 }
 
@@ -683,6 +697,7 @@ function usePolygonTransaction() {
   Swap,
   Token,
   TokenBalance,
+  TokenIcon,
   Transaction,
   TransactionButton,
   TransactionStatus,

package/dist/index.mjs

@@ -7,11 +7,11 @@ import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 // src/constants/chains.ts
 var polygon = {
   id: 137,
-  name: "Polygon",
+  name: "Polygon PoS",
   network: "matic",
   nativeCurrency: {
-    name: "MATIC",
-    symbol: "MATIC",
+    name: "POL",
+    symbol: "POL",
     decimals: 18
   },
   rpcUrls: {
@@ -55,11 +55,11 @@ var polygonMumbai = {
 };
 var polygonAmoy = {
   id: 80002,
-  name: "Polygon Amoy",
+  name: "Amoy Testnet",
   network: "polygon-amoy",
   nativeCurrency: {
-    name: "MATIC",
-    symbol: "MATIC",
+    name: "POL",
+    symbol: "POL",
     decimals: 18
   },
   rpcUrls: {
@@ -488,9 +488,22 @@ function TokenBalance({ address, token, className = "" }) {
   ] });
 }
 
+// src/components/Token/TokenIcon.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function TokenIcon({ symbol, size = 24, className = "" }) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: `rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold ${className}`,
+      style: { width: size, height: size, fontSize: size * 0.5 },
+      children: symbol ? symbol.charAt(0).toUpperCase() : "?"
+    }
+  );
+}
+
 // src/components/Swap/Swap.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function Swap({ className = "", onSuccess, onError }) {
   const [fromAmount, setFromAmount] = useState3("");
   const [toAmount, setToAmount] = useState3("");
@@ -507,12 +520,12 @@ function Swap({ className = "", onSuccess, onError }) {
     }
   };
   return /* @__PURE__ */ jsxs6("div", { className: `bg-white dark:bg-gray-900 rounded-xl p-4 shadow-lg border border-gray-200 dark:border-gray-700 ${className}`, children: [
-    /* @__PURE__ */ jsx13("h3", { className: "text-lg font-bold mb-4", children: "Swap Tokens" }),
+    /* @__PURE__ */ jsx14("h3", { className: "text-lg font-bold mb-4", children: "Swap Tokens" }),
     /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxs6("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3", children: [
-        /* @__PURE__ */ jsx13("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "From" }),
+        /* @__PURE__ */ jsx14("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "From" }),
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mt-1", children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "number",
@@ -522,14 +535,14 @@ function Swap({ className = "", onSuccess, onError }) {
               className: "flex-1 bg-transparent text-2xl font-medium outline-none"
             }
           ),
-          /* @__PURE__ */ jsx13("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "MATIC" })
+          /* @__PURE__ */ jsx14("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "MATIC" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13("button", { className: "p-2 bg-purple-100 dark:bg-purple-900 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors", children: "\u2193" }) }),
+      /* @__PURE__ */ jsx14("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx14("button", { className: "p-2 bg-purple-100 dark:bg-purple-900 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors", children: "\u2193" }) }),
       /* @__PURE__ */ jsxs6("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3", children: [
-        /* @__PURE__ */ jsx13("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "To" }),
+        /* @__PURE__ */ jsx14("label", { className: "text-sm text-gray-600 dark:text-gray-400", children: "To" }),
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mt-1", children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "number",
@@ -539,11 +552,11 @@ function Swap({ className = "", onSuccess, onError }) {
               className: "flex-1 bg-transparent text-2xl font-medium outline-none"
             }
           ),
-          /* @__PURE__ */ jsx13("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "USDC" })
+          /* @__PURE__ */ jsx14("button", { className: "px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium", children: "USDC" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "button",
       {
         onClick: handleSwap,
@@ -552,7 +565,7 @@ function Swap({ className = "", onSuccess, onError }) {
         children: isLoading ? "Swapping..." : "Swap"
       }
     ),
-    /* @__PURE__ */ jsx13("div", { className: "mt-3 text-xs text-gray-500 dark:text-gray-400 text-center", children: "Powered by Polygon DEX Aggregators" })
+    /* @__PURE__ */ jsx14("div", { className: "mt-3 text-xs text-gray-500 dark:text-gray-400 text-center", children: "Powered by Polygon DEX Aggregators" })
   ] });
 }
 
@@ -632,6 +645,7 @@ export {
   Swap,
   Token,
   TokenBalance,
+  TokenIcon,
   Transaction,
   TransactionButton,
   TransactionStatus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanketsaagar/polygon-kit",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "React components and TypeScript utilities for building onchain apps on Polygon",
   "main": "dist/index.js",
   "module": "dist/index.mjs",