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

package/dist/index.mjs

@@ -3,16 +3,13 @@ import {
 } from "./chunk-HYQ3T6WW.mjs";
 import {
   api_exports
-} from "./chunk-WCS3X2LC.mjs";
+} from "./chunk-2YN5Y3SM.mjs";
 import {
   MatchProvider,
   components_exports,
   hooks_exports,
   useMatch
-} from "./chunk-UCIEZ3XI.mjs";
-import {
-  types_exports
-} from "./chunk-SQIJR7RA.mjs";
+} from "./chunk-PZPEWHBV.mjs";
 import "./chunk-DPXMCLYK.mjs";
 import "./chunk-J5LGTIGS.mjs";
 export {
@@ -21,7 +18,6 @@ export {
   components_exports as Components,
   hooks_exports as Hooks,
   MatchProvider,
-  types_exports as Types,
   useMatch
 };
 //# sourceMappingURL=index.mjs.map

package/dist/types.d-DwF-Pkvh.d.mts

@@ -0,0 +1,179 @@
+import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
+
+type ISocialLoginMethod =
+    'google'
+    | 'twitter'
+    | 'discord'
+    | 'github'
+    | 'telegram'
+    | 'linkedin'
+    | 'facebook'
+    | 'youtube'
+type WalletType = 'evm' | 'sol' | 'tron' | 'btc' | 'ton'
+type LoginMethodType = WalletType | 'email' | ISocialLoginMethod
+type CEXType = "Gate" | "Coinbase" | "Kucoin" | 'Bitget' | 'OKX' | 'Bybit' | 'Binance'
+type OtherLoginMethodType = 'email' | ISocialLoginMethod
+type RecommendLoginMethodType = 'wallet' | 'email' | ISocialLoginMethod
+type IEnvConfigType = {
+    endpoints: {
+        back: string;
+        auth: string;
+    };
+}
+type IMatchEvents = {
+    onLogin?: (data: {
+        mid?: string;
+        token: string;
+        did: string
+    }) => void
+    onLogout?: () => void,
+    onBind?: (data: {
+        type: string
+    }) => void
+}
+
+type OverviewInfo = {
+    score: number,
+    total_assets: number,
+    wallets: number,
+    followers: number,
+    sbt: number,
+    is_kyc: boolean,
+    is_poh: boolean,
+    mid: string
+    user_identity: string
+    identities: { [key: string]: string }
+    did: string
+    address: string
+    username?: string
+}
+
+type IconProps = {
+    color?: string,
+    size?: number | string,
+    width?: number | string,
+    height?: number | string,
+    style?: CSSProperties
+    className?: string
+    onClick?: (e?: any) => void
+}
+
+type ModalProps = PropsWithChildren & {
+    isOpen: boolean,
+    width?: number
+    className?: string
+    zIndex?: number
+}
+
+type ModalWithHeaderProps = ModalProps & {
+    onBack?: () => void,
+    onClose?: () => void,
+    title?: string
+    showClose?: boolean
+    showBorder?: boolean
+}
+
+type InputProps = {
+    placeholder?: string,
+    value?: string,
+    onChange?: (e?: any) => void,
+    disabled?: boolean,
+    readonly?: boolean
+    type?: string
+    maxLength?: number
+    className?: string
+    after?: React.ReactNode
+}
+
+type LoginBoxProps = {
+    methods?: OtherLoginMethodType[],
+    inModal?: boolean
+    recommendMethods?: RecommendLoginMethodType[]
+    walletMethods?: WalletType[]
+}
+type LoginPanelProps = {
+    header?: React.ReactNode
+    onClose?: () => void
+} & LoginBoxProps
+type LoginModalProps = LoginPanelProps & ModalProps
+type EmailModalProps = ModalProps & {
+    onClose?: () => void,
+    onBack?: () => void,
+    onLogin?: () => void
+}
+type ButtonProps = {
+    size?: 'sm' | 'df' | 'lg',
+    type?: "button" | "submit" | "reset",
+    rounded?: boolean,
+    block?: boolean,
+    disabled?: boolean,
+    loading?: boolean,
+    children?: React.ReactNode,
+    onClick?: () => void,
+    highlight?: boolean,
+    style?: CSSProperties
+    className?: string
+}
+
+type BindItemType = {
+    type: string,
+    type_sort: string,
+    platform_name: string,
+    platform_id: number,
+    platform_uid: string,
+    platform_nickname: string,
+    platform_status: number
+}
+
+type PohItemType = {
+    user_id: number,
+    poh_market_id: number,
+    image_type: string,
+    category: string,
+    name: string,
+    app_id: string,
+    schema_id: string,
+    active: boolean,
+}
+
+type BindInfoType = {
+    progress_count: number,
+    progress_current: number,
+    total_assets: number,
+    wallet_count: number,
+    wallet_current: number,
+    cex_count: number,
+    cex_current: number,
+    social_count: number,
+    social_current: number,
+    others_count: number,
+    others_current: number,
+}
+
+type PohZkpassParams = {
+    taskId: string,
+    schemaId: string,
+    publicFields: any,
+    allocatorAddress: string,
+    publicFieldsHash: string,
+    allocatorSignature: string,
+    uHash: string,
+    validatorAddress: string,
+    validatorSignature: string,
+}
+type PopoverPositionType = "center" | "left" | "right"
+type PopoverTypeType = "hover" | "click"
+type PopoverProps = PropsWithChildren & {
+    position?: PopoverPositionType
+    type?: PopoverTypeType
+    content: ReactNode,
+    className?: string,
+    gap?: number | string
+}
+
+type LocaleType = "en" | "zh" | "tw" | "fr" | "ja" | "ko" | "vi" | "es" | "pt"
+type WalletConfigType = {
+    type:"Base"|"UserPasscode"
+}
+
+export type { ButtonProps as B, CEXType as C, EmailModalProps as E, IMatchEvents as I, LocaleType as L, ModalProps as M, OtherLoginMethodType as O, PopoverProps as P, RecommendLoginMethodType as R, WalletConfigType as W, IEnvConfigType as a, InputProps as b, ModalWithHeaderProps as c, LoginBoxProps as d, WalletType as e, PopoverPositionType as f, PopoverTypeType as g, LoginPanelProps as h, LoginModalProps as i, ISocialLoginMethod as j, OverviewInfo as k, LoginMethodType as l, IconProps as m, PohZkpassParams as n, BindItemType as o, BindInfoType as p, PohItemType as q };

package/dist/types.d-DwF-Pkvh.d.ts

@@ -0,0 +1,179 @@
+import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
+
+type ISocialLoginMethod =
+    'google'
+    | 'twitter'
+    | 'discord'
+    | 'github'
+    | 'telegram'
+    | 'linkedin'
+    | 'facebook'
+    | 'youtube'
+type WalletType = 'evm' | 'sol' | 'tron' | 'btc' | 'ton'
+type LoginMethodType = WalletType | 'email' | ISocialLoginMethod
+type CEXType = "Gate" | "Coinbase" | "Kucoin" | 'Bitget' | 'OKX' | 'Bybit' | 'Binance'
+type OtherLoginMethodType = 'email' | ISocialLoginMethod
+type RecommendLoginMethodType = 'wallet' | 'email' | ISocialLoginMethod
+type IEnvConfigType = {
+    endpoints: {
+        back: string;
+        auth: string;
+    };
+}
+type IMatchEvents = {
+    onLogin?: (data: {
+        mid?: string;
+        token: string;
+        did: string
+    }) => void
+    onLogout?: () => void,
+    onBind?: (data: {
+        type: string
+    }) => void
+}
+
+type OverviewInfo = {
+    score: number,
+    total_assets: number,
+    wallets: number,
+    followers: number,
+    sbt: number,
+    is_kyc: boolean,
+    is_poh: boolean,
+    mid: string
+    user_identity: string
+    identities: { [key: string]: string }
+    did: string
+    address: string
+    username?: string
+}
+
+type IconProps = {
+    color?: string,
+    size?: number | string,
+    width?: number | string,
+    height?: number | string,
+    style?: CSSProperties
+    className?: string
+    onClick?: (e?: any) => void
+}
+
+type ModalProps = PropsWithChildren & {
+    isOpen: boolean,
+    width?: number
+    className?: string
+    zIndex?: number
+}
+
+type ModalWithHeaderProps = ModalProps & {
+    onBack?: () => void,
+    onClose?: () => void,
+    title?: string
+    showClose?: boolean
+    showBorder?: boolean
+}
+
+type InputProps = {
+    placeholder?: string,
+    value?: string,
+    onChange?: (e?: any) => void,
+    disabled?: boolean,
+    readonly?: boolean
+    type?: string
+    maxLength?: number
+    className?: string
+    after?: React.ReactNode
+}
+
+type LoginBoxProps = {
+    methods?: OtherLoginMethodType[],
+    inModal?: boolean
+    recommendMethods?: RecommendLoginMethodType[]
+    walletMethods?: WalletType[]
+}
+type LoginPanelProps = {
+    header?: React.ReactNode
+    onClose?: () => void
+} & LoginBoxProps
+type LoginModalProps = LoginPanelProps & ModalProps
+type EmailModalProps = ModalProps & {
+    onClose?: () => void,
+    onBack?: () => void,
+    onLogin?: () => void
+}
+type ButtonProps = {
+    size?: 'sm' | 'df' | 'lg',
+    type?: "button" | "submit" | "reset",
+    rounded?: boolean,
+    block?: boolean,
+    disabled?: boolean,
+    loading?: boolean,
+    children?: React.ReactNode,
+    onClick?: () => void,
+    highlight?: boolean,
+    style?: CSSProperties
+    className?: string
+}
+
+type BindItemType = {
+    type: string,
+    type_sort: string,
+    platform_name: string,
+    platform_id: number,
+    platform_uid: string,
+    platform_nickname: string,
+    platform_status: number
+}
+
+type PohItemType = {
+    user_id: number,
+    poh_market_id: number,
+    image_type: string,
+    category: string,
+    name: string,
+    app_id: string,
+    schema_id: string,
+    active: boolean,
+}
+
+type BindInfoType = {
+    progress_count: number,
+    progress_current: number,
+    total_assets: number,
+    wallet_count: number,
+    wallet_current: number,
+    cex_count: number,
+    cex_current: number,
+    social_count: number,
+    social_current: number,
+    others_count: number,
+    others_current: number,
+}
+
+type PohZkpassParams = {
+    taskId: string,
+    schemaId: string,
+    publicFields: any,
+    allocatorAddress: string,
+    publicFieldsHash: string,
+    allocatorSignature: string,
+    uHash: string,
+    validatorAddress: string,
+    validatorSignature: string,
+}
+type PopoverPositionType = "center" | "left" | "right"
+type PopoverTypeType = "hover" | "click"
+type PopoverProps = PropsWithChildren & {
+    position?: PopoverPositionType
+    type?: PopoverTypeType
+    content: ReactNode,
+    className?: string,
+    gap?: number | string
+}
+
+type LocaleType = "en" | "zh" | "tw" | "fr" | "ja" | "ko" | "vi" | "es" | "pt"
+type WalletConfigType = {
+    type:"Base"|"UserPasscode"
+}
+
+export type { ButtonProps as B, CEXType as C, EmailModalProps as E, IMatchEvents as I, LocaleType as L, ModalProps as M, OtherLoginMethodType as O, PopoverProps as P, RecommendLoginMethodType as R, WalletConfigType as W, IEnvConfigType as a, InputProps as b, ModalWithHeaderProps as c, LoginBoxProps as d, WalletType as e, PopoverPositionType as f, PopoverTypeType as g, LoginPanelProps as h, LoginModalProps as i, ISocialLoginMethod as j, OverviewInfo as k, LoginMethodType as l, IconProps as m, PohZkpassParams as n, BindItemType as o, BindInfoType as p, PohItemType as q };

package/example/package.json

@@ -17,7 +17,6 @@
     "react": "../node_modules/react",
     "react-dom": "../node_modules/react-dom/profiling",
     "axios": "../node_modules/axios",
-    "zustand": "../node_modules/zustand",
     "react-router-dom": "../node_modules/react-router-dom",
     "@types/react-router-dom": "../node_modules/@types/react-router-dom"
   },

package/example/src/App.tsx

@@ -1,57 +1,32 @@
-import React, {useEffect, useMemo, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {MatchProvider} from "@matchain/matchid-sdk-react";
-import {BrowserRouter as Router, Routes, Route, Link, useLocation} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route, Link} 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";
 
-
-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>
+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 App() {
-    const {appid, setAppid,locale,setLocale,endpoints, setEndpoints}= useLocalStore()
+    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)
 
     return <MatchProvider appid={appid} endpoints={endpoints} locale={locale} events={{
         onLogin: (data) => {
@@ -62,7 +37,7 @@ function App() {
         }
     }}
                           wallet={{
-                              type:"UserPasscode"
+                              type:"Base"
                           }}
     >
         <Router>
@@ -88,22 +63,21 @@ function App() {
                 </div>
                 <div>
                     <label>Locale:</label>
-                    <select onChange={(ele) => {
-                        setLocale(ele.target.value as LocaleType)
-                    }} value={locale}>
-                        {LocaleList.map((item) => <option key={item} value={item}>{item}</option>)}
+                    <select onChange={(ele) => {setLocale(ele.target.value)}} value={locale}>
+                        {LocaleList.map((item)=><option key={item} value={item}>{item}</option>)}
                     </select>
                 </div>
             </div>
-            <Nav/>
+            <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>
             <div className={`p-4`}>
                 <Routes>
                     <Route path="/" element={<Home/>}/>
-
-                    <Route element={<RoutePrivate/>}>
-                        <Route path="/user" element={<User/>}/>
-                        <Route path="/wallet" element={<Wallet/>}/>
-                    </Route>
+                    <Route path="/user" element={<User/>}/>
+                    <Route path="/wallet" element={<Wallet/>}/>
                 </Routes>
             </div>
         </Router>

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, WalletList} from "@/config";
+import {LoginMethod, WalletMethod} 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={WalletList} onClose={() => setLoginOpen(false)} methods={[
+                <LoginModal isOpen={loginOpen} walletMethods={WalletMethod} onClose={() => setLoginOpen(false)} methods={[
                     'telegram',
                     'twitter',
                     'discord',

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

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

package/example/src/config/index.ts

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