@matchain/matchid-sdk-react 0.1.56-alpha.9 → 0.1.57

package/example/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@matchain/matchid-sdk-react": "../dist",
+    "@zerodev/webauthn-key": "5.3.3",
     "crypto": "^1.0.1",
     "crypto-js": "^4.2.0",
     "eruda": "^3.4.1"
@@ -40,4 +41,4 @@
     "tailwindcss": "^3.4.14",
     "vite": "^5.4.10"
   }
-}
+}

package/example/src/App.tsx

@@ -1,25 +1,25 @@
-import React, {useEffect, useMemo, useState} from "react";
-import {MatchProvider, wagmiConfig} from "@matchain/matchid-sdk-react";
-import {BrowserRouter as Router, Routes, Route, Link, useLocation} from 'react-router-dom';
+import React, { useEffect, useMemo, useState } from "react";
+import { MatchProvider, wagmiConfig } from "@matchain/matchid-sdk-react";
+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 { LocaleList } from "@/config";
+import { LocaleType } from "@matchain/matchid-sdk-react/types";
+import { useMatchEvents, useUserInfo } from "@matchain/matchid-sdk-react/hooks";
 import RoutePrivate from "@/components/RoutePrivate";
 import useLocalStore from "@/store/useLocalStore";
-import {LoginButton} from "@matchain/matchid-sdk-react/components";
+import { LoginButton } from "@matchain/matchid-sdk-react/components";
 import UI from "@/pages/UI";
 import TgApp from "@/pages/TgApp";
-import {WagmiProvider} from "wagmi";
+import { WagmiProvider } from "wagmi";
 import useStore from "@/store/useStore";
 
 
 function Nav() {
-    const {isLogin} = useUserInfo()
+    const { isLogin } = useUserInfo()
     const location = useLocation()
     const menus = useMemo(() => {
         const list: {
@@ -28,43 +28,43 @@ function Nav() {
             onActive: boolean
             hidden?: boolean
         }[] = [
-            {
-                name: 'Home',
-                url: '/',
-                onActive: location.pathname === '/'
-            },
-            {
-                name: 'UI',
-                url: '/ui',
-                onActive: location.pathname === '/ui'
-            },
-            {
-                name: 'TgApp',
-                url: '/tgapp',
-                onActive: location.pathname === '/tgapp'
-            },
-            {
-                name: 'User',
-                url: '/user',
-                onActive: location.pathname === '/user'
-            },
-            {
-                name: 'Wallet',
-                url: '/wallet',
-                onActive: location.pathname === '/wallet',
-                hidden: !isLogin
-            },
-        ]
+                {
+                    name: 'Home',
+                    url: '/',
+                    onActive: location.pathname === '/'
+                },
+                {
+                    name: 'UI',
+                    url: '/ui',
+                    onActive: location.pathname === '/ui'
+                },
+                {
+                    name: 'TgApp',
+                    url: '/tgapp',
+                    onActive: location.pathname === '/tgapp'
+                },
+                {
+                    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 flex-wrap`}>
             {menus.map((menu) => {
                 return <Link key={menu.url} to={menu.url}
-                             className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden ? 'hidden' : ''}`}>{menu.name}</Link>
+                    className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden ? 'hidden' : ''}`}>{menu.name}</Link>
             })}
 
-            <LoginButton/>
+            <LoginButton recommendMethods={['wallet', "email"]} walletMethods={['evm']} methods={['google', 'kakao']} />
         </nav>
 
     </>
@@ -85,44 +85,44 @@ function RouterApp() {
         color,
         setColor
     } = useLocalStore()
-    const {appSecret,setAppSecret} = useStore()
+    const { appSecret, setAppSecret } = useStore()
 
     return <Router>
         <div className={`mb-2 p-2 flex gap-2 flex-col`}>
             <div>
                 <label>BackgroundColor:</label>
                 <input value={backgroundColor} placeholder={"BackgroundColor"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setBackgroundColor(ele.target.value)
-                       }}/></div>
+                    onChange={(ele) => {
+                        setBackgroundColor(ele.target.value)
+                    }} /></div>
             <div>
                 <label>Color:</label>
                 <input value={color} placeholder={"Color"} className={"border-solid border"} onChange={(ele) => {
                     setColor(ele.target.value)
-                }}/></div>
+                }} /></div>
             <div>
                 <label>Appid:</label>
                 <input value={appid} placeholder={"Appid"} className={"border-solid border"} onChange={(ele) => {
                     setAppid(ele.target.value)
-                }}/></div>
+                }} /></div>
             <div>
                 <label>AppSecret:</label>
                 <input value={appSecret} placeholder={"AppSecret"} className={"border-solid border"} onChange={(ele) => {
                     setAppSecret(ele.target.value)
-                }}/></div>
+                }} /></div>
             <div>
                 <label>AuthEndpoint:</label>
                 <input value={endpoints?.auth || ''} placeholder={"Auth Endpoint"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setEndpoints({...endpoints, auth: ele.target.value})
-                       }}/>
+                    onChange={(ele) => {
+                        setEndpoints({ ...endpoints, auth: ele.target.value })
+                    }} />
             </div>
             <div>
                 <label>BackEndpoint:</label>
                 <input value={endpoints?.back || ''} placeholder={"Back Endpoint"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setEndpoints({...endpoints, back: ele.target.value})
-                       }}/>
+                    onChange={(ele) => {
+                        setEndpoints({ ...endpoints, back: ele.target.value })
+                    }} />
             </div>
             <div>
                 <label>Locale:</label>
@@ -141,15 +141,15 @@ function RouterApp() {
                 </select>
             </div>
         </div>
-        <Nav/>
+        <Nav />
         <div className={`p-4`}>
             <Routes>
-                <Route path="/" element={<Home/>}/>
-                <Route path="/ui" element={<UI/>}/>
-                <Route path="/tgapp" element={<TgApp/>}/>
-                <Route element={<RoutePrivate/>}>
-                    <Route path="/user" element={<User/>}/>
-                    <Route path="/wallet" element={<Wallet/>}/>
+                <Route path="/" element={<Home />} />
+                <Route path="/ui" element={<UI />} />
+                <Route path="/tgapp" element={<TgApp />} />
+                <Route element={<RoutePrivate />}>
+                    <Route path="/user" element={<User />} />
+                    <Route path="/wallet" element={<Wallet />} />
                 </Route>
             </Routes>
         </div>
@@ -157,8 +157,13 @@ function RouterApp() {
 }
 
 function App() {
-    const {appid, locale, endpoints, walletType, backgroundColor, color} = useLocalStore()
+    const { appid, locale, endpoints, walletType, backgroundColor, color } = useLocalStore()
 
+    useMatchEvents({
+        onBind() {
+            console.log("bind event");
+        },
+    });
     return <div style={{
         backgroundColor: backgroundColor,
         color: color
@@ -180,7 +185,7 @@ function App() {
                     type: walletType
                 }}
             >
-                <RouterApp/>
+                <RouterApp />
             </MatchProvider>
         </WagmiProvider>
     </div>;

package/example/src/config/index.ts

@@ -1,4 +1,4 @@
-import {LoginMethodType, WalletType,RecommendLoginMethodType,OtherLoginMethodType} from "@matchain/matchid-sdk-react/types";
+import { LoginMethodType, WalletType, RecommendLoginMethodType, OtherLoginMethodType } from "@matchain/matchid-sdk-react/types";
 
 export const LoginMethod = [
     "wallet",
@@ -14,7 +14,9 @@ export const LoginMethod = [
     'discord',
     'linkedin',
     'facebook',
-    "youtube"
+    "youtube",
+    "kakao",
+    "email"
 ]
 export const LocaleList = [
     "en", "zh", "tw", "fr", "ja", "ko", "vi", "es", "pt"
@@ -23,12 +25,12 @@ export const LocaleList = [
 export const CEXList = [
     "Gate", "Coinbase", "Kucoin", 'Bitget', 'OKX', 'Bybit', 'Binance']
 
-export const WalletList:WalletType[] = [
-    'btc', 'sol', 'evm', 'tron',"ton"
+export const WalletList: WalletType[] = [
+    'btc', 'sol', 'evm', 'tron', "ton"
 ]
-export const LoginMethodList : OtherLoginMethodType[] = ['twitter' , 'discord', 'github', 'telegram' ,'linkedin' , 'facebook' ,'youtube']
+export const LoginMethodList: OtherLoginMethodType[] = ['twitter', 'discord', 'github', 'telegram', 'linkedin', 'facebook', 'youtube']
 
-export const RecommendLoginMethodList:RecommendLoginMethodType[] = ["wallet","email","google"]
+export const RecommendLoginMethodList: RecommendLoginMethodType[] = ["wallet", "email", "google"]
 
 export const LOGIN_METHOD_MAP = {
     email: 'Email',

package/example/src/pages/Wallet/index.tsx

@@ -14,8 +14,6 @@ import { useQuery } from "@tanstack/react-query";
 import {
     mainnet,
     arbitrum,
-    matchain,
-    matchainTestnet,
     arbitrumGoerli,
     arbitrumNova,
     arbitrumSepolia,
@@ -50,8 +48,8 @@ const chainList = [
     mainnet,
     bsc,
     bscTestnet,
-    matchain,
-    matchainTestnet,
+    MatchMain,
+    MatchTest,
     arbitrum,
     arbitrumGoerli,
     arbitrumNova,