@matchain/matchid-sdk-react 0.1.28 → 0.1.30

package/example/src/App.tsx

@@ -34,21 +34,26 @@ function App() {
     }}
     >
         <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>AuthEndpoint:</label>
-                <input value={endpoints?.auth || ''} placeholder={"Auth Endpoint"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setEndpoints({...endpoints, auth: ele.target.value})
-                       }}/>
-                <label>BackEndpoint:</label>
-                <input value={endpoints?.back || ''} placeholder={"Back Endpoint"} className={"border-solid border"}
-                       onChange={(ele) => {
-                           setEndpoints({...endpoints, back: ele.target.value})
-                       }}/>
+            <div className={`mb-2 p-2 flex gap-2 flex-col`}>
+                <div>
+                    <label>Appid:</label>
+                    <input value={appid} placeholder={"Appid"} className={"border-solid border"} onChange={(ele) => {
+                        setAppid(ele.target.value)
+                    }}/></div>
+                <div>
+                    <label>AuthEndpoint:</label>
+                    <input value={endpoints?.auth || ''} placeholder={"Auth Endpoint"} className={"border-solid border"}
+                           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})
+                           }}/>
+                </div>
             </div>
             <nav className={`text-2xl mb-5 p-2 text-red-600 flex gap-10`}>
                 <Link to="/">Home</Link>

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

@@ -1,6 +1,7 @@
 import React from "react";
 import {Hooks,Components} from "@matchain/matchid-sdk-react";
 import {LoginMethod} from "@/config";
+import {LoginMethodType} from "../../../../src/types/types";
 const { useUserInfo} = Hooks
 const {EmailModal,LoginModal,LoginBox,LoginPanel} = Components
 export default function Login(){
@@ -17,7 +18,7 @@ export default function Login(){
 
     return (
         <div className={`flex flex-col gap-10`}>
-            <div className={`flex gap-5`}>
+            <div className={`flex gap-5 flex-wrap`}>
                 <button className={`bg-gray-300 p-1 rounded`}
                         onClick={() => setLoginOpen(true)}>Open Modal
                 </button>
@@ -27,7 +28,7 @@ export default function Login(){
                 {
                     LoginMethod.map((method) => {
                         return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
-                                       onClick={() => login(method)}>{method}
+                                       onClick={() => login(method as LoginMethodType)}>{method}
                         </button>
                     })
                 }
@@ -37,7 +38,14 @@ export default function Login(){
                 }}/>
 
 
-                <LoginModal isOpen={loginOpen} onClose={() => setLoginOpen(false)}/>
+                <LoginModal isOpen={loginOpen} onClose={() => setLoginOpen(false)} methods={[
+                    'telegram',
+                    'twitter',
+                    'discord',
+                    'github',
+                    'facebook',
+                    'linkedin'
+                ]}/>
 
             </div>
             <div className={`flex gap-5`}>
@@ -61,7 +69,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')} methods={['discord','github','facebook','sol','linkedin']}/></div>
+                <div className={`bg-white`}><LoginPanel onClose={() => console.log('onLoginPanelClose')} methods={['telegram','twitter','discord','github','facebook','linkedin']}/></div>
             </div>
         </div>
     );

package/example/src/pages/User.tsx

@@ -2,6 +2,7 @@ import {Hooks, Components, Api} from "@matchain/matchid-sdk-react"
 import React from "react";
 import RoutePrivate from "../components/RoutePrivate";
 import {LoginMethod} from "@/config";
+import {LoginMethodType} from "../../../src/types/types";
 
 const {useMatchEvents, useUserInfo, useWallet} = Hooks
 const {
@@ -26,7 +27,7 @@ function QueryDisplay(
         {keys.map((key) => {
             return <div key={key} className={`flex gap-[20px]`}>
                 <div className={"w-[200px]"}>{key}</div>
-                <div className={`flex-1`}>{
+                <div className={`flex-1 flex-wrap break-all`}>{
                     typeof query[key] === 'function' ? <Button size="sm" onClick={() => {
                             query[key]()
                         }}>Run</Button> :
@@ -95,12 +96,12 @@ function LoginContent() {
                 setPasswordOpen(false)
             }}/>
         </div>
-        <div className={`flex gap-[20px]`}>
+        <div className={`flex gap-[20px] flex-wrap`}>
 
             {
                 LoginMethod.map((method) => {
                     return <button key={method} className={`bg-gray-300 p-1 capitalize rounded`}
-                                   onClick={() => bind(method)}>Bind {method}
+                                   onClick={() => bind(method as LoginMethodType)}>Bind {method}
                     </button>
                 })
             }
@@ -140,7 +141,7 @@ export default function User() {
         <div className={`font-bold text-lg`}>LoginButton</div>
 
         <div className={`bg-gray-100 p-5 mt-5`}>
-            <LoginButton methods={["evm", "twitter", "email", "google",'sol','facebook']} popoverPosition={"left"}/>
+            <LoginButton methods={[ "twitter", 'facebook',"discord","github","linkedin","telegram"]} popoverPosition={"left"}/>
         </div>
         <RoutePrivate>
             <LoginContent/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {