@matchain/matchid-sdk-react 0.1.53-alpha.6 → 0.1.53-alpha.8

package/dist/ui/index.mjs

@@ -11,9 +11,11 @@ import {
   Overlay,
   Popover,
   Radio,
-  Switch
-} from "../chunk-V2S54LGG.mjs";
-import "../chunk-3USZ4ZZY.mjs";
+  Skeleton_default,
+  Switch,
+  Tabs
+} from "../chunk-X5HGL3ZX.mjs";
+import "../chunk-FKXS2XRG.mjs";
 import "../chunk-J5LGTIGS.mjs";
 export {
   AlphaAvatar,
@@ -28,6 +30,8 @@ export {
   Overlay,
   Popover,
   Radio,
-  Switch
+  Skeleton_default as Skeleton,
+  Switch,
+  Tabs
 };
 //# sourceMappingURL=index.mjs.map

package/dist/utils/index.d.mts

@@ -4,7 +4,7 @@ declare function decodeBase64(input: string): string;
 declare const isValidEmail: (email: string) => boolean;
 declare const isValidUsername: (username: string) => boolean;
 declare const deepMerge: (target: any, source: any) => any;
-declare function truncateAddress(address: string): string;
+declare function truncateAddress(address: string, startLen?: number, endLen?: number): string;
 declare function firstUpperCase(str: string): string;
 declare function getAppClientId(): string;
 interface NumberFormatterProps {

package/dist/utils/index.d.ts

@@ -4,7 +4,7 @@ declare function decodeBase64(input: string): string;
 declare const isValidEmail: (email: string) => boolean;
 declare const isValidUsername: (username: string) => boolean;
 declare const deepMerge: (target: any, source: any) => any;
-declare function truncateAddress(address: string): string;
+declare function truncateAddress(address: string, startLen?: number, endLen?: number): string;
 declare function firstUpperCase(str: string): string;
 declare function getAppClientId(): string;
 interface NumberFormatterProps {

package/dist/utils/index.js

@@ -73,12 +73,12 @@ var deepMerge = (target, source) => {
   }
   return target;
 };
-function truncateAddress(address) {
-  if (address.length <= 6) {
+function truncateAddress(address, startLen = 4, endLen = 4) {
+  if (address.length <= startLen + endLen) {
     return address;
   }
-  const start = address.slice(0, 4);
-  const end = address.slice(-2);
+  const start = address.slice(0, startLen);
+  const end = address.slice(-endLen);
   return `${start}...${end}`;
 }
 function firstUpperCase(str) {

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.tsx"],"sourcesContent":["import moment from 'moment';\n\nexport const getVersion = (): string => {\n    return \"0.0.2\";\n};\n\nexport function encodeBase64(input: string) {\n    return btoa(unescape(encodeURIComponent(input)));\n}\n\nexport function decodeBase64(input: string) {\n    return decodeURIComponent(escape(atob(input)));\n}\n\nexport const isValidEmail = (email: string) => {\n    return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)\n}\nexport const isValidUsername = (username: string) => {\n    //8-32 alpha number - _\n    return /^[a-zA-Z0-9_-]+$/.test(username)\n}\n\nexport const deepMerge = (target: any, source: any): any => {\n    for (const key in source) {\n        if (source[key] instanceof Object && key in target) {\n            target[key] = deepMerge(target[key], source[key]);\n        } else {\n            target[key] = source[key];\n        }\n    }\n    return target;\n};\n\nexport function truncateAddress(address: string): string {\n    if (address.length <= 6) {\n        return address;\n    }\n    const start = address.slice(0, 4);\n    const end = address.slice(-2);\n    return `${start}...${end}`;\n}\n\n\nexport function firstUpperCase(str: string): string {\n    return str.toString()[0].toUpperCase() + str.toString().slice(1);\n}\n\nexport function getAppClientId() {\n    return \"react-sdk-\" + getVersion()\n}\n\n\nfunction convertScientificToDecimal(num: number) {\n    let str = num.toFixed(12)\n    str = str.replace(/0+$/, '')\n    str = str.replace(/\\.$/, '')\n    return str\n}\n\ninterface NumberFormatterProps {\n    value: number | string | undefined\n    prefix?: string\n    suffix?: string\n    separator?: boolean\n    fixNum?: number //number >= 1 fix num\n    tFixNum?: number //number < 1 fix num\n    intClassName?: string\n    decimalClassName?: string\n    prefixClassName?: string\n    className?: string\n}\n\nexport const NumberFormatter: React.FC<NumberFormatterProps> = ({\n                                                                    value,\n                                                                    prefix = '',\n                                                                    suffix = '',\n                                                                    separator = true,\n                                                                    fixNum = 2,\n                                                                    tFixNum = 4,\n                                                                    intClassName = \"\",\n                                                                    decimalClassName = \"\",\n                                                                    prefixClassName = \"\",\n                                                                    className = \"\"\n                                                                }) => {\n    const numberValue =\n        typeof value === 'number'\n            ? convertScientificToDecimal(value)\n            : value\n                ? value\n                : '0'\n\n    const [intPart, decimalPart] = numberValue.toString().split('.')\n\n    const intFormat = separator\n        ? intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n        : intPart\n\n    if (Math.abs(parseFloat(numberValue)) >= 1) {\n        return (\n            <span className={className}>\n            {prefix && <span className={prefixClassName}>{prefix}</span>}\n                <span className={intClassName}>{intFormat}</span>\n                {decimalPart ? (\n                    <span className={decimalClassName}>\n            .{decimalPart.substring(0, fixNum)}\n            </span>\n                ) : (\n                    ''\n                )}\n                {suffix}\n        </span>\n        )\n    }\n\n    if (decimalPart) {\n        let zeroCount = 0\n        for (let i = 0; i < decimalPart.length; i++) {\n            if (decimalPart[i] === '0') {\n                zeroCount++\n            } else {\n                break\n            }\n        }\n        if (zeroCount < tFixNum) {\n            return (\n                <span className={className}>\n                        {prefix && <span className={prefixClassName}>{prefix}</span>}\n                    <span className={intClassName}>{intFormat}</span>\n                    <span className={decimalClassName}>\n            .{decimalPart.substring(0, tFixNum)}\n                </span>\n                    {suffix}\n                </span>\n            )\n        }\n        return (\n            <span className={className}>\n                        {prefix && <span className={prefixClassName}>{prefix}</span>}\n                <span className={intClassName}>{intFormat}</span>\n                    <span className={decimalClassName}>\n                    .0<sub>{zeroCount}</sub>\n                        {decimalPart?.substring(zeroCount, zeroCount + tFixNum - 2)}\n                </span>\n                {suffix}\n                </span>\n        )\n    }\n    return (\n        <span className={className}>\n                    {prefix && <span className={prefixClassName}>{prefix}</span>}\n            <span className={intClassName}>{intPart}</span>\n            {suffix}\n                </span>\n    )\n}\n\nexport function formatAddress(address: string, pre = 4, after = 5) {\n    return `${address.substring(0, pre)}...${address.substring(address.length - after, address.length)}`\n}\n\nexport const formatDate = (value: any, formatString = 'YYYY-MM-DD HH:mm:ss') => {\n    if (value) {\n        return moment.unix(value).format(formatString)\n    }\n    return '--'\n}\nexport const isInTgApp = () => {\n    return !!(window.TelegramWebviewProxy)\n}\n\nexport function bytesToBase64(bytes:Uint8Array) {\n    const binString = String.fromCodePoint(...bytes);\n    return btoa(binString);\n}"],"mappings":"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","names":["moment"]}
+{"version":3,"sources":["../../src/utils/index.tsx"],"sourcesContent":["import moment from 'moment';\n\nexport const getVersion = (): string => {\n    return \"0.0.2\";\n};\n\nexport function encodeBase64(input: string) {\n    return btoa(unescape(encodeURIComponent(input)));\n}\n\nexport function decodeBase64(input: string) {\n    return decodeURIComponent(escape(atob(input)));\n}\n\nexport const isValidEmail = (email: string) => {\n    return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)\n}\nexport const isValidUsername = (username: string) => {\n    //8-32 alpha number - _\n    return /^[a-zA-Z0-9_-]+$/.test(username)\n}\n\nexport const deepMerge = (target: any, source: any): any => {\n    for (const key in source) {\n        if (source[key] instanceof Object && key in target) {\n            target[key] = deepMerge(target[key], source[key]);\n        } else {\n            target[key] = source[key];\n        }\n    }\n    return target;\n};\n\nexport function truncateAddress(address: string, startLen = 4, endLen = 4): string {\n    if (address.length <= startLen + endLen) {\n        return address;\n    }\n    const start = address.slice(0, startLen);\n    const end = address.slice(-endLen);\n    return `${start}...${end}`;\n}\n\n\nexport function firstUpperCase(str: string): string {\n    return str.toString()[0].toUpperCase() + str.toString().slice(1);\n}\n\nexport function getAppClientId() {\n    return \"react-sdk-\" + getVersion()\n}\n\n\nfunction convertScientificToDecimal(num: number) {\n    let str = num.toFixed(12)\n    str = str.replace(/0+$/, '')\n    str = str.replace(/\\.$/, '')\n    return str\n}\n\ninterface NumberFormatterProps {\n    value: number | string | undefined\n    prefix?: string\n    suffix?: string\n    separator?: boolean\n    fixNum?: number //number >= 1 fix num\n    tFixNum?: number //number < 1 fix num\n    intClassName?: string\n    decimalClassName?: string\n    prefixClassName?: string\n    className?: string\n}\n\nexport const NumberFormatter: React.FC<NumberFormatterProps> = ({\n                                                                    value,\n                                                                    prefix = '',\n                                                                    suffix = '',\n                                                                    separator = true,\n                                                                    fixNum = 2,\n                                                                    tFixNum = 4,\n                                                                    intClassName = \"\",\n                                                                    decimalClassName = \"\",\n                                                                    prefixClassName = \"\",\n                                                                    className = \"\"\n                                                                }) => {\n    const numberValue =\n        typeof value === 'number'\n            ? convertScientificToDecimal(value)\n            : value\n                ? value\n                : '0'\n\n    const [intPart, decimalPart] = numberValue.toString().split('.')\n\n    const intFormat = separator\n        ? intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n        : intPart\n\n    if (Math.abs(parseFloat(numberValue)) >= 1) {\n        return (\n            <span className={className}>\n            {prefix && <span className={prefixClassName}>{prefix}</span>}\n                <span className={intClassName}>{intFormat}</span>\n                {decimalPart ? (\n                    <span className={decimalClassName}>\n            .{decimalPart.substring(0, fixNum)}\n            </span>\n                ) : (\n                    ''\n                )}\n                {suffix}\n        </span>\n        )\n    }\n\n    if (decimalPart) {\n        let zeroCount = 0\n        for (let i = 0; i < decimalPart.length; i++) {\n            if (decimalPart[i] === '0') {\n                zeroCount++\n            } else {\n                break\n            }\n        }\n        if (zeroCount < tFixNum) {\n            return (\n                <span className={className}>\n                        {prefix && <span className={prefixClassName}>{prefix}</span>}\n                    <span className={intClassName}>{intFormat}</span>\n                    <span className={decimalClassName}>\n            .{decimalPart.substring(0, tFixNum)}\n                </span>\n                    {suffix}\n                </span>\n            )\n        }\n        return (\n            <span className={className}>\n                        {prefix && <span className={prefixClassName}>{prefix}</span>}\n                <span className={intClassName}>{intFormat}</span>\n                    <span className={decimalClassName}>\n                    .0<sub>{zeroCount}</sub>\n                        {decimalPart?.substring(zeroCount, zeroCount + tFixNum - 2)}\n                </span>\n                {suffix}\n                </span>\n        )\n    }\n    return (\n        <span className={className}>\n                    {prefix && <span className={prefixClassName}>{prefix}</span>}\n            <span className={intClassName}>{intPart}</span>\n            {suffix}\n                </span>\n    )\n}\n\nexport function formatAddress(address: string, pre = 4, after = 5) {\n    return `${address.substring(0, pre)}...${address.substring(address.length - after, address.length)}`\n}\n\nexport const formatDate = (value: any, formatString = 'YYYY-MM-DD HH:mm:ss') => {\n    if (value) {\n        return moment.unix(value).format(formatString)\n    }\n    return '--'\n}\nexport const isInTgApp = () => {\n    return !!(window.TelegramWebviewProxy)\n}\n\nexport function bytesToBase64(bytes: Uint8Array) {\n    const binString = String.fromCodePoint(...bytes);\n    return btoa(binString);\n}"],"mappings":"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","names":["moment"]}

package/dist/utils/index.mjs

@@ -13,7 +13,7 @@ import {
   isValidEmail,
   isValidUsername,
   truncateAddress
-} from "../chunk-OCQ2AIM3.mjs";
+} from "../chunk-IZOOVZAD.mjs";
 import "../chunk-J5LGTIGS.mjs";
 export {
   NumberFormatter,

package/example/package.json

@@ -17,10 +17,12 @@
     "viem": "../node_modules/viem",
     "react": "../node_modules/react",
     "react-dom": "../node_modules/react-dom/profiling",
+    "lodash": "../node_modules/lodash",
     "axios": "../node_modules/axios",
     "zustand": "../node_modules/zustand",
     "react-router-dom": "../node_modules/react-router-dom",
-    "@types/react-router-dom": "../node_modules/@types/react-router-dom"
+    "@types/react-router-dom": "../node_modules/@types/react-router-dom",
+    "@types/lodash": "../node_modules/@types/lodash"
   },
   "dependencies": {
     "@matchain/matchid-sdk-react": "../dist",

package/example/src/App.tsx

@@ -14,6 +14,7 @@ import useLocalStore from "@/store/useLocalStore";
 import {LoginButton} from "@matchain/matchid-sdk-react/components";
 import UI from "@/pages/UI";
 import TgApp from "@/pages/TgApp";
+import Contact from "./pages/Contact";
 
 
 function Nav() {
@@ -51,6 +52,12 @@ function Nav() {
                 url: '/wallet',
                 onActive: location.pathname === '/wallet',
                 hidden: !isLogin
+            },
+            {
+                name: 'Contact',
+                url: '/contact',
+                onActive: location.pathname === '/contact',
+                hidden: !isLogin
             }
         ]
         return list
@@ -59,7 +66,7 @@ function Nav() {
         <nav className={`text-2xl mb-5 p-2 text-red-600 flex gap-10 flex-wrap`}>
             {menus.map((menu) => {
                 return <Link key={menu.url} to={menu.url}
-                             className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden?'hidden' :''}`}>{menu.name}</Link>
+                             className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden ? 'hidden' : ''}`}>{menu.name}</Link>
             })}
 
             <LoginButton/>
@@ -69,15 +76,29 @@ function Nav() {
 }
 
 function RouterApp() {
-    const {appid, setAppid, locale, setLocale, endpoints, setEndpoints, setWalletType,walletType,backgroundColor,setBackgroundColor,color,setColor} = useLocalStore()
+    const {
+        appid,
+        setAppid,
+        locale,
+        setLocale,
+        endpoints,
+        setEndpoints,
+        setWalletType,
+        walletType,
+        backgroundColor,
+        setBackgroundColor,
+        color,
+        setColor
+    } = useLocalStore()
 
     return <Router>
         <div className={`mb-2 p-2 flex gap-2 flex-col`}>
             <div>
                 <label>BackgroundColor:</label>
-                <input value={backgroundColor} placeholder={"BackgroundColor"} className={"border-solid border"} onChange={(ele) => {
-                    setBackgroundColor(ele.target.value)
-                }}/></div>
+                <input value={backgroundColor} placeholder={"BackgroundColor"} className={"border-solid border"}
+                       onChange={(ele) => {
+                           setBackgroundColor(ele.target.value)
+                       }}/></div>
             <div>
                 <label>Color:</label>
                 <input value={color} placeholder={"Color"} className={"border-solid border"} onChange={(ele) => {
@@ -128,6 +149,7 @@ function RouterApp() {
                 <Route element={<RoutePrivate/>}>
                     <Route path="/user" element={<User/>}/>
                     <Route path="/wallet" element={<Wallet/>}/>
+                    <Route path="/contact" element={<Contact/>}/>
                 </Route>
             </Routes>
         </div>
@@ -135,7 +157,7 @@ function RouterApp() {
 }
 
 function App() {
-    const {appid, locale, endpoints,walletType,backgroundColor,color} = useLocalStore()
+    const {appid, locale, endpoints, walletType, backgroundColor, color} = useLocalStore()
 
     return <div style={{
         backgroundColor: backgroundColor,
@@ -157,7 +179,8 @@ function App() {
         }}
     >
         <RouterApp/>
-    </MatchProvider></div>;
+    </MatchProvider>
+    </div>;
 }
 
 export default App;

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

@@ -0,0 +1,90 @@
+import {ContactList,ContactCard} from "@matchain/matchid-sdk-react/components"
+import {Field, Input, Button, Radio} from "@matchain/matchid-sdk-react/ui"
+import {Api,Icon} from "@matchain/matchid-sdk-react"
+import React, {useCallback, useEffect, useState} from "react";
+import {debounce} from "lodash";
+import {useToast} from "@matchain/matchid-sdk-react/hooks";
+
+const {contact} = Api
+
+function ContactSearch() {
+    const [value, setValue] = useState("")
+    const [searchValue, setSearchValue] = useState("")
+    const [loading,setLoading] = useState(false)
+    const [searching,setSearching] = useState(false)
+    const toast = useToast()
+    const debouncedSetKeyword = useCallback(
+        debounce((newKeyword) => {
+            setSearchValue(newKeyword);
+        }, 1500),
+        []
+    );
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+        debouncedSetKeyword(e.target.value);
+        setSearching(true)
+    }
+
+    const searchQuery = contact.useContactSearch(searchValue)
+
+    useEffect(() => {
+        if(searchQuery.isFetched){
+            setSearching(false)
+        }
+    }, [searchQuery.isFetched]);
+
+
+    const onAdd = async()=>{
+        if(!searchQuery.data){
+            return
+        }
+        setLoading(true)
+        try{
+            await contact.addContact(searchQuery.data)
+            toast.success("Add Success")
+        }catch(error:any){
+            toast.success(error.message)
+            console.error(error)
+        }finally {
+            setLoading(false)
+        }
+    }
+    return <div className={`flex gap-4 flex-col`}>
+        <Field label={"Search"}>
+            <Input placeholder={"Input address or MatchID"} value={value} onChange={onChange}/>
+        </Field>
+        {(searchQuery.data || searching )&& <div className={"break-all"}>
+            <ContactCard loading={searching} data={!searching ?(searchQuery.data||undefined) : undefined}
+                action={()=>{
+                    return searchQuery.data && <Button size="sm" onClick={onAdd} disabled={!searchQuery.data} loading={loading}>Add</Button>
+                }}
+            />
+        </div>}
+    </div>
+}
+
+export default function Contact() {
+    const [contactType, setContactType] = useState<"Friend" | "Requests">("Friend")
+
+    return <div className={`grid md:grid-cols-2 gap-4`}>
+        <div>
+            <Field label={"Type"}>
+                <div className={`flex gap-4`}>
+                    <div onClick={() => setContactType("Friend")}
+                         className={`flex gap-2 items-center cursor-pointer`}>
+                        <Radio checked={contactType == "Friend"}/>
+                        Friend
+                    </div>
+                    <div onClick={() => setContactType("Requests")}
+                         className={`flex gap-2 items-center cursor-pointer`}>
+                        <Radio checked={contactType == "Requests"}/>
+                        Requests
+                    </div>
+                </div>
+            </Field>
+            <ContactList type={contactType}/>
+        </div>
+        <ContactSearch/>
+    </div>
+}

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

@@ -0,0 +1,18 @@
+import {useState} from "react";
+import {Tabs} from "@matchain/matchid-sdk-react/ui"
+export default function TabsDemo(){
+    const list = ['Tab1', 'Tab2', 'Tab3']
+    const [activeTab, setActiveTab] = useState(0)
+    return <div>
+        <Tabs tabs={list} activeTab={activeTab} setActiveTab={setActiveTab}/>
+        <div>
+            {list.map((tab, index) => {
+                return <div key={index} style={{display: activeTab === index ? 'block' : 'none'}}>
+                    {tab}
+                </div>
+            })}
+        </div>
+    </div>
+
+
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.53-alpha.6",
+  "version": "0.1.53-alpha.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -73,11 +73,13 @@
     "axios-retry": "^4.5.0",
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.2",
+    "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-intl": "^7.1.0",
     "react-qrcode": "^0.3.6",
     "react-router-dom": "^6.0.0",
+    "react-virtuoso": "^4.12.5",
     "sats-connect": "^3.0.1",
     "siwe": "^2.3.2",
     "styled-components": "^6.1.13",
@@ -87,6 +89,7 @@
   },
   "devDependencies": {
     "@swc/core": "^1.9.1",
+    "@types/lodash": "^4.17.16",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-modal": "^3.16.3",