@matchain/matchid-sdk-react 0.1.11 → 0.1.13

package/example/package.json

@@ -13,6 +13,7 @@
   "license": "ISC",
   "description": "",
   "alias": {
+    "viem": "../node_modules/viem",
     "react": "../node_modules/react",
     "react-dom": "../node_modules/react-dom/profiling",
     "axios": "../node_modules/axios",

package/example/src/App.tsx

@@ -3,8 +3,10 @@ import {MatchProvider} from "@matchain/matchid-sdk-react";
 import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
 import Home from "./pages/Home";
 import './app.css'
-import Login from "./pages/Login";
+import User from "./pages/User";
 import "@matchain/matchid-sdk-react/index.css"
+import RoutePrivate from "./components/RoutePrivate";
+import Wallet from "@/pages/Wallet";
 
 const getState = () => {
     if (window.localStorage.getItem('match-local')) {
@@ -17,10 +19,12 @@ const getState = () => {
 function App() {
     const state = getState()
     const [appid, setAppid] = useState(state?.appid || '')
-    const [env, setEnv] = useState<"main" | "dev" | "test">(state?.env || 'main')
-    //matchain team will debug in dev env
-    const isMatchainTeam = !!window.localStorage.getItem("isMatchainTeam")
-    return <MatchProvider appid={appid} env={env}  events={{
+    const [endpoints, setEndpoints] = useState<{
+        auth: string,
+        back: string
+    }>(state?.endpoints)
+
+    return <MatchProvider appid={appid} endpoints={endpoints} events={{
         onLogin: (data) => {
             console.log('events.onLogin', data)
         },
@@ -35,23 +39,27 @@ function App() {
                 <input value={appid} placeholder={"Appid"} className={"border-solid border"} onChange={(ele) => {
                     setAppid(ele.target.value)
                 }}/>
-                <label>Env:</label>
-                <select value={env} onChange={(ele) => {
-                    setEnv(ele.target.value as any)
-                }}>
-                    <option value="main">main</option>
-                    <option value="test">test</option>
-                    {isMatchainTeam && <option value="dev">dev</option>}
-                </select>
+                <label>AuthEndpoint:</label>
+                <input value={endpoints?.auth || ''} placeholder={"Auth Endpoint"} className={"border-solid border"}
+                       onChange={(ele) => {
+                           setEndpoints({...endpoints, auth: ele.target.value})
+                       }}/>
+                <label>BackEndpoint:</label>
+                <input value={endpoints?.back || ''} placeholder={"Back Endpoint"} className={"border-solid border"}
+                       onChange={(ele) => {
+                           setEndpoints({...endpoints, back: ele.target.value})
+                       }}/>
             </div>
             <nav className={`text-2xl mb-5 p-2 text-red-600 flex gap-10`}>
                 <Link to="/">Home</Link>
-                <Link to="/login">Login</Link>
+                <Link to="/user">User</Link>
+                <Link to="/wallet">Wallet</Link>
             </nav>
             <div className={`p-4`}>
                 <Routes>
                     <Route path="/" element={<Home/>}/>
-                    <Route path="/login" element={<Login/>}/>
+                    <Route path="/user" element={<User/>}/>
+                    <Route path="/wallet" element={<Wallet/>}/>
                 </Routes>
             </div>
         </Router>

package/example/src/components/Login/index.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {Hooks,Components} from "@matchain/matchid-sdk-react/index";
+const { useUserInfo} = Hooks
+const {EmailModal,LoginModal,LoginBox,LoginPanel} = Components
+export default function Login(){
+    const {
+        loginByWallet,
+        loginByTwitter,
+        loginByGoogle,
+        loginByEmail,
+        getLoginEmailCode,
+        loginByTelegram,
+    } = useUserInfo();
+    const [email, setEmail] = React.useState('')
+    const [code, setCode] = React.useState('')
+    const [emailOpen, setEmailOpen] = React.useState(false)
+    const [loginOpen, setLoginOpen] = React.useState(false)
+
+    return (
+        <div className={`flex flex-col gap-10`}>
+            <div className={`flex gap-5`}>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByWallet}>Wallet
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByTwitter}>Twitter
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByGoogle}>Google
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByTelegram}>Telegram
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => setEmailOpen(true)}>Email
+                </button>
+                <EmailModal isOpen={emailOpen} onClose={() => setEmailOpen(false)} onBack={() => {
+                    console.log('input email modal back event')
+                    setEmailOpen(false)
+                }}/>
+
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => setLoginOpen(true)}>Modal
+                </button>
+                <LoginModal isOpen={loginOpen} onClose={() => setLoginOpen(false)}/>
+
+            </div>
+            <div className={`flex gap-5`}>
+                <input type={"text"} className={`border`} placeholder={"email"}
+                       onChange={(e) => setEmail(e.target.value)} value={email}/>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => getLoginEmailCode(email)}>Send
+                </button>
+            </div>
+            <div className={`flex gap-5`}>
+                <input type={"text"} className={`border`} placeholder={"code"}
+                       onChange={(e) => setCode(e.target.value)} value={code}/>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => loginByEmail({email, code})}>Login
+                </button>
+            </div>
+            <div className={`font-bold text-xl`}>Components</div>
+            <div className={`font-bold text-lg`}>LoginBox</div>
+            <div className={`bg-gray-100 p-10`}>
+                <div className={`bg-white`}><LoginBox/></div>
+            </div>
+            <div className={`font-bold text-lg`}>LoginPanel</div>
+            <div className={`bg-gray-100 p-10`}>
+                <div className={`bg-white`}><LoginPanel onClose={() => console.log('onLoginPanelClose')}/></div>
+            </div>
+        </div>
+    );
+}

package/example/src/components/RoutePrivate/index.tsx

@@ -0,0 +1,9 @@
+import React, {PropsWithChildren} from "react";
+import Login from "../Login";
+import {Hooks} from "@matchain/matchid-sdk-react";
+
+export default function RoutePrivate({children}: PropsWithChildren) {
+    const {isLogin} = Hooks.useUserInfo()
+
+    return isLogin ? <>{children}</> : <Login/>
+}

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

@@ -1,17 +1,13 @@
 import {Hooks, Components, Api} from "@matchain/matchid-sdk-react"
 import React from "react";
+import RoutePrivate from "../components/RoutePrivate";
 
 const {useMatchEvents, useUserInfo, useWallet} = Hooks
 const {
     LoginButton,
-    LoginBox,
-    LoginPanel,
-    EmailModal,
-    LoginModal,
     UsernameModal,
     PasswordModal,
     Button,
-    Modal
 } = Components
 
 function QueryDisplay(
@@ -53,18 +49,24 @@ function LoginContent() {
         address,
         bindWallet,
         bindTelegram,
+        auth
     } = useUserInfo();
-    const {signMessage} = useWallet()
     const [usernameOpen, setUsernameOpen] = React.useState(false)
     const [passwordOpen, setPasswordOpen] = React.useState(false)
     const refreshOv = async () => {
         await refreshOverview()
         alert('refreshed')
     }
-    const onSign = async () => {
-        const res = await signMessage('hello')
-        alert(res)
+
+    const onAuth = async () => {
+        try {
+            const res = await auth()
+            console.log('auth', res)
+        } catch (e) {
+            console.error('auth', e)
+        }
     }
+
     return <div>
         <h1 className={`text-2xl`}>You are already logged in</h1>
         <div className={`text-ellipsis break-words`}>token:{token}</div>
@@ -98,10 +100,10 @@ function LoginContent() {
             <button className={`bg-gray-300 p-1 rounded mr-5`}
                     onClick={bindTelegram}>Bind telegram
             </button>
-            <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={onSign}>Sign message
-            </button>
         </div>
+        <button className={`bg-gray-300 p-1 rounded mr-5`}
+                onClick={onAuth}>Third party auth
+        </button>
         <button className={`bg-gray-300 p-1 rounded mr-5`}
                 onClick={refreshOv}>Refresh Overview
         </button>
@@ -115,77 +117,7 @@ function LoginContent() {
 
 }
 
-function UnLogin() {
-    const {
-        loginByWallet,
-        loginByTwitter,
-        loginByGoogle,
-        loginByEmail,
-        getLoginEmailCode,
-        loginByTelegram,
-    } = useUserInfo();
-    const [email, setEmail] = React.useState('')
-    const [code, setCode] = React.useState('')
-    const [emailOpen, setEmailOpen] = React.useState(false)
-    const [loginOpen, setLoginOpen] = React.useState(false)
-
-    return (
-        <div className={`flex flex-col gap-10`}>
-            <div className={`flex gap-5`}>
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={loginByWallet}>Wallet
-                </button>
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={loginByTwitter}>Twitter
-                </button>
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={loginByGoogle}>Google
-                </button>
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={loginByTelegram}>Telegram
-                </button>
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={() => setEmailOpen(true)}>Email
-                </button>
-                <EmailModal isOpen={emailOpen} onClose={() => setEmailOpen(false)} onBack={() => {
-                    console.log('input email modal back event')
-                    setEmailOpen(false)
-                }}/>
-
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={() => setLoginOpen(true)}>Modal
-                </button>
-                <LoginModal isOpen={loginOpen} onClose={() => setLoginOpen(false)}/>
-
-            </div>
-            <div className={`flex gap-5`}>
-                <input type={"text"} className={`border`} placeholder={"email"}
-                       onChange={(e) => setEmail(e.target.value)} value={email}/>
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={() => getLoginEmailCode(email)}>Send
-                </button>
-            </div>
-            <div className={`flex gap-5`}>
-                <input type={"text"} className={`border`} placeholder={"code"}
-                       onChange={(e) => setCode(e.target.value)} value={code}/>
-                <button className={`bg-gray-300 p-1 rounded`}
-                        onClick={() => loginByEmail({email, code})}>Login
-                </button>
-            </div>
-            <div className={`font-bold text-xl`}>Components</div>
-            <div className={`font-bold text-lg`}>LoginBox</div>
-            <div className={`bg-gray-100 p-10`}>
-                <div className={`bg-white`}><LoginBox/></div>
-            </div>
-            <div className={`font-bold text-lg`}>LoginPanel</div>
-            <div className={`bg-gray-100 p-10`}>
-                <div className={`bg-white`}><LoginPanel onClose={() => console.log('onLoginPanelClose')}/></div>
-            </div>
-        </div>
-    );
-}
-
-export default function Login() {
+export default function User() {
     useMatchEvents({
         onLogin: (data) => {
             console.log('useMatchEvents.onLogin', data)
@@ -197,9 +129,11 @@ export default function Login() {
             console.log('useMatchEvents.onBind', data)
         }
     })
-    const {isLogin} = useUserInfo()
     return <div>
-        {isLogin ? <LoginContent/> : <UnLogin/>}
+        <RoutePrivate>
+            <LoginContent/>
+        </RoutePrivate>
+
         <div className={`font-bold text-lg`}>LoginButton</div>
 
         <div className={`bg-gray-100 p-5 mt-5`}>

package/example/src/pages/Wallet.tsx

@@ -0,0 +1,130 @@
+import {Hooks} from "@matchain/matchid-sdk-react"
+import React, {useState} from "react";
+import {createPublicClient, http, formatUnits, parseUnits, createWalletClient, parseGwei, Account} from "viem";
+import {useQuery} from "@tanstack/react-query";
+import {bscTestnet} from 'viem/chains';
+
+const {useWallet} = Hooks
+
+export default function Wallet() {
+    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 walletClient = createWalletClient({
+        chain: chain,
+        transport: http(),
+    })
+
+
+    const [hash, setHash] = useState('')
+    const [transactionSign, setTransactionSign] = useState('')
+    const [signature, setSignature] = useState('')
+
+    const publicClient = createPublicClient({
+        chain: chain,
+        transport: http(),
+    });
+
+    const balanceQuery = useQuery({
+        queryKey: ['balance', address],
+        refetchInterval: 15_000,
+        queryFn: async () => {
+            return await publicClient.getBalance({address: address as `0x${string}`})
+        }
+    })
+    //to eth
+    const balanceEth = balanceQuery.data ? formatUnits(balanceQuery.data, 18) : 0
+
+    const gasPriceQuery = useQuery({
+        queryKey: ['gasPrice'],
+        refetchInterval: 15_000,
+        queryFn: async () => {
+            return await publicClient.getGasPrice()
+        }
+    })
+
+    const onSign = async () => {
+        const res = await walletClient.signMessage({
+            message,
+            account: evmAccount as Account
+        })
+        setSignature(res)
+    }
+
+    const onSignTransaction = async () => {
+        const transaction = {
+            account:evmAccount as Account,
+            to: toAddress as `0x${string}`,
+            value: parseUnits(toAmount, 18),
+            data: data as `0x${string}`,
+        }
+        const request = await walletClient.prepareTransactionRequest(transaction)
+        const res = await walletClient.signTransaction(request)
+        setTransactionSign(res)
+    }
+
+    const onSendTransaction = async () => {
+        const res = await walletClient.sendTransaction({
+            account:evmAccount as Account,
+            to: toAddress as `0x${string}`,
+            value: parseUnits(toAmount, 18),
+            data: data as `0x${string}`,
+        })
+        setHash(res)
+    }
+
+
+    return <div>
+        <div className={`text-ellipsis break-words`}>Chain:{chain.name}</div>
+        <div className={`text-ellipsis break-words`}>address:{address}</div>
+        <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>
+        <div>
+            To Address:
+            <input className="border" type={'text'} placeholder={'to address'} value={toAddress}
+                   onChange={(e) => setToAddress(e.target.value)}/>
+        </div>
+        <div>
+            Amount:
+            <input className="border" type={'text'} placeholder={'amount'} value={toAmount}
+                   onChange={(e) => setToAmount(e.target.value)}/>
+        </div>
+        <div>
+            Data:
+            <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>
+
+
+    </div>
+}

package/example/tsconfig.json

@@ -10,7 +10,11 @@
       "moduleResolution": "node", // 使用 Node.js 风格的模块解析
       "esModuleInterop": true,
       "skipLibCheck": true,
-      "forceConsistentCasingInFileNames": true
+      "forceConsistentCasingInFileNames": true,
+      "baseUrl": "./",
+      "paths": {
+        "@/*": ["src/*"]
+      }
     },
     "include": ["src"]
   }

package/example/vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
+      '@': path.resolve(__dirname, 'src'),
       '@matchain/matchid-sdk-react': path.resolve(__dirname, '../dist'),
     },
   },

package/package.json

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