@matchain/matchid-sdk-react 0.1.44-alpha.3 → 0.1.44-alpha.5

package/dist/index.mjs

@@ -1,19 +1,19 @@
+import {
+  chains_exports
+} from "./chunk-HYQ3T6WW.mjs";
 import {
   api_exports
-} from "./chunk-7PMDBILL.mjs";
+} from "./chunk-3HJGQPXY.mjs";
 import {
   MatchProvider,
   components_exports,
   hooks_exports,
   useMatch
-} from "./chunk-YYO4X2NB.mjs";
+} from "./chunk-KOA6YG3K.mjs";
+import "./chunk-DPXMCLYK.mjs";
 import {
   types_exports
 } from "./chunk-SQIJR7RA.mjs";
-import "./chunk-DPXMCLYK.mjs";
-import {
-  chains_exports
-} from "./chunk-HYQ3T6WW.mjs";
 import "./chunk-J5LGTIGS.mjs";
 export {
   api_exports as Api,

package/dist/types/index.d.mts

@@ -1,3 +1,3 @@
 export { A as AuthParams, C as ChainType, E as EmbeddedWalletsParams, R as RecoveryType } from '../mpc-CTbBWHld.mjs';
-export { A as AnyObject, m as BindInfoType, n as BindItemType, o as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, p as DrawerProps, E as EmailModalProps, a as IEnvConfigType, q as IEnvName, r as ILoginWalletReq, I as IMatchEvents, b as ISocialLoginMethod, s as IconProps, d as InputProps, L as LocaleType, f as LoginBoxProps, c as LoginMethodType, l as LoginModalProps, k as LoginPanelProps, t as MessageType, M as ModalProps, e as ModalWithHeaderProps, g as OtherLoginMethodType, O as OverviewInfo, u as PohItemType, v as PohZkpassParams, i as PopoverPositionType, P as PopoverProps, j as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, U as UserPopoverProps, W as WalletConfigType, w as WalletPanelProps, x as WalletReceiveMessageType, h as WalletType } from '../types-E2MeOwmE.mjs';
+export { A as AnyObject, n as BindInfoType, o as BindItemType, p as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, q as DrawerProps, E as EmailModalProps, a as IEnvConfigType, r as IEnvName, s as ILoginWalletReq, I as IMatchEvents, j as ISocialLoginMethod, m as IconProps, b as InputProps, L as LocaleType, d as LoginBoxProps, l as LoginMethodType, i as LoginModalProps, h as LoginPanelProps, t as MessageType, M as ModalProps, c as ModalWithHeaderProps, O as OtherLoginMethodType, k as OverviewInfo, u as PohItemType, v as PohZkpassParams, f as PopoverPositionType, P as PopoverProps, g as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, U as UserPopoverProps, W as WalletConfigType, w as WalletPanelProps, x as WalletReceiveMessageType, e as WalletType } from '../types-BOCbo3U7.mjs';
 import 'react';

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { A as AuthParams, C as ChainType, E as EmbeddedWalletsParams, R as RecoveryType } from '../mpc-CTbBWHld.js';
-export { A as AnyObject, m as BindInfoType, n as BindItemType, o as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, p as DrawerProps, E as EmailModalProps, a as IEnvConfigType, q as IEnvName, r as ILoginWalletReq, I as IMatchEvents, b as ISocialLoginMethod, s as IconProps, d as InputProps, L as LocaleType, f as LoginBoxProps, c as LoginMethodType, l as LoginModalProps, k as LoginPanelProps, t as MessageType, M as ModalProps, e as ModalWithHeaderProps, g as OtherLoginMethodType, O as OverviewInfo, u as PohItemType, v as PohZkpassParams, i as PopoverPositionType, P as PopoverProps, j as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, U as UserPopoverProps, W as WalletConfigType, w as WalletPanelProps, x as WalletReceiveMessageType, h as WalletType } from '../types-E2MeOwmE.js';
+export { A as AnyObject, n as BindInfoType, o as BindItemType, p as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, q as DrawerProps, E as EmailModalProps, a as IEnvConfigType, r as IEnvName, s as ILoginWalletReq, I as IMatchEvents, j as ISocialLoginMethod, m as IconProps, b as InputProps, L as LocaleType, d as LoginBoxProps, l as LoginMethodType, i as LoginModalProps, h as LoginPanelProps, t as MessageType, M as ModalProps, c as ModalWithHeaderProps, O as OtherLoginMethodType, k as OverviewInfo, u as PohItemType, v as PohZkpassParams, f as PopoverPositionType, P as PopoverProps, g as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, U as UserPopoverProps, W as WalletConfigType, w as WalletPanelProps, x as WalletReceiveMessageType, e as WalletType } from '../types-BOCbo3U7.js';
 import 'react';

package/dist/{types-E2MeOwmE.d.mts → types-BOCbo3U7.d.mts}

@@ -241,4 +241,4 @@ type WalletPanelProps = DrawerProps & {
     title?: React.ReactNode;
 };
 
-export type { AnyObject as A, ButtonProps as B, CEXType as C, DeepPartial as D, EmailModalProps as E, IMatchEvents as I, LocaleType as L, ModalProps as M, OverviewInfo as O, PopoverProps as P, RecommendLoginMethodType as R, ThemeType as T, UserPopoverProps as U, WalletConfigType as W, IEnvConfigType as a, ISocialLoginMethod as b, LoginMethodType as c, InputProps as d, ModalWithHeaderProps as e, LoginBoxProps as f, OtherLoginMethodType as g, WalletType as h, PopoverPositionType as i, PopoverTypeType as j, LoginPanelProps as k, LoginModalProps as l, BindInfoType as m, BindItemType as n, BindWalletParam as o, DrawerProps as p, IEnvName as q, ILoginWalletReq as r, IconProps as s, MessageType as t, PohItemType as u, PohZkpassParams as v, WalletPanelProps as w, WalletReceiveMessageType as x };
+export type { AnyObject as A, ButtonProps as B, CEXType as C, DeepPartial as D, EmailModalProps as E, IMatchEvents as I, LocaleType as L, ModalProps as M, OtherLoginMethodType as O, PopoverProps as P, RecommendLoginMethodType as R, ThemeType as T, UserPopoverProps as U, WalletConfigType as W, IEnvConfigType as a, InputProps as b, ModalWithHeaderProps as c, LoginBoxProps as d, WalletType as e, PopoverPositionType as f, PopoverTypeType as g, LoginPanelProps as h, LoginModalProps as i, ISocialLoginMethod as j, OverviewInfo as k, LoginMethodType as l, IconProps as m, BindInfoType as n, BindItemType as o, BindWalletParam as p, DrawerProps as q, IEnvName as r, ILoginWalletReq as s, MessageType as t, PohItemType as u, PohZkpassParams as v, WalletPanelProps as w, WalletReceiveMessageType as x };

package/dist/{types-E2MeOwmE.d.ts → types-BOCbo3U7.d.ts}

@@ -241,4 +241,4 @@ type WalletPanelProps = DrawerProps & {
     title?: React.ReactNode;
 };
 
-export type { AnyObject as A, ButtonProps as B, CEXType as C, DeepPartial as D, EmailModalProps as E, IMatchEvents as I, LocaleType as L, ModalProps as M, OverviewInfo as O, PopoverProps as P, RecommendLoginMethodType as R, ThemeType as T, UserPopoverProps as U, WalletConfigType as W, IEnvConfigType as a, ISocialLoginMethod as b, LoginMethodType as c, InputProps as d, ModalWithHeaderProps as e, LoginBoxProps as f, OtherLoginMethodType as g, WalletType as h, PopoverPositionType as i, PopoverTypeType as j, LoginPanelProps as k, LoginModalProps as l, BindInfoType as m, BindItemType as n, BindWalletParam as o, DrawerProps as p, IEnvName as q, ILoginWalletReq as r, IconProps as s, MessageType as t, PohItemType as u, PohZkpassParams as v, WalletPanelProps as w, WalletReceiveMessageType as x };
+export type { AnyObject as A, ButtonProps as B, CEXType as C, DeepPartial as D, EmailModalProps as E, IMatchEvents as I, LocaleType as L, ModalProps as M, OtherLoginMethodType as O, PopoverProps as P, RecommendLoginMethodType as R, ThemeType as T, UserPopoverProps as U, WalletConfigType as W, IEnvConfigType as a, InputProps as b, ModalWithHeaderProps as c, LoginBoxProps as d, WalletType as e, PopoverPositionType as f, PopoverTypeType as g, LoginPanelProps as h, LoginModalProps as i, ISocialLoginMethod as j, OverviewInfo as k, LoginMethodType as l, IconProps as m, BindInfoType as n, BindItemType as o, BindWalletParam as p, DrawerProps as q, IEnvName as r, ILoginWalletReq as s, MessageType as t, PohItemType as u, PohZkpassParams as v, WalletPanelProps as w, WalletReceiveMessageType as x };

package/example/src/config/chains/matchMain.ts

@@ -16,7 +16,7 @@ export const matchMain = /*#__PURE__*/ defineChain({
             apiUrl: "https://matchscan.io/api",
         },
     },
-    iconUrl: "https://matchscan.io/static/identicon_logos/blockies.png",
+    iconUrl: "https://match-website-cdn.s3.ap-northeast-1.amazonaws.com/tgapp/logo_black.png",
     contracts: {
         multicall3: {
             address: "0xca11bde05977b3631167028862be2a173976ca11",

package/example/src/config/chains/matchTest.ts

@@ -17,7 +17,7 @@ export const matchTest = /*#__PURE__*/ defineChain({
             apiUrl: "https://testnet.matchscan.io/api",
         },
     },
-    iconUrl: "https://testnet.matchscan.io/static/identicon_logos/blockies.png",
+    iconUrl: "https://match-website-cdn.s3.ap-northeast-1.amazonaws.com/tgapp/logo_black.png",
     contracts: {
         multicall3: {
             address: "0xca11bde05977b3631167028862be2a173976ca11",

package/example/src/pages/Wallet.tsx

@@ -70,7 +70,7 @@ export default function Wallet() {
 
     const [message, setMessage] = useState('hello')
     const [toAddress, setToAddress] = useState('')
-    const [toAmount, setToAmount] = useState('0.0001')
+    const [toAmount, setToAmount] = useState('0.000001')
     const [data, setToData] = useState('0x')
     const {address, evmAccount, createWalletClient, walletReady} = useWallet()
     const chain = chainList.find((chain) => chain.id === initChainId)
@@ -118,7 +118,7 @@ export default function Wallet() {
     useEffect(() => {
         gasPriceQuery.refetch()
         balanceQuery.refetch()
-    }, [chain]);
+    }, [chain,address]);
 
     const onSign = async () => {
         if (!walletClient) return;
@@ -220,11 +220,9 @@ export default function Wallet() {
 
 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,
@@ -279,39 +277,128 @@ function ERC20() {
     },[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)],
+
+    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{
+                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(),
                 })
-                setHash(hash)
+                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 <>
+            <ButtonGroup title={"Transfer"}>
+                <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>
+
+            </ButtonGroup>
+
+            <ButtonGroup title={"Transaction"}>
+                <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(){
+        const [to, setTo] = useState(address)
+        const [hash, setHash] = useState('')
+        const [amount, setAmount] = useState('0.0001')
+        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')
 
-        }catch(error:any){
-            console.error(error)
-            alert(error.message)
-        }finally {
-            setLoading(false)
+                const walletClient = createWalletClient({
+                    chain:chain,
+                    transport:http(),
+                })
+                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)],
+                    })
+                    setHash(hash)
+                }
+
+
+            }catch(error:any){
+                console.error(error)
+                alert(error.message)
+            }finally {
+                setLoading(false)
+            }
         }
+
+        return <>
+            <ButtonGroup title={"Approve"}>
+                <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>
+
+            </ButtonGroup>
+
+            <ButtonGroup title={"Transaction"}>
+                <Button size={"sm"} loading={loading} onClick={onSend} disabled={!to||!amount||!walletReady}>Send</Button>
+                <div className={`flex-1 flex-wrap break-all`}>{hash}</div>
+            </ButtonGroup>
+        </>
     }
-    return <div>
+
+    return <div className="mt-[20px]">
         <ButtonGroup title={"ERC20"}></ButtonGroup>
         <ButtonGroup title={"Contract Address"}>
             <input className="border px-[8px]" type={'text'} placeholder={'contact'} value={erc20Address}
@@ -325,21 +412,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>
-        <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>
+        <Transfer/>
+        <Approve/>
     </div>
 }

package/package.json

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