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

package/example/src/App.tsx

@@ -1,32 +1,57 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {MatchProvider} from "@matchain/matchid-sdk-react";
-import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
+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 RoutePrivate from "@/components/RoutePrivate";
+import useLocalStore from "@/store/useLocalStore";
 
-const getState = () => {
-    if (window.localStorage.getItem('match-local')) {
-        const state = JSON.parse(window.localStorage.getItem('match-local') as string)
-        return state.state
-    }
-    return null
+
+function Nav() {
+    const {isLogin} = useUserInfo()
+    const location = useLocation()
+    const menus = useMemo(() => {
+        const list: {
+            name: string,
+            url: string
+            onActive: boolean
+            hidden?: boolean
+        }[] = [
+            {
+                name: 'Home',
+                url: '/',
+                onActive: location.pathname === '/'
+            },
+            {
+                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`}>
+        {menus.map((menu) => {
+            return <Link key={menu.url} to={menu.url}
+                         className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'}`}>{menu.name}</Link>
+        })}
+    </nav>
 }
 
 function App() {
-    const state = getState()
-    const [appid, setAppid] = useState(state?.appid || '')
-    const [locale,setLocale] = useState(window.localStorage.getItem('locale')||'en')
-    useEffect(()=>{
-        window.localStorage.setItem('locale',locale)
-    },[locale])
-    const [endpoints, setEndpoints] = useState<{
-        auth: string,
-        back: string
-    }>(state?.endpoints)
+    const {appid, setAppid,locale,setLocale,endpoints, setEndpoints}= useLocalStore()
 
     return <MatchProvider appid={appid} endpoints={endpoints} locale={locale} events={{
         onLogin: (data) => {
@@ -36,6 +61,9 @@ function App() {
             console.log('events.onLogout')
         }
     }}
+                          wallet={{
+                              type:"UserPasscode"
+                          }}
     >
         <Router>
             <div className={`mb-2 p-2 flex gap-2 flex-col`}>
@@ -60,21 +88,22 @@ function App() {
                 </div>
                 <div>
                     <label>Locale:</label>
-                    <select onChange={(ele) => {setLocale(ele.target.value)}} value={locale}>
-                        {LocaleList.map((item)=><option key={item} value={item}>{item}</option>)}
+                    <select onChange={(ele) => {
+                        setLocale(ele.target.value as LocaleType)
+                    }} value={locale}>
+                        {LocaleList.map((item) => <option key={item} value={item}>{item}</option>)}
                     </select>
                 </div>
             </div>
-            <nav className={`text-2xl mb-5 p-2 text-red-600 flex gap-10`}>
-                <Link to="/">Home</Link>
-                <Link to="/user">User</Link>
-                <Link to="/wallet">Wallet</Link>
-            </nav>
+            <Nav/>
             <div className={`p-4`}>
                 <Routes>
                     <Route path="/" element={<Home/>}/>
-                    <Route path="/user" element={<User/>}/>
-                    <Route path="/wallet" element={<Wallet/>}/>
+
+                    <Route element={<RoutePrivate/>}>
+                        <Route path="/user" element={<User/>}/>
+                        <Route path="/wallet" element={<Wallet/>}/>
+                    </Route>
                 </Routes>
             </div>
         </Router>

package/example/src/abi/erc20.json

@@ -0,0 +1,222 @@
+[
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "fallback"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  }
+]

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

@@ -0,0 +1,10 @@
+import {PropsWithChildren} from "react";
+
+export default function ButtonGroup({children,title}: PropsWithChildren&{
+    title?: string
+}) {
+    return <div className={`flex gap-[16px] flex-wrap items-center`}>
+        {title&&<div className={`text-xl`}>{title}</div>}
+        {children}
+    </div>
+}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import {Hooks,Components} from "@matchain/matchid-sdk-react";
-import {LoginMethod, WalletMethod} from "@/config";
+import {LoginMethod, WalletList} from "@/config";
 import {LoginMethodType} from "../../../../src/types/types";
 const { useUserInfo} = Hooks
 const {EmailModal,LoginModal,LoginBox,LoginPanel} = Components
@@ -38,7 +38,7 @@ export default function Login(){
                 }}/>
 
 
-                <LoginModal isOpen={loginOpen} walletMethods={WalletMethod} onClose={() => setLoginOpen(false)} methods={[
+                <LoginModal isOpen={loginOpen} walletMethods={WalletList} onClose={() => setLoginOpen(false)} methods={[
                     'telegram',
                     'twitter',
                     'discord',

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

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

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

@@ -0,0 +1,2 @@
+export {matchMain} from "./matchMain"
+export {matchTest} from "./matchTest"

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

@@ -0,0 +1,27 @@
+import {defineChain} from "viem";
+
+export const matchMain = /*#__PURE__*/ defineChain({
+    id: 698,
+    name: "Matchain",
+    nativeCurrency: { name: "Match Coin", symbol: "BNB", decimals: 18 },
+    rpcUrls: {
+        default: {
+            http: ["https://rpc.matchain.io"],
+        },
+    },
+    blockExplorers: {
+        default: {
+            name: "Matchscan",
+            url: "https://matchscan.io/",
+            apiUrl: "https://matchscan.io/api",
+        },
+    },
+    iconUrl: "https://matchscan.io/static/identicon_logos/blockies.png",
+    contracts: {
+        multicall3: {
+            address: "0xca11bde05977b3631167028862be2a173976ca11",
+        }
+    },
+    // testnet: true,
+});
+

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

@@ -0,0 +1,33 @@
+
+import { defineChain } from "viem"
+
+export const matchTest = /*#__PURE__*/ defineChain({
+    id: 699,
+    name: "MatchTest",
+    nativeCurrency: { name: "Match Coin", symbol: "BNB", decimals: 18 },
+    rpcUrls: {
+        default: {
+            http: ["https://testnet-rpc.matchain.io"],
+        },
+    },
+    blockExplorers: {
+        default: {
+            name: "Matchscan",
+            url: "https://testnet.matchscan.io/",
+            apiUrl: "https://testnet.matchscan.io/api",
+        },
+    },
+    iconUrl: "https://testnet.matchscan.io/static/identicon_logos/blockies.png",
+    contracts: {
+        multicall3: {
+            address: "0xca11bde05977b3631167028862be2a173976ca11",
+            blockCreated: 751532,
+        },
+        ensRegistry: { address: "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e" },
+        ensUniversalResolver: {
+            address: "0xc8Af999e38273D658BE1b921b88A9Ddf005769cC",
+            blockCreated: 5_317_080,
+        },
+    },
+    // testnet: true,
+});

package/example/src/config/index.ts

@@ -1,4 +1,4 @@
-import {WalletType} from "../../../src/types/types";
+import {LoginMethodType, WalletType,RecommendLoginMethodType,OtherLoginMethodType} from "@matchain/matchid-sdk-react/types";
 
 export const LoginMethod = [
     'evm',
@@ -22,8 +22,12 @@ export const LocaleList = [
 export const CEXList = [
     "Gate", "Coinbase", "Kucoin", 'Bitget', 'OKX', 'Bybit', 'Binance']
 
-export const WalletMethod:WalletType[] = ["evm","sol","btc","tron","ton"]
+export const WalletList:WalletType[] = [
+    'btc', 'sol', 'evm', 'tron',"ton"
+]
+export const LoginMethodList : OtherLoginMethodType[] = ['twitter' , 'discord', 'github', 'telegram' ,'linkedin' , 'facebook' ,'youtube']
 
+export const RecommendLoginMethodList:RecommendLoginMethodType[] = ["wallet","email","google"]
 
 export const LOGIN_METHOD_MAP = {
     email: 'Email',

package/example/src/pages/User/components/BindListModal.tsx

@@ -0,0 +1,10 @@
+import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
+import React from "react";
+import QueryDisplay from "@/pages/User/components/QueryDisplay";
+import {Api} from "@matchain/matchid-sdk-react/index";
+export default function BindListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
+    const bindListQuery = Api.bind.useBindList()
+    return <ModalWithHeader isOpen={isOpen} onClose={onClose} title={"BindListQuery"}>
+        <QueryDisplay query={bindListQuery} />
+    </ModalWithHeader>
+}

package/example/src/pages/User/components/PohListModal.tsx

@@ -0,0 +1,10 @@
+import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
+import React from "react";
+import QueryDisplay from "@/pages/User/components/QueryDisplay";
+import {Api} from "@matchain/matchid-sdk-react/index";
+export default function PohListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
+    const pohListQuery = Api.poh.usePohList()
+    return <ModalWithHeader isOpen={isOpen} onClose={onClose} title={"PohListQuery"}>
+        <QueryDisplay query={pohListQuery} />
+    </ModalWithHeader>
+}

package/example/src/pages/User/components/QueryDisplay.tsx

@@ -0,0 +1,25 @@
+import {Button} from "@matchain/matchid-sdk-react/components";
+import React from "react";
+
+export default function QueryDisplay(
+    {
+        query
+    }: {
+        query: any
+    }
+) {
+    const keys = Object.keys(query)
+    return <div className={`max-h-[60vw] overflow-scroll`}>
+        {keys.map((key) => {
+            return <div key={key} className={`flex gap-[12px]`}>
+                <div className={"w-[110px] break-all"}>{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>
+
+}