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

package/dist/hooks/index.mjs

@@ -12,14 +12,14 @@ import {
   useTransaction,
   useUserInfo,
   useWallet
-} from "../chunk-Z7DMYFH5.mjs";
+} from "../chunk-W7CCPGOT.mjs";
 import "../chunk-UA6XHZHX.mjs";
-import "../chunk-OCQ2AIM3.mjs";
 import {
   useLayout_exports
-} from "../chunk-V2S54LGG.mjs";
-import "../chunk-3USZ4ZZY.mjs";
+} from "../chunk-AYMVU44P.mjs";
+import "../chunk-OCQ2AIM3.mjs";
 import "../chunk-JX73EY6V.mjs";
+import "../chunk-3USZ4ZZY.mjs";
 import "../chunk-J5LGTIGS.mjs";
 export {
   useCopyClipboard,

package/dist/{index-Dt92N6yZ.d.ts → index-BIvPr81B.d.ts}

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
-import { Q as PohZkpassParams, m as UserTransactionType, Z as UserTransactionNextPageParams, $ as WalletAssetType, J as MetaPageType, s as BindItemType, r as BindInfoType, N as PohItemType, U as UserChainType, o as UserAssetToken, n as UserImportTokenType, a0 as WalletChainType, a1 as WalletNFTType } from './types-Bx_FJ11s.js';
+import { S as PohZkpassParams, m as UserTransactionType, _ as UserTransactionNextPageParams, a0 as WalletAssetType, K as MetaPageType, s as BindItemType, r as BindInfoType, Q as PohItemType, U as UserChainType, o as UserAssetToken, n as UserImportTokenType, a1 as WalletChainType, a2 as WalletNFTType, v as ContactType } from './types-i_ugbm5B.js';
 
 declare const isSuccess: (res: {
     code: number;
@@ -133,13 +133,28 @@ declare namespace wallet {
   export { wallet_USER_IMPORT_TOKEN_LIST_KEY as USER_IMPORT_TOKEN_LIST_KEY, wallet_getUserWalletTransactionsApi as getUserWalletTransactionsApi, wallet_getWalletAssetListApi as getWalletAssetListApi, wallet_getWalletListApi as getWalletListApi, wallet_useAssetListQuery as useAssetListQuery, wallet_useChainListQuery as useChainListQuery, wallet_useImportTokenListQuery as useImportTokenListQuery, wallet_useWalletAssetListQuery as useWalletAssetListQuery, wallet_useWalletChainListQuery as useWalletChainListQuery, wallet_useWalletNftListQuery as useWalletNftListQuery, wallet_userImportTokenApi as userImportTokenApi };
 }
 
+declare function useContactList(page_size?: number, type?: "Friend" | "Requests"): {
+    data: ContactType[];
+    totalCount: number;
+    loading: boolean;
+    loadingNextPage: boolean;
+    hasNextPage: boolean;
+    onLoadMore: (options?: _tanstack_react_query.FetchNextPageOptions) => Promise<_tanstack_react_query.InfiniteQueryObserverResult<_tanstack_react_query.InfiniteData<MetaPageType<ContactType>, unknown>, Error>>;
+};
+
+declare const contact_useContactList: typeof useContactList;
+declare namespace contact {
+  export { contact_useContactList as useContactList };
+}
+
 declare const index_bind: typeof bind;
+declare const index_contact: typeof contact;
 declare const index_isSuccess: typeof isSuccess;
 declare const index_poh: typeof poh;
 declare const index_user: typeof user;
 declare const index_wallet: typeof wallet;
 declare namespace index {
-  export { index_bind as bind, index_isSuccess as isSuccess, index_poh as poh, index_user as user, index_wallet as wallet };
+  export { index_bind as bind, index_contact as contact, index_isSuccess as isSuccess, index_poh as poh, index_user as user, index_wallet as wallet };
 }
 
-export { isSuccess as a, bind as b, index as i, poh as p, user as u, wallet as w };
+export { isSuccess as a, bind as b, contact as c, index as i, poh as p, user as u, wallet as w };

package/dist/{index-D_UNctDI.d.mts → index-BXNFULAw.d.mts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps, g as WalletAssetMergeType, u as useMatchWalletAssetsProps } from './types-Bx_FJ11s.mjs';
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-Bpd2gBNh.mjs';
+import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps, g as WalletAssetMergeType, u as useMatchWalletAssetsProps } from './types-i_ugbm5B.mjs';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-DYkN9eDY.mjs';
 import { ReactNode } from 'react';
 
 declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;
@@ -81,8 +81,14 @@ declare function TransactionList({ scrollableTarget }: {
     scrollableTarget?: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
+declare function ContactList({ height, type }: {
+    height?: number;
+    type?: "Friend" | "Requests";
+}): react_jsx_runtime.JSX.Element;
+
 declare const index_BTCModal: typeof BTCModal;
 declare const index_Button: typeof Button;
+declare const index_ContactList: typeof ContactList;
 declare const index_EVMModal: typeof EVMModal;
 declare const index_EmailModal: typeof EmailModal;
 declare const index_Field: typeof Field;
@@ -105,7 +111,7 @@ declare const index_UsernameModal: typeof UsernameModal;
 declare const index_WalletAsset: typeof WalletAsset;
 declare const index_WalletModal: typeof WalletModal;
 declare namespace index {
-  export { index_BTCModal as BTCModal, index_Button as Button, index_EVMModal as EVMModal, index_EmailModal as EmailModal, index_Field as Field, index_Input as Input, index_LoginBox as LoginBox, index_LoginButton as LoginButton, index_LoginModal as LoginModal, index_LoginPanel as LoginPanel, index_Modal as Modal, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_TONModal as TONModal, index_TRONModal as TRONModal, index_TokenDetail as TokenDetail, index_TokenSend as TokenSend, index_TokenSendList as TokenSendList, index_TransactionList as TransactionList, index_UsernameModal as UsernameModal, index_WalletAsset as WalletAsset, index_WalletModal as WalletModal };
+  export { index_BTCModal as BTCModal, index_Button as Button, index_ContactList as ContactList, index_EVMModal as EVMModal, index_EmailModal as EmailModal, index_Field as Field, index_Input as Input, index_LoginBox as LoginBox, index_LoginButton as LoginButton, index_LoginModal as LoginModal, index_LoginPanel as LoginPanel, index_Modal as Modal, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_TONModal as TONModal, index_TRONModal as TRONModal, index_TokenDetail as TokenDetail, index_TokenSend as TokenSend, index_TokenSendList as TokenSendList, index_TransactionList as TransactionList, index_UsernameModal as UsernameModal, index_WalletAsset as WalletAsset, index_WalletModal as WalletModal };
 }
 
-export { BTCModal as B, EmailModal as E, LoginBox as L, TRONModal as T, UsernameModal as U, WalletModal as W, LoginButton as a, LoginPanel as b, LoginModal as c, EVMModal as d, TONModal as e, WalletAsset as f, TokenDetail as g, TokenSend as h, index as i, TokenSendList as j, TransactionList as k };
+export { BTCModal as B, ContactList as C, EmailModal as E, LoginBox as L, TRONModal as T, UsernameModal as U, WalletModal as W, LoginButton as a, LoginPanel as b, LoginModal as c, EVMModal as d, TONModal as e, WalletAsset as f, TokenDetail as g, TokenSend as h, index as i, TokenSendList as j, TransactionList as k };

package/dist/{index-CFqk8eNo.d.ts → index-BkWS_v10.d.mts}

@@ -1,4 +1,4 @@
-import { h as ISocialLoginMethod, i as OverviewInfo, C as CEXType, j as LoginMethodType, I as IMatchEvents, k as ChainType, U as UserChainType, A as Address, H as Hash$1, l as AnyObject, m as UserTransactionType, u as useMatchWalletAssetsProps, n as UserImportTokenType, o as UserAssetToken, g as WalletAssetMergeType } from './types-Bx_FJ11s.js';
+import { h as ISocialLoginMethod, i as OverviewInfo, C as CEXType, j as LoginMethodType, I as IMatchEvents, k as ChainType, U as UserChainType, A as Address, H as Hash$1, l as AnyObject, m as UserTransactionType, u as useMatchWalletAssetsProps, n as UserImportTokenType, o as UserAssetToken, g as WalletAssetMergeType } from './types-i_ugbm5B.mjs';
 import * as viem from 'viem';
 import { Account, WalletClientConfig, createWalletClient, SignableMessage, Hex, TransactionSerializable, DeployContractParameters, SendTransactionParameters, WriteContractParameters, Chain } from 'viem';
 import { Hash } from 'viem/types/misc';

package/dist/{index-wqqEUufi.d.mts → index-C2-EMz0t.d.ts}

@@ -1,8 +1,8 @@
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-Bpd2gBNh.mjs';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-CZHjwqDb.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { v as DrawerProps, a2 as WalletPanelProps, X as UIProps } from './types-Bx_FJ11s.mjs';
+import { w as DrawerProps, a3 as WalletPanelProps, Y as UIProps } from './types-i_ugbm5B.js';
 import { Hash, Chain } from 'viem';
-import { CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 
 declare function Drawer({ children, showClose, onClose, isOpen, title, zIndex, onBack }: DrawerProps): react_jsx_runtime.JSX.Element;
 
@@ -39,6 +39,24 @@ declare function Radio({ checked, onChange, size, color, className, style }: {
     style?: CSSProperties;
 }): react_jsx_runtime.JSX.Element;
 
+interface SkeletonProps {
+    style?: React.CSSProperties;
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+    loading?: boolean;
+    children?: React.ReactNode;
+}
+declare const Skeleton: React.FC<SkeletonProps>;
+
+type TabsProps = {
+    tabs: string[];
+    activeTab: number;
+    setActiveTab: (tab: number) => void;
+};
+declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+
 declare const index_AlphaAvatar: typeof AlphaAvatar;
 declare const index_Button: typeof Button;
 declare const index_Drawer: typeof Drawer;
@@ -50,9 +68,11 @@ declare const index_ModalWithHeader: typeof ModalWithHeader;
 declare const index_Overlay: typeof Overlay;
 declare const index_Popover: typeof Popover;
 declare const index_Radio: typeof Radio;
+declare const index_Skeleton: typeof Skeleton;
 declare const index_Switch: typeof Switch;
+declare const index_Tabs: typeof Tabs;
 declare namespace index {
-  export { index_AlphaAvatar as AlphaAvatar, index_Button as Button, index_Drawer as Drawer, index_Field as Field, export_default as HashPanel, index_Input as Input, index_Modal as Modal, index_ModalDrawer as ModalDrawer, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_Radio as Radio, index_Switch as Switch };
+  export { index_AlphaAvatar as AlphaAvatar, index_Button as Button, index_Drawer as Drawer, index_Field as Field, export_default as HashPanel, index_Input as Input, index_Modal as Modal, index_ModalDrawer as ModalDrawer, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_Radio as Radio, index_Skeleton as Skeleton, index_Switch as Switch, index_Tabs as Tabs };
 }
 
-export { AlphaAvatar as A, Drawer as D, ModalDrawer as M, Radio as R, Switch as S, export_default as e, index as i };
+export { AlphaAvatar as A, Drawer as D, ModalDrawer as M, Radio as R, Switch as S, Tabs as T, Skeleton as a, export_default as e, index as i };

package/dist/{index-DaXXoRxr.d.ts → index-CZHjwqDb.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, PropsWithChildren } from 'react';
-import { F as InputProps, B as ButtonProps, K as ModalProps, M as ModalWithHeaderProps, S as PopoverProps } from './types-Bx_FJ11s.js';
+import { G as InputProps, B as ButtonProps, N as ModalProps, M as ModalWithHeaderProps, T as PopoverProps } from './types-i_ugbm5B.js';
 
 declare function Field({ label, children, error, required, className }: {
     label: ReactNode;

package/dist/{index-C5StsjWY.d.ts → index-DDCyj-Fl.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps, g as WalletAssetMergeType, u as useMatchWalletAssetsProps } from './types-Bx_FJ11s.js';
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-DaXXoRxr.js';
+import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps, g as WalletAssetMergeType, u as useMatchWalletAssetsProps } from './types-i_ugbm5B.js';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-CZHjwqDb.js';
 import { ReactNode } from 'react';
 
 declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;
@@ -81,8 +81,14 @@ declare function TransactionList({ scrollableTarget }: {
     scrollableTarget?: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
+declare function ContactList({ height, type }: {
+    height?: number;
+    type?: "Friend" | "Requests";
+}): react_jsx_runtime.JSX.Element;
+
 declare const index_BTCModal: typeof BTCModal;
 declare const index_Button: typeof Button;
+declare const index_ContactList: typeof ContactList;
 declare const index_EVMModal: typeof EVMModal;
 declare const index_EmailModal: typeof EmailModal;
 declare const index_Field: typeof Field;
@@ -105,7 +111,7 @@ declare const index_UsernameModal: typeof UsernameModal;
 declare const index_WalletAsset: typeof WalletAsset;
 declare const index_WalletModal: typeof WalletModal;
 declare namespace index {
-  export { index_BTCModal as BTCModal, index_Button as Button, index_EVMModal as EVMModal, index_EmailModal as EmailModal, index_Field as Field, index_Input as Input, index_LoginBox as LoginBox, index_LoginButton as LoginButton, index_LoginModal as LoginModal, index_LoginPanel as LoginPanel, index_Modal as Modal, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_TONModal as TONModal, index_TRONModal as TRONModal, index_TokenDetail as TokenDetail, index_TokenSend as TokenSend, index_TokenSendList as TokenSendList, index_TransactionList as TransactionList, index_UsernameModal as UsernameModal, index_WalletAsset as WalletAsset, index_WalletModal as WalletModal };
+  export { index_BTCModal as BTCModal, index_Button as Button, index_ContactList as ContactList, index_EVMModal as EVMModal, index_EmailModal as EmailModal, index_Field as Field, index_Input as Input, index_LoginBox as LoginBox, index_LoginButton as LoginButton, index_LoginModal as LoginModal, index_LoginPanel as LoginPanel, index_Modal as Modal, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_TONModal as TONModal, index_TRONModal as TRONModal, index_TokenDetail as TokenDetail, index_TokenSend as TokenSend, index_TokenSendList as TokenSendList, index_TransactionList as TransactionList, index_UsernameModal as UsernameModal, index_WalletAsset as WalletAsset, index_WalletModal as WalletModal };
 }
 
-export { BTCModal as B, EmailModal as E, LoginBox as L, TRONModal as T, UsernameModal as U, WalletModal as W, LoginButton as a, LoginPanel as b, LoginModal as c, EVMModal as d, TONModal as e, WalletAsset as f, TokenDetail as g, TokenSend as h, index as i, TokenSendList as j, TransactionList as k };
+export { BTCModal as B, ContactList as C, EmailModal as E, LoginBox as L, TRONModal as T, UsernameModal as U, WalletModal as W, LoginButton as a, LoginPanel as b, LoginModal as c, EVMModal as d, TONModal as e, WalletAsset as f, TokenDetail as g, TokenSend as h, index as i, TokenSendList as j, TransactionList as k };

package/dist/{index-BhU3hF7y.d.ts → index-DKFnMFMm.d.mts}

@@ -1,8 +1,8 @@
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-DaXXoRxr.js';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-DYkN9eDY.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { v as DrawerProps, a2 as WalletPanelProps, X as UIProps } from './types-Bx_FJ11s.js';
+import { w as DrawerProps, a3 as WalletPanelProps, Y as UIProps } from './types-i_ugbm5B.mjs';
 import { Hash, Chain } from 'viem';
-import { CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 
 declare function Drawer({ children, showClose, onClose, isOpen, title, zIndex, onBack }: DrawerProps): react_jsx_runtime.JSX.Element;
 
@@ -39,6 +39,24 @@ declare function Radio({ checked, onChange, size, color, className, style }: {
     style?: CSSProperties;
 }): react_jsx_runtime.JSX.Element;
 
+interface SkeletonProps {
+    style?: React.CSSProperties;
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+    loading?: boolean;
+    children?: React.ReactNode;
+}
+declare const Skeleton: React.FC<SkeletonProps>;
+
+type TabsProps = {
+    tabs: string[];
+    activeTab: number;
+    setActiveTab: (tab: number) => void;
+};
+declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+
 declare const index_AlphaAvatar: typeof AlphaAvatar;
 declare const index_Button: typeof Button;
 declare const index_Drawer: typeof Drawer;
@@ -50,9 +68,11 @@ declare const index_ModalWithHeader: typeof ModalWithHeader;
 declare const index_Overlay: typeof Overlay;
 declare const index_Popover: typeof Popover;
 declare const index_Radio: typeof Radio;
+declare const index_Skeleton: typeof Skeleton;
 declare const index_Switch: typeof Switch;
+declare const index_Tabs: typeof Tabs;
 declare namespace index {
-  export { index_AlphaAvatar as AlphaAvatar, index_Button as Button, index_Drawer as Drawer, index_Field as Field, export_default as HashPanel, index_Input as Input, index_Modal as Modal, index_ModalDrawer as ModalDrawer, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_Radio as Radio, index_Switch as Switch };
+  export { index_AlphaAvatar as AlphaAvatar, index_Button as Button, index_Drawer as Drawer, index_Field as Field, export_default as HashPanel, index_Input as Input, index_Modal as Modal, index_ModalDrawer as ModalDrawer, index_ModalWithHeader as ModalWithHeader, index_Overlay as Overlay, index_Popover as Popover, index_Radio as Radio, index_Skeleton as Skeleton, index_Switch as Switch, index_Tabs as Tabs };
 }
 
-export { AlphaAvatar as A, Drawer as D, ModalDrawer as M, Radio as R, Switch as S, export_default as e, index as i };
+export { AlphaAvatar as A, Drawer as D, ModalDrawer as M, Radio as R, Switch as S, Tabs as T, Skeleton as a, export_default as e, index as i };

package/dist/{index-Bpd2gBNh.d.mts → index-DYkN9eDY.d.mts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, PropsWithChildren } from 'react';
-import { F as InputProps, B as ButtonProps, K as ModalProps, M as ModalWithHeaderProps, S as PopoverProps } from './types-Bx_FJ11s.mjs';
+import { G as InputProps, B as ButtonProps, N as ModalProps, M as ModalWithHeaderProps, T as PopoverProps } from './types-i_ugbm5B.mjs';
 
 declare function Field({ label, children, error, required, className }: {
     label: ReactNode;

package/dist/{index-W6yjuOKT.d.mts → index-TVbqpk9T.d.mts}

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
-import { Q as PohZkpassParams, m as UserTransactionType, Z as UserTransactionNextPageParams, $ as WalletAssetType, J as MetaPageType, s as BindItemType, r as BindInfoType, N as PohItemType, U as UserChainType, o as UserAssetToken, n as UserImportTokenType, a0 as WalletChainType, a1 as WalletNFTType } from './types-Bx_FJ11s.mjs';
+import { S as PohZkpassParams, m as UserTransactionType, _ as UserTransactionNextPageParams, a0 as WalletAssetType, K as MetaPageType, s as BindItemType, r as BindInfoType, Q as PohItemType, U as UserChainType, o as UserAssetToken, n as UserImportTokenType, a1 as WalletChainType, a2 as WalletNFTType, v as ContactType } from './types-i_ugbm5B.mjs';
 
 declare const isSuccess: (res: {
     code: number;
@@ -133,13 +133,28 @@ declare namespace wallet {
   export { wallet_USER_IMPORT_TOKEN_LIST_KEY as USER_IMPORT_TOKEN_LIST_KEY, wallet_getUserWalletTransactionsApi as getUserWalletTransactionsApi, wallet_getWalletAssetListApi as getWalletAssetListApi, wallet_getWalletListApi as getWalletListApi, wallet_useAssetListQuery as useAssetListQuery, wallet_useChainListQuery as useChainListQuery, wallet_useImportTokenListQuery as useImportTokenListQuery, wallet_useWalletAssetListQuery as useWalletAssetListQuery, wallet_useWalletChainListQuery as useWalletChainListQuery, wallet_useWalletNftListQuery as useWalletNftListQuery, wallet_userImportTokenApi as userImportTokenApi };
 }
 
+declare function useContactList(page_size?: number, type?: "Friend" | "Requests"): {
+    data: ContactType[];
+    totalCount: number;
+    loading: boolean;
+    loadingNextPage: boolean;
+    hasNextPage: boolean;
+    onLoadMore: (options?: _tanstack_react_query.FetchNextPageOptions) => Promise<_tanstack_react_query.InfiniteQueryObserverResult<_tanstack_react_query.InfiniteData<MetaPageType<ContactType>, unknown>, Error>>;
+};
+
+declare const contact_useContactList: typeof useContactList;
+declare namespace contact {
+  export { contact_useContactList as useContactList };
+}
+
 declare const index_bind: typeof bind;
+declare const index_contact: typeof contact;
 declare const index_isSuccess: typeof isSuccess;
 declare const index_poh: typeof poh;
 declare const index_user: typeof user;
 declare const index_wallet: typeof wallet;
 declare namespace index {
-  export { index_bind as bind, index_isSuccess as isSuccess, index_poh as poh, index_user as user, index_wallet as wallet };
+  export { index_bind as bind, index_contact as contact, index_isSuccess as isSuccess, index_poh as poh, index_user as user, index_wallet as wallet };
 }
 
-export { isSuccess as a, bind as b, index as i, poh as p, user as u, wallet as w };
+export { isSuccess as a, bind as b, contact as c, index as i, poh as p, user as u, wallet as w };

package/dist/{index-D1QeVZyN.d.ts → index-TsJwrYwh.d.mts}

@@ -1,4 +1,4 @@
-import { A as Address, l as AnyObject, p as AppConfigType, q as AuthParams, r as BindInfoType, s as BindItemType, t as BindWalletParam, B as ButtonProps, C as CEXType, k as ChainType, D as DeepPartial, v as DrawerProps, E as EmailModalProps, w as EmbeddedWalletsParams, H as Hash, a as IEnvConfigType, x as IEnvName, y as ILoginWalletReq, I as IMatchEvents, h as ISocialLoginMethod, z as IconProps, F as InputProps, L as LocaleType, b as LoginBoxProps, j as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, G as MessageType, J as MetaPageType, K as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, i as OverviewInfo, N as PohItemType, Q as PohZkpassParams, P as PopoverPositionType, S as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, T as RecoveryType, V as ThemeType, X as UIProps, o as UserAssetToken, U as UserChainType, n as UserImportTokenType, Y as UserPopoverProps, Z as UserTransactionNextPageParams, _ as UserTransactionRecordType, m as UserTransactionType, g as WalletAssetMergeType, $ as WalletAssetType, a0 as WalletChainType, W as WalletConfigType, a1 as WalletNFTType, a2 as WalletPanelProps, a3 as WalletReceiveMessageType, a4 as WalletStatusType, c as WalletType, u as useMatchWalletAssetsProps } from './types-Bx_FJ11s.js';
+import { A as Address, l as AnyObject, p as AppConfigType, q as AuthParams, r as BindInfoType, s as BindItemType, t as BindWalletParam, B as ButtonProps, C as CEXType, k as ChainType, v as ContactType, D as DeepPartial, w as DrawerProps, E as EmailModalProps, x as EmbeddedWalletsParams, H as Hash, a as IEnvConfigType, y as IEnvName, z as ILoginWalletReq, I as IMatchEvents, h as ISocialLoginMethod, F as IconProps, G as InputProps, L as LocaleType, b as LoginBoxProps, j as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, J as MessageType, K as MetaPageType, N as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, i as OverviewInfo, Q as PohItemType, S as PohZkpassParams, P as PopoverPositionType, T as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, V as RecoveryType, X as ThemeType, Y as UIProps, o as UserAssetToken, U as UserChainType, n as UserImportTokenType, Z as UserPopoverProps, _ as UserTransactionNextPageParams, $ as UserTransactionRecordType, m as UserTransactionType, g as WalletAssetMergeType, a0 as WalletAssetType, a1 as WalletChainType, W as WalletConfigType, a2 as WalletNFTType, a3 as WalletPanelProps, a4 as WalletReceiveMessageType, a5 as WalletStatusType, c as WalletType, u as useMatchWalletAssetsProps } from './types-i_ugbm5B.mjs';
 
 declare const index_Address: typeof Address;
 declare const index_AnyObject: typeof AnyObject;
@@ -10,6 +10,7 @@ declare const index_BindWalletParam: typeof BindWalletParam;
 declare const index_ButtonProps: typeof ButtonProps;
 declare const index_CEXType: typeof CEXType;
 declare const index_ChainType: typeof ChainType;
+declare const index_ContactType: typeof ContactType;
 declare const index_DeepPartial: typeof DeepPartial;
 declare const index_DrawerProps: typeof DrawerProps;
 declare const index_EmailModalProps: typeof EmailModalProps;
@@ -60,7 +61,7 @@ declare const index_WalletStatusType: typeof WalletStatusType;
 declare const index_WalletType: typeof WalletType;
 declare const index_useMatchWalletAssetsProps: typeof useMatchWalletAssetsProps;
 declare namespace index {
-  export { index_Address as Address, index_AnyObject as AnyObject, index_AppConfigType as AppConfigType, index_AuthParams as AuthParams, index_BindInfoType as BindInfoType, index_BindItemType as BindItemType, index_BindWalletParam as BindWalletParam, index_ButtonProps as ButtonProps, index_CEXType as CEXType, index_ChainType as ChainType, index_DeepPartial as DeepPartial, index_DrawerProps as DrawerProps, index_EmailModalProps as EmailModalProps, index_EmbeddedWalletsParams as EmbeddedWalletsParams, index_Hash as Hash, index_IEnvConfigType as IEnvConfigType, index_IEnvName as IEnvName, index_ILoginWalletReq as ILoginWalletReq, index_IMatchEvents as IMatchEvents, index_ISocialLoginMethod as ISocialLoginMethod, index_IconProps as IconProps, index_InputProps as InputProps, index_LocaleType as LocaleType, index_LoginBoxProps as LoginBoxProps, index_LoginMethodType as LoginMethodType, index_LoginModalProps as LoginModalProps, index_LoginPanelProps as LoginPanelProps, index_MessageType as MessageType, index_MetaPageType as MetaPageType, index_ModalProps as ModalProps, index_ModalWithHeaderProps as ModalWithHeaderProps, index_OtherLoginMethodType as OtherLoginMethodType, index_OverviewInfo as OverviewInfo, index_PohItemType as PohItemType, index_PohZkpassParams as PohZkpassParams, index_PopoverPositionType as PopoverPositionType, index_PopoverProps as PopoverProps, index_PopoverTypeType as PopoverTypeType, index_RecommendLoginMethodType as RecommendLoginMethodType, index_RecoveryType as RecoveryType, index_ThemeType as ThemeType, index_UIProps as UIProps, index_UserAssetToken as UserAssetToken, index_UserChainType as UserChainType, index_UserImportTokenType as UserImportTokenType, index_UserPopoverProps as UserPopoverProps, index_UserTransactionNextPageParams as UserTransactionNextPageParams, index_UserTransactionRecordType as UserTransactionRecordType, index_UserTransactionType as UserTransactionType, index_WalletAssetMergeType as WalletAssetMergeType, index_WalletAssetType as WalletAssetType, index_WalletChainType as WalletChainType, index_WalletConfigType as WalletConfigType, index_WalletNFTType as WalletNFTType, index_WalletPanelProps as WalletPanelProps, index_WalletReceiveMessageType as WalletReceiveMessageType, index_WalletStatusType as WalletStatusType, index_WalletType as WalletType, index_useMatchWalletAssetsProps as useMatchWalletAssetsProps };
+  export { index_Address as Address, index_AnyObject as AnyObject, index_AppConfigType as AppConfigType, index_AuthParams as AuthParams, index_BindInfoType as BindInfoType, index_BindItemType as BindItemType, index_BindWalletParam as BindWalletParam, index_ButtonProps as ButtonProps, index_CEXType as CEXType, index_ChainType as ChainType, index_ContactType as ContactType, index_DeepPartial as DeepPartial, index_DrawerProps as DrawerProps, index_EmailModalProps as EmailModalProps, index_EmbeddedWalletsParams as EmbeddedWalletsParams, index_Hash as Hash, index_IEnvConfigType as IEnvConfigType, index_IEnvName as IEnvName, index_ILoginWalletReq as ILoginWalletReq, index_IMatchEvents as IMatchEvents, index_ISocialLoginMethod as ISocialLoginMethod, index_IconProps as IconProps, index_InputProps as InputProps, index_LocaleType as LocaleType, index_LoginBoxProps as LoginBoxProps, index_LoginMethodType as LoginMethodType, index_LoginModalProps as LoginModalProps, index_LoginPanelProps as LoginPanelProps, index_MessageType as MessageType, index_MetaPageType as MetaPageType, index_ModalProps as ModalProps, index_ModalWithHeaderProps as ModalWithHeaderProps, index_OtherLoginMethodType as OtherLoginMethodType, index_OverviewInfo as OverviewInfo, index_PohItemType as PohItemType, index_PohZkpassParams as PohZkpassParams, index_PopoverPositionType as PopoverPositionType, index_PopoverProps as PopoverProps, index_PopoverTypeType as PopoverTypeType, index_RecommendLoginMethodType as RecommendLoginMethodType, index_RecoveryType as RecoveryType, index_ThemeType as ThemeType, index_UIProps as UIProps, index_UserAssetToken as UserAssetToken, index_UserChainType as UserChainType, index_UserImportTokenType as UserImportTokenType, index_UserPopoverProps as UserPopoverProps, index_UserTransactionNextPageParams as UserTransactionNextPageParams, index_UserTransactionRecordType as UserTransactionRecordType, index_UserTransactionType as UserTransactionType, index_WalletAssetMergeType as WalletAssetMergeType, index_WalletAssetType as WalletAssetType, index_WalletChainType as WalletChainType, index_WalletConfigType as WalletConfigType, index_WalletNFTType as WalletNFTType, index_WalletPanelProps as WalletPanelProps, index_WalletReceiveMessageType as WalletReceiveMessageType, index_WalletStatusType as WalletStatusType, index_WalletType as WalletType, index_useMatchWalletAssetsProps as useMatchWalletAssetsProps };
 }
 
 export { index as i };

package/dist/{index-mxbJ8CFx.d.mts → index-tFT-63LO.d.ts}

@@ -1,4 +1,4 @@
-import { h as ISocialLoginMethod, i as OverviewInfo, C as CEXType, j as LoginMethodType, I as IMatchEvents, k as ChainType, U as UserChainType, A as Address, H as Hash$1, l as AnyObject, m as UserTransactionType, u as useMatchWalletAssetsProps, n as UserImportTokenType, o as UserAssetToken, g as WalletAssetMergeType } from './types-Bx_FJ11s.mjs';
+import { h as ISocialLoginMethod, i as OverviewInfo, C as CEXType, j as LoginMethodType, I as IMatchEvents, k as ChainType, U as UserChainType, A as Address, H as Hash$1, l as AnyObject, m as UserTransactionType, u as useMatchWalletAssetsProps, n as UserImportTokenType, o as UserAssetToken, g as WalletAssetMergeType } from './types-i_ugbm5B.js';
 import * as viem from 'viem';
 import { Account, WalletClientConfig, createWalletClient, SignableMessage, Hex, TransactionSerializable, DeployContractParameters, SendTransactionParameters, WriteContractParameters, Chain } from 'viem';
 import { Hash } from 'viem/types/misc';

package/dist/{index-BaYTgL99.d.mts → index-uhLehOUk.d.ts}

@@ -1,4 +1,4 @@
-import { A as Address, l as AnyObject, p as AppConfigType, q as AuthParams, r as BindInfoType, s as BindItemType, t as BindWalletParam, B as ButtonProps, C as CEXType, k as ChainType, D as DeepPartial, v as DrawerProps, E as EmailModalProps, w as EmbeddedWalletsParams, H as Hash, a as IEnvConfigType, x as IEnvName, y as ILoginWalletReq, I as IMatchEvents, h as ISocialLoginMethod, z as IconProps, F as InputProps, L as LocaleType, b as LoginBoxProps, j as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, G as MessageType, J as MetaPageType, K as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, i as OverviewInfo, N as PohItemType, Q as PohZkpassParams, P as PopoverPositionType, S as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, T as RecoveryType, V as ThemeType, X as UIProps, o as UserAssetToken, U as UserChainType, n as UserImportTokenType, Y as UserPopoverProps, Z as UserTransactionNextPageParams, _ as UserTransactionRecordType, m as UserTransactionType, g as WalletAssetMergeType, $ as WalletAssetType, a0 as WalletChainType, W as WalletConfigType, a1 as WalletNFTType, a2 as WalletPanelProps, a3 as WalletReceiveMessageType, a4 as WalletStatusType, c as WalletType, u as useMatchWalletAssetsProps } from './types-Bx_FJ11s.mjs';
+import { A as Address, l as AnyObject, p as AppConfigType, q as AuthParams, r as BindInfoType, s as BindItemType, t as BindWalletParam, B as ButtonProps, C as CEXType, k as ChainType, v as ContactType, D as DeepPartial, w as DrawerProps, E as EmailModalProps, x as EmbeddedWalletsParams, H as Hash, a as IEnvConfigType, y as IEnvName, z as ILoginWalletReq, I as IMatchEvents, h as ISocialLoginMethod, F as IconProps, G as InputProps, L as LocaleType, b as LoginBoxProps, j as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, J as MessageType, K as MetaPageType, N as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, i as OverviewInfo, Q as PohItemType, S as PohZkpassParams, P as PopoverPositionType, T as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, V as RecoveryType, X as ThemeType, Y as UIProps, o as UserAssetToken, U as UserChainType, n as UserImportTokenType, Z as UserPopoverProps, _ as UserTransactionNextPageParams, $ as UserTransactionRecordType, m as UserTransactionType, g as WalletAssetMergeType, a0 as WalletAssetType, a1 as WalletChainType, W as WalletConfigType, a2 as WalletNFTType, a3 as WalletPanelProps, a4 as WalletReceiveMessageType, a5 as WalletStatusType, c as WalletType, u as useMatchWalletAssetsProps } from './types-i_ugbm5B.js';
 
 declare const index_Address: typeof Address;
 declare const index_AnyObject: typeof AnyObject;
@@ -10,6 +10,7 @@ declare const index_BindWalletParam: typeof BindWalletParam;
 declare const index_ButtonProps: typeof ButtonProps;
 declare const index_CEXType: typeof CEXType;
 declare const index_ChainType: typeof ChainType;
+declare const index_ContactType: typeof ContactType;
 declare const index_DeepPartial: typeof DeepPartial;
 declare const index_DrawerProps: typeof DrawerProps;
 declare const index_EmailModalProps: typeof EmailModalProps;
@@ -60,7 +61,7 @@ declare const index_WalletStatusType: typeof WalletStatusType;
 declare const index_WalletType: typeof WalletType;
 declare const index_useMatchWalletAssetsProps: typeof useMatchWalletAssetsProps;
 declare namespace index {
-  export { index_Address as Address, index_AnyObject as AnyObject, index_AppConfigType as AppConfigType, index_AuthParams as AuthParams, index_BindInfoType as BindInfoType, index_BindItemType as BindItemType, index_BindWalletParam as BindWalletParam, index_ButtonProps as ButtonProps, index_CEXType as CEXType, index_ChainType as ChainType, index_DeepPartial as DeepPartial, index_DrawerProps as DrawerProps, index_EmailModalProps as EmailModalProps, index_EmbeddedWalletsParams as EmbeddedWalletsParams, index_Hash as Hash, index_IEnvConfigType as IEnvConfigType, index_IEnvName as IEnvName, index_ILoginWalletReq as ILoginWalletReq, index_IMatchEvents as IMatchEvents, index_ISocialLoginMethod as ISocialLoginMethod, index_IconProps as IconProps, index_InputProps as InputProps, index_LocaleType as LocaleType, index_LoginBoxProps as LoginBoxProps, index_LoginMethodType as LoginMethodType, index_LoginModalProps as LoginModalProps, index_LoginPanelProps as LoginPanelProps, index_MessageType as MessageType, index_MetaPageType as MetaPageType, index_ModalProps as ModalProps, index_ModalWithHeaderProps as ModalWithHeaderProps, index_OtherLoginMethodType as OtherLoginMethodType, index_OverviewInfo as OverviewInfo, index_PohItemType as PohItemType, index_PohZkpassParams as PohZkpassParams, index_PopoverPositionType as PopoverPositionType, index_PopoverProps as PopoverProps, index_PopoverTypeType as PopoverTypeType, index_RecommendLoginMethodType as RecommendLoginMethodType, index_RecoveryType as RecoveryType, index_ThemeType as ThemeType, index_UIProps as UIProps, index_UserAssetToken as UserAssetToken, index_UserChainType as UserChainType, index_UserImportTokenType as UserImportTokenType, index_UserPopoverProps as UserPopoverProps, index_UserTransactionNextPageParams as UserTransactionNextPageParams, index_UserTransactionRecordType as UserTransactionRecordType, index_UserTransactionType as UserTransactionType, index_WalletAssetMergeType as WalletAssetMergeType, index_WalletAssetType as WalletAssetType, index_WalletChainType as WalletChainType, index_WalletConfigType as WalletConfigType, index_WalletNFTType as WalletNFTType, index_WalletPanelProps as WalletPanelProps, index_WalletReceiveMessageType as WalletReceiveMessageType, index_WalletStatusType as WalletStatusType, index_WalletType as WalletType, index_useMatchWalletAssetsProps as useMatchWalletAssetsProps };
+  export { index_Address as Address, index_AnyObject as AnyObject, index_AppConfigType as AppConfigType, index_AuthParams as AuthParams, index_BindInfoType as BindInfoType, index_BindItemType as BindItemType, index_BindWalletParam as BindWalletParam, index_ButtonProps as ButtonProps, index_CEXType as CEXType, index_ChainType as ChainType, index_ContactType as ContactType, index_DeepPartial as DeepPartial, index_DrawerProps as DrawerProps, index_EmailModalProps as EmailModalProps, index_EmbeddedWalletsParams as EmbeddedWalletsParams, index_Hash as Hash, index_IEnvConfigType as IEnvConfigType, index_IEnvName as IEnvName, index_ILoginWalletReq as ILoginWalletReq, index_IMatchEvents as IMatchEvents, index_ISocialLoginMethod as ISocialLoginMethod, index_IconProps as IconProps, index_InputProps as InputProps, index_LocaleType as LocaleType, index_LoginBoxProps as LoginBoxProps, index_LoginMethodType as LoginMethodType, index_LoginModalProps as LoginModalProps, index_LoginPanelProps as LoginPanelProps, index_MessageType as MessageType, index_MetaPageType as MetaPageType, index_ModalProps as ModalProps, index_ModalWithHeaderProps as ModalWithHeaderProps, index_OtherLoginMethodType as OtherLoginMethodType, index_OverviewInfo as OverviewInfo, index_PohItemType as PohItemType, index_PohZkpassParams as PohZkpassParams, index_PopoverPositionType as PopoverPositionType, index_PopoverProps as PopoverProps, index_PopoverTypeType as PopoverTypeType, index_RecommendLoginMethodType as RecommendLoginMethodType, index_RecoveryType as RecoveryType, index_ThemeType as ThemeType, index_UIProps as UIProps, index_UserAssetToken as UserAssetToken, index_UserChainType as UserChainType, index_UserImportTokenType as UserImportTokenType, index_UserPopoverProps as UserPopoverProps, index_UserTransactionNextPageParams as UserTransactionNextPageParams, index_UserTransactionRecordType as UserTransactionRecordType, index_UserTransactionType as UserTransactionType, index_WalletAssetMergeType as WalletAssetMergeType, index_WalletAssetType as WalletAssetType, index_WalletChainType as WalletChainType, index_WalletConfigType as WalletConfigType, index_WalletNFTType as WalletNFTType, index_WalletPanelProps as WalletPanelProps, index_WalletReceiveMessageType as WalletReceiveMessageType, index_WalletStatusType as WalletStatusType, index_WalletType as WalletType, index_useMatchWalletAssetsProps as useMatchWalletAssetsProps };
 }
 
 export { index as i };

package/dist/index.css

@@ -140,6 +140,9 @@ body {
     /**matchid-transaction-list**/
     --matchid-wallet-transaction-bg: var(--matchid-white);
     --matchid-wallet-transaction-color: var(--matchid-black);
+    /**tab**/
+    --matchid-tab-color:var(--matchid-secondary-grey);
+    --matchid-tab-active-color: var(--matchid-highlight-orange);
 
 
 }
@@ -400,7 +403,7 @@ body {
     overflow: hidden;
     backdrop-filter: blur(2px);
     background: rgba(0, 0, 0, .3);
-    color:var(--matchid-overlay-color);
+    color: var(--matchid-overlay-color);
     @media screen and (max-width: 768px) {
         align-items: center;
     }
@@ -1183,7 +1186,7 @@ body {
     flex-direction: column;
     gap: 48px;
     @media screen and (max-width: 768px) {
-        gap:36px;
+        gap: 36px;
     }
 
     .matchid-change-network-list {
@@ -1218,7 +1221,7 @@ body {
                 align-items: center;
                 gap: 16px;
                 @media screen and (max-width: 768px) {
-                    gap:8px;
+                    gap: 8px;
                 }
 
                 .matchid-change-network-item-icon {
@@ -1288,6 +1291,7 @@ body {
         @media screen and (max-width: 768px) {
             gap: 24px;
         }
+
         .matchid-receive-text {
             font-size: 14px;
             font-weight: 500;
@@ -1304,6 +1308,7 @@ body {
             @media screen and (max-width: 768px) {
                 padding: 10px;
             }
+
             .matchid-qr-code {
                 width: 148px;
                 height: 148px;
@@ -1352,7 +1357,7 @@ body {
 
     .matchid-wallet-asset-item {
 
-        background:var(--matchid-wallet-asset-bg);
+        background: var(--matchid-wallet-asset-bg);
         color: var(--matchid-wallet-asset-color);
         display: flex;
         cursor: pointer;
@@ -1379,6 +1384,7 @@ body {
                 width: 36px;
                 height: 36px;
             }
+
             .matchid-wallet-asset-icon {
                 width: 40px;
                 height: 40px;
@@ -1397,8 +1403,8 @@ body {
                 right: 0px;
                 bottom: 1px;
                 @media screen and (max-width: 768px) {
-                    wdth:10px;
-                    height:10px;
+                    wdth: 10px;
+                    height: 10px;
                 }
             }
         }
@@ -1414,6 +1420,7 @@ body {
             @media screen and (max-width: 768px) {
                 height: 44px;
             }
+
             .matchid-wallet-asset-name {
                 font-size: 16px;
                 font-weight: 500;
@@ -1495,7 +1502,7 @@ body {
 
     @media (max-width: 768px) {
         padding-bottom: 0px;
-        gap:36px;
+        gap: 36px;
     }
 
     .matchid-token-main {
@@ -1549,7 +1556,7 @@ body {
             background: var(--matchid-gray-100);
             border-radius: 12px;
             @media (max-width: 768px) {
-               gap:8px;
+                gap: 8px;
             }
 
             .matchid-token-contract-title {
@@ -1583,7 +1590,7 @@ body {
     gap: 40px;
     @media (max-width: 768px) {
         padding-bottom: 0px;
-        gap:68px;
+        gap: 68px;
     }
 
     .matchid-token-send-content {
@@ -1743,7 +1750,7 @@ body {
 
     @media (max-width: 768px) {
         padding-bottom: 0px;
-        gap:36px;
+        gap: 36px;
     }
 
     .matchid-token-send-list {
@@ -1840,7 +1847,7 @@ body {
     border: 1px solid var(--matchid-line);
     border-radius: 16px;
     height: 78px;
-    background:var(--matchid-wallet-transaction-bg);
+    background: var(--matchid-wallet-transaction-bg);
     color: var(--matchid-wallet-transaction-color);
     @media screen and (max-width: 768px) {
         height: 64px;
@@ -1907,7 +1914,8 @@ body {
         gap: 8px;
         font-size: 16px;
         font-weight: 500;
-        span{
+
+        span {
             text-align: right;
         }
 
@@ -1966,7 +1974,7 @@ body {
     justify-content: space-between;
     @media screen and (max-width: 768px) {
         padding-bottom: 0;
-        gap:115px;
+        gap: 115px;
     }
 
     .matchid-import-token-result-box {
@@ -1998,6 +2006,98 @@ body {
     }
 
 }
-.matchid-error{
-    color:var(--matchid-red-600);
+
+.matchid-error {
+    color: var(--matchid-red-600);
+}
+
+.matchid-skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: matchid-loading 1.5s infinite;
+}
+
+@keyframes matchid-loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+.matchid-contact-item{
+    justify-content: space-between;
+    align-items: center;
+    padding:8px 16px;
+    .matchid-contact-item-content{
+        height:48px;
+        display: flex;
+        gap:16px;
+        align-items: center;
+        .matchid-contact-item-avatar{
+            width:48px;
+            height:48px;
+            border-radius: 50%;
+        }
+        .matchid-contact-item-info{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height:100%;
+            .matchid-contact-item-name{
+                font-size: 18px;
+                font-weight: 500;
+                color: var(--matchid-black);
+            }
+            .matchid-contact-item-address{
+                font-size: 14px;
+                color: var(--matchid-secondary-grey);
+            }
+            @media screen and (max-width: 768px) {
+                .matchid-contact-item-name{
+                    font-size: 16px;
+                }
+                .matchid-contact-item-address{
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+}
+
+.matchid-nomore{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--matchid-secondary-grey);
+    padding:10px 0;
+    @media screen and (max-width: 768px) {
+        font-size: 14px;
+    }
+}
+
+.matchid-tabs{
+    gap:36px;
+    align-items: start;
+    display: flex;
+}
+
+.matchid-tab{
+    color:var(--matchid-tab-color);
+    font-weight:500;
+    font-size: 20px;
+    cursor: pointer;
+
+    @media screen and (max-width: 768px) {
+        font-size: 14px;
+        padding:10px 0;
+    }
+    &.matchid-tab-active{
+        color:var(--matchid-tab-active-color);
+        border-bottom: 2px solid var(--matchid-tab-active-color);
+    }
 }