@matchain/matchid-sdk-react 0.1.56-alpha.5 → 0.1.56-alpha.7

package/example/package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@matchain/matchid-sdk-react": "../dist",
-    "@zerodev/webauthn-key": "5.3.3",
     "crypto": "^1.0.1",
     "crypto-js": "^4.2.0",
     "eruda": "^3.4.1"
@@ -41,4 +40,4 @@
     "tailwindcss": "^3.4.14",
     "vite": "^5.4.10"
   }
-}
+}

package/example/src/pages/Wallet/index.tsx

@@ -1,6 +1,6 @@
-import {useUserInfo, useWallet} from "@matchain/matchid-sdk-react/hooks"
-import {Input, Button} from "@matchain/matchid-sdk-react/components"
-import React, {useEffect, useMemo, useState} from "react";
+import { useUserInfo, useWallet } from "@matchain/matchid-sdk-react/hooks"
+import { Input, Button } from "@matchain/matchid-sdk-react/components"
+import React, { useEffect, useMemo, useState } from "react";
 import {
     createPublicClient,
     formatUnits,
@@ -10,10 +10,12 @@ import {
     Transport,
     HttpTransportConfig, http, TransactionSerializable
 } from "viem";
-import {useQuery} from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import {
     mainnet,
     arbitrum,
+    matchain,
+    matchainTestnet,
     arbitrumGoerli,
     arbitrumNova,
     arbitrumSepolia,
@@ -33,7 +35,7 @@ import {
     polygonAmoy,
     zkSync,
 } from 'viem/chains';
-import {matchMain, matchTest} from "@/config/chains";
+import { MatchMain, MatchTest } from "@matchain/matchid-sdk-react/chains";
 import useLocalStore from "@/store/useLocalStore";
 import ButtonGroup from "@/components/ButtonGroup";
 import Erc20Abi from "@/abi/erc20.json";
@@ -42,14 +44,14 @@ import AssetListModal from "@/pages/Wallet/components/AssetListModal";
 import ImportTokenListModal from "@/pages/Wallet/components/ImportTokenListModal";
 import WalletChainListModal from "@/pages/Wallet/components/WalletChainListModal";
 import MatchWallet from "@/pages/Wallet/components/MatchWallet";
-import {ethers} from "ethers";
+import { ethers } from "ethers";
 
 const chainList = [
     mainnet,
     bsc,
     bscTestnet,
-    matchMain,
-    matchTest,
+    matchain,
+    matchainTestnet,
     arbitrum,
     arbitrumGoerli,
     arbitrumNova,
@@ -70,16 +72,16 @@ const chainList = [
 ]
 
 export default function Wallet() {
-    const [modal, setModal] = useState<'chainList' | 'assetList' | 'importTokenList' | 'walletChainList' | '' >('')
+    const [modal, setModal] = useState<'chainList' | 'assetList' | 'importTokenList' | 'walletChainList' | ''>('')
 
-    const {initChainId, setInitChainId} = useLocalStore()
-    const {overview} = useUserInfo()
+    const { initChainId, setInitChainId } = useLocalStore()
+    const { overview } = useUserInfo()
 
     const [message, setMessage] = useState('hello')
     const [toAddress, setToAddress] = useState('')
     const [toAmount, setToAmount] = useState('0.000001')
     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({
@@ -108,7 +110,7 @@ export default function Wallet() {
         queryKey: ['balance', address],
         refetchInterval: 15_000,
         queryFn: async () => {
-            return await publicClient.getBalance({address: address as `0x${string}`})
+            return await publicClient.getBalance({ address: address as `0x${string}` })
         }
     })
     //to eth
@@ -125,7 +127,7 @@ export default function Wallet() {
     useEffect(() => {
         gasPriceQuery.refetch()
         balanceQuery.refetch()
-    }, [chain,address]);
+    }, [chain, address]);
 
     const onSign = async () => {
         if (!walletClient) return;
@@ -149,7 +151,7 @@ export default function Wallet() {
             const request = await walletClient.prepareTransactionRequest(transaction)
             const res = await evmAccount.signTransaction!(request as TransactionSerializable)
             const tx = ethers.utils.parseTransaction(res);
-            console.log('tx',tx)
+            console.log('tx', tx)
             setTransactionSign(res)
         } catch (e) {
             console.error(e)
@@ -178,16 +180,16 @@ export default function Wallet() {
 
         <ButtonGroup title={"QueryList"}>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={() => setModal('chainList')}>ChainList
+                onClick={() => setModal('chainList')}>ChainList
             </button>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={() => setModal('assetList')}>AssetList
+                onClick={() => setModal('assetList')}>AssetList
             </button>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={() => setModal('importTokenList')}>ImportTokenList
+                onClick={() => setModal('importTokenList')}>ImportTokenList
             </button>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={() => setModal('walletChainList')}>WalletChainList
+                onClick={() => setModal('walletChainList')}>WalletChainList
             </button>
             {/*<button className={`bg-gray-300 p-1 rounded`}*/}
             {/*        onClick={exportWallet}>Export*/}
@@ -208,7 +210,7 @@ export default function Wallet() {
         </ButtonGroup>
         <ButtonGroup title={"Signature Message"}>
             <input className="border px-[8px]" type={'text'} placeholder={'message'} value={message}
-                   onChange={(e) => setMessage(e.target.value)}/>
+                onChange={(e) => setMessage(e.target.value)} />
             <Button onClick={onSign} size={"sm"} disabled={!walletReady}>Sign message</Button>
         </ButtonGroup>
         <ButtonGroup title={"Signature Result"}>
@@ -224,17 +226,17 @@ export default function Wallet() {
         <div>
             To Address:
             <input className="border" type={'text'} placeholder={'to address'} value={toAddress}
-                   onChange={(e) => setToAddress(e.target.value)}/>
+                onChange={(e) => setToAddress(e.target.value)} />
         </div>
         <div>
             Amount:
             <input className="border" type={'text'} placeholder={'amount'} value={toAmount}
-                   onChange={(e) => setToAmount(e.target.value)}/>
+                onChange={(e) => setToAmount(e.target.value)} />
         </div>
         <div>
             Data:
             <input className="border" type={'text'} placeholder={'data'} value={data}
-                   onChange={(e) => setToData(e.target.value)}/>
+                onChange={(e) => setToData(e.target.value)} />
         </div>
         <ButtonGroup>
             <Button onClick={onSignTransaction} size={"sm"} disabled={!walletReady}>Sign</Button>
@@ -247,20 +249,20 @@ export default function Wallet() {
             <div className={`flex-1 flex-wrap break-all`}>{hash || '-'}</div>
         </ButtonGroup>
 
-        {modal == 'chainList' && <ChainListModal isOpen onClose={() => setModal('')}/>}
-        {modal == 'walletChainList' && <WalletChainListModal isOpen onClose={() => setModal('')}/>}
-        {modal == 'assetList' && <AssetListModal isOpen onClose={() => setModal('')}/>}
-        {modal == 'importTokenList' && <ImportTokenListModal isOpen onClose={() => setModal('')}/>}
+        {modal == 'chainList' && <ChainListModal isOpen onClose={() => setModal('')} />}
+        {modal == 'walletChainList' && <WalletChainListModal isOpen onClose={() => setModal('')} />}
+        {modal == 'assetList' && <AssetListModal isOpen onClose={() => setModal('')} />}
+        {modal == 'importTokenList' && <ImportTokenListModal isOpen onClose={() => setModal('')} />}
 
-        <ERC20/>
-        <MatchWallet/>
+        <ERC20 />
+        <MatchWallet />
     </div>
 }
 
 function ERC20() {
-    const {initChainId, erc20Address, setErc20Address} = useLocalStore()
+    const { initChainId, erc20Address, setErc20Address } = useLocalStore()
 
-    const {address, evmAccount, createWalletClient, walletReady} = useWallet()
+    const { address, evmAccount, createWalletClient, walletReady } = useWallet()
 
     const chain = chainList.find((chain) => chain.id === initChainId)
     const publicClient = createPublicClient({
@@ -278,7 +280,7 @@ function ERC20() {
                 args: []
             }) as number
         },
-        enabled:!!erc20Address
+        enabled: !!erc20Address
     })
 
     const symbolQuery = useQuery({
@@ -291,7 +293,7 @@ function ERC20() {
                 args: []
             }) as string
         },
-        enabled:!!erc20Address
+        enabled: !!erc20Address
     })
 
     const balanceQuery = useQuery({
@@ -299,58 +301,58 @@ function ERC20() {
         refetchInterval: 15_000,
         queryFn: async () => {
             return await publicClient.readContract({
-                abi:Erc20Abi,
-                address:erc20Address as `0x${string}`,
-                functionName:'balanceOf',
-                args:[address]
+                abi: Erc20Abi,
+                address: erc20Address as `0x${string}`,
+                functionName: 'balanceOf',
+                args: [address]
             }) as bigint
         },
-        enabled:!!erc20Address&&!!address
+        enabled: !!erc20Address && !!address
     })
 
-    const balanceUnit = useMemo(()=>{
-        if(!decimalsQuery.data) return ''
-        if(!balanceQuery.data) return ''
+    const balanceUnit = useMemo(() => {
+        if (!decimalsQuery.data) return ''
+        if (!balanceQuery.data) return ''
 
-        return formatUnits(balanceQuery.data,decimalsQuery.data)
-    },[balanceQuery.data,decimalsQuery.data])
+        return formatUnits(balanceQuery.data, decimalsQuery.data)
+    }, [balanceQuery.data, decimalsQuery.data])
 
     // console.log(balanceQuery,symbolQuery,decimalsQuery)
 
-    function Transfer(){
+    function Transfer() {
         const [to, setTo] = useState(address)
         const [hash, setHash] = useState('')
         const [amount, setAmount] = useState('0.0001')
-        const [loading,setLoading] = useState(false)
-        const onSend = async()=>{
-            try{
+        const [loading, setLoading] = useState(false)
+        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')
+                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(),
+                    chain: chain,
+                    transport: http(),
                 })
-                if(walletClient){
+                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)],
+                        address: erc20Address as `0x${string}`,
+                        abi: Erc20Abi as any,
+                        functionName: 'transfer',
+                        args: [to, parseUnits(amount, decimalsQuery.data || 18)],
                     })
                     setHash(hash)
                 }
 
 
-            }catch(error:any){
+            } catch (error: any) {
                 console.error(error)
                 alert(error.message)
-            }finally {
+            } finally {
                 setLoading(false)
             }
         }
@@ -360,57 +362,57 @@ function ERC20() {
                 <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)}/>
+                        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)}/>
+                        onChange={(e) => setAmount(e.target.value)} />
                 </div>
 
             </ButtonGroup>
 
             <ButtonGroup title={"Transaction"}>
-                <Button size={"sm"} loading={loading} onClick={onSend} disabled={!to||!amount||!walletReady}>Send</Button>
+                <Button size={"sm"} loading={loading} onClick={onSend} disabled={!to || !amount || !walletReady}>Send</Button>
                 <div className={`flex-1 flex-wrap break-all`}>{hash}</div>
             </ButtonGroup>
         </>
     }
 
-    function Approve(){
+    function Approve() {
         const [to, setTo] = useState(address)
         const [hash, setHash] = useState('')
         const [amount, setAmount] = useState('0.0001')
-        const [loading,setLoading] = useState(false)
-        const onSend = async()=>{
-            try{
+        const [loading, setLoading] = useState(false)
+        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')
+                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(),
+                    chain: chain,
+                    transport: http(),
                 })
-                if(walletClient){
+                if (walletClient) {
 
                     const hash = await walletClient?.writeContract({
-                        address:erc20Address as `0x${string}`,
-                        abi:Erc20Abi as any,
-                        functionName:'approve',
-                        args:[to,parseUnits(amount,decimalsQuery.data||18)],
+                        address: erc20Address as `0x${string}`,
+                        abi: Erc20Abi as any,
+                        functionName: 'approve',
+                        args: [to, parseUnits(amount, decimalsQuery.data || 18)],
                     })
                     setHash(hash)
                 }
 
 
-            }catch(error:any){
+            } catch (error: any) {
                 console.error(error)
                 alert(error.message)
-            }finally {
+            } finally {
                 setLoading(false)
             }
         }
@@ -420,18 +422,18 @@ function ERC20() {
                 <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)}/>
+                        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)}/>
+                        onChange={(e) => setAmount(e.target.value)} />
                 </div>
 
             </ButtonGroup>
 
             <ButtonGroup title={"Transaction"}>
-                <Button size={"sm"} loading={loading} onClick={onSend} disabled={!to||!amount||!walletReady}>Send</Button>
+                <Button size={"sm"} loading={loading} onClick={onSend} disabled={!to || !amount || !walletReady}>Send</Button>
                 <div className={`flex-1 flex-wrap break-all`}>{hash}</div>
             </ButtonGroup>
         </>
@@ -441,7 +443,7 @@ function ERC20() {
         <ButtonGroup title={"ERC20"}></ButtonGroup>
         <ButtonGroup title={"Contract Address"}>
             <input className="border px-[8px]" type={'text'} placeholder={'contract'} value={erc20Address}
-                   onChange={(e) => setErc20Address(e.target.value)}/>
+                onChange={(e) => setErc20Address(e.target.value)} />
         </ButtonGroup>
         <ButtonGroup title={"Info"}>
             <div className={`flex-1 flex-wrap break-all`}>Symbol:{symbolQuery.data}</div>
@@ -451,7 +453,7 @@ function ERC20() {
             <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>
-        <Transfer/>
-        <Approve/>
+        <Transfer />
+        <Approve />
     </div>
 }