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

package/dist/{index-DjbH13zc.d.mts → index-DX1vzCrM.d.mts}

@@ -1,5 +1,5 @@
 import { M as MyResponseType } from './request-B0CyrGFT.mjs';
-import { b as ISocialLoginMethod, O as OverviewInfo, C as CEXType, c as LoginMethodType, I as IMatchEvents, d as ChainType, U as UserChainType, A as Address, H as Hash$1, e as AnyObject, f as UserTransactionType, u as useMatchWalletAssetsProps, g as UserImportTokenType, h as UserAssetToken, i as WalletAssetMergeType } from './types-VrV1kYga.mjs';
+import { h as ISocialLoginMethod, i as OverviewInfo, j as CEXType, k as LoginMethodType, I as IMatchEvents, l as ChainType, U as UserChainType, A as Address, H as Hash$1, m as AnyObject, n as UserTransactionType, u as useMatchWalletAssetsProps, o as UserImportTokenType, p as UserAssetToken, g as WalletAssetMergeType } from './types-Bi9iq57H.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';
@@ -9,11 +9,12 @@ import React, { ReactNode } from 'react';
 import * as viem__types_actions_siwe_verifySiweMessage from 'viem/_types/actions/siwe/verifySiweMessage';
 import * as _tanstack_react_query from '@tanstack/react-query';
 
+interface ModalProps {
+    close: () => void;
+    zIndex: number;
+}
 interface ModalContextType {
-    show: (content: (props: {
-        close: () => void;
-        zIndex: number;
-    }) => ReactNode, index?: number) => void;
+    show: (content: React.FC<ModalProps>, index?: number) => void;
     open: (props: {
         title: ReactNode;
         content: React.ComponentType<{
@@ -180,6 +181,7 @@ declare function useMatchChain(): {
             number: blockTag extends "pending" ? null : bigint;
             nonce: blockTag extends "pending" ? null : `0x${string}`;
             size: bigint;
+            timestamp: bigint;
             hash: blockTag extends "pending" ? null : `0x${string}`;
             logsBloom: blockTag extends "pending" ? null : `0x${string}`;
             baseFeePerGas: bigint | null;
@@ -196,7 +198,6 @@ declare function useMatchChain(): {
             sealFields: viem.Hex[];
             sha3Uncles: viem.Hash;
             stateRoot: viem.Hash;
-            timestamp: bigint;
             totalDifficulty: bigint | null;
             transactionsRoot: viem.Hash;
             uncles: viem.Hash[];
@@ -212,16 +213,16 @@ declare function useMatchChain(): {
                 r: viem.Hex;
                 v: bigint;
                 yParity?: undefined;
-                hash: viem.Hash;
+                to: viem.Address | null;
                 from: viem.Address;
                 gas: bigint;
-                to: viem.Address | null;
-                blobVersionedHashes?: undefined;
-                gasPrice: bigint;
                 maxFeePerBlobGas?: undefined;
+                gasPrice: bigint;
                 maxFeePerGas?: undefined;
                 maxPriorityFeePerGas?: undefined;
                 accessList?: undefined;
+                blobVersionedHashes?: undefined;
+                hash: viem.Hash;
                 typeHex: viem.Hex | null;
                 blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
                 blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -236,16 +237,16 @@ declare function useMatchChain(): {
                 r: viem.Hex;
                 v: bigint;
                 yParity: number;
-                hash: viem.Hash;
+                to: viem.Address | null;
                 from: viem.Address;
                 gas: bigint;
-                to: viem.Address | null;
-                blobVersionedHashes?: undefined;
-                gasPrice: bigint;
                 maxFeePerBlobGas?: undefined;
+                gasPrice: bigint;
                 maxFeePerGas?: undefined;
                 maxPriorityFeePerGas?: undefined;
                 accessList: viem.AccessList;
+                blobVersionedHashes?: undefined;
+                hash: viem.Hash;
                 typeHex: viem.Hex | null;
                 blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
                 blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -260,16 +261,16 @@ declare function useMatchChain(): {
                 r: viem.Hex;
                 v: bigint;
                 yParity: number;
-                hash: viem.Hash;
+                to: viem.Address | null;
                 from: viem.Address;
                 gas: bigint;
-                to: viem.Address | null;
-                blobVersionedHashes?: undefined;
-                gasPrice?: undefined;
                 maxFeePerBlobGas?: undefined;
+                gasPrice?: undefined;
                 maxFeePerGas: bigint;
                 maxPriorityFeePerGas: bigint;
                 accessList: viem.AccessList;
+                blobVersionedHashes?: undefined;
+                hash: viem.Hash;
                 typeHex: viem.Hex | null;
                 blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
                 blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -284,16 +285,16 @@ declare function useMatchChain(): {
                 r: viem.Hex;
                 v: bigint;
                 yParity: number;
-                hash: viem.Hash;
+                to: viem.Address | null;
                 from: viem.Address;
                 gas: bigint;
-                to: viem.Address | null;
-                blobVersionedHashes: readonly viem.Hex[];
-                gasPrice?: undefined;
                 maxFeePerBlobGas: bigint;
+                gasPrice?: undefined;
                 maxFeePerGas: bigint;
                 maxPriorityFeePerGas: bigint;
                 accessList: viem.AccessList;
+                blobVersionedHashes: readonly viem.Hex[];
+                hash: viem.Hash;
                 typeHex: viem.Hex | null;
                 blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
                 blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -333,16 +334,16 @@ declare function useMatchChain(): {
             r: viem.Hex;
             v: bigint;
             yParity?: undefined;
-            hash: viem.Hash;
+            to: viem.Address | null;
             from: viem.Address;
             gas: bigint;
-            to: viem.Address | null;
-            blobVersionedHashes?: undefined;
-            gasPrice: bigint;
             maxFeePerBlobGas?: undefined;
+            gasPrice: bigint;
             maxFeePerGas?: undefined;
             maxPriorityFeePerGas?: undefined;
             accessList?: undefined;
+            blobVersionedHashes?: undefined;
+            hash: viem.Hash;
             typeHex: viem.Hex | null;
             blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
             blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -357,16 +358,16 @@ declare function useMatchChain(): {
             r: viem.Hex;
             v: bigint;
             yParity: number;
-            hash: viem.Hash;
+            to: viem.Address | null;
             from: viem.Address;
             gas: bigint;
-            to: viem.Address | null;
-            blobVersionedHashes?: undefined;
-            gasPrice: bigint;
             maxFeePerBlobGas?: undefined;
+            gasPrice: bigint;
             maxFeePerGas?: undefined;
             maxPriorityFeePerGas?: undefined;
             accessList: viem.AccessList;
+            blobVersionedHashes?: undefined;
+            hash: viem.Hash;
             typeHex: viem.Hex | null;
             blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
             blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -381,16 +382,16 @@ declare function useMatchChain(): {
             r: viem.Hex;
             v: bigint;
             yParity: number;
-            hash: viem.Hash;
+            to: viem.Address | null;
             from: viem.Address;
             gas: bigint;
-            to: viem.Address | null;
-            blobVersionedHashes?: undefined;
-            gasPrice?: undefined;
             maxFeePerBlobGas?: undefined;
+            gasPrice?: undefined;
             maxFeePerGas: bigint;
             maxPriorityFeePerGas: bigint;
             accessList: viem.AccessList;
+            blobVersionedHashes?: undefined;
+            hash: viem.Hash;
             typeHex: viem.Hex | null;
             blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
             blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -405,16 +406,16 @@ declare function useMatchChain(): {
             r: viem.Hex;
             v: bigint;
             yParity: number;
-            hash: viem.Hash;
+            to: viem.Address | null;
             from: viem.Address;
             gas: bigint;
-            to: viem.Address | null;
-            blobVersionedHashes: readonly viem.Hex[];
-            gasPrice?: undefined;
             maxFeePerBlobGas: bigint;
+            gasPrice?: undefined;
             maxFeePerGas: bigint;
             maxPriorityFeePerGas: bigint;
             accessList: viem.AccessList;
+            blobVersionedHashes: readonly viem.Hex[];
+            hash: viem.Hash;
             typeHex: viem.Hex | null;
             blockNumber: (blockTag extends "pending" ? true : false) extends infer T ? T extends (blockTag extends "pending" ? true : false) ? T extends true ? null : bigint : never : never;
             blockHash: (blockTag extends "pending" ? true : false) extends infer T_1 ? T_1 extends (blockTag extends "pending" ? true : false) ? T_1 extends true ? null : `0x${string}` : never : never;
@@ -3228,7 +3229,7 @@ declare function useMatchChain(): {
             transport?: undefined;
             type?: undefined;
             uid?: undefined;
-        } & viem.ExactPartial<Pick<viem.PublicActions<viem.HttpTransport, UserChainType, undefined>, "call" | "createContractEventFilter" | "createEventFilter" | "estimateContractGas" | "estimateGas" | "getBlock" | "getBlockNumber" | "getChainId" | "getContractEvents" | "getEnsText" | "getFilterChanges" | "getGasPrice" | "getLogs" | "getTransaction" | "getTransactionCount" | "getTransactionReceipt" | "prepareTransactionRequest" | "readContract" | "sendRawTransaction" | "simulateContract" | "uninstallFilter" | "watchBlockNumber" | "watchContractEvent"> & Pick<viem.WalletActions<UserChainType, undefined>, "sendTransaction" | "writeContract">>>(fn: (client: viem.Client<viem.HttpTransport, UserChainType, undefined, viem.PublicRpcSchema, viem.PublicActions<viem.HttpTransport, UserChainType>>) => client) => viem.Client<viem.HttpTransport, UserChainType, undefined, viem.PublicRpcSchema, { [K in keyof client]: client[K]; } & viem.PublicActions<viem.HttpTransport, UserChainType>>;
+        } & viem.ExactPartial<Pick<viem.PublicActions<viem.HttpTransport, UserChainType, undefined>, "getChainId" | "prepareTransactionRequest" | "sendRawTransaction" | "call" | "createContractEventFilter" | "createEventFilter" | "estimateContractGas" | "estimateGas" | "getBlock" | "getBlockNumber" | "getContractEvents" | "getEnsText" | "getFilterChanges" | "getGasPrice" | "getLogs" | "getTransaction" | "getTransactionCount" | "getTransactionReceipt" | "readContract" | "simulateContract" | "uninstallFilter" | "watchBlockNumber" | "watchContractEvent"> & Pick<viem.WalletActions<UserChainType, undefined>, "sendTransaction" | "writeContract">>>(fn: (client: viem.Client<viem.HttpTransport, UserChainType, undefined, viem.PublicRpcSchema, viem.PublicActions<viem.HttpTransport, UserChainType>>) => client) => viem.Client<viem.HttpTransport, UserChainType, undefined, viem.PublicRpcSchema, { [K in keyof client]: client[K]; } & viem.PublicActions<viem.HttpTransport, UserChainType>>;
     } | null;
     formatUnits: (value: bigint) => string;
     parseUnits: (value: string) => bigint;

package/dist/{index-DQFQ39D9.d.ts → index-Dj1K-UdZ.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as EmailModalProps, j as LoginBoxProps, B as ButtonProps, k as OtherLoginMethodType, R as RecommendLoginMethodType, l as WalletType, P as PopoverPositionType, m as PopoverTypeType, n as LoginPanelProps, o as LoginModalProps, M as ModalWithHeaderProps, i as WalletAssetMergeType, u as useMatchWalletAssetsProps, p as ContactType } from './types-VrV1kYga.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-CQmN0dN4.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, C as ContactType } from './types-Bi9iq57H.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-SRHVQn5G.js';
 import React, { ReactNode } from 'react';
 
 declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;
@@ -88,7 +88,7 @@ declare function ContactCard({ loading, data, action }: {
 }): react_jsx_runtime.JSX.Element;
 declare function ContactList({ limit, height, type }: {
     limit?: number;
-    height?: number;
+    height?: number | string;
     type?: "Friend" | "Requests";
 }): react_jsx_runtime.JSX.Element;
 

package/dist/{index-BDffLLM_.d.mts → index-DjwwXNp4.d.mts}

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
-import { S as PohZkpassParams, f as UserTransactionType, _ as UserTransactionNextPageParams, a0 as WalletAssetType, K as MetaPageType, t as BindItemType, s as BindInfoType, Q as PohItemType, U as UserChainType, h as UserAssetToken, g as UserImportTokenType, a1 as WalletChainType, a2 as WalletNFTType, p as ContactType } from './types-VrV1kYga.mjs';
+import { T as PohZkpassParams, n as UserTransactionType, a0 as UserTransactionNextPageParams, a2 as WalletAssetType, N as MetaPageType, t as BindItemType, s as BindInfoType, S as PohItemType, U as UserChainType, p as UserAssetToken, o as UserImportTokenType, a3 as WalletChainType, a4 as WalletNFTType, C as ContactType, w as ContactSearchType } from './types-Bi9iq57H.mjs';
 import { M as MyResponseType, i as isSuccess } from './request-B0CyrGFT.mjs';
 
 declare const bindCexApi: (data: {
@@ -128,8 +128,20 @@ declare function useContactList(page_size?: number, type?: "Friend" | "Requests"
     hasNextPage: boolean;
     onLoadMore: (options?: _tanstack_react_query.FetchNextPageOptions) => Promise<_tanstack_react_query.InfiniteQueryObserverResult<_tanstack_react_query.InfiniteData<MetaPageType<ContactType[]>, unknown>, Error>>;
 };
-declare function useContactSearch(keyword: string, options?: Partial<UseQueryOptions>): _tanstack_react_query.UseQueryResult<unknown, Error>;
-declare function useContactInfo(options?: Partial<UseQueryOptions>): _tanstack_react_query.UseQueryResult<unknown, Error>;
+declare function useContactSearch(keyword: string, options?: Partial<UseQueryOptions<ContactSearchType | null>>): _tanstack_react_query.UseQueryResult<ContactSearchType | null, Error>;
+declare function useContactInfo(options?: Partial<UseQueryOptions<{
+    fried_total: number;
+    request_total: number;
+    referral_total: number;
+    poh_total: number;
+    referral_link: string;
+}>>): _tanstack_react_query.UseQueryResult<{
+    fried_total: number;
+    request_total: number;
+    referral_total: number;
+    poh_total: number;
+    referral_link: string;
+}, Error>;
 declare const addContact: (friend_id: string | ContactType) => Promise<boolean>;
 declare const acceptContact: (friend_id: string | ContactType) => Promise<boolean>;
 declare const delContact: (friend_id: string | ContactType) => Promise<boolean>;

package/dist/{index-BaFmUVw-.d.mts → index-SRHVQn5G.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, PropsWithChildren } from 'react';
-import { G as InputProps, B as ButtonProps, N as ModalProps, M as ModalWithHeaderProps, T as PopoverProps } from './types-VrV1kYga.mjs';
+import React, { ReactNode, PropsWithChildren } from 'react';
+import { J as InputProps, B as ButtonProps, Q as ModalProps, M as ModalWithHeaderProps, V as PopoverProps } from './types-Bi9iq57H.js';
 
 declare function Field({ label, children, error, required, className }: {
     label: ReactNode;
@@ -11,10 +11,22 @@ declare function Field({ label, children, error, required, className }: {
 
 declare function Input({ onChange, type, after, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
-declare function Button({ size, disabled, loading, children, onClick, highlight, block, type, rounded, className, style }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ size, disabled, loading, children, onClick, highlight, block, type, rounded, className, style, dataset }: ButtonProps & {
+    dataset?: {
+        [key: string]: string;
+    };
+}): react_jsx_runtime.JSX.Element;
 
 declare function Modal({ children, isOpen, width, zIndex, className }: ModalProps): react_jsx_runtime.JSX.Element;
 declare function ModalWithHeader({ children, onBack, onClose, title, showBorder, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal({ title, children, onClose, onConfirm, isOpen, confirmText, zIndex }: {
+    title?: string;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+    isOpen: boolean;
+    confirmText?: React.ReactNode;
+    zIndex?: number;
+} & PropsWithChildren): react_jsx_runtime.JSX.Element;
 
 declare function Popover({ children, content, position, type, className, gap }: PopoverProps): false | "" | 0 | react_jsx_runtime.JSX.Element | null | undefined;
 
@@ -23,4 +35,4 @@ declare function Overlay({ isOpen, children, zIndex, }: {
     zIndex?: number;
 } & PropsWithChildren): react_jsx_runtime.JSX.Element;
 
-export { Button as B, Field as F, Input as I, Modal as M, Overlay as O, Popover as P, ModalWithHeader as a };
+export { Button as B, ConfirmModal as C, Field as F, Input as I, Modal as M, Overlay as O, Popover as P, ModalWithHeader as a };

package/dist/{index-BsX-ovIl.d.ts → index-Vxvd14yW.d.ts}

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
-import { S as PohZkpassParams, f as UserTransactionType, _ as UserTransactionNextPageParams, a0 as WalletAssetType, K as MetaPageType, t as BindItemType, s as BindInfoType, Q as PohItemType, U as UserChainType, h as UserAssetToken, g as UserImportTokenType, a1 as WalletChainType, a2 as WalletNFTType, p as ContactType } from './types-VrV1kYga.js';
+import { T as PohZkpassParams, n as UserTransactionType, a0 as UserTransactionNextPageParams, a2 as WalletAssetType, N as MetaPageType, t as BindItemType, s as BindInfoType, S as PohItemType, U as UserChainType, p as UserAssetToken, o as UserImportTokenType, a3 as WalletChainType, a4 as WalletNFTType, C as ContactType, w as ContactSearchType } from './types-Bi9iq57H.js';
 import { M as MyResponseType, i as isSuccess } from './request-B0CyrGFT.js';
 
 declare const bindCexApi: (data: {
@@ -128,8 +128,20 @@ declare function useContactList(page_size?: number, type?: "Friend" | "Requests"
     hasNextPage: boolean;
     onLoadMore: (options?: _tanstack_react_query.FetchNextPageOptions) => Promise<_tanstack_react_query.InfiniteQueryObserverResult<_tanstack_react_query.InfiniteData<MetaPageType<ContactType[]>, unknown>, Error>>;
 };
-declare function useContactSearch(keyword: string, options?: Partial<UseQueryOptions>): _tanstack_react_query.UseQueryResult<unknown, Error>;
-declare function useContactInfo(options?: Partial<UseQueryOptions>): _tanstack_react_query.UseQueryResult<unknown, Error>;
+declare function useContactSearch(keyword: string, options?: Partial<UseQueryOptions<ContactSearchType | null>>): _tanstack_react_query.UseQueryResult<ContactSearchType | null, Error>;
+declare function useContactInfo(options?: Partial<UseQueryOptions<{
+    fried_total: number;
+    request_total: number;
+    referral_total: number;
+    poh_total: number;
+    referral_link: string;
+}>>): _tanstack_react_query.UseQueryResult<{
+    fried_total: number;
+    request_total: number;
+    referral_total: number;
+    poh_total: number;
+    referral_link: string;
+}, Error>;
 declare const addContact: (friend_id: string | ContactType) => Promise<boolean>;
 declare const acceptContact: (friend_id: string | ContactType) => Promise<boolean>;
 declare const delContact: (friend_id: string | ContactType) => Promise<boolean>;

package/dist/index.css

@@ -141,7 +141,7 @@ body {
     --matchid-wallet-transaction-bg: var(--matchid-white);
     --matchid-wallet-transaction-color: var(--matchid-black);
     /**tab**/
-    --matchid-tab-color:var(--matchid-secondary-grey);
+    --matchid-tab-color: var(--matchid-secondary-grey);
     --matchid-tab-active-color: var(--matchid-highlight-orange);
 
 
@@ -509,6 +509,7 @@ body {
         font-weight: 500;
         background: none;
         min-width: 0;
+        border:0;
         @media screen and (max-width: 768px) {
             font-size: 16px;
             font-weight: 500;
@@ -1403,7 +1404,7 @@ body {
                 right: 0px;
                 bottom: 1px;
                 @media screen and (max-width: 768px) {
-                    wdth: 10px;
+                    width: 10px;
                     height: 10px;
                 }
             }
@@ -2026,39 +2027,52 @@ body {
     }
 }
 
-.matchid-contact-item{
+.matchid-contact-item {
     justify-content: space-between;
     align-items: center;
-    padding:8px 16px;
-    .matchid-contact-item-content{
-        height:48px;
+    padding: 8px 16px;
+    @media screen and (max-width: 768px) {
+        padding: 6px 12px;
+    }
+
+    .matchid-contact-item-content {
+        height: 48px;
         display: flex;
-        gap:16px;
+        gap: 16px;
         align-items: center;
-        .matchid-contact-item-avatar{
-            width:48px;
-            height:48px;
+        @media screen and (max-width: 768px) {
+            height: 36px;
+        }
+
+        .matchid-contact-item-avatar {
+            width: 48px;
+            height: 48px;
             border-radius: 50%;
+            @media screen and (max-width: 768px) {
+                height: 36px;
+                width: 36px;
+            }
         }
-        .matchid-contact-item-info{
+
+        .matchid-contact-item-info {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            height:100%;
-            .matchid-contact-item-name{
+            height: 100%;
+
+            .matchid-contact-item-name {
                 font-size: 18px;
                 font-weight: 500;
                 color: var(--matchid-black);
+                @media screen and (max-width: 768px) {
+                    font-size: 14px;
+                }
             }
-            .matchid-contact-item-address{
+
+            .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{
+                @media screen and (max-width: 768px) {
                     font-size: 12px;
                 }
             }
@@ -2067,45 +2081,138 @@ body {
 
 }
 
-.matchid-nomore{
+.matchid-nomore {
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: 500;
     font-size: 16px;
     color: var(--matchid-secondary-grey);
-    padding:20px 0;
+    padding: 20px 0;
     @media screen and (max-width: 768px) {
         font-size: 14px;
     }
 }
 
-.matchid-tabs{
-    gap:36px;
+.matchid-tabs {
+    gap: 36px;
     align-items: start;
     display: flex;
 }
 
-.matchid-tab{
-    color:var(--matchid-tab-color);
-    font-weight:500;
+.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;
+        padding: 10px 0;
     }
-    &.matchid-tab-active{
-        color:var(--matchid-tab-active-color);
+
+    &.matchid-tab-active {
+        color: var(--matchid-tab-active-color);
         border-bottom: 2px solid var(--matchid-tab-active-color);
     }
 }
 
-.matchid-cursor-pointer{
+.matchid-cursor-pointer {
     cursor: pointer;
 }
 
-.matchid-remove-box{
-    padding:0px 20px;
-}
+.matchid-remove-box {
+    padding: 0px 20px;
+    min-width: 150px;
+    display: flex;
+    justify-content: center;
+}
+
+.matchid-message-item {
+    display: flex;
+    width: 100%;
+    background-color: #F8F8F8;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+    border-radius: 12px;
+    margin-bottom: 16px;
+
+    .matchid-message-item-content {
+        display: flex;
+        gap: 16px;
+
+        .matchid-message-item-content-message {
+            font-size: 14px;
+            color: black;
+            flex: 1;
+
+            @media (min-width: 768px) {
+                font-size: 16px;
+            }
+        }
+
+        .matchid-message-item-content-status {
+            width: 8px;
+
+            .matchid-message-item-content-status-indicator {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+
+                &.highlight {
+                    background-color: var(--matchid-highlight-orange);
+                }
+
+                &.default {
+                    background-color: #D3D3D3;
+                }
+            }
+        }
+    }
+
+    .matchid-message-item-footer {
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        color: var(--matchid-secondary-grey);
+
+        .matchid-message-item-footer-delete {
+            cursor: pointer;
+            display: none;
+        }
+    }
+
+    &:hover {
+        .matchid-message-item-footer-delete {
+            display: block;
+        }
+    }
+}
+
+.matchid-message-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.matchid-w-full {
+    width: 100%;
+}
+
+.matchid-confirm-modal {
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    color: black;
+    gap: 8px;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    @media (min-width: 768px) {
+        font-size: 16px;
+        gap: 12px;
+    }
+
+}
+