@matchain/matchid-sdk-react 0.1.53-alpha.1 → 0.1.53-alpha.11

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 {
@@ -1997,4 +2005,107 @@ body {
         }
     }
 
+}
+
+.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:20px 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);
+    }
+}
+
+.matchid-cursor-pointer{
+    cursor: pointer;
+}
+
+.matchid-remove-box{
+    padding:0px 20px;
 }

package/dist/index.d.mts

@@ -1,25 +1,26 @@
 import React, { ReactNode } from 'react';
-import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-Dd_ExpLx.mjs';
-export { i as Hooks, M as ModalProvider, T as ToastProvider } from './index-B-QfwtE5.mjs';
-export { i as Components } from './index-XzSw1Bym.mjs';
-export { i as UI } from './index-D5OzNRfu.mjs';
-export { i as Api } from './index-CDqIk5k2.mjs';
+import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-VrV1kYga.mjs';
+export { i as Hooks, M as ModalProvider, T as ToastProvider } from './index-DjbH13zc.mjs';
+export { i as Components } from './index-D7S5DMUy.mjs';
+export { i as UI } from './index-DC4F1u-w.mjs';
+export { i as Api } from './index-BrzFSkOe.mjs';
 export { i as Chains } from './index-DXRGMAbv.mjs';
-export { i as Types } from './index-Bmir-Wor.mjs';
+export { i as Types } from './index-SOVt-ADK.mjs';
+export { i as Icon } from './index-BVfCh4l-.mjs';
 import '@tanstack/react-query/src/types';
+import './request-B0CyrGFT.mjs';
 import 'viem';
 import 'viem/types/misc';
 import 'abitype';
 import 'react/jsx-runtime';
 import 'viem/_types/actions/siwe/verifySiweMessage';
 import '@tanstack/react-query';
-import './index-B_o9HBS1.mjs';
+import './index-BaFmUVw-.mjs';
 
 type MatchContextType = {
     appid: string;
     events?: IMatchEvents;
     login: (data: {
-        mid: string;
         token: string;
     }) => Promise<void>;
     theme: "light" | "dark";

package/dist/index.d.ts

@@ -1,25 +1,26 @@
 import React, { ReactNode } from 'react';
-import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-Dd_ExpLx.js';
-export { i as Hooks, M as ModalProvider, T as ToastProvider } from './index-X_fw5wX_.js';
-export { i as Components } from './index-BDoEk1EK.js';
-export { i as UI } from './index-DMUZQqNB.js';
-export { i as Api } from './index-DvM6x6e6.js';
+import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-VrV1kYga.js';
+export { i as Hooks, M as ModalProvider, T as ToastProvider } from './index-zc2GEzJ9.js';
+export { i as Components } from './index-DQFQ39D9.js';
+export { i as UI } from './index-C0UKUm0h.js';
+export { i as Api } from './index-BgdY5xdW.js';
 export { i as Chains } from './index-DXRGMAbv.js';
-export { i as Types } from './index-k2Uf0F94.js';
+export { i as Types } from './index-D5WIVIkc.js';
+export { i as Icon } from './index-D3Kp05kW.js';
 import '@tanstack/react-query/src/types';
+import './request-B0CyrGFT.js';
 import 'viem';
 import 'viem/types/misc';
 import 'abitype';
 import 'react/jsx-runtime';
 import 'viem/_types/actions/siwe/verifySiweMessage';
 import '@tanstack/react-query';
-import './index-BUj9mOrS.js';
+import './index-CQmN0dN4.js';
 
 type MatchContextType = {
     appid: string;
     events?: IMatchEvents;
     login: (data: {
-        mid: string;
         token: string;
     }) => Promise<void>;
     theme: "light" | "dark";