@matchain/matchid-sdk-react 0.1.56-alpha.16 → 0.1.56-alpha.18

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

@@ -8,7 +8,7 @@ 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 { 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";
@@ -64,7 +64,7 @@ function Nav() {
                     className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden ? 'hidden' : ''}`}>{menu.name}</Link>
             })}
 
-            <LoginButton methods={['google']} recommendMethods={['wallet', 'github', 'discord']} walletMethods={['evm']} />
+            <LoginButton recommendMethods={['wallet', "email"]} walletMethods={['evm']} methods={['google', 'kakao']} />
         </nav>
 
     </>
@@ -159,13 +159,18 @@ function RouterApp() {
 function App() {
     const { appid, locale, endpoints, walletType, backgroundColor, color } = useLocalStore()
 
+    useMatchEvents({
+        onBind() {
+            console.log("bind event");
+        },
+    });
     return <div style={{
         backgroundColor: backgroundColor,
         color: color
     }}>
         <WagmiProvider config={wagmiConfig}>
             <MatchProvider
-                appid="MID-E53wKKWTqNzK7ccC"
+                appid={appid}
                 endpoints={endpoints}
                 locale={locale}
                 events={{

package/example/src/config/index.ts

@@ -10,13 +10,13 @@ export const LoginMethod = [
     'twitter',
     'google',
     'telegram',
-    'email',
     'github',
     'discord',
     'linkedin',
     'facebook',
     "youtube",
-    "kakao"
+    "kakao",
+    "email"
 ]
 export const LocaleList = [
     "en", "zh", "tw", "fr", "ja", "ko", "vi", "es", "pt"

package/example/src/pages/Home.tsx

@@ -1,35 +1,35 @@
-import { useMatch } from "@matchain/matchid-sdk-react";
-import { useMemo } from "react";
+import {useMatch} from "@matchain/matchid-sdk-react";
+import {useMemo} from "react";
 function DisplayConfig({
-    label,
-    value
-}: {
-    label: string,
-    value: any
-}) {
-    const RenderValue = useMemo(() => {
+                           label,
+                           value
+                       }:{
+    label:string,
+    value:any
+}){
+    const RenderValue = useMemo(()=>{
         const type = typeof value;
-        if (type === "object") {
+        if(type === "object"){
             return JSON.stringify(value);
         }
-        if (type === 'function') {
+        if(type==='function'){
             return <span className={`text-green-500`}>function</span>
         }
         return value;
-    }, [value])
+    },[value])
 
     return <div className={`grid grid-cols-12 gap-4`}>
         <div className={`col-span-4 px-2`}>{label}</div>
         <div className={`col-span-8 px-2 text-ellipsis`}>{RenderValue}</div>
     </div>
 }
-export default function Home() {
+export default function Home(){
     const config = useMatch();
     const keyList = Object.keys(config) as Array<keyof typeof config>;
     return <div className={``}>
         {
-            keyList.map((key) => {
-                return <DisplayConfig key={key} label={key} value={config[key]} />
+            keyList.map((key)=>{
+                return <DisplayConfig key={key} label={key} value={config[key]}/>
             })
         }
     </div>

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,

package/example/src/store/useLocalStore.ts

@@ -1,6 +1,6 @@
-import { create } from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
-import { LocaleType } from "@matchain/matchid-sdk-react/types";
+import {create} from 'zustand';
+import {devtools, persist} from 'zustand/middleware';
+import {LocaleType} from "@matchain/matchid-sdk-react/types";
 
 interface StoreState {
     appid: string
@@ -9,10 +9,10 @@ interface StoreState {
         auth: string;
     }
     locale: LocaleType;
-    walletType: "Base" | "UserPasscode";
+    walletType:"Base" | "UserPasscode";
     setWalletType: (walletType: "Base" | "UserPasscode") => void;
-    color: string,
-    backgroundColor: string,
+    color:string,
+    backgroundColor:string,
 
 
     setAppid: (appid: string) => void;
@@ -32,29 +32,29 @@ interface StoreState {
 
 const persistedState = persist<StoreState>(
     set => ({
-        appid: 'MID-E53wKKWTqNzK7ccC',
+        appid: '',
         endpoints: {
-            back: "https://api-test.matchid.ai/",
-            auth: "https://mid-sso-test.vercel.app/"
+            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 }),
+        setAppid: (appid: string) => set({appid: appid}),
+        setEndpoints: (endpoints: StoreState['endpoints']) => set({endpoints}),
+        setLocale: (locale: LocaleType) => set({locale}),
         walletType: "UserPasscode",
-        setWalletType: (walletType: "Base" | "UserPasscode") => set({ walletType }),
+        setWalletType: (walletType: "Base" | "UserPasscode") => set({walletType}),
         color: '#000000',
-        setColor: (color: string) => set({ color }),
+        setColor: (color: string) => set({color}),
         backgroundColor: '#ffffff',
-        setBackgroundColor: (backgroundColor: string) => set({ backgroundColor }),
+        setBackgroundColor: (backgroundColor: string) => set({backgroundColor}),
 
-        initChainId: 1,
-        setInitChainId: (initChainId: number) => set({ initChainId }),
+        initChainId:1,
+        setInitChainId: (initChainId: number) => set({initChainId}),
 
         erc20Address: '',
-        setErc20Address: (erc20Address: string) => set({ erc20Address })
+        setErc20Address: (erc20Address: string) => set({erc20Address})
     }),
-    { name: 'match-example-local' }
+    {name: 'match-example-local'}
 );
 
 const useLocalStore = create(devtools(persistedState));