@matchain/matchid-sdk-react 0.1.7

package/example/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "sdk": "rm -rf node_modules && yarn install"
+  },
+  "keywords": [],
+  "author": "matchain.io",
+  "license": "ISC",
+  "description": "",
+  "alias": {
+    "react": "../node_modules/react",
+    "react-dom": "../node_modules/react-dom/profiling",
+    "axios": "../node_modules/axios",
+    "react-router-dom": "../node_modules/react-router-dom",
+    "@types/react-router-dom": "../node_modules/@types/react-router-dom"
+  },
+  "dependencies": {
+    "@zerodev/webauthn-key": "5.3.3",
+    "@matchain/mid": "../dist"
+  },
+  "devDependencies": {
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "vite": "^5.4.10"
+  }
+}

package/example/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/example/src/App.tsx

@@ -0,0 +1,61 @@
+import React, {useState} from "react";
+import {MatchProvider} from "@matchain/mid";
+import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
+import Home from "./pages/Home";
+import './app.css'
+import Login from "./pages/Login";
+import "@matchain/mid/index.css"
+
+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 state = getState()
+    const [appid, setAppid] = useState(state?.appid || '')
+    const [env, setEnv] = useState<"main" | "dev" | "test">(state?.env || 'main')
+    //matchain team will debug in dev env
+    const isMatchainTeam = !!window.localStorage.getItem("isMatchainTeam")
+    return <MatchProvider appid={appid} env={env}  events={{
+        onLogin: (data) => {
+            console.log('events.onLogin', data)
+        },
+        onLogout: () => {
+            console.log('events.onLogout')
+        }
+    }}
+    >
+        <Router>
+            <div className={`mb-2 p-2 flex gap-2`}>
+                <label>Appid:</label>
+                <input value={appid} placeholder={"Appid"} className={"border-solid border"} onChange={(ele) => {
+                    setAppid(ele.target.value)
+                }}/>
+                <label>Env:</label>
+                <select value={env} onChange={(ele) => {
+                    setEnv(ele.target.value as any)
+                }}>
+                    <option value="main">main</option>
+                    <option value="test">test</option>
+                    {isMatchainTeam && <option value="dev">dev</option>}
+                </select>
+            </div>
+            <nav className={`text-2xl mb-5 p-2 text-red-600 flex gap-10`}>
+                <Link to="/">Home</Link>
+                <Link to="/login">Login</Link>
+            </nav>
+            <div className={`p-4`}>
+                <Routes>
+                    <Route path="/" element={<Home/>}/>
+                    <Route path="/login" element={<Login/>}/>
+                </Routes>
+            </div>
+        </Router>
+    </MatchProvider>;
+}
+
+export default App;

package/example/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/example/src/config/contract.ts

@@ -0,0 +1,154 @@
+export const address = "0x4143e29770fd63e24bb1f32d50bf8a590e34de4b"
+export const abi = [{"inputs": [], "stateMutability": "nonpayable", "type": "constructor"}, {
+    "anonymous": false,
+    "inputs": [{
+        "indexed": true,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+    }, {
+        "indexed": true,
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+    }, {"indexed": false, "internalType": "uint256", "name": "value", "type": "uint256"}],
+    "name": "Approval",
+    "type": "event"
+}, {
+    "anonymous": false,
+    "inputs": [{
+        "indexed": true,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+    }, {"indexed": true, "internalType": "address", "name": "to", "type": "address"}, {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "value",
+        "type": "uint256"
+    }],
+    "name": "Transfer",
+    "type": "event"
+}, {
+    "inputs": [{
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+    }, {"internalType": "address", "name": "spender", "type": "address"}],
+    "name": "allowance",
+    "outputs": [{"internalType": "uint256", "name": "", "type": "uint256"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [{
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+    }, {"internalType": "uint256", "name": "amount", "type": "uint256"}],
+    "name": "approve",
+    "outputs": [{"internalType": "bool", "name": "", "type": "bool"}],
+    "stateMutability": "nonpayable",
+    "type": "function"
+}, {
+    "inputs": [{"internalType": "address", "name": "account", "type": "address"}],
+    "name": "balanceOf",
+    "outputs": [{"internalType": "uint256", "name": "", "type": "uint256"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [{"internalType": "uint8", "name": "", "type": "uint8"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [{
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+    }, {"internalType": "uint256", "name": "subtractedValue", "type": "uint256"}],
+    "name": "decreaseAllowance",
+    "outputs": [{"internalType": "bool", "name": "", "type": "bool"}],
+    "stateMutability": "nonpayable",
+    "type": "function"
+}, {
+    "inputs": [{
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+    }, {"internalType": "uint256", "name": "addedValue", "type": "uint256"}],
+    "name": "increaseAllowance",
+    "outputs": [{"internalType": "bool", "name": "", "type": "bool"}],
+    "stateMutability": "nonpayable",
+    "type": "function"
+}, {
+    "inputs": [{
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+    }, {"internalType": "uint256", "name": "amount", "type": "uint256"}],
+    "name": "mint",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+}, {
+    "inputs": [],
+    "name": "name",
+    "outputs": [{"internalType": "string", "name": "", "type": "string"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [{"internalType": "address", "name": "", "type": "address"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [{"internalType": "string", "name": "", "type": "string"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [],
+    "name": "token_name",
+    "outputs": [{"internalType": "string", "name": "", "type": "string"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [],
+    "name": "token_ticker",
+    "outputs": [{"internalType": "string", "name": "", "type": "string"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [{"internalType": "uint256", "name": "", "type": "uint256"}],
+    "stateMutability": "view",
+    "type": "function"
+}, {
+    "inputs": [{
+        "internalType": "address",
+        "name": "recipient",
+        "type": "address"
+    }, {"internalType": "uint256", "name": "amount", "type": "uint256"}],
+    "name": "transfer",
+    "outputs": [{"internalType": "bool", "name": "", "type": "bool"}],
+    "stateMutability": "nonpayable",
+    "type": "function"
+}, {
+    "inputs": [{
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+    }, {"internalType": "address", "name": "to", "type": "address"}, {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+    }],
+    "name": "transferFrom",
+    "outputs": [{"internalType": "bool", "name": "", "type": "bool"}],
+    "stateMutability": "nonpayable",
+    "type": "function"
+}]

package/example/src/main.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

package/example/src/pages/Home.tsx

@@ -0,0 +1,36 @@
+import {useMatch} from "@matchain/mid";
+import {useMemo} from "react";
+function DisplayConfig({
+                           label,
+                           value
+                       }:{
+    label:string,
+    value:any
+}){
+    const RenderValue = useMemo(()=>{
+        const type = typeof value;
+        if(type === "object"){
+            return JSON.stringify(value);
+        }
+        if(type==='function'){
+            return <span className={`text-green-500`}>function</span>
+        }
+        return 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(){
+    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]}/>
+            })
+        }
+    </div>
+}

package/example/src/pages/Login.tsx

@@ -0,0 +1,165 @@
+import {Hooks, Components} from "@matchain/mid"
+import React from "react";
+
+const {useMatchEvents, useUserInfo, useWallet} = Hooks
+const {LoginButton, LoginBox, LoginPanel, EmailModal, LoginModal, UsernameModal, PasswordModal} = Components
+
+
+function LoginContent() {
+    useMatchEvents({
+        onLogin: (data) => {
+            console.log('useMatchEvents.onLogin', data)
+        },
+        onLogout: () => {
+            console.log('useMatchEvents.onLogout')
+        },
+        onBind: (data) => {
+            console.log('useMatchEvents.onBind', data)
+        }
+    })
+    const {
+        loginByWallet,
+        isLogin,
+        token,
+        logout,
+        username,
+        loginByTwitter,
+        loginByGoogle,
+        loginByEmail,
+        getLoginEmailCode,
+        loginByTelegram,
+        refreshOverview,
+        did,
+        address,
+        bindWallet,
+        bindTelegram,
+    } = useUserInfo();
+    const {signMessage} = useWallet()
+    const [email, setEmail] = React.useState('')
+    const [code, setCode] = React.useState('')
+    const [emailOpen, setEmailOpen] = React.useState(false)
+    const [loginOpen, setLoginOpen] = React.useState(false)
+    const [usernameOpen, setUsernameOpen] = React.useState(false)
+    const [passwordOpen, setPasswordOpen] = React.useState(false)
+    const refreshOv = async () => {
+        await refreshOverview()
+        alert('refreshed')
+    }
+    const onSign = async () => {
+        const res = await signMessage('hello')
+        alert(res)
+    }
+    if (isLogin) {
+        return <div>
+            <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]`}>
+                <button className={`bg-gray-300 p-1 rounded mr-5`}
+                        onClick={bindWallet}>Bind wallet
+                </button>
+                <button className={`bg-gray-300 p-1 rounded mr-5`}
+                        onClick={() => setUsernameOpen(true)}>Set username
+                </button>
+                <UsernameModal isOpen={usernameOpen} onClose={() => setUsernameOpen(false)} onBack={() => {
+                    console.log('set username modal back event')
+                    setUsernameOpen(false)
+                }} onSuccess={() => {
+                    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)
+                }} onSuccess={() => {
+                    alert('set password success')
+                    setPasswordOpen(false)
+                }}/>
+                <button className={`bg-gray-300 p-1 rounded mr-5`}
+                        onClick={bindTelegram}>Bind telegram
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={onSign}>Sign message
+                </button>
+            </div>
+            <button className={`bg-gray-300 p-1 rounded mr-5`}
+                    onClick={refreshOv}>Refresh Overview
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={logout}>Logout
+            </button>
+
+        </div>
+    }
+    return (
+        <div className={`flex flex-col gap-10`}>
+            <div className={`flex gap-5`}>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByWallet}>Wallet
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByTwitter}>Twitter
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByGoogle}>Google
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={loginByTelegram}>Telegram
+                </button>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => setEmailOpen(true)}>Email
+                </button>
+                <EmailModal isOpen={emailOpen} onClose={() => setEmailOpen(false)} onBack={() => {
+                    console.log('input email modal back event')
+                    setEmailOpen(false)
+                }}/>
+
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => setLoginOpen(true)}>Modal
+                </button>
+                <LoginModal isOpen={loginOpen} onClose={() => setLoginOpen(false)}/>
+
+            </div>
+            <div className={`flex gap-5`}>
+                <input type={"text"} className={`border`} placeholder={"email"}
+                       onChange={(e) => setEmail(e.target.value)} value={email}/>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => getLoginEmailCode(email)}>Send
+                </button>
+            </div>
+            <div className={`flex gap-5`}>
+                <input type={"text"} className={`border`} placeholder={"code"}
+                       onChange={(e) => setCode(e.target.value)} value={code}/>
+                <button className={`bg-gray-300 p-1 rounded`}
+                        onClick={() => loginByEmail({email, code})}>Login
+                </button>
+            </div>
+            <div className={`font-bold text-xl`}>Components</div>
+            <div className={`font-bold text-lg`}>LoginBox</div>
+            <div className={`bg-gray-100 p-10`}>
+                <div className={`bg-white`}><LoginBox/></div>
+            </div>
+            <div className={`font-bold text-lg`}>LoginPanel</div>
+            <div className={`bg-gray-100 p-10`}>
+                <div className={`bg-white`}><LoginPanel onClose={() => console.log('onLoginPanelClose')}/></div>
+            </div>
+        </div>
+    );
+}
+
+export default function Login() {
+    return <div>
+        <LoginContent/>
+        <div className={`font-bold text-lg`}>LoginButton</div>
+
+        <div className={`bg-gray-100 p-5 mt-5`}>
+            <LoginButton methods={["wallet", "X", "email", "google"]}/>
+        </div>
+
+    </div>
+}

package/example/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/example/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+      "target": "esnext",
+      "module": "esnext",
+      "declaration": true,
+      "declarationDir": "./dist",
+      "outDir": "./dist",
+      "strict": true,
+      "jsx": "react-jsx",         // 支持 JSX 语法
+      "moduleResolution": "node", // 使用 Node.js 风格的模块解析
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true
+    },
+    "include": ["src"]
+  }
+  

package/example/vite.config.ts

@@ -0,0 +1,13 @@
+// example/vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@matchain/mid': path.resolve(__dirname, '../dist'),
+    },
+  },
+});