@matchain/matchid-sdk-react 0.1.17 → 0.1.18

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

@@ -1,47 +1,42 @@
 import React from "react";
-import {Hooks,Components} from "@matchain/matchid-sdk-react/index";
+import {Hooks,Components} from "@matchain/matchid-sdk-react";
+import {LoginMethod} from "@/config";
 const { useUserInfo} = Hooks
 const {EmailModal,LoginModal,LoginBox,LoginPanel} = Components
 export default function Login(){
     const {
-        loginByWallet,
-        loginByTwitter,
-        loginByGoogle,
         loginByEmail,
         getLoginEmailCode,
-        loginByTelegram,
+        login,
     } = useUserInfo();
     const [email, setEmail] = React.useState('')
     const [code, setCode] = React.useState('')
     const [emailOpen, setEmailOpen] = React.useState(false)
     const [loginOpen, setLoginOpen] = React.useState(false)
 
+
     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
+                        onClick={() => setLoginOpen(true)}>Open Modal
                 </button>
                 <button className={`bg-gray-300 p-1 rounded`}
                         onClick={() => setEmailOpen(true)}>Email
                 </button>
+                {
+                    LoginMethod.map((method) => {
+                        return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
+                                       onClick={() => login(method)}>{method}
+                        </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>
@@ -66,7 +61,7 @@ export default function Login(){
             </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 className={`bg-white`}><LoginPanel onClose={() => console.log('onLoginPanelClose')} methods={['discord','github']}/></div>
             </div>
         </div>
     );

package/example/src/config/index.ts

@@ -0,0 +1,9 @@
+export const LoginMethod = [
+    'wallet',
+    'twitter',
+    'google',
+    'telegram',
+    'github',
+    'discord',
+    'linkedin'
+]

package/example/src/pages/User.tsx

@@ -1,6 +1,7 @@
 import {Hooks, Components, Api} from "@matchain/matchid-sdk-react"
 import React from "react";
 import RoutePrivate from "../components/RoutePrivate";
+import {LoginMethod} from "@/config";
 
 const {useMatchEvents, useUserInfo, useWallet} = Hooks
 const {
@@ -47,8 +48,7 @@ function LoginContent() {
         refreshOverview,
         did,
         address,
-        bindWallet,
-        bindTelegram,
+        bind,
         auth
     } = useUserInfo();
     const [usernameOpen, setUsernameOpen] = React.useState(false)
@@ -67,17 +67,14 @@ function LoginContent() {
         }
     }
 
-    return <div>
+    return <div className={`flex flex-col gap-[10px]`}>
         <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`}
+            <button className={`bg-gray-300 p-1 rounded`}
                     onClick={() => setUsernameOpen(true)}>Set username
             </button>
             <UsernameModal isOpen={usernameOpen} onClose={() => setUsernameOpen(false)} onBack={() => {
@@ -97,19 +94,28 @@ function LoginContent() {
                 alert('set password success')
                 setPasswordOpen(false)
             }}/>
-            <button className={`bg-gray-300 p-1 rounded mr-5`}
-                    onClick={bindTelegram}>Bind telegram
+        </div>
+        <div className={`flex gap-[20px]`}>
+
+            {
+                LoginMethod.map((method) => {
+                    return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
+                                   onClick={() => bind(method)}>Bind {method}
+                    </button>
+                })
+            }
+        </div>
+        <div className={`flex gap-[20px]`}>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={onAuth}>Third party auth
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={refreshOv}>Refresh Overview
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={logout}>Logout
             </button>
         </div>
-        <button className={`bg-gray-300 p-1 rounded mr-5`}
-                onClick={onAuth}>Third party auth
-        </button>
-        <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>
 
         <QueryDisplay query={bindListQuery} name={"BindListQuery"}/>
         <QueryDisplay query={pohListQuery} name={"PohListQuery"}/>
@@ -130,15 +136,16 @@ export default function User() {
         }
     })
     return <div>
-        <RoutePrivate>
-            <LoginContent/>
-        </RoutePrivate>
 
         <div className={`font-bold text-lg`}>LoginButton</div>
 
         <div className={`bg-gray-100 p-5 mt-5`}>
-            <LoginButton methods={["wallet", "X", "email", "google"]}/>
+            <LoginButton methods={["wallet", "twitter", "email", "google"]} popoverPosition={"left"}/>
         </div>
+        <RoutePrivate>
+            <LoginContent/>
+        </RoutePrivate>
+
 
     </div>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -36,6 +36,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.62.11",
     "axios": "^1.7.0",
+    "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.2",
     "react-router-dom": "^6.0.0",
     "styled-components": "^6.1.13",