@matchain/matchid-sdk-react 0.1.47 → 0.1.48-alpha.1

package/example/src/pages/UI/components/Radio.tsx

@@ -0,0 +1,15 @@
+import {Radio} from "@matchain/matchid-sdk-react/ui";
+import ButtonGroup from "@/components/ButtonGroup";
+import {useState} from "react";
+
+export default function RadioDemo(){
+    const [checked,setChecked] = useState(false)
+    return <ButtonGroup title={"Radio"}>
+        <Radio checked={checked} onChange={()=>{
+            setChecked(true)
+        }}/>
+        <Radio checked={!checked} onChange={()=>{
+            setChecked(false)
+        }}/>
+    </ButtonGroup>
+}

package/example/src/pages/UI/components/Switch.tsx

@@ -0,0 +1,13 @@
+import {Switch} from "@matchain/matchid-sdk-react/ui"
+import ButtonGroup from "@/components/ButtonGroup";
+import {useState} from "react";
+export default function SwitchDemo(){
+    const [checked,setChecked] = useState(false)
+
+    return <ButtonGroup title={"Switch"}>
+        <Switch checked={checked} onChange={(v)=>setChecked(v)}/>
+        <Switch loading checked={checked} onChange={(v)=>setChecked(v)}/>
+        <Switch size={"sm"} checked={checked} onChange={(v)=>setChecked(v)}/>
+        <Switch disabled checked={checked} onChange={(v)=>setChecked(v)}/>
+    </ButtonGroup>
+}

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

@@ -0,0 +1,11 @@
+import SwitchDemo from "@/pages/UI/components/Switch";
+import AlphaAvatarDemo from "@/pages/UI/components/AlphaAvatar";
+import RadioDemo from "@/pages/UI/components/Radio";
+
+export default function UI(){
+    return <div>
+        <SwitchDemo/>
+        <AlphaAvatarDemo/>
+        <RadioDemo/>
+    </div>
+}

package/example/src/pages/User/components/BindListModal.tsx

@@ -1,6 +1,6 @@
 import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
 import React from "react";
-import QueryDisplay from "@/pages/User/components/QueryDisplay";
+import QueryDisplay from "@/components/QueryDisplay";
 import {Api} from "@matchain/matchid-sdk-react";
 export default function BindListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
     const bindListQuery = Api.bind.useBindList()

package/example/src/pages/User/components/PohListModal.tsx

@@ -1,6 +1,6 @@
 import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
 import React from "react";
-import QueryDisplay from "@/pages/User/components/QueryDisplay";
+import QueryDisplay from "@/components/QueryDisplay";
 import {Api} from "@matchain/matchid-sdk-react";
 export default function PohListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
     const pohListQuery = Api.poh.usePohList()

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

@@ -5,10 +5,10 @@ import {useMatchEvents, useUserInfo, useWallet} from "@matchain/matchid-sdk-reac
 import {
     LoginButton,
     UsernameModal,
-    PasswordModal,
 } 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";
 
 
@@ -26,7 +26,6 @@ function LoginContent() {
         getAuthInfo
     } = useUserInfo();
     const [usernameOpen, setUsernameOpen] = useState(false)
-    const [passwordOpen, setPasswordOpen] = useState(false)
     const [modal, setModal] = useState<'bindList' | 'pohList' | ''>('')
     const refreshOv = async () => {
         await refreshOverview()
@@ -53,10 +52,6 @@ function LoginContent() {
             <button className={`bg-gray-300 p-1 rounded`}
                     onClick={() => setUsernameOpen(true)}>Set username
             </button>
-
-            <button className={`bg-gray-300 p-1 rounded mr-5`}
-                    onClick={() => setPasswordOpen(true)}>Set Password
-            </button>
             <button className={`bg-gray-300 p-1 rounded`}
                     onClick={onAuth}>Third party auth
             </button>
@@ -73,13 +68,6 @@ function LoginContent() {
                 alert('set username success')
                 setUsernameOpen(false)
             }}/>
-            <PasswordModal isOpen={passwordOpen} onClose={() => setPasswordOpen(false)} onBack={() => {
-                console.log('set password modal back event')
-                setPasswordOpen(false)
-            }} onSuccess={() => {
-                alert('set password success')
-                setPasswordOpen(false)
-            }}/>
         </ButtonGroup>
         <ButtonGroup title={"Bind"}>
             {

package/example/src/pages/Wallet/components/AssetListModal.tsx

@@ -0,0 +1,15 @@
+import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
+import React from "react";
+import QueryDisplay from "@/components/QueryDisplay";
+import {Api} from "@matchain/matchid-sdk-react";
+import useLocalStore from "@/store/useLocalStore";
+export default function AssetListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
+    const {initChainId} = useLocalStore()
+    const query = Api.wallet.useAssetListQuery({
+        chainId:initChainId
+    })
+
+    return <ModalWithHeader isOpen={isOpen} onClose={onClose} title={"AssetListQuery"}>
+        <QueryDisplay query={query} />
+    </ModalWithHeader>
+}

package/example/src/pages/Wallet/components/ChainListModal.tsx

@@ -0,0 +1,11 @@
+import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
+import React from "react";
+import QueryDisplay from "@/components/QueryDisplay";
+import {Api} from "@matchain/matchid-sdk-react";
+export default function ChainListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
+    const query = Api.wallet.useChainListQuery()
+
+    return <ModalWithHeader isOpen={isOpen} onClose={onClose} title={"ChainListQuery"}>
+        <QueryDisplay query={query} />
+    </ModalWithHeader>
+}

package/example/src/pages/Wallet/components/ImportTokenListModal.tsx

@@ -0,0 +1,15 @@
+import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
+import React from "react";
+import QueryDisplay from "@/components/QueryDisplay";
+import {Api} from "@matchain/matchid-sdk-react";
+import useLocalStore from "@/store/useLocalStore";
+export default function ImportTokenListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
+    const {initChainId} = useLocalStore()
+    const query = Api.wallet.useImportTokenListQuery({
+        chainId:initChainId
+    })
+
+    return <ModalWithHeader isOpen={isOpen} onClose={onClose} title={"ImportTokenListQuery"}>
+        <QueryDisplay query={query} />
+    </ModalWithHeader>
+}

package/example/src/pages/Wallet/components/MatchWallet.tsx

@@ -0,0 +1,20 @@
+import {useMatchChain,useMatchWallet} from "@matchain/matchid-sdk-react/hooks";
+import {Button} from "@matchain/matchid-sdk-react/components";
+
+export default function MatchWallet(){
+    const chain = useMatchChain()
+    const wallet = useMatchWallet()
+    return (
+        <div className={"mt-[50px]"}>
+            <h1>MatchCustomUI</h1>
+            <div className={`flex gap-[16px] items-center`}>
+                {chain.chain?.id}:{chain.chain?.name}
+                <Button size={"sm"} onClick={chain.showChangeNetwork}>ChangeNetwork</Button>
+            </div>
+            <div>
+                <Button size={"sm"} onClick={wallet.showReceiveModal}>ShowReceive</Button>
+
+            </div>
+        </div>
+    )
+}

package/example/src/pages/Wallet/components/WalletChainListModal.tsx

@@ -0,0 +1,11 @@
+import { ModalWithHeader } from '@matchain/matchid-sdk-react/components';
+import React from "react";
+import QueryDisplay from "@/components/QueryDisplay";
+import {Api} from "@matchain/matchid-sdk-react";
+export default function WalletChainListModal({isOpen, onClose}: {isOpen: boolean, onClose: () => void}) {
+    const query = Api.wallet.useWalletChainListQuery()
+
+    return <ModalWithHeader isOpen={isOpen} onClose={onClose} title={"WalletChainListQuery"}>
+        <QueryDisplay query={query} />
+    </ModalWithHeader>
+}

package/example/src/pages/{Wallet.tsx → Wallet/index.tsx}

@@ -1,4 +1,4 @@
-import {useWallet} from "@matchain/matchid-sdk-react/hooks"
+import {useUserInfo, useWallet} from "@matchain/matchid-sdk-react/hooks"
 import {Input, Button} from "@matchain/matchid-sdk-react/components"
 import React, {useEffect, useMemo, useState} from "react";
 import {
@@ -37,7 +37,11 @@ import {matchMain, matchTest} from "@/config/chains";
 import useLocalStore from "@/store/useLocalStore";
 import ButtonGroup from "@/components/ButtonGroup";
 import Erc20Abi from "@/abi/erc20.json";
-import type {Abi} from "abitype";
+import ChainListModal from "@/pages/Wallet/components/ChainListModal";
+import AssetListModal from "@/pages/Wallet/components/AssetListModal";
+import ImportTokenListModal from "@/pages/Wallet/components/ImportTokenListModal";
+import WalletChainListModal from "@/pages/Wallet/components/WalletChainListModal";
+import MatchWallet from "@/pages/Wallet/components/MatchWallet";
 
 const chainList = [
     mainnet,
@@ -65,8 +69,10 @@ const chainList = [
 ]
 
 export default function Wallet() {
+    const [modal, setModal] = useState<'chainList' | 'assetList' | 'importTokenList' | 'walletChainList' | '' >('')
 
     const {initChainId, setInitChainId} = useLocalStore()
+    const {overview} = useUserInfo()
 
     const [message, setMessage] = useState('hello')
     const [toAddress, setToAddress] = useState('')
@@ -164,6 +170,21 @@ export default function Wallet() {
         <ButtonGroup title={"Wallet Ready"}>
             {walletReady ? 'Ready' : 'Not Ready'}
         </ButtonGroup>
+
+        <ButtonGroup title={"QueryList"}>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={() => setModal('chainList')}>ChainList
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={() => setModal('assetList')}>AssetList
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={() => setModal('importTokenList')}>ImportTokenList
+            </button>
+            <button className={`bg-gray-300 p-1 rounded`}
+                    onClick={() => setModal('walletChainList')}>WalletChainList
+            </button>
+        </ButtonGroup>
         <ButtonGroup title={"CreateWalletClient Chain"}>
             <select value={initChainId} onChange={(e) => setInitChainId(parseInt(e.target.value))}>
                 {chainList.map((chain, index) => {
@@ -171,6 +192,9 @@ export default function Wallet() {
                 })}
             </select>
         </ButtonGroup>
+        <ButtonGroup title={"DID"}>
+            <div className={`flex-1 flex-wrap break-all`}>{overview?.did}</div>
+        </ButtonGroup>
         <ButtonGroup title={"Ethereum address"}>
             <div className={`flex-1 flex-wrap break-all`}>{address}</div>
         </ButtonGroup>
@@ -214,7 +238,14 @@ export default function Wallet() {
         <ButtonGroup title={"TxHash"}>
             <div className={`flex-1 flex-wrap break-all`}>{hash || '-'}</div>
         </ButtonGroup>
+
+        {modal == 'chainList' && <ChainListModal isOpen onClose={() => setModal('')}/>}
+        {modal == 'walletChainList' && <WalletChainListModal isOpen onClose={() => setModal('')}/>}
+        {modal == 'assetList' && <AssetListModal isOpen onClose={() => setModal('')}/>}
+        {modal == 'importTokenList' && <ImportTokenListModal isOpen onClose={() => setModal('')}/>}
+
         <ERC20/>
+        <MatchWallet/>
     </div>
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.47",
+  "version": "0.1.48-alpha.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -12,6 +12,10 @@
       "import": "./dist/components/index.mjs",
       "require": "./dist/components/index.js"
     },
+    "./ui": {
+      "import": "./dist/ui/index.mjs",
+      "require": "./dist/ui/index.js"
+    },
     "./hooks": {
       "import": "./dist/hooks/index.mjs",
       "require": "./dist/hooks/index.js"
@@ -69,6 +73,7 @@
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.2",
     "react-intl": "^7.1.0",
+    "react-qrcode": "^0.3.6",
     "react-router-dom": "^6.0.0",
     "sats-connect": "^3.0.1",
     "siwe": "^2.3.2",

package/dist/chunk-A3XSTHEE.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/api/index.ts","../src/hooks/api/bind.ts","../src/hooks/api/poh.ts","../src/hooks/api/user.ts"],"sourcesContent":["export * as bind from \"./bind\";\nexport * as poh from \"./poh\";\nexport * as user from \"./user\";","import {useQuery} from \"@tanstack/react-query\";\nimport useUserInfo from \"../useUserInfo\";\nimport type {UseQueryOptions} from \"@tanstack/react-query/src/types\";\nimport {BindInfoType, BindItemType} from \"../../types/types\";\nimport {getBindInfoApi, getBindListApi} from \"../../api\";\n\nexport {bindCexApi, unBindApi, unBindWalletApi} from \"../../api\";\n\nexport function useBindList(options?: Partial<Omit<UseQueryOptions<BindItemType[]>, 'queryKey' | 'queryFn'>>) {\n    const {isLogin} = useUserInfo()\n    return useQuery<BindItemType[]>({\n        queryKey: ['bindList'],\n        enabled: isLogin,\n        queryFn: async () => {\n            let res = await getBindListApi()\n            return res.data\n        },\n        ...options\n    })\n}\n\nexport function useBindInfo(options?: Partial<Omit<UseQueryOptions<BindInfoType>, 'queryKey' | 'queryFn'>>) {\n    const {isLogin} = useUserInfo()\n    return useQuery<BindInfoType>({\n        queryKey: ['bindInfo'],\n        enabled: isLogin,\n        queryFn: async () => {\n            let res = await getBindInfoApi()\n            return res.data\n        },\n        ...options\n    })\n}\n","import {useQuery} from \"@tanstack/react-query\";\nimport useUserInfo from \"../useUserInfo\";\nimport type {UseQueryOptions} from \"@tanstack/react-query/src/types\";\nimport {PohItemType} from \"types/types\";\nimport {getPohListApi} from \"api\";\nexport {verifyPohApi} from \"api\";\n\nexport function usePohList(options?: Partial<Omit<UseQueryOptions<PohItemType[]>, 'queryKey' | 'queryFn'>>) {\n    const {isLogin} = useUserInfo()\n    return useQuery<PohItemType[]>({\n        queryKey: ['pohList'],\n        enabled: isLogin,\n        queryFn: async () => {\n            let res = await getPohListApi()\n            return res.data\n        },\n        ...options\n    })\n}","export {mintPassportNftApi,chooseIdentityApi} from \"api\""],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAQ,gBAAe;AAQhB,SAAS,YAAY,SAAkF;AAC1G,QAAM,EAAC,QAAO,IAAI,YAAY;AAC9B,SAAO,SAAyB;AAAA,IAC5B,UAAU,CAAC,UAAU;AAAA,IACrB,SAAS;AAAA,IACT,SAAS,YAAY;AACjB,UAAI,MAAM,MAAM,eAAe;AAC/B,aAAO,IAAI;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACP,CAAC;AACL;AAEO,SAAS,YAAY,SAAgF;AACxG,QAAM,EAAC,QAAO,IAAI,YAAY;AAC9B,SAAO,SAAuB;AAAA,IAC1B,UAAU,CAAC,UAAU;AAAA,IACrB,SAAS;AAAA,IACT,SAAS,YAAY;AACjB,UAAI,MAAM,MAAM,eAAe;AAC/B,aAAO,IAAI;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACP,CAAC;AACL;;;AChCA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAQ,YAAAA,iBAAe;AAOhB,SAAS,WAAW,SAAiF;AACxG,QAAM,EAAC,QAAO,IAAI,YAAY;AAC9B,SAAOC,UAAwB;AAAA,IAC3B,UAAU,CAAC,SAAS;AAAA,IACpB,SAAS;AAAA,IACT,SAAS,YAAY;AACjB,UAAI,MAAM,MAAM,cAAc;AAC9B,aAAO,IAAI;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACP,CAAC;AACL;;;AClBA;AAAA;AAAA;AAAA;AAAA;","names":["useQuery","useQuery"]}