@matchain/matchid-sdk-react 0.1.48-alpha.10 → 0.1.48-alpha.3

package/dist/index-TkB89QxX.d.ts

@@ -0,0 +1,181 @@
+import { g as ISocialLoginMethod, h as OverviewInfo, C as CEXType, i as LoginMethodType, I as IMatchEvents, U as UserChainType, j as UserTransactionType } from './types-CHkU0WHZ.js';
+import * as viem from 'viem';
+import { Account, WalletClientConfig, createWalletClient, SignableMessage, Hex, TransactionSerializable, DeployContractParameters, SendTransactionParameters, WriteContractParameters, Chain } from 'viem';
+import { C as ChainType } from './mpc-CTbBWHld.js';
+import { Hash } from 'viem/types/misc';
+import { Abi } from 'abitype';
+import React, { ReactNode } from 'react';
+import * as _tanstack_react_query from '@tanstack/react-query';
+
+declare const LOGIN_METHOD_MAP: {
+    email: string;
+    evm: string;
+    sol: string;
+    btc: string;
+    ton: string;
+    tron: string;
+    google: string;
+    facebook: string;
+    x: string;
+    telegram: string;
+    github: string;
+    discord: string;
+    linkedin: string;
+    youtube: string;
+};
+
+declare function useUserInfo(): {
+    loginByMethod: (method: ISocialLoginMethod) => Promise<Window | null>;
+    loginByTelegram: () => Promise<Window | null>;
+    loginByTwitter: () => Promise<Window | null>;
+    loginByGoogle: () => Promise<Window | null>;
+    loginByWallet: () => Promise<Window | null>;
+    loginByEmail: ({ email, code }: {
+        email: string;
+        code: string;
+    }) => Promise<boolean>;
+    bindWallet: () => Promise<Window | null>;
+    bindTelegram: () => Promise<void>;
+    token: string;
+    mid: string;
+    did: string;
+    address: string;
+    isLogin: boolean;
+    logout: () => Promise<void>;
+    getLoginEmailCode: (email: string) => Promise<string>;
+    refreshOverview: () => Promise<void>;
+    overview: OverviewInfo | null;
+    bindCex: (type: CEXType) => void;
+    username: string;
+    auth: () => Promise<any>;
+    login: (method: LoginMethodType | "wallet", extra?: {
+        [key: string]: any;
+    }) => Promise<void | Window | null>;
+    bind: (method: LoginMethodType | "wallet", extra?: {
+        [key: string]: any;
+    }) => Promise<void | Window | null>;
+    getAuthInfo: (method: keyof typeof LOGIN_METHOD_MAP) => Promise<unknown>;
+};
+
+declare function useMatchEvents(handlers: IMatchEvents): void;
+
+type isRecoveredType = () => Promise<boolean>;
+type signMessageType = (params: {
+    message: SignableMessage;
+    chainType?: ChainType;
+}) => Promise<Hex>;
+type signTransactionType = (params: {
+    transaction: TransactionSerializable;
+    chainType?: ChainType;
+    chain: {
+        id: number;
+        name: string;
+        nativeCurrency: {
+            name: string;
+            symbol: string;
+            decimals: number;
+        };
+        rpcUrls: {
+            [key: string]: any;
+        };
+    };
+}) => Promise<`0x02${string}` | `0x01${string}` | `0x03${string}` | `0x04${string}` | viem.TransactionSerializedLegacy>;
+type SendTransactionReturnType = Hash;
+type SendTransactionParametersType = Omit<SendTransactionParameters, 'account'>;
+type SendTransactionType = (transaction: SendTransactionParametersType) => Promise<SendTransactionReturnType>;
+type DeployContractReturnType = SendTransactionReturnType;
+type DeployContractType = <const abi extends Abi | readonly unknown[]>(parameters: DeployContractParameters<abi>) => Promise<DeployContractReturnType>;
+type WriteContractParametersType = Omit<WriteContractParameters, 'account' | 'chain'> & {
+    chain?: Chain;
+};
+type WriteContractReturnType = SendTransactionReturnType;
+type WriteContractType = (params: WriteContractParametersType) => Promise<WriteContractReturnType>;
+interface UseWalletReturnType {
+    walletReady: boolean;
+    isRecovered: isRecoveredType;
+    signMessage: signMessageType;
+    signTransaction: signTransactionType;
+    address: string;
+    evmAccount: Account | undefined;
+    createWalletClient: (parameters: Omit<WalletClientConfig, 'account'>) => Omit<ReturnType<typeof createWalletClient>, 'sendTransaction' | 'deployContract' | 'writeContract'> & {
+        sendTransaction: SendTransactionType;
+        deployContract: DeployContractType;
+        writeContract: WriteContractType;
+    } | undefined;
+}
+declare function useWallet(): UseWalletReturnType;
+
+declare function useCopyClipboard(timeout?: number): [boolean, (toCopy: string) => void];
+
+interface ModalContextType {
+    show: (content: (props: {
+        close: () => void;
+    }) => ReactNode) => void;
+    open: (props: {
+        title: ReactNode;
+        content: React.ComponentType<{
+            close: () => void;
+        }>;
+    }) => void;
+}
+declare function useModal(): ModalContextType;
+
+interface ToastContextType {
+    show: (options: {
+        icon?: ReactNode;
+        timeout?: number;
+        text: ReactNode;
+    }) => void;
+    success: (text: ReactNode, timeout?: number) => void;
+    error: (text: ReactNode, timeout?: number) => void;
+}
+declare function useToast(): ToastContextType;
+
+declare function useMatchChain(): {
+    list: UserChainType[] | undefined;
+    chainId: number | null;
+    setChainId: (chainId: number) => void;
+    chain: UserChainType | null | undefined;
+    explorerLink: (url: string) => string;
+    showChangeNetwork: () => void;
+};
+
+declare function useMatchWallet(): {
+    showReceiveModal: () => void;
+};
+declare function useMatchWalletRecords({ pageSize }: {
+    pageSize?: number;
+}): {
+    items: UserTransactionType[];
+    fetchMoreData: () => Promise<void>;
+    hasMore: boolean;
+};
+
+declare function useReceipt({ chainId, hash }: {
+    chainId: number;
+    hash: string;
+}): _tanstack_react_query.UseQueryResult<any, Error>;
+
+declare function useDownMd(): boolean;
+
+declare const useLayout_useDownMd: typeof useDownMd;
+declare namespace useLayout {
+  export { useLayout_useDownMd as useDownMd };
+}
+
+declare const index_useCopyClipboard: typeof useCopyClipboard;
+declare const index_useLayout: typeof useLayout;
+declare const index_useMatchChain: typeof useMatchChain;
+declare const index_useMatchEvents: typeof useMatchEvents;
+declare const index_useMatchWallet: typeof useMatchWallet;
+declare const index_useMatchWalletRecords: typeof useMatchWalletRecords;
+declare const index_useModal: typeof useModal;
+declare const index_useReceipt: typeof useReceipt;
+declare const index_useToast: typeof useToast;
+declare const index_useUserInfo: typeof useUserInfo;
+declare const index_useWallet: typeof useWallet;
+declare namespace index {
+  export { index_useCopyClipboard as useCopyClipboard, index_useLayout as useLayout, index_useMatchChain as useMatchChain, index_useMatchEvents as useMatchEvents, index_useMatchWallet as useMatchWallet, index_useMatchWalletRecords as useMatchWalletRecords, index_useModal as useModal, index_useReceipt as useReceipt, index_useToast as useToast, index_useUserInfo as useUserInfo, index_useWallet as useWallet };
+}
+
+export { useMatchEvents as a, useWallet as b, useCopyClipboard as c, useModal as d, useToast as e, useMatchChain as f, useMatchWallet as g, useMatchWalletRecords as h, index as i, useReceipt as j, useLayout as k, useUserInfo as u };

package/dist/index.css

@@ -15,12 +15,7 @@ body {
     --matchid-gray-100: #F8F8F8;
     --matchid-red-600: #F7585E;
     --matchid-green-600: #2CBF68;
-    --matchid-secondary-grey: var(--matchid-gray-600);
-    --matchid-light-grey: var(--matchid-gray-100);
-    --matchid-disabled: var(--matchid-gray-350);
-    --matchid-success: #2FCC00;
-    --matchid-error: #F14141;
-    --matchid-link: #006FFF;
+    --matchid-link:#006FFF;
 
     --matchid-shadow-full: 0px 15px 40px 0px rgba(22, 17, 46, 0.12);
     --matchid-shadow-middle: 0px 10px 30px 0px rgba(22, 17, 46, 0.12);
@@ -134,7 +129,6 @@ body {
     --matchid-radio-line: var(--matchid-gray-300);
     --matchid-radio-checked: var(--matchid-highlight-orange);
 
-
 }
 
 .matchid-login-box {
@@ -1001,19 +995,9 @@ body {
         padding-bottom: 24px;
         border-bottom: 1px solid var(--matchid-line);
 
-        .matchid-drawer-header-content {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-        }
-
         .matchid-drawer-header-close {
             cursor: pointer;
         }
-
-        .matchid-drawer-header-back {
-            cursor: pointer;
-        }
     }
 }
 
@@ -1223,15 +1207,14 @@ body {
 
 }
 
-.matchid-toast-box {
+.matchid-toast-box{
     position: fixed;
     top: 20px; /* 5 * 4px = 20px */
     right: 20px; /* 5 * 4px = 20px */
     display: flex;
     flex-direction: column;
     gap: 8px; /* space-y-2 -> 2 * 4px = 8px */
-
-    .matchid-toast {
+    .matchid-toast{
         display: flex;
         align-items: center;
         box-shadow: var(--matchid-shadow-small);
@@ -1285,7 +1268,7 @@ body {
         .matchid-receive-link {
             text-align: center;
             word-break: break-all;
-            color: var(--matchid-link);
+            color:var(--matchid-link);
             font-size: 12px;
             font-weight: 500;
 
@@ -1295,450 +1278,3 @@ body {
         }
     }
 }
-
-.matchid-import-token {
-    display: flex;
-    flex-direction: column;
-    gap: 48px;
-
-    .matchid-import-token-form {
-        display: flex;
-        flex-direction: column;
-        gap: 24px
-    }
-}
-
-.matchid-wallet-asset-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-
-    .matchid-wallet-asset-item {
-        display: flex;
-        cursor: pointer;
-        gap: 8px;
-        align-items: center;
-        padding: 16px;
-        border: 1px solid var(--matchid-line);
-        border-radius: 16px;
-
-        &:hover {
-            border-color: var(--matchid-highlight-orange);
-        }
-
-        .matchid-wallet-asset-logo {
-            position: relative;
-            height: 46px;
-            width: 42px;
-            display: flex;
-            align-items: center;
-
-            .matchid-wallet-asset-icon {
-                width: 40px;
-                height: 40px;
-                border-radius: 8px;
-            }
-
-            .matchid-wallet-asset-chain {
-                position: absolute;
-                border-radius: 100%;
-                width: 12px;
-                height: 12px;
-                right: 0px;
-                bottom: 1px;
-            }
-        }
-
-        .matchid-wallet-asset-info {
-            height: 46px;
-            display: flex;
-            flex: 1;
-            align-items: center;
-            justify-content: space-between;
-
-            .matchid-wallet-asset-name {
-                font-size: 16px;
-                font-weight: 500;
-                flex:2;
-                color: var(--matchid-black);
-                @media (max-width: 768px) {
-                    font-size: 14px;
-                }
-            }
-
-            .matchid-wallet-asset-content {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                flex:2;
-
-                .matchid-wallet-asset-price {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-black);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-
-                .matchid-wallet-asset-value {
-                    font-size: 14px;
-                    font-weight: 500;
-                    color: var(--matchid-gray-600);
-                    @media (max-width: 768px) {
-                        font-size: 12px;
-                    }
-                }
-            }
-
-            .matchid-wallet-asset-footer {
-                flex:2;
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                align-items: end;
-
-                .matchid-wallet-asset-balance {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-success);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-
-                .matchid-wallet-asset-change {
-                    font-size: 14px;
-                    font-weight: 400;
-                    @media (max-width: 768px) {
-                        font-size: 12px;
-                    }
-                }
-            }
-        }
-    }
-
-    .matchid-wallet-asset-down {
-        color: var(--matchid-error);
-    }
-
-    .matchid-wallet-asset-up {
-        color: var(--matchid-success);
-    }
-}
-
-.matchid-token-detail {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    padding-bottom: 200px;
-    gap: 40px;
-    @media (max-width: 768px) {
-        padding-bottom: 0px;
-    }
-
-    .matchid-token-main {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        align-items: center;
-
-        .matchid-token-info {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            align-items: center;
-
-            .matchid-token-logo {
-                position: relative;
-                width: 48px;
-                height: 48px;
-
-                .matchid-token-icon {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 100%
-                }
-
-                .matchid-token-chain {
-                    position: absolute;
-                    border-radius: 100%;
-                    width: 12px;
-                    height: 12px;
-                    right: 0px;
-                    bottom: 0px;
-                }
-            }
-
-            .matchid-token-name {
-                font-size: 20px;
-                font-weight: 500;
-                color: var(--matchid-black);
-                @media (max-width: 768px) {
-                    font-size: 16px;
-                }
-            }
-        }
-
-        .matchid-token-contract {
-            gap: 16px;
-            display: flex;
-            flex-direction: column;
-            padding: 16px;
-            background: var(--matchid-gray-100);
-            border-radius: 12px;
-
-            .matchid-token-contract-title {
-                color: var(--matchid-black);
-                font-size: 16px;
-                font-weight: 500;
-                @media (max-width: 768px) {
-                    font-size: 14px;
-                }
-            }
-
-            .matchid-token-contract-address {
-                width: 100%;
-                word-break: break-all;
-                font-size: 14px;
-                color: var(--matchid-secondary-grey);
-                @media (max-width: 768px) {
-                    font-size: 12px;
-                }
-            }
-        }
-    }
-}
-
-.matchid-token-send-box {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    padding-bottom: 200px;
-    gap: 40px;
-    @media (max-width: 768px) {
-        padding-bottom: 0px;
-    }
-
-    .matchid-token-send-content {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-
-        .matchid-token-amount-content,.matchid-token-address-content{
-            padding: 16px;
-            background: var(--matchid-light-grey);
-            border-radius: 16px;
-            display: flex;
-            gap: 16px;
-            flex-direction: column;
-            position: relative;
-        }
-
-        .matchid-token-amount-content {
-            .matchid-token-amount-transfer{
-                position: absolute;
-                left: 50%;
-                bottom:-20px;
-                transform: translateX(-50%);
-            }
-            .matchid-token-amount-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .matchid-token-amount-title {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-black);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-
-                .matchid-token-amount-chain {
-                    display: flex;
-                    align-items: center;
-                    gap: 4px;
-                    border-radius: 100px;
-                    padding: 4px 8px;
-                    background: var(--matchid-white);
-
-                    .matchid-token-amount-chain-icon {
-                        width: 16px;
-                        height: 16px;
-                        border-radius: 50%;
-                    }
-
-                    span {
-
-                        font-size: 12px;
-                        font-weight: 500;
-                        color: var(--matchid-black);
-                    }
-                }
-            }
-
-            .matchid-token-amount-footer {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                font-size: 14px;
-                @media (max-width: 768px) {
-                    font-size: 12px;
-                }
-
-                .matchid-token-amount-title {
-                    font-weight: 300;
-                    color: var(--matchid-secondary-grey);
-                }
-
-                .matchid-token-amount-value {
-                    color: var(--matchid-black);
-                    font-weight: 500;
-                }
-            }
-        }
-
-        .matchid-token-address-content {
-           .matchid-token-address-header {
-                .matchid-token-address-title {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-black);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.matchid-token-input-box {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .matchid-token-input {
-        width: 100%;
-        background: transparent;
-        font-size: 24px;
-        color: var(--matchid-black);
-        padding: 10px 0;
-        border: none;
-        font-weight: 600;
-        border-bottom: 1px solid var(--matchid-line);
-        caret-color: var(--matchid-black);
-
-        &::placeholder {
-            color: var(--matchid-disabled);
-            font-weight: 300;
-        }
-
-        &.matchid-token-input-error {
-            border-color: var(--matchid-highlight-orange);
-        }
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    &.matchid-token-input-sm {
-        .matchid-token-input {
-            font-size: 16px;
-        }
-    }
-
-    .matchid-token-input-error-text {
-        font-size: 12px;
-        color: var(--matchid-error);
-        font-weight: 500;
-    }
-}
-
-.matchid-token-send-list-box {
-    flex:1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 48px;
-    padding-bottom: 200px;
-
-    @media (max-width: 768px) {
-        padding-bottom: 0px;
-    }
-    .matchid-token-send-list {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        flex:1;
-        overflow-y: scroll;
-        .matchid-token-send-item {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            justify-content: space-between;
-            padding: 16px;
-            border: 1px solid var(--matchid-line);
-            border-radius: 16px;
-            transition: border-color 0.2s;
-
-            &:hover, &.matchid-token-send-checked {
-                border-color: var(--matchid-highlight-orange);
-            }
-
-            .matchid-token-send-content {
-                display: flex;
-                align-items: center;
-                flex:1;
-                gap: 16px;
-
-                .matchid-token-send-logo {
-                    width: 32px;
-                    height: 32px;
-                    position: relative;
-                    .matchid-token-send-icon{
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 8px;
-                    }
-                    .matchid-token-send-chain{
-                        position: absolute;
-                        border-radius: 100%;
-                        width: 12px;
-                        height: 12px;
-                        right: -1px;
-                        bottom: -1px;
-                    }
-                    @media (min-width: 768px) {
-                        width: 40px;
-                        height: 40px;
-                    }
-                }
-
-                .matchid-token-send-info {
-                    font-size: 14px;
-                    font-weight: 500;
-                    display: flex;
-                    flex:1;
-                    align-items: center;
-                    justify-content: space-between;
-                    gap:10px;
-                    @media (min-width: 768px) {
-                        font-size: 16px;
-                    }
-                }
-            }
-        }
-    }
-
-}
-
-.matchid-rotate{
-    animation: spin 2s linear infinite;
-}