@matchain/matchid-sdk-react 0.1.48-alpha.7 → 0.1.48-alpha.8

package/dist/assets/icon/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties } from 'react';
-import { r as IconProps$1 } from '../../types-CHkU0WHZ.mjs';
+import { r as IconProps$1 } from '../../types-B4BYNw8B.mjs';
 
 declare function BackIcon({ color, size, className, style }: {
     color?: string;

package/dist/assets/icon/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties } from 'react';
-import { r as IconProps$1 } from '../../types-CHkU0WHZ.js';
+import { r as IconProps$1 } from '../../types-B4BYNw8B.js';
 
 declare function BackIcon({ color, size, className, style }: {
     color?: string;

package/dist/{chunk-2CK7JQWH.mjs → chunk-EY6NPX4M.mjs}

@@ -526,6 +526,13 @@ var getWalletChainListApi = () => {
     method: "POST"
   });
 };
+var getWalletNftListApi = (data) => {
+  return request_default({
+    url: `/api/v1/wallet/nfts`,
+    method: "POST",
+    data
+  });
+};
 
 // src/store/useLocalStore.ts
 var persistedState = persist(
@@ -1097,6 +1104,7 @@ __export(wallet_exports, {
   useChainListQuery: () => useChainListQuery,
   useImportTokenListQuery: () => useImportTokenListQuery,
   useWalletChainListQuery: () => useWalletChainListQuery,
+  useWalletNftListQuery: () => useWalletNftListQuery,
   userImportTokenApi: () => userImportTokenApi
 });
 import { useQuery } from "@tanstack/react-query";
@@ -1166,9 +1174,32 @@ function useWalletChainListQuery(options) {
     ...options
   });
 }
+function useWalletNftListQuery({
+  chainId,
+  address: address2,
+  ...options
+}) {
+  const { isLogin, token } = useUserInfo();
+  return useQuery({
+    queryKey: ["match-wallet-nft-list", token, chainId, address2],
+    queryFn: async () => {
+      const res = await getWalletNftListApi({
+        chain_id: chainId.toString(),
+        address: address2
+      });
+      if (!isSuccess(res)) {
+        return [];
+      }
+      return res.data;
+    },
+    enabled: isLogin,
+    ...options
+  });
+}
 
 // src/hooks/useMatchChain.tsx
 import { useMemo as useMemo3, useState as useState6 } from "react";
+import { createPublicClient, http } from "viem";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function useMatchChain() {
   const chainListQuery = useChainListQuery();
@@ -1228,69 +1259,239 @@ function useMatchChain() {
       content: ChangeNetwork
     });
   };
+  const publicClient = useMemo3(() => {
+    if (!chain) {
+      return null;
+    }
+    return createPublicClient({
+      chain,
+      transport: http()
+    });
+  }, [chain]);
   return {
     list: chainListQuery.data,
     chainId,
     setChainId,
     chain,
     explorerLink,
-    showChangeNetwork
+    showChangeNetwork,
+    publicClient
   };
 }
 
 // src/hooks/useMatchWallet.tsx
 import { QRCode } from "react-qrcode";
-import { useEffect as useEffect6, useRef, useState as useState7 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useRef, useState as useState7 } from "react";
 
 // example/src/config/contract.ts
 var address = "0x4143e29770fd63e24bb1f32d50bf8a590e34de4b";
 
 // src/hooks/useMatchWallet.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function useMatchWallet() {
-  const modal = useModal();
-  const { address: address2 } = useWallet();
+var ReceiveModal = () => {
   const chain = useMatchChain();
+  const { address: address2 } = useWallet();
   const [copied, setCopied] = useCopyClipboard();
   const toast = useToast();
   const onCopy = () => {
     setCopied(address2);
     toast.success("Copied!");
   };
+  const chainLink = chain.explorerLink("address/" + address2);
+  return /* @__PURE__ */ jsxs5("div", { className: `matchid-receive-modal`, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "matchid-receive-container", children: [
+      /* @__PURE__ */ jsx6("div", { className: `matchid-receive-text`, children: "Receive by scanning the QR code" }),
+      /* @__PURE__ */ jsx6("div", { className: `matchid-qr-container`, children: /* @__PURE__ */ jsx6(
+        QRCode,
+        {
+          margin: "0",
+          className: `matchid-qr-code`,
+          value: address2
+        }
+      ) }),
+      /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: chainLink,
+          target: "_blank",
+          className: `matchid-receive-link`,
+          children: address2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6(Button, { size: "lg", onClick: onCopy, block: true, highlight: true, disabled: copied, children: "Copy Address" })
+  ] });
+};
+var ImportTokenModal = ({ close }) => {
+  const [address2, setAddress] = useState7("");
+  const [symbol, setSymbol] = useState7("");
+  const [decimals, setDecimals] = useState7("");
+  const [error, setError] = useState7({});
+  const { publicClient, chainId } = useMatchChain();
+  const getContractInfo = async () => {
+    if (!publicClient) return;
+    const erc20Abi = [
+      {
+        name: "decimals",
+        type: "function",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [{ name: "decimals", type: "uint8" }]
+      },
+      {
+        name: "symbol",
+        type: "function",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [{ name: "symbol", type: "string" }]
+      }
+    ];
+    const calls = [
+      {
+        address: address2,
+        abi: erc20Abi,
+        functionName: "symbol",
+        args: []
+      },
+      {
+        address: address2,
+        abi: erc20Abi,
+        functionName: "decimals",
+        args: []
+      }
+    ];
+    try {
+      const results = await publicClient.multicall({ contracts: calls });
+      console.log("results", results);
+      if (!symbol && results[0]?.status == "success") {
+        setSymbol(results[0]?.result);
+      }
+      if (!decimals && results[1]?.status == "success") {
+        setDecimals((results[1]?.result).toString());
+      }
+    } catch (error2) {
+      setError({
+        address: error2.message
+      });
+    }
+  };
+  useEffect6(() => {
+    if (address2.length === 42) {
+      const reg = /^0x[0-9a-fA-F]{40}$/;
+      if (!reg.test(address2)) {
+        setError({
+          ...error,
+          address: "Invalid address"
+        });
+      } else {
+        setError({
+          ...error,
+          address: ""
+        });
+        publicClient && getContractInfo();
+      }
+    }
+  }, [address2, publicClient]);
+  const [loading, setLoading] = useState7(false);
+  const toast = useToast();
+  const onImport = async () => {
+    setLoading(true);
+    try {
+      const res = await userImportTokenApi({
+        chain_id: chainId?.toString() || "",
+        symbol,
+        address: address2,
+        decimals
+      });
+      if (isSuccess(res)) {
+        toast.success("Imported successfully");
+        close();
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error2) {
+      toast.error(error2.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const canImport = useMemo4(() => {
+    if (!address2) {
+      return false;
+    }
+    if (!symbol) {
+      return false;
+    }
+    if (decimals.length === 0) {
+      return false;
+    }
+    const reg = /^0x[0-9a-fA-F]{40}$/;
+    if (!reg.test(address2)) {
+      return false;
+    }
+    return true;
+  }, [error, address2, symbol, decimals]);
+  return /* @__PURE__ */ jsxs5("div", { className: `matchid-import-token`, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "matchid-import-token-form", children: [
+      /* @__PURE__ */ jsx6(Field, { label: "Token Smart Contract", error: error.address, children: /* @__PURE__ */ jsx6(
+        Input,
+        {
+          placeholder: "Enter the Token Smart Contract",
+          value: address2,
+          onChange: (e) => setAddress(e.target.value),
+          maxLength: 42
+        }
+      ) }),
+      /* @__PURE__ */ jsx6(Field, { label: "Token Symbol", error: error.symbol, children: /* @__PURE__ */ jsx6(
+        Input,
+        {
+          placeholder: "Enter the Token Symbol",
+          value: symbol,
+          onChange: (e) => setSymbol(e.target.value),
+          maxLength: 16
+        }
+      ) }),
+      /* @__PURE__ */ jsx6(Field, { label: "Decimals", error: error.decimals, children: /* @__PURE__ */ jsx6(
+        Input,
+        {
+          placeholder: "Enter the Decimals",
+          type: "number",
+          value: decimals,
+          onChange: (e) => setDecimals(e.target.value)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        size: "lg",
+        onClick: onImport,
+        block: true,
+        loading,
+        disabled: !canImport,
+        highlight: true,
+        children: "Import"
+      }
+    )
+  ] });
+};
+function useMatchWallet() {
+  const modal = useModal();
   const showReceiveModal = () => {
-    const chainLink = chain.explorerLink("address/" + address2);
-    const ReceiveModal = () => {
-      return /* @__PURE__ */ jsxs5("div", { className: `matchid-receive-modal`, children: [
-        /* @__PURE__ */ jsxs5("div", { className: "matchid-receive-container", children: [
-          /* @__PURE__ */ jsx6("div", { className: `matchid-receive-text`, children: "Receive by scanning the QR code" }),
-          /* @__PURE__ */ jsx6("div", { className: `matchid-qr-container`, children: /* @__PURE__ */ jsx6(
-            QRCode,
-            {
-              margin: "0",
-              className: `matchid-qr-code`,
-              value: address2
-            }
-          ) }),
-          /* @__PURE__ */ jsx6(
-            "a",
-            {
-              href: chainLink,
-              target: "_blank",
-              className: `matchid-receive-link`,
-              children: address2
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx6(Button, { size: "lg", onClick: onCopy, block: true, highlight: true, disabled: copied, children: "Copy Address" })
-      ] });
-    };
     modal.open({
       title: "Receive",
       content: ReceiveModal
     });
   };
+  const showImportTokenModal = () => {
+    modal.open({
+      title: "Customized Token",
+      content: ImportTokenModal
+    });
+  };
   return {
-    showReceiveModal
+    showReceiveModal,
+    showImportTokenModal
   };
 }
 function useMatchWalletRecords({
@@ -1339,7 +1540,7 @@ function useMatchWalletRecords({
 // src/hooks/useReceipt.tsx
 import { useState as useState8, useCallback as useCallback4, useEffect as useEffect7 } from "react";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
-import { createPublicClient, defineChain, http } from "viem";
+import { createPublicClient as createPublicClient2, defineChain, http as http2 } from "viem";
 var CACHE_TTL = 86400 * 30 * 1e3;
 var MAX_CACHE_SIZE = 500;
 var STORAGE_KEY = "match_receipt_logs";
@@ -1456,10 +1657,9 @@ function useReceipt({
         return cache.get(cacheKey);
       }
       try {
-        const publicClient = createPublicClient({
-          //@ts-ignore
+        const publicClient = createPublicClient2({
           chain: defineChain(chain),
-          transport: http()
+          transport: http2()
         });
         const receipt = await publicClient.getTransactionReceipt({ hash });
         if (!receipt) {
@@ -1484,7 +1684,7 @@ function useReceipt({
 // src/hooks/useTransaction.tsx
 import { useState as useState9, useCallback as useCallback5, useEffect as useEffect8 } from "react";
 import { useQuery as useQuery3 } from "@tanstack/react-query";
-import { createPublicClient as createPublicClient2, defineChain as defineChain2, http as http2 } from "viem";
+import { createPublicClient as createPublicClient3, defineChain as defineChain2, http as http3 } from "viem";
 var CACHE_TTL2 = 86400 * 30 * 1e3;
 var MAX_CACHE_SIZE2 = 500;
 var STORAGE_KEY2 = "match_transaction_logs";
@@ -1601,10 +1801,9 @@ function useTransaction({
         return cache.get(cacheKey);
       }
       try {
-        const publicClient = createPublicClient2({
-          //@ts-ignore
+        const publicClient = createPublicClient3({
           chain: defineChain2(chain),
-          transport: http2()
+          transport: http3()
         });
         const transaction = await publicClient.getTransaction({ hash });
         if (!transaction) {
@@ -4868,4 +5067,4 @@ export {
   MatchProvider,
   useMatch
 };
-//# sourceMappingURL=chunk-2CK7JQWH.mjs.map
+//# sourceMappingURL=chunk-EY6NPX4M.mjs.map