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

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) => {
@@ -37,7 +62,7 @@ function App() {
         }
     }}
                           wallet={{
-                              type:"Base"
+                              type:"UserPasscode"
                           }}
     >
         <Router>
@@ -63,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/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>
+
+}

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

@@ -1,47 +1,18 @@
-import {Hooks, Components, Api} from "@matchain/matchid-sdk-react"
-import React from "react";
-import RoutePrivate from "../components/RoutePrivate";
-import {CEXList, LOGIN_METHOD_MAP, LoginMethod, WalletMethod} from "@/config";
-import {CEXType, LoginMethodType} from "../../../src/types/types";
-
-const {useMatchEvents, useUserInfo, useWallet} = Hooks
-const {
+import React, {useState} from "react";
+import {CEXList, LOGIN_METHOD_MAP, LoginMethod, LoginMethodList, RecommendLoginMethodList, WalletList} from "@/config";
+import {CEXType, LoginMethodType} from "@matchain/matchid-sdk-react/types";
+import {useMatchEvents, useUserInfo, useWallet} from "@matchain/matchid-sdk-react/hooks";
+import {
     LoginButton,
     UsernameModal,
     PasswordModal,
-    Button,
-} = Components
-
-function QueryDisplay(
-    {
-        name,
-        query
-    }: {
-        name: string
-        query: any
-    }
-) {
-    const keys = Object.keys(query)
-    return <div>
-        <div className={`font-bold text-lg`}>{name}</div>
-        {keys.map((key) => {
-            return <div key={key} className={`flex gap-[20px]`}>
-                <div className={"w-[200px]"}>{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>
+} from "@matchain/matchid-sdk-react/components";
+import BindListModal from "@/pages/User/components/BindListModal";
+import PohListModal from "@/pages/User/components/PohListModal";
+import ButtonGroup from "@/components/ButtonGroup";
 
-}
 
 function LoginContent() {
-    const bindListQuery = Api.bind.useBindList()
-    const pohListQuery = Api.poh.usePohList()
-
     const {
         token,
         logout,
@@ -54,8 +25,9 @@ function LoginContent() {
         bindCex,
         getAuthInfo
     } = useUserInfo();
-    const [usernameOpen, setUsernameOpen] = React.useState(false)
-    const [passwordOpen, setPasswordOpen] = React.useState(false)
+    const [usernameOpen, setUsernameOpen] = useState(false)
+    const [passwordOpen, setPasswordOpen] = useState(false)
+    const [modal, setModal] = useState<'bindList' | 'pohList' | ''>('')
     const refreshOv = async () => {
         await refreshOverview()
         alert('refreshed')
@@ -70,25 +42,30 @@ function LoginContent() {
         }
     }
 
-    const onGetInfo = async (method: string) => {
-        try {
-            const res = await getAuthInfo(method)
-            console.log('getAuthInfo', res)
-        } catch (e) {
-            console.error('getAuthInfo', e)
-        }
-    }
-
     return <div className={`flex flex-col gap-[10px]`}>
         <h1 className={`text-2xl`}>You are already logged in</h1>
         <div className={`text-ellipsis break-words`}>token:{token}</div>
         <div className={`text-ellipsis break-words`}>username:{username}</div>
         <div className={`text-ellipsis break-words`}>did:{did}</div>
         <div className={`text-ellipsis break-words`}>address:{address}</div>
-        <div className={`flex gap-[20px]`}>
+
+        <ButtonGroup title={"User"}>
             <button className={`bg-gray-300 p-1 rounded`}
                     onClick={() => setUsernameOpen(true)}>Set username
             </button>
+
+            <button className={`bg-gray-300 p-1 rounded mr-5`}
+                    onClick={() => setPasswordOpen(true)}>Set Password
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={onAuth}>Third party auth
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={refreshOv}>Refresh Overview
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={logout}>Logout
+            </button>
             <UsernameModal isOpen={usernameOpen} onClose={() => setUsernameOpen(false)} onBack={() => {
                 console.log('set username modal back event')
                 setUsernameOpen(false)
@@ -96,9 +73,6 @@ function LoginContent() {
                 alert('set username success')
                 setUsernameOpen(false)
             }}/>
-            <button className={`bg-gray-300 p-1 rounded mr-5`}
-                    onClick={() => setPasswordOpen(true)}>Set Password
-            </button>
             <PasswordModal isOpen={passwordOpen} onClose={() => setPasswordOpen(false)} onBack={() => {
                 console.log('set password modal back event')
                 setPasswordOpen(false)
@@ -106,11 +80,8 @@ function LoginContent() {
                 alert('set password success')
                 setPasswordOpen(false)
             }}/>
-        </div>
-        <div className={`flex gap-[20px] flex-wrap`}>
-            <div>
-                Bind
-            </div>
+        </ButtonGroup>
+        <ButtonGroup title={"Bind"}>
             {
                 LoginMethod.map((method) => {
                     return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
@@ -118,41 +89,37 @@ function LoginContent() {
                     </button>
                 })
             }
-        </div>
-        <div className={`flex gap-[20px] flex-wrap`}>
-            <div>
-                GetAuthInfo
-            </div>
+        </ButtonGroup>
+        <ButtonGroup title={"Bind CEX"}>
             {
-                Object.keys(LOGIN_METHOD_MAP).map((method:string ) => {
-                    return <button key={method} className={`bg-gray-300 p-1 rounded`}
-                                   onClick={async() => onGetInfo(LOGIN_METHOD_MAP[method as keyof typeof LOGIN_METHOD_MAP])}>{method}</button>
+                CEXList.map((method) => {
+                    return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
+                                   onClick={() => bindCex(method as CEXType)}>CEX {method}
+                    </button>
                 })
             }
-        </div>
-        <div className={`flex gap-[20px] flex-wrap`}>
+        </ButtonGroup>
+        <ButtonGroup title={"getAuthInfo"}>
             {
-                CEXList.map((method) => {
+                Object.keys(LOGIN_METHOD_MAP).map((method) => {
                     return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
-                                   onClick={() => bindCex(method as CEXType)}>CEX {method}
+                                   onClick={() => getAuthInfo(method as keyof typeof LOGIN_METHOD_MAP)}>{LOGIN_METHOD_MAP[method as keyof typeof LOGIN_METHOD_MAP]}
                     </button>
                 })
             }
-        </div>
-        <div className={`flex gap-[20px]`}>
-            <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={onAuth}>Third party auth
-            </button>
+        </ButtonGroup>
+
+        <ButtonGroup title={"QueryList"}>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={refreshOv}>Refresh Overview
+                    onClick={() => setModal('bindList')}>BindList
             </button>
             <button className={`bg-gray-300 p-1 rounded`}
-                    onClick={logout}>Logout
+                    onClick={() => setModal('pohList')}>PohList
             </button>
-        </div>
+        </ButtonGroup>
 
-        <QueryDisplay query={bindListQuery} name={"BindListQuery"}/>
-        <QueryDisplay query={pohListQuery} name={"PohListQuery"}/>
+        <BindListModal isOpen={modal == 'bindList'} onClose={() => setModal('')}/>
+        <PohListModal isOpen={modal == 'pohList'} onClose={() => setModal('')}/>
     </div>
 
 }
@@ -174,11 +141,15 @@ export default function User() {
         <div className={`font-bold text-lg`}>LoginButton</div>
 
         <div className={`bg-gray-100 p-5 mt-5`}>
-            <LoginButton methods={[ "twitter", 'facebook',"discord","github","youtube","telegram"]} popoverPosition={"left"} walletMethods={WalletMethod}/>
+            <LoginButton
+                methods={LoginMethodList}
+                recommendMethods={RecommendLoginMethodList}
+                popoverPosition={"left"}
+                walletMethods={WalletList}
+            />
         </div>
-        <RoutePrivate>
-            <LoginContent/>
-        </RoutePrivate>
+
+        <LoginContent/>
 
 
     </div>