@matchain/matchid-sdk-react 0.1.42-alpha.2 → 0.1.42-alpha.4

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, 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 RoutePrivate from "@/components/RoutePrivate";
+import useLocalStore from "@/store/useLocalStore";
+import ButtonGroup from "@/components/ButtonGroup";
+import type {SerializeTransactionFn} from "viem/utils/transaction/serializeTransaction";
 
-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,16 @@ 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>
 
     </div>
 }

package/example/src/store/useLocalStore.ts

@@ -0,0 +1,45 @@
+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
+
+}
+
+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})
+    }),
+    {name: 'match-example-local'}
+);
+
+const useLocalStore = create(devtools(persistedState));
+
+export const localStore = useLocalStore;
+
+export default useLocalStore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.42-alpha.2",
+  "version": "0.1.42-alpha.4",
   "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"
   }
 }

package/dist/assets/icon/index.d.mts

@@ -1,133 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { CSSProperties } from 'react';
-import { m as IconProps$1 } from '../../types.d-DwF-Pkvh.mjs';
-
-declare function BackIcon({ color, size, className, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CloseIcon({ color, size, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-}): react_jsx_runtime.JSX.Element;
-
-declare function XIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function GoogleIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function WalletIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function TelegramIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function EmailIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowRightIcon({ color, size, className, style }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function CloseRoundIcon({ size, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-interface LoadingIconProps {
-    size?: number;
-    className?: string;
-    color?: string;
-}
-declare const LoadingIcon: React.FC<LoadingIconProps>;
-
-declare function EmailLineIcon({ size, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare const UnLoginIcon: React.FC<IconProps$1>;
-
-declare const LoginIcon: React.FC<IconProps$1>;
-
-declare function CheckRoundIcon({ size, color, ...props }: Omit<IconProps$1, 'width' | 'height'>): react_jsx_runtime.JSX.Element;
-
-declare function PasswordRoundIcon(): react_jsx_runtime.JSX.Element;
-
-type IconProps = {
-    color?: string,
-    height?: string|number,
-    width?: string|number,
-    className?: string
-    size?: number
-}
-
-type IconSizeColorProps = Omit<IconProps, 'height' |'width'>
-
-type IconSizeProps = Omit<IconProps, 'color'|'height'|'width'>
-
-declare function CloseEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function OpenEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function DeleteRoundIcon({ height, width, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function FacebookIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowLeftIcon({ color, width, height, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function GithubIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function DiscordIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CheckIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function CopyIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function LinkedinIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function YoutubeIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ArrowDownIcon({ width, height, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-
-declare function LeatherIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function UnisatIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function XverseIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TronLinkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function OKXIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BitgetIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon$1({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, BTCDarkIcon, BTCLightIcon, BackIcon, BitgetIcon, CheckIcon, CheckRoundIcon, CloseEyeIcon, CloseIcon, CloseRoundIcon, CopyIcon, DeleteRoundIcon, DiscordIcon, EVMDarkIcon, EVMLightIcon, EmailIcon, EmailLineIcon, FacebookIcon, GithubIcon, GoogleIcon, LeatherIcon, LinkedinIcon, LoadingIcon, LoginIcon, OKXIcon, OpenEyeIcon, PasswordRoundIcon, SOLDarkIcon, SOLLightIcon, TRXDarkIcon, TRXLightIcon, TelegramIcon, TonLightIcon$1 as TonDarkIcon, TonLightIcon, TronLinkIcon, UnLoginIcon, UnisatIcon, WalletIcon, XIcon, XverseIcon, YoutubeIcon };

package/dist/assets/icon/index.d.ts

@@ -1,133 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { CSSProperties } from 'react';
-import { m as IconProps$1 } from '../../types.d-DwF-Pkvh.js';
-
-declare function BackIcon({ color, size, className, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CloseIcon({ color, size, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-}): react_jsx_runtime.JSX.Element;
-
-declare function XIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function GoogleIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function WalletIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function TelegramIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function EmailIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowRightIcon({ color, size, className, style }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function CloseRoundIcon({ size, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-interface LoadingIconProps {
-    size?: number;
-    className?: string;
-    color?: string;
-}
-declare const LoadingIcon: React.FC<LoadingIconProps>;
-
-declare function EmailLineIcon({ size, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare const UnLoginIcon: React.FC<IconProps$1>;
-
-declare const LoginIcon: React.FC<IconProps$1>;
-
-declare function CheckRoundIcon({ size, color, ...props }: Omit<IconProps$1, 'width' | 'height'>): react_jsx_runtime.JSX.Element;
-
-declare function PasswordRoundIcon(): react_jsx_runtime.JSX.Element;
-
-type IconProps = {
-    color?: string,
-    height?: string|number,
-    width?: string|number,
-    className?: string
-    size?: number
-}
-
-type IconSizeColorProps = Omit<IconProps, 'height' |'width'>
-
-type IconSizeProps = Omit<IconProps, 'color'|'height'|'width'>
-
-declare function CloseEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function OpenEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function DeleteRoundIcon({ height, width, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function FacebookIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowLeftIcon({ color, width, height, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function GithubIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function DiscordIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CheckIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function CopyIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function LinkedinIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function YoutubeIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ArrowDownIcon({ width, height, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-
-declare function LeatherIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function UnisatIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function XverseIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TronLinkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function OKXIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BitgetIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon$1({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, BTCDarkIcon, BTCLightIcon, BackIcon, BitgetIcon, CheckIcon, CheckRoundIcon, CloseEyeIcon, CloseIcon, CloseRoundIcon, CopyIcon, DeleteRoundIcon, DiscordIcon, EVMDarkIcon, EVMLightIcon, EmailIcon, EmailLineIcon, FacebookIcon, GithubIcon, GoogleIcon, LeatherIcon, LinkedinIcon, LoadingIcon, LoginIcon, OKXIcon, OpenEyeIcon, PasswordRoundIcon, SOLDarkIcon, SOLLightIcon, TRXDarkIcon, TRXLightIcon, TelegramIcon, TonLightIcon$1 as TonDarkIcon, TonLightIcon, TronLinkIcon, UnLoginIcon, UnisatIcon, WalletIcon, XIcon, XverseIcon, YoutubeIcon };