@matchain/matchid-sdk-react 0.1.53-alpha.7 → 0.1.53-alpha.9

package/dist/ui/index.mjs

@@ -14,8 +14,8 @@ import {
   Skeleton_default,
   Switch,
   Tabs
-} from "../chunk-AYMVU44P.mjs";
-import "../chunk-3USZ4ZZY.mjs";
+} from "../chunk-X5HGL3ZX.mjs";
+import "../chunk-FKXS2XRG.mjs";
 import "../chunk-J5LGTIGS.mjs";
 export {
   AlphaAvatar,

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/pages/Contact/index.tsx

@@ -1,4 +1,90 @@
-import {ContactList} from "@matchain/matchid-sdk-react/components"
-export default function Contact(){
-    return <ContactList/>
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.53-alpha.7",
+  "version": "0.1.53-alpha.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/dist/assets/icon/index.d.mts

@@ -1,147 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { CSSProperties } from 'react';
-import { F as IconProps$1 } from '../../types-i_ugbm5B.mjs';
-import '@tanstack/react-query/src/types';
-
-declare function BackIcon({ color, size, className, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CloseIcon({ color, size, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-}): react_jsx_runtime.JSX.Element;
-
-declare function XIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function GoogleIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function WalletIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function TelegramIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function EmailIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowRightIcon({ color, size, className, style }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function CloseRoundIcon({ size, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-interface LoadingIconProps {
-    size?: number;
-    className?: string;
-    color?: string;
-    rotate?: boolean;
-}
-declare const LoadingIcon: React.FC<LoadingIconProps>;
-
-declare function EmailLineIcon({ size, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare const UnLoginIcon: React.FC<IconProps$1>;
-
-declare const LoginIcon: React.FC<IconProps$1>;
-
-declare function CheckRoundIcon({ size, color, ...props }: Omit<IconProps$1, 'width' | 'height'>): react_jsx_runtime.JSX.Element;
-
-declare function PasswordRoundIcon(): react_jsx_runtime.JSX.Element;
-
-type IconProps = {
-    color?: string,
-    height?: string|number,
-    width?: string|number,
-    className?: string
-    size?: number
-}
-
-type IconSizeColorProps = Omit<IconProps, 'height' |'width'>
-
-type IconSizeProps = Omit<IconProps, 'color'|'height'|'width'>
-
-declare function CloseEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function OpenEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function DeleteRoundIcon({ height, width, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function FacebookIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowLeftIcon({ color, width, height, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function GithubIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function DiscordIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CheckIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function CopyIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function LinkedinIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function YoutubeIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ArrowDownIcon({ width, height, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-
-declare function LeatherIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function UnisatIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function XverseIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TronLinkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function OKXIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BitgetIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon$1({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ErrorRoundIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function InfoLineIcon({ size, color, ...props }: Omit<IconProps$1, 'width' | 'height'>): react_jsx_runtime.JSX.Element;
-
-declare function InfoRoundIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function TransferIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ArrowSendIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function PhantomIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowSendIcon, BTCDarkIcon, BTCLightIcon, BackIcon, BitgetIcon, CheckIcon, CheckRoundIcon, CloseEyeIcon, CloseIcon, CloseRoundIcon, CopyIcon, DeleteRoundIcon, DiscordIcon, EVMDarkIcon, EVMLightIcon, EmailIcon, EmailLineIcon, ErrorRoundIcon, FacebookIcon, GithubIcon, GoogleIcon, InfoLineIcon, InfoRoundIcon, LeatherIcon, LinkedinIcon, LoadingIcon, LoginIcon, OKXIcon, OpenEyeIcon, PasswordRoundIcon, PhantomIcon, SOLDarkIcon, SOLLightIcon, TRXDarkIcon, TRXLightIcon, TelegramIcon, TonLightIcon$1 as TonDarkIcon, TonLightIcon, TransferIcon, TronLinkIcon, UnLoginIcon, UnisatIcon, WalletIcon, XIcon, XverseIcon, YoutubeIcon };

package/dist/assets/icon/index.d.ts

@@ -1,147 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { CSSProperties } from 'react';
-import { F as IconProps$1 } from '../../types-i_ugbm5B.js';
-import '@tanstack/react-query/src/types';
-
-declare function BackIcon({ color, size, className, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CloseIcon({ color, size, style }: {
-    color?: string;
-    size?: number;
-    style?: CSSProperties;
-}): react_jsx_runtime.JSX.Element;
-
-declare function XIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function GoogleIcon({ size }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function WalletIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function TelegramIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function EmailIcon({ size, }: {
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowRightIcon({ color, size, className, style }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function CloseRoundIcon({ size, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-interface LoadingIconProps {
-    size?: number;
-    className?: string;
-    color?: string;
-    rotate?: boolean;
-}
-declare const LoadingIcon: React.FC<LoadingIconProps>;
-
-declare function EmailLineIcon({ size, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare const UnLoginIcon: React.FC<IconProps$1>;
-
-declare const LoginIcon: React.FC<IconProps$1>;
-
-declare function CheckRoundIcon({ size, color, ...props }: Omit<IconProps$1, 'width' | 'height'>): react_jsx_runtime.JSX.Element;
-
-declare function PasswordRoundIcon(): react_jsx_runtime.JSX.Element;
-
-type IconProps = {
-    color?: string,
-    height?: string|number,
-    width?: string|number,
-    className?: string
-    size?: number
-}
-
-type IconSizeColorProps = Omit<IconProps, 'height' |'width'>
-
-type IconSizeProps = Omit<IconProps, 'color'|'height'|'width'>
-
-declare function CloseEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function OpenEyeIcon({ size, color }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function DeleteRoundIcon({ height, width, color, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function FacebookIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowLeftIcon({ color, width, height, ...props }: IconProps$1): react_jsx_runtime.JSX.Element;
-
-declare function GithubIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function DiscordIcon({ size }: {
-    size?: number | string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CheckIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function CopyIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function LinkedinIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function YoutubeIcon({ size, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BTCLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function EVMLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function SOLLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXDarkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TRXLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ArrowDownIcon({ width, height, color, ...props }: IconProps): react_jsx_runtime.JSX.Element;
-
-declare function LeatherIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function UnisatIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function XverseIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TronLinkIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function OKXIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function BitgetIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon$1({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function TonLightIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ErrorRoundIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function InfoLineIcon({ size, color, ...props }: Omit<IconProps$1, 'width' | 'height'>): react_jsx_runtime.JSX.Element;
-
-declare function InfoRoundIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function TransferIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-declare function ArrowSendIcon({ size, color, ...props }: IconSizeColorProps): react_jsx_runtime.JSX.Element;
-
-declare function PhantomIcon({ size, ...props }: IconSizeProps): react_jsx_runtime.JSX.Element;
-
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowSendIcon, BTCDarkIcon, BTCLightIcon, BackIcon, BitgetIcon, CheckIcon, CheckRoundIcon, CloseEyeIcon, CloseIcon, CloseRoundIcon, CopyIcon, DeleteRoundIcon, DiscordIcon, EVMDarkIcon, EVMLightIcon, EmailIcon, EmailLineIcon, ErrorRoundIcon, FacebookIcon, GithubIcon, GoogleIcon, InfoLineIcon, InfoRoundIcon, LeatherIcon, LinkedinIcon, LoadingIcon, LoginIcon, OKXIcon, OpenEyeIcon, PasswordRoundIcon, PhantomIcon, SOLDarkIcon, SOLLightIcon, TRXDarkIcon, TRXLightIcon, TelegramIcon, TonLightIcon$1 as TonDarkIcon, TonLightIcon, TransferIcon, TronLinkIcon, UnLoginIcon, UnisatIcon, WalletIcon, XIcon, XverseIcon, YoutubeIcon };