@matchain/matchid-sdk-react 0.1.55-alpha.9 → 0.1.56-alpha.0

package/dist/ui.mjs

@@ -6,7 +6,7 @@ import {
   Field,
   HashPanel_default,
   Input,
-  Lottie,
+  Lottie_default,
   Modal,
   ModalDrawer,
   ModalWithHeader,
@@ -16,7 +16,7 @@ import {
   Skeleton_default,
   Switch,
   Tabs
-} from "./chunk-2T4RY5BM.mjs";
+} from "./chunk-FGJ25ONR.mjs";
 import "./chunk-JX73EY6V.mjs";
 import "./chunk-UA6XHZHX.mjs";
 import "./chunk-IZOOVZAD.mjs";
@@ -31,7 +31,7 @@ export {
   Field,
   HashPanel_default as HashPanel,
   Input,
-  Lottie,
+  Lottie_default as Lottie,
   Modal,
   ModalDrawer,
   ModalWithHeader,

package/example/package.json

@@ -28,9 +28,12 @@
   "dependencies": {
     "@matchain/matchid-sdk-react": "../dist",
     "@zerodev/webauthn-key": "5.3.3",
+    "crypto": "^1.0.1",
+    "crypto-js": "^4.2.0",
     "eruda": "^3.4.1"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@types/node": "^22.9.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",

package/example/src/App.tsx

@@ -15,6 +15,7 @@ import {LoginButton} from "@matchain/matchid-sdk-react/components";
 import UI from "@/pages/UI";
 import TgApp from "@/pages/TgApp";
 import {WagmiProvider} from "wagmi";
+import useStore from "@/store/useStore";
 
 
 function Nav() {
@@ -84,6 +85,7 @@ function RouterApp() {
         color,
         setColor
     } = useLocalStore()
+    const {appSecret,setAppSecret} = useStore()
 
     return <Router>
         <div className={`mb-2 p-2 flex gap-2 flex-col`}>
@@ -103,6 +105,11 @@ function RouterApp() {
                 <input value={appid} placeholder={"Appid"} className={"border-solid border"} onChange={(ele) => {
                     setAppid(ele.target.value)
                 }}/></div>
+            <div>
+                <label>AppSecret:</label>
+                <input value={appSecret} placeholder={"AppSecret"} className={"border-solid border"} onChange={(ele) => {
+                    setAppSecret(ele.target.value)
+                }}/></div>
             <div>
                 <label>AuthEndpoint:</label>
                 <input value={endpoints?.auth || ''} placeholder={"Auth Endpoint"} className={"border-solid border"}

package/example/src/pages/User/index.tsx

@@ -1,16 +1,57 @@
 import React, {useState} from "react";
-import {CEXList, LOGIN_METHOD_MAP, LoginMethod, LoginMethodList, RecommendLoginMethodList, WalletList} from "@/config";
+import {CEXList, LOGIN_METHOD_MAP, LoginMethod} from "@/config";
 import {CEXType, LoginMethodType} from "@matchain/matchid-sdk-react/types";
-import {useMatchEvents, useUserInfo, useWallet} from "@matchain/matchid-sdk-react/hooks";
+import {useMatchEvents, useUserInfo,} from "@matchain/matchid-sdk-react/hooks";
 import {
-    LoginButton,
     UsernameModal,
 } from "@matchain/matchid-sdk-react/components";
 import BindListModal from "@/pages/User/components/BindListModal";
 import PohListModal from "@/pages/User/components/PohListModal";
-import ChainListModal from "@/pages/Wallet/components/ChainListModal";
 import ButtonGroup from "@/components/ButtonGroup";
+import useStore from "@/store/useStore";
+import hmacSHA256 from 'crypto-js/hmac-sha256';
+import sha256 from 'crypto-js/sha256';
 
+function UserAuthSign(fields: any, appSecretKey: string) {
+    const filteredFields = {...fields};
+    delete filteredFields["hash"];
+
+    const keys = Object.keys(filteredFields).sort();
+
+    const dataCheckString = keys
+        .filter(key => filteredFields[key] !== "")
+        .map(key => `${key}=${filteredFields[key]}`)
+        .join("\n");
+
+    const hash = sha256(appSecretKey);
+
+    const signature = hmacSHA256(dataCheckString, hash);
+
+    return {
+        data: dataCheckString,
+        secret: hash,
+        hash: signature.toString()
+    }
+}
+
+function AuthData({authData}: {
+    authData: any
+}) {
+    const {appSecret} = useStore()
+    const {data, secret, hash} = UserAuthSign(authData, appSecret)
+
+    return <div>
+        <h2>Auth Data</h2>
+        <pre>{JSON.stringify(authData, null, 2)}</pre>
+        <h2>Auth String</h2>
+        <pre>{data}</pre>
+        <h2>Secret</h2>
+        <pre>{secret.toString()}</pre>
+
+        <h2>Hash</h2>
+        <pre>{hash}</pre>
+    </div>
+}
 
 function LoginContent() {
     const {
@@ -28,6 +69,8 @@ function LoginContent() {
     } = useUserInfo();
     const [usernameOpen, setUsernameOpen] = useState(false)
     const [modal, setModal] = useState<'bindList' | 'pohList' | ''>('')
+
+    const [authData, setAuthData] = useState<any>(null)
     const refreshOv = async () => {
         await refreshOverview()
         alert('refreshed')
@@ -37,6 +80,7 @@ function LoginContent() {
         try {
             const res = await auth()
             console.log('auth', res)
+            setAuthData(res)
         } catch (e) {
             console.error('auth', e)
         }
@@ -71,6 +115,7 @@ function LoginContent() {
                 setUsernameOpen(false)
             }}/>
         </ButtonGroup>
+        {authData && <AuthData authData={authData}/>}
         <ButtonGroup title={"Bind"}>
             {
                 LoginMethod.map((method) => {

package/example/src/store/useStore.ts

@@ -0,0 +1,14 @@
+import {create} from 'zustand';
+
+interface StoreState {
+    appSecret: string
+    setAppSecret: (appSecret: string) => void,
+
+}
+
+const useStore = create<StoreState>(set => ({
+    appSecret: '',
+    setAppSecret: (appSecret) => set({appSecret: appSecret}),
+}));
+
+export default useStore;

package/example/yarn.lock

@@ -503,6 +503,11 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@types/crypto-js@^4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.2.2.tgz#771c4a768d94eb5922cc202a3009558204df0cea"
+  integrity sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==
+
 "@types/estree@1.0.6":
   version "1.0.6"
   resolved "https://registry.npmmirror.com/@types/estree/-/estree-1.0.6.tgz"
@@ -676,6 +681,16 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crypto-js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
+
+crypto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/crypto/-/crypto-1.0.1.tgz#2af1b7cad8175d24c8a1b0778255794a21803037"
+  integrity sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.55-alpha.9",
+  "version": "0.1.56-alpha.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -67,7 +67,6 @@
   "license": "ISC",
   "description": "MatchID SDK",
   "peerDependencies": {
-    "lottie-react": "^2.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -80,7 +79,7 @@
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.2",
     "lodash": "^4.17.21",
-
+    "lottie-react": "^2.4.1",
     "moment": "^2.30.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-intl": "^7.1.0",