@matchain/matchid-sdk-react 0.1.29 → 0.1.31

package/example/src/App.tsx

@@ -1,12 +1,12 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {MatchProvider} from "@matchain/matchid-sdk-react";
 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 RoutePrivate from "./components/RoutePrivate";
 import Wallet from "@/pages/Wallet";
+import {LocaleList} from "@/config";
 
 const getState = () => {
     if (window.localStorage.getItem('match-local')) {
@@ -19,12 +19,16 @@ const getState = () => {
 function App() {
     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} events={{
+    return <MatchProvider appid={appid} endpoints={endpoints} locale={locale} events={{
         onLogin: (data) => {
             console.log('events.onLogin', data)
         },
@@ -34,21 +38,32 @@ 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>
+                    <label>Locale:</label>
+                    <select onChange={(ele) => {setLocale(ele.target.value)}} value={locale}>
+                        {LocaleList.map((item)=><option key={item} value={item}>{item}</option>)}
+                    </select>
+                </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

@@ -18,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>

package/example/src/config/index.ts

@@ -8,4 +8,7 @@ export const LoginMethod = [
     'discord',
     'linkedin',
     'facebook'
+]
+export const LocaleList = [
+    "en", "zh", "tw", "fr", "ja", "ko", "vi", "es", "pt"
 ]

package/example/src/pages/User.tsx

@@ -27,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> :
@@ -96,7 +96,7 @@ function LoginContent() {
                 setPasswordOpen(false)
             }}/>
         </div>
-        <div className={`flex gap-[20px]`}>
+        <div className={`flex gap-[20px] flex-wrap`}>
 
             {
                 LoginMethod.map((method) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -42,6 +42,7 @@
     "axios": "^1.7.0",
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.2",
+    "react-intl": "^7.1.0",
     "react-router-dom": "^6.0.0",
     "siwe": "^2.3.2",
     "styled-components": "^6.1.13",

package/readme.md

@@ -1,5 +1,31 @@
-[https://mid-sdk.matchain.io/](https://mid-sdk.matchain.io/)
+# @matchain/matchid-sdk-react
 
-You can find the full documentation for the SDK at the link above. The documentation includes a detailed description of the SDK, installation instructions, and examples of how to use the SDK.
+A React SDK for integrating MatchID, a versatile identity solution that bridges Web2 and Web3. With MatchID, you can connect multiple wallets across different blockchain networks, as well as link Web2 identities like Email, Twitter, Facebook, Google, TikTok, and many others.
 
-You can also find the example in the `example` directory of the SDK.
+---
+
+## Features
+
+- **Multi-Chain Support**: Seamlessly connect wallets from various blockchain networks.
+- **Web2 Identity Integration**: Link Web2 IDs including Email, Twitter, Facebook, Google, TikTok, and more.
+- **React-Ready**: Designed specifically for React applications for smooth integration.
+
+---
+
+## Installation
+
+```bash
+npm install @matchain/matchid-sdk-react
+```
+
+Or, using Yarn:
+
+```bash
+yarn add @matchain/matchid-sdk-react
+```
+
+---
+
+## Usage
+
+For detailed usage instructions, please refer to the [Usage Documentation](https://docs.matchid.ai).