@matchain/matchid-sdk-react 0.1.56 → 0.1.57-alpha.1

package/dist/ui.mjs

@@ -17,11 +17,11 @@ import {
   Skeleton_default,
   Switch,
   Tabs
-} from "./chunk-KFB23MLQ.mjs";
+} from "./chunk-6RNCNC65.mjs";
 import "./chunk-JX73EY6V.mjs";
 import "./chunk-UA6XHZHX.mjs";
 import "./chunk-IZOOVZAD.mjs";
-import "./chunk-GD7URBBZ.mjs";
+import "./chunk-7SUDHG7S.mjs";
 import "./chunk-XM6CYEXN.mjs";
 import "./chunk-J5LGTIGS.mjs";
 export {

package/example/src/App.tsx

@@ -1,25 +1,25 @@
-import React, {useEffect, useMemo, useState} from "react";
-import {MatchProvider, wagmiConfig} from "@matchain/matchid-sdk-react";
-import {BrowserRouter as Router, Routes, Route, Link, useLocation} from 'react-router-dom';
+import React, { useEffect, useMemo, useState } from "react";
+import { MatchProvider, wagmiConfig } from "@matchain/matchid-sdk-react";
+import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
 import Home from "./pages/Home";
 import './app.css'
 import User from "./pages/User";
 import "@matchain/matchid-sdk-react/index.css"
 import Wallet from "@/pages/Wallet";
-import {LocaleList} from "@/config";
-import {LocaleType} from "@matchain/matchid-sdk-react/types";
-import {useUserInfo} from "@matchain/matchid-sdk-react/hooks";
+import { LocaleList } from "@/config";
+import { LocaleType } from "@matchain/matchid-sdk-react/types";
+import { useMatchEvents, useUserInfo } from "@matchain/matchid-sdk-react/hooks";
 import RoutePrivate from "@/components/RoutePrivate";
 import useLocalStore from "@/store/useLocalStore";
-import {LoginButton} from "@matchain/matchid-sdk-react/components";
+import { LoginButton } from "@matchain/matchid-sdk-react/components";
 import UI from "@/pages/UI";
 import TgApp from "@/pages/TgApp";
-import {WagmiProvider} from "wagmi";
+import { WagmiProvider } from "wagmi";
 import useStore from "@/store/useStore";
 
 
 function Nav() {
-    const {isLogin} = useUserInfo()
+    const { isLogin } = useUserInfo()
     const location = useLocation()
     const menus = useMemo(() => {
         const list: {
@@ -28,43 +28,43 @@ function Nav() {
             onActive: boolean
             hidden?: boolean
         }[] = [
-            {
-                name: 'Home',
-                url: '/',
-                onActive: location.pathname === '/'
-            },
-            {
-                name: 'UI',
-                url: '/ui',
-                onActive: location.pathname === '/ui'
-            },
-            {
-                name: 'TgApp',
-                url: '/tgapp',
-                onActive: location.pathname === '/tgapp'
-            },
-            {
-                name: 'User',
-                url: '/user',
-                onActive: location.pathname === '/user'
-            },
-            {
-                name: 'Wallet',
-                url: '/wallet',
-                onActive: location.pathname === '/wallet',
-                hidden: !isLogin
-            },
-        ]
+                {
+                    name: 'Home',
+                    url: '/',
+                    onActive: location.pathname === '/'
+                },
+                {
+                    name: 'UI',
+                    url: '/ui',
+                    onActive: location.pathname === '/ui'
+                },
+                {
+                    name: 'TgApp',
+                    url: '/tgapp',
+                    onActive: location.pathname === '/tgapp'
+                },
+                {
+                    name: 'User',
+                    url: '/user',
+                    onActive: location.pathname === '/user'
+                },
+                {
+                    name: 'Wallet',
+                    url: '/wallet',
+                    onActive: location.pathname === '/wallet',
+                    hidden: !isLogin
+                },
+            ]
         return list
     }, [location.pathname, isLogin])
     return <>
         <nav className={`text-2xl mb-5 p-2 text-red-600 flex gap-10 flex-wrap`}>
             {menus.map((menu) => {
                 return <Link key={menu.url} to={menu.url}
-                             className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden ? 'hidden' : ''}`}>{menu.name}</Link>
+                    className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden ? 'hidden' : ''}`}>{menu.name}</Link>
             })}
 
-            <LoginButton/>
+            <LoginButton recommendMethods={['wallet', "email"]} walletMethods={['evm']} methods={['google', 'kakao']} />
         </nav>
 
     </>
@@ -85,44 +85,44 @@ function RouterApp() {
         color,
         setColor
     } = useLocalStore()
-    const {appSecret,setAppSecret} = useStore()
+    const { appSecret, setAppSecret } = useStore()
 
     return <Router>
         <div className={`mb-2 p-2 flex gap-2 flex-col`}>
             <div>
                 <label>BackgroundColor:</label>
                 <input value={backgroundColor} placeholder={"BackgroundColor"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setBackgroundColor(ele.target.value)
-                       }}/></div>
+                    onChange={(ele) => {
+                        setBackgroundColor(ele.target.value)
+                    }} /></div>
             <div>
                 <label>Color:</label>
                 <input value={color} placeholder={"Color"} className={"border-solid border"} onChange={(ele) => {
                     setColor(ele.target.value)
-                }}/></div>
+                }} /></div>
             <div>
                 <label>Appid:</label>
                 <input value={appid} placeholder={"Appid"} className={"border-solid border"} onChange={(ele) => {
                     setAppid(ele.target.value)
-                }}/></div>
+                }} /></div>
             <div>
                 <label>AppSecret:</label>
                 <input value={appSecret} placeholder={"AppSecret"} className={"border-solid border"} onChange={(ele) => {
                     setAppSecret(ele.target.value)
-                }}/></div>
+                }} /></div>
             <div>
                 <label>AuthEndpoint:</label>
                 <input value={endpoints?.auth || ''} placeholder={"Auth Endpoint"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setEndpoints({...endpoints, auth: ele.target.value})
-                       }}/>
+                    onChange={(ele) => {
+                        setEndpoints({ ...endpoints, auth: ele.target.value })
+                    }} />
             </div>
             <div>
                 <label>BackEndpoint:</label>
                 <input value={endpoints?.back || ''} placeholder={"Back Endpoint"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setEndpoints({...endpoints, back: ele.target.value})
-                       }}/>
+                    onChange={(ele) => {
+                        setEndpoints({ ...endpoints, back: ele.target.value })
+                    }} />
             </div>
             <div>
                 <label>Locale:</label>
@@ -141,15 +141,15 @@ function RouterApp() {
                 </select>
             </div>
         </div>
-        <Nav/>
+        <Nav />
         <div className={`p-4`}>
             <Routes>
-                <Route path="/" element={<Home/>}/>
-                <Route path="/ui" element={<UI/>}/>
-                <Route path="/tgapp" element={<TgApp/>}/>
-                <Route element={<RoutePrivate/>}>
-                    <Route path="/user" element={<User/>}/>
-                    <Route path="/wallet" element={<Wallet/>}/>
+                <Route path="/" element={<Home />} />
+                <Route path="/ui" element={<UI />} />
+                <Route path="/tgapp" element={<TgApp />} />
+                <Route element={<RoutePrivate />}>
+                    <Route path="/user" element={<User />} />
+                    <Route path="/wallet" element={<Wallet />} />
                 </Route>
             </Routes>
         </div>
@@ -157,8 +157,13 @@ function RouterApp() {
 }
 
 function App() {
-    const {appid, locale, endpoints, walletType, backgroundColor, color} = useLocalStore()
+    const { appid, locale, endpoints, walletType, backgroundColor, color } = useLocalStore()
 
+    useMatchEvents({
+        onBind() {
+            console.log("bind event");
+        },
+    });
     return <div style={{
         backgroundColor: backgroundColor,
         color: color
@@ -180,7 +185,7 @@ function App() {
                     type: walletType
                 }}
             >
-                <RouterApp/>
+                <RouterApp />
             </MatchProvider>
         </WagmiProvider>
     </div>;

package/example/src/config/index.ts

@@ -1,4 +1,4 @@
-import {LoginMethodType, WalletType,RecommendLoginMethodType,OtherLoginMethodType} from "@matchain/matchid-sdk-react/types";
+import { LoginMethodType, WalletType, RecommendLoginMethodType, OtherLoginMethodType } from "@matchain/matchid-sdk-react/types";
 
 export const LoginMethod = [
     "wallet",
@@ -14,7 +14,9 @@ export const LoginMethod = [
     'discord',
     'linkedin',
     'facebook',
-    "youtube"
+    "youtube",
+    "kakao",
+    "email"
 ]
 export const LocaleList = [
     "en", "zh", "tw", "fr", "ja", "ko", "vi", "es", "pt"
@@ -23,12 +25,12 @@ export const LocaleList = [
 export const CEXList = [
     "Gate", "Coinbase", "Kucoin", 'Bitget', 'OKX', 'Bybit', 'Binance']
 
-export const WalletList:WalletType[] = [
-    'btc', 'sol', 'evm', 'tron',"ton"
+export const WalletList: WalletType[] = [
+    'btc', 'sol', 'evm', 'tron', "ton"
 ]
-export const LoginMethodList : OtherLoginMethodType[] = ['twitter' , 'discord', 'github', 'telegram' ,'linkedin' , 'facebook' ,'youtube']
+export const LoginMethodList: OtherLoginMethodType[] = ['twitter', 'discord', 'github', 'telegram', 'linkedin', 'facebook', 'youtube']
 
-export const RecommendLoginMethodList:RecommendLoginMethodType[] = ["wallet","email","google"]
+export const RecommendLoginMethodList: RecommendLoginMethodType[] = ["wallet", "email", "google"]
 
 export const LOGIN_METHOD_MAP = {
     email: 'Email',

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,7 +10,7 @@ import {
     Transport,
     HttpTransportConfig, http, TransactionSerializable
 } from "viem";
-import {useQuery} from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import {
     mainnet,
     arbitrum,
@@ -33,7 +33,7 @@ import {
     polygonAmoy,
     zkSync,
 } from 'viem/chains';
-import {MatchMain, MatchTest} from "@matchain/matchid-sdk-react/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 +42,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,
+    MatchMain,
+    MatchTest,
     arbitrum,
     arbitrumGoerli,
     arbitrumNova,
@@ -70,16 +70,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 +108,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 +125,7 @@ export default function Wallet() {
     useEffect(() => {
         gasPriceQuery.refetch()
         balanceQuery.refetch()
-    }, [chain,address]);
+    }, [chain, address]);
 
     const onSign = async () => {
         if (!walletClient) return;
@@ -149,7 +149,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 +178,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 +208,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 +224,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 +247,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 +278,7 @@ function ERC20() {
                 args: []
             }) as number
         },
-        enabled:!!erc20Address
+        enabled: !!erc20Address
     })
 
     const symbolQuery = useQuery({
@@ -291,7 +291,7 @@ function ERC20() {
                 args: []
             }) as string
         },
-        enabled:!!erc20Address
+        enabled: !!erc20Address
     })
 
     const balanceQuery = useQuery({
@@ -299,58 +299,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 +360,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 +420,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 +441,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 +451,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>
 }