@matchain/matchid-sdk-react 0.1.42-alpha.1 → 0.1.42-alpha.11

package/example/src/pages/{User.tsx → User/index.tsx}

@@ -1,47 +1,18 @@
-import {Hooks, Components, Api} from "@matchain/matchid-sdk-react"
-import React from "react";
-import RoutePrivate from "../components/RoutePrivate";
-import {CEXList, LOGIN_METHOD_MAP, LoginMethod, WalletMethod} from "@/config";
-import {CEXType, LoginMethodType} from "../../../src/types/types";
-
-const {useMatchEvents, useUserInfo, useWallet} = Hooks
-const {
+import React, {useState} from "react";
+import {CEXList, LOGIN_METHOD_MAP, LoginMethod, LoginMethodList, RecommendLoginMethodList, WalletList} from "@/config";
+import {CEXType, LoginMethodType} from "@matchain/matchid-sdk-react/types";
+import {useMatchEvents, useUserInfo, useWallet} from "@matchain/matchid-sdk-react/hooks";
+import {
     LoginButton,
     UsernameModal,
     PasswordModal,
-    Button,
-} = Components
-
-function QueryDisplay(
-    {
-        name,
-        query
-    }: {
-        name: string
-        query: any
-    }
-) {
-    const keys = Object.keys(query)
-    return <div>
-        <div className={`font-bold text-lg`}>{name}</div>
-        {keys.map((key) => {
-            return <div key={key} className={`flex gap-[20px]`}>
-                <div className={"w-[200px]"}>{key}</div>
-                <div className={`flex-1 flex-wrap break-all`}>{
-                    typeof query[key] === 'function' ? <Button size="sm" onClick={() => {
-                            query[key]()
-                        }}>Run</Button> :
-                        JSON.stringify(query[key])}</div>
-            </div>
-        })}
-    </div>
+} from "@matchain/matchid-sdk-react/components";
+import BindListModal from "@/pages/User/components/BindListModal";
+import PohListModal from "@/pages/User/components/PohListModal";
+import ButtonGroup from "@/components/ButtonGroup";
 
-}
 
 function LoginContent() {
-    const bindListQuery = Api.bind.useBindList()
-    const pohListQuery = Api.poh.usePohList()
-
     const {
         token,
         logout,
@@ -54,8 +25,9 @@ function LoginContent() {
         bindCex,
         getAuthInfo
     } = useUserInfo();
-    const [usernameOpen, setUsernameOpen] = React.useState(false)
-    const [passwordOpen, setPasswordOpen] = React.useState(false)
+    const [usernameOpen, setUsernameOpen] = useState(false)
+    const [passwordOpen, setPasswordOpen] = useState(false)
+    const [modal, setModal] = useState<'bindList' | 'pohList' | ''>('')
     const refreshOv = async () => {
         await refreshOverview()
         alert('refreshed')
@@ -70,25 +42,30 @@ function LoginContent() {
         }
     }
 
-    const onGetInfo = async (method: string) => {
-        try {
-            const res = await getAuthInfo(method)
-            console.log('getAuthInfo', res)
-        } catch (e) {
-            console.error('getAuthInfo', e)
-        }
-    }
-
     return <div className={`flex flex-col gap-[10px]`}>
         <h1 className={`text-2xl`}>You are already logged in</h1>
         <div className={`text-ellipsis break-words`}>token:{token}</div>
         <div className={`text-ellipsis break-words`}>username:{username}</div>
         <div className={`text-ellipsis break-words`}>did:{did}</div>
         <div className={`text-ellipsis break-words`}>address:{address}</div>
-        <div className={`flex gap-[20px]`}>
+
+        <ButtonGroup title={"User"}>
             <button className={`bg-gray-300 p-1 rounded`}
                     onClick={() => setUsernameOpen(true)}>Set username
             </button>
+
+            <button className={`bg-gray-300 p-1 rounded mr-5`}
+                    onClick={() => setPasswordOpen(true)}>Set Password
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={onAuth}>Third party auth
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={refreshOv}>Refresh Overview
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={logout}>Logout
+            </button>
             <UsernameModal isOpen={usernameOpen} onClose={() => setUsernameOpen(false)} onBack={() => {
                 console.log('set username modal back event')
                 setUsernameOpen(false)
@@ -96,9 +73,6 @@ function LoginContent() {
                 alert('set username success')
                 setUsernameOpen(false)
             }}/>
-            <button className={`bg-gray-300 p-1 rounded mr-5`}
-                    onClick={() => setPasswordOpen(true)}>Set Password
-            </button>
             <PasswordModal isOpen={passwordOpen} onClose={() => setPasswordOpen(false)} onBack={() => {
                 console.log('set password modal back event')
                 setPasswordOpen(false)
@@ -106,11 +80,8 @@ function LoginContent() {
                 alert('set password success')
                 setPasswordOpen(false)
             }}/>
-        </div>
-        <div className={`flex gap-[20px] flex-wrap`}>
-            <div>
-                Bind
-            </div>
+        </ButtonGroup>
+        <ButtonGroup title={"Bind"}>
             {
                 LoginMethod.map((method) => {
                     return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
@@ -118,41 +89,37 @@ function LoginContent() {
                     </button>
                 })
             }
-        </div>
-        <div className={`flex gap-[20px] flex-wrap`}>
-            <div>
-                GetAuthInfo
-            </div>
+        </ButtonGroup>
+        <ButtonGroup title={"Bind CEX"}>
             {
-                Object.keys(LOGIN_METHOD_MAP).map((method:string ) => {
-                    return <button key={method} className={`bg-gray-300 p-1 rounded`}
-                                   onClick={async() => onGetInfo(LOGIN_METHOD_MAP[method as keyof typeof LOGIN_METHOD_MAP])}>{method}</button>
+                CEXList.map((method) => {
+                    return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
+                                   onClick={() => bindCex(method as CEXType)}>CEX {method}
+                    </button>
                 })
             }
-        </div>
-        <div className={`flex gap-[20px] flex-wrap`}>
+        </ButtonGroup>
+        <ButtonGroup title={"getAuthInfo"}>
             {
-                CEXList.map((method) => {
+                Object.keys(LOGIN_METHOD_MAP).map((method) => {
                     return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
-                                   onClick={() => bindCex(method as CEXType)}>CEX {method}
+                                   onClick={() => getAuthInfo(method as keyof typeof LOGIN_METHOD_MAP)}>{LOGIN_METHOD_MAP[method as keyof typeof LOGIN_METHOD_MAP]}
                     </button>
                 })
             }
-        </div>
-        <div className={`flex gap-[20px]`}>
-            <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={onAuth}>Third party auth
-            </button>
+        </ButtonGroup>
+
+        <ButtonGroup title={"QueryList"}>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={refreshOv}>Refresh Overview
+                    onClick={() => setModal('bindList')}>BindList
             </button>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={logout}>Logout
+                    onClick={() => setModal('pohList')}>PohList
             </button>
-        </div>
+        </ButtonGroup>
 
-        <QueryDisplay query={bindListQuery} name={"BindListQuery"}/>
-        <QueryDisplay query={pohListQuery} name={"PohListQuery"}/>
+        <BindListModal isOpen={modal == 'bindList'} onClose={() => setModal('')}/>
+        <PohListModal isOpen={modal == 'pohList'} onClose={() => setModal('')}/>
     </div>
 
 }
@@ -174,11 +141,15 @@ export default function User() {
         <div className={`font-bold text-lg`}>LoginButton</div>
 
         <div className={`bg-gray-100 p-5 mt-5`}>
-            <LoginButton methods={[ "twitter", 'facebook',"discord","github","youtube","telegram"]} popoverPosition={"left"} walletMethods={WalletMethod}/>
+            <LoginButton
+                methods={LoginMethodList}
+                recommendMethods={RecommendLoginMethodList}
+                popoverPosition={"left"}
+                walletMethods={WalletList}
+            />
         </div>
-        <RoutePrivate>
-            <LoginContent/>
-        </RoutePrivate>
+
+        <LoginContent/>
 
 
     </div>

package/example/src/pages/Wallet.tsx

@@ -1,23 +1,92 @@
-import {Hooks} from "@matchain/matchid-sdk-react"
-import React, {useState} from "react";
-import {createPublicClient, http, formatUnits, parseUnits, createWalletClient, parseGwei, Account} from "viem";
+import {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,
+    parseUnits,
+    parseGwei,
+    Account,
+    Transport,
+    HttpTransportConfig, http, TransactionSerializable
+} from "viem";
 import {useQuery} from "@tanstack/react-query";
-import {bscTestnet} from 'viem/chains';
+import {
+    mainnet,
+    arbitrum,
+    arbitrumGoerli,
+    arbitrumNova,
+    arbitrumSepolia,
+    avalanche,
+    base,
+    baseSepolia,
+    baseGoerli,
+    bsc,
+    bscTestnet,
+    goerli,
+    linea,
+    lineaGoerli,
+    lineaSepolia,
+    sepolia,
+    polygonMumbai,
+    polygon,
+    polygonAmoy,
+    zkSync,
+} from 'viem/chains';
+import {matchMain, matchTest} from "@/config/chains";
+import useLocalStore from "@/store/useLocalStore";
+import ButtonGroup from "@/components/ButtonGroup";
+import Erc20Abi from "@/abi/erc20.json";
+import type {Abi} from "abitype";
 
-const {useWallet} = Hooks
+const chainList = [
+    mainnet,
+    bsc,
+    bscTestnet,
+    matchMain,
+    matchTest,
+    arbitrum,
+    arbitrumGoerli,
+    arbitrumNova,
+    arbitrumSepolia,
+    avalanche,
+    base,
+    baseSepolia,
+    baseGoerli,
+    goerli,
+    linea,
+    lineaGoerli,
+    lineaSepolia,
+    sepolia,
+    polygonMumbai,
+    polygon,
+    polygonAmoy,
+    zkSync,
+]
 
 export default function Wallet() {
+
+    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} = useWallet()
-    const chain = bscTestnet
+    const {address, evmAccount, createWalletClient, walletReady} = useWallet()
+    const chain = chainList.find((chain) => chain.id === initChainId)
+
     const walletClient = createWalletClient({
         chain: chain,
         transport: http(),
+        // account:evmAccount
     })
 
+    useEffect(() => {
+        if (address && !toAddress) {
+            setToAddress(address)
+        }
+    }, [address, toAddress]);
+
 
     const [hash, setHash] = useState('')
     const [transactionSign, setTransactionSign] = useState('')
@@ -25,7 +94,7 @@ export default function Wallet() {
 
     const publicClient = createPublicClient({
         chain: chain,
-        transport: http(),
+        transport: http() as Transport,
     });
 
     const balanceQuery = useQuery({
@@ -46,7 +115,13 @@ export default function Wallet() {
         }
     })
 
+    useEffect(() => {
+        gasPriceQuery.refetch()
+        balanceQuery.refetch()
+    }, [chain]);
+
     const onSign = async () => {
+        if (!walletClient) return;
         const res = await walletClient.signMessage({
             message,
             account: evmAccount as Account
@@ -55,43 +130,62 @@ export default function Wallet() {
     }
 
     const onSignTransaction = async () => {
-        const transaction = {
-            account:evmAccount as Account,
-            to: toAddress as `0x${string}`,
-            value: parseUnits(toAmount, 18),
-            data: data as `0x${string}`,
+        if (!walletClient || !evmAccount) return
+        try {
+
+            const transaction = {
+                to: toAddress as `0x${string}`,
+                value: parseUnits(toAmount, 18),
+                data: data as `0x${string}`,
+                chain: chain
+            }
+            const request = await walletClient.prepareTransactionRequest(transaction)
+            const res = await evmAccount.signTransaction!(request as TransactionSerializable)
+            setTransactionSign(res)
+        } catch (e) {
+            console.error(e)
         }
-        const request = await walletClient.prepareTransactionRequest(transaction)
-        const res = await walletClient.signTransaction(request)
-        setTransactionSign(res)
     }
 
     const onSendTransaction = async () => {
+        if (!walletClient) return
         const res = await walletClient.sendTransaction({
-            account:evmAccount as Account,
+            // account:evmAccount as Account,
             to: toAddress as `0x${string}`,
             value: parseUnits(toAmount, 18),
             data: data as `0x${string}`,
+            chain: chain
         })
         setHash(res)
     }
 
 
     return <div>
-        <div className={`text-ellipsis break-words`}>Chain:{chain.name}</div>
-        <div className={`text-ellipsis break-words`}>address:{address}</div>
+        <ButtonGroup title={"Wallet Ready"}>
+            {walletReady ? 'Ready' : 'Not Ready'}
+        </ButtonGroup>
+        <ButtonGroup title={"CreateWalletClient Chain"}>
+            <select value={initChainId} onChange={(e) => setInitChainId(parseInt(e.target.value))}>
+                {chainList.map((chain, index) => {
+                    return <option key={index} value={chain.id}>{chain.name}({chain.id})</option>
+                })}
+            </select>
+        </ButtonGroup>
+        <ButtonGroup title={"Ethereum address"}>
+            <div className={`flex-1 flex-wrap break-all`}>{address}</div>
+        </ButtonGroup>
+        <ButtonGroup title={"Signature Message"}>
+            <input className="border px-[8px]" type={'text'} placeholder={'message'} value={message}
+                   onChange={(e) => setMessage(e.target.value)}/>
+            <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>
+        </ButtonGroup>
+
         <div className={`text-ellipsis break-words`}>balance:{balanceQuery.data?.toString()} wei/{balanceEth} eth</div>
         <div className={`text-ellipsis break-words`}>gas price:{gasPriceQuery.data?.toString()} wei</div>
-        <div className={`flex gap-[20px]`}>
-            <input className="border" type={'text'} placeholder={'message'} value={message}
-                   onChange={(e) => setMessage(e.target.value)}/>
-            <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={onSign}>Sign message
-            </button>
-        </div>
-        <div>
-            Signature:{signature}
-        </div>
+
         <div className="text-bold">
             Send Transaction
         </div>
@@ -110,21 +204,142 @@ export default function Wallet() {
             <input className="border" type={'text'} placeholder={'data'} value={data}
                    onChange={(e) => setToData(e.target.value)}/>
         </div>
-        <div className={`flex gap-[20px]`}>
-            <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={onSignTransaction}>Sign
-            </button>
-            <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={onSendTransaction}>Send
-            </button>
-        </div>
-        <div>
-            Sign:{transactionSign}
-        </div>
-        <div>
-            TxHash:{hash}
-        </div>
+        <ButtonGroup>
+            <Button onClick={onSignTransaction} size={"sm"} disabled={!walletReady}>Sign</Button>
+            <Button onClick={onSendTransaction} size={"sm"} disabled={!walletReady}>Send</Button>
+        </ButtonGroup>
+        <ButtonGroup title={"TxSignature"}>
+            <div className={`flex-1 flex-wrap break-all`}>{transactionSign || '-'}</div>
+        </ButtonGroup>
+        <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

@@ -0,0 +1,51 @@
+import {create} from 'zustand';
+import {devtools, persist} from 'zustand/middleware';
+import {LocaleType} from "@matchain/matchid-sdk-react/types";
+
+interface StoreState {
+    appid: string
+    endpoints: {
+        back: string;
+        auth: string;
+    }
+    locale: LocaleType;
+
+
+    setAppid: (appid: string) => void;
+    setEndpoints: (endpoints: StoreState['endpoints']) => void
+    setLocale: (locale: LocaleType) => void
+
+    initChainId: number;
+    setInitChainId: (initChainId: number) => void
+
+    erc20Address: string;
+    setErc20Address: (erc20Address: string) => void;
+
+}
+
+const persistedState = persist<StoreState>(
+    set => ({
+        appid: '',
+        endpoints: {
+            back: "https://api.matchid.ai/",
+            auth: "https://auth.matchid.ai/"
+        },
+        locale: 'en',
+        setAppid: (appid: string) => set({appid: appid}),
+        setEndpoints: (endpoints: StoreState['endpoints']) => set({endpoints}),
+        setLocale: (locale: LocaleType) => set({locale}),
+
+        initChainId:1,
+        setInitChainId: (initChainId: number) => set({initChainId}),
+
+        erc20Address: '',
+        setErc20Address: (erc20Address: string) => set({erc20Address})
+    }),
+    {name: 'match-example-local'}
+);
+
+const useLocalStore = create(devtools(persistedState));
+
+export const localStore = useLocalStore;
+
+export default useLocalStore;

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.1",
+  "version": "0.1.42-alpha.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -28,6 +28,10 @@
       "import": "./dist/assets/icon/index.mjs",
       "require": "./dist/assets/icon/index.js"
     },
+    "./types": {
+      "import": "./dist/types/index.mjs",
+      "require": "./dist/types/index.js"
+    },
     "./index.css": "./dist/index.css"
   },
   "scripts": {
@@ -81,6 +85,7 @@
     "chokidar": "^4.0.3",
     "npm-run-all": "^4.1.5",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "url-loader": "^4.1.1"
   }
 }