@matchain/matchid-sdk-react 0.1.42-alpha.9 → 0.1.44-alpha.0

package/dist/index.mjs

@@ -3,13 +3,13 @@ import {
 } from "./chunk-HYQ3T6WW.mjs";
 import {
   api_exports
-} from "./chunk-KU726GST.mjs";
+} from "./chunk-L3G6YN2D.mjs";
 import {
   MatchProvider,
   components_exports,
   hooks_exports,
   useMatch
-} from "./chunk-HXXIG4ZO.mjs";
+} from "./chunk-KITTHHSR.mjs";
 import {
   types_exports
 } from "./chunk-SQIJR7RA.mjs";

package/example/src/abi/erc20.json

@@ -0,0 +1,222 @@
+[
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "fallback"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  }
+]

package/example/src/config/index.ts

@@ -1,6 +1,7 @@
 import {LoginMethodType, WalletType,RecommendLoginMethodType,OtherLoginMethodType} from "@matchain/matchid-sdk-react/types";
 
 export const LoginMethod = [
+    "wallet",
     'evm',
     'sol',
     'tron',

package/example/src/pages/Wallet.tsx

@@ -1,6 +1,6 @@
 import {useWallet} from "@matchain/matchid-sdk-react/hooks"
-import {Input,Button} from "@matchain/matchid-sdk-react/components"
-import React, {useEffect, useState} from "react";
+import {Input, Button} from "@matchain/matchid-sdk-react/components"
+import React, {useEffect, useMemo, useState} from "react";
 import {
     createPublicClient,
     formatUnits,
@@ -34,10 +34,10 @@ import {
     zkSync,
 } from 'viem/chains';
 import {matchMain, matchTest} from "@/config/chains";
-import RoutePrivate from "@/components/RoutePrivate";
 import useLocalStore from "@/store/useLocalStore";
 import ButtonGroup from "@/components/ButtonGroup";
-import type {SerializeTransactionFn} from "viem/utils/transaction/serializeTransaction";
+import Erc20Abi from "@/abi/erc20.json";
+import type {Abi} from "abitype";
 
 const chainList = [
     mainnet,
@@ -66,13 +66,13 @@ const chainList = [
 
 export default function Wallet() {
 
-    const {initChainId,setInitChainId} = useLocalStore()
+    const {initChainId, setInitChainId} = useLocalStore()
 
     const [message, setMessage] = useState('hello')
     const [toAddress, setToAddress] = useState('')
     const [toAmount, setToAmount] = useState('0.0001')
     const [data, setToData] = useState('0x')
-    const {address, evmAccount, createWalletClient,walletReady} = useWallet()
+    const {address, evmAccount, createWalletClient, walletReady} = useWallet()
     const chain = chainList.find((chain) => chain.id === initChainId)
 
     const walletClient = createWalletClient({
@@ -130,7 +130,7 @@ export default function Wallet() {
     }
 
     const onSignTransaction = async () => {
-        if (!walletClient||!evmAccount) return
+        if (!walletClient || !evmAccount) return
         try {
 
             const transaction = {
@@ -166,7 +166,7 @@ export default function Wallet() {
         </ButtonGroup>
         <ButtonGroup title={"CreateWalletClient Chain"}>
             <select value={initChainId} onChange={(e) => setInitChainId(parseInt(e.target.value))}>
-                {chainList.map((chain,index) => {
+                {chainList.map((chain, index) => {
                     return <option key={index} value={chain.id}>{chain.name}({chain.id})</option>
                 })}
             </select>
@@ -180,7 +180,7 @@ export default function Wallet() {
             <Button onClick={onSign} size={"sm"} disabled={!walletReady}>Sign message</Button>
         </ButtonGroup>
         <ButtonGroup title={"Signature Result"}>
-            <div className={`flex-1 flex-wrap break-all`}>{signature||'-'}</div>
+            <div className={`flex-1 flex-wrap break-all`}>{signature || '-'}</div>
         </ButtonGroup>
 
         <div className={`text-ellipsis break-words`}>balance:{balanceQuery.data?.toString()} wei/{balanceEth} eth</div>
@@ -214,6 +214,132 @@ export default function Wallet() {
         <ButtonGroup title={"TxHash"}>
             <div className={`flex-1 flex-wrap break-all`}>{hash || '-'}</div>
         </ButtonGroup>
+        <ERC20/>
+    </div>
+}
+
+function ERC20() {
+    const {initChainId, erc20Address, setErc20Address} = useLocalStore()
+    const [hash, setHash] = useState('')
+    const [amount, setAmount] = useState('1')
+    const [to, setTo] = useState('')
+    const {address, evmAccount, createWalletClient, walletReady} = useWallet()
+    const [loading,setLoading] = useState(false)
+    const chain = chainList.find((chain) => chain.id === initChainId)
+    const publicClient = createPublicClient({
+        chain: chain,
+        transport: http() as Transport,
+    });
+
+    const decimalsQuery = useQuery({
+        queryKey: ['erc20decimals', erc20Address],
+        queryFn: async () => {
+            return await publicClient.readContract({
+                abi: Erc20Abi,
+                address: erc20Address as `0x${string}`,
+                functionName: 'decimals',
+                args: []
+            }) as number
+        },
+        enabled:!!erc20Address
+    })
+
+    const symbolQuery = useQuery({
+        queryKey: ['erc20symbol', erc20Address],
+        queryFn: async () => {
+            return await publicClient.readContract({
+                abi: Erc20Abi,
+                address: erc20Address as `0x${string}`,
+                functionName: 'symbol',
+                args: []
+            }) as string
+        },
+        enabled:!!erc20Address
+    })
+
+    const balanceQuery = useQuery({
+        queryKey: ['erc20balance', address],
+        refetchInterval: 15_000,
+        queryFn: async () => {
+            return await publicClient.readContract({
+                abi:Erc20Abi,
+                address:erc20Address as `0x${string}`,
+                functionName:'balanceOf',
+                args:[address]
+            }) as bigint
+        },
+        enabled:!!erc20Address&&!!address
+    })
+
+    const balanceUnit = useMemo(()=>{
+        if(!decimalsQuery.data) return ''
+        if(!balanceQuery.data) return ''
+
+        return formatUnits(balanceQuery.data,decimalsQuery.data)
+    },[balanceQuery.data,decimalsQuery.data])
+
+    console.log(balanceQuery,symbolQuery,decimalsQuery)
+    const onSend = async()=>{
+        try{
+            setLoading(true)
+            if(!walletReady) throw new Error('wallet not ready')
+            if(!evmAccount) throw new Error('account not ready')
+            if(!erc20Address) throw new Error('erc20Address not ready')
+            if(!to) throw new Error('to not ready')
+            if(!amount) throw new Error('amount not ready')
+
+            const walletClient = createWalletClient({
+                chain:chain,
+                transport:http(),
+            })
+            if(walletClient){
+
+                const hash = await walletClient?.writeContract({
+                    address:erc20Address as `0x${string}`,
+                    abi:Erc20Abi as any,
+                    functionName:'transfer',
+                    args:[to,parseUnits(amount,decimalsQuery.data||18)],
+                })
+                setHash(hash)
+            }
+
 
+        }catch(error:any){
+            console.error(error)
+            alert(error.message)
+        }finally {
+            setLoading(false)
+        }
+    }
+    return <div>
+        <ButtonGroup title={"ERC20"}></ButtonGroup>
+        <ButtonGroup title={"Contract Address"}>
+            <input className="border px-[8px]" type={'text'} placeholder={'contact'} value={erc20Address}
+                   onChange={(e) => setErc20Address(e.target.value)}/>
+        </ButtonGroup>
+        <ButtonGroup title={"Info"}>
+            <div className={`flex-1 flex-wrap break-all`}>Symbol:{symbolQuery.data}</div>
+            <div className={`flex-1 flex-wrap break-all`}>Decimals:{decimalsQuery.data}</div>
+        </ButtonGroup>
+        <ButtonGroup title={"Balance"}>
+            <div className={`flex-1 flex-wrap break-all`}>{balanceQuery.data?.toString()}</div>
+            <div className={`flex-1 flex-wrap break-all`}>{balanceUnit} {symbolQuery.data}</div>
+        </ButtonGroup>
+        <ButtonGroup title={"Send"}>
+            <div className={`flex-1 flex-wrap break-all`}>
+                To Address:
+                <input className="border px-[8px]" type={'text'} placeholder={'address'} value={to}
+                       onChange={(e) => setTo(e.target.value)}/>
+            </div>
+            <div className={`flex-1 flex-wrap break-all`}>
+                Amount:
+                <input className="border px-[8px]" type={'text'} placeholder={'amount'} value={amount}
+                       onChange={(e) => setAmount(e.target.value)}/>
+            </div>
+            <Button size={"sm"} loading={loading} onClick={onSend} disabled={!to||!amount}>Send</Button>
+        </ButtonGroup>
+        <ButtonGroup title={"Hash"}>
+            <div className={`flex-1 flex-wrap break-all`}>{hash}</div>
+        </ButtonGroup>
     </div>
 }

package/example/src/store/useLocalStore.ts

@@ -18,6 +18,9 @@ interface StoreState {
     initChainId: number;
     setInitChainId: (initChainId: number) => void
 
+    erc20Address: string;
+    setErc20Address: (erc20Address: string) => void;
+
 }
 
 const persistedState = persist<StoreState>(
@@ -33,7 +36,10 @@ const persistedState = persist<StoreState>(
         setLocale: (locale: LocaleType) => set({locale}),
 
         initChainId:1,
-        setInitChainId: (initChainId: number) => set({initChainId})
+        setInitChainId: (initChainId: number) => set({initChainId}),
+
+        erc20Address: '',
+        setErc20Address: (erc20Address: string) => set({erc20Address})
     }),
     {name: 'match-example-local'}
 );

package/example/tsconfig.json

@@ -10,6 +10,7 @@
       "moduleResolution": "node", // 使用 Node.js 风格的模块解析
       "esModuleInterop": true,
       "skipLibCheck": true,
+      "resolveJsonModule": true,
       "forceConsistentCasingInFileNames": true,
       "baseUrl": "./",
       "paths": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.42-alpha.9",
+  "version": "0.1.44-alpha.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {