@matchain/matchid-sdk-react 0.1.56-alpha.12 → 0.1.56-alpha.14

package/dist/ui.mjs

@@ -17,7 +17,7 @@ import {
   Skeleton_default,
   Switch,
   Tabs
-} from "./chunk-DUSDBXBT.mjs";
+} from "./chunk-EMSBFHPM.mjs";
 import "./chunk-UA6XHZHX.mjs";
 import "./chunk-IZOOVZAD.mjs";
 import "./chunk-FQ6PYZPD.mjs";

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 { 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', 'github', 'discord']} walletMethods={['evm']} />
         </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,7 +157,7 @@ function RouterApp() {
 }
 
 function App() {
-    const {appid, locale, endpoints, walletType, backgroundColor, color} = useLocalStore()
+    const { appid, locale, endpoints, walletType, backgroundColor, color } = useLocalStore()
 
     return <div style={{
         backgroundColor: backgroundColor,
@@ -165,7 +165,7 @@ function App() {
     }}>
         <WagmiProvider config={wagmiConfig}>
             <MatchProvider
-                appid={appid}
+                appid="MID-E53wKKWTqNzK7ccC"
                 endpoints={endpoints}
                 locale={locale}
                 events={{
@@ -180,7 +180,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",
@@ -10,11 +10,13 @@ export const LoginMethod = [
     'twitter',
     'google',
     'telegram',
+    'email',
     'github',
     'discord',
     'linkedin',
     'facebook',
-    "youtube"
+    "youtube",
+    "kakao"
 ]
 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/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/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: '',
+        appid: 'MID-E53wKKWTqNzK7ccC',
         endpoints: {
-            back: "https://api.matchid.ai/",
-            auth: "https://auth.matchid.ai/"
+            back: "https://api-test.matchid.ai/",
+            auth: "https://mid-sso-test.vercel.app/"
         },
         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));