@matchain/matchid-sdk-react 0.1.30 → 0.1.32

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)
         },
@@ -54,6 +58,12 @@ function App() {
                                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

@@ -44,7 +44,7 @@ export default function Login(){
                     'discord',
                     'github',
                     'facebook',
-                    'linkedin'
+                    'youtube'
                 ]}/>
 
             </div>
@@ -69,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={['telegram','twitter','discord','github','facebook','linkedin']}/></div>
+                <div className={`bg-white`}><LoginPanel onClose={() => console.log('onLoginPanelClose')} methods={['telegram','twitter','discord','github','facebook','youtube']}/></div>
             </div>
         </div>
     );

package/example/src/config/index.ts

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

package/example/src/pages/User.tsx

@@ -141,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={[ "twitter", 'facebook',"discord","github","linkedin","telegram"]} popoverPosition={"left"}/>
+            <LoginButton methods={[ "twitter", 'facebook',"discord","github","youtube","telegram"]} popoverPosition={"left"}/>
         </div>
         <RoutePrivate>
             <LoginContent/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "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).