@matchain/matchid-sdk-react 0.1.53-alpha.0 → 0.1.53-alpha.10

package/dist/index.css

@@ -54,6 +54,7 @@ body {
 
     /**overlay component**/
     --matchid-overlay-index: 9999;
+    --matchid-overlay-color: var(--matchid-black);
     /**modal component**/
     --matchid-modal-bg: var(--matchid-white);
     --matchid-modal-shadow: var(--matchid-shadow-full);
@@ -133,6 +134,15 @@ body {
     /**radio**/
     --matchid-radio-line: var(--matchid-gray-300);
     --matchid-radio-checked: var(--matchid-highlight-orange);
+    /**matchid-wallet-asset**/
+    --matchid-wallet-asset-bg: var(--matchid-white);
+    --matchid-wallet-asset-color: var(--matchid-black);
+    /**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);
 
 
 }
@@ -393,7 +403,7 @@ body {
     overflow: hidden;
     backdrop-filter: blur(2px);
     background: rgba(0, 0, 0, .3);
-    color:#000000;
+    color: var(--matchid-overlay-color);
     @media screen and (max-width: 768px) {
         align-items: center;
     }
@@ -449,8 +459,8 @@ body {
 
             .matchid-modal-header-title {
                 color: var(--matchid-modal-header-color, #000);
-                font-size: 18px;
-                font-weight: 600;
+                font-size: 20px;
+                font-weight: 500;
                 @media screen and (max-width: 768px) {
                     font-size: 16px;
                     font-weight: 500;
@@ -496,7 +506,7 @@ body {
         outline: 0;
         color: var(--matchid-input-color);
         font-size: 18px;
-        font-weight: 600;
+        font-weight: 500;
         background: none;
         min-width: 0;
         @media screen and (max-width: 768px) {
@@ -553,7 +563,7 @@ body {
     .matchid-field-label {
         color: var(--matchid-field-color);
         font-size: 18px;
-        font-weight: 600;
+        font-weight: 500;
         @media screen and (max-width: 768px) {
             font-size: 14px;
             font-weight: 500;
@@ -566,7 +576,7 @@ body {
 
     .matchid-field-error {
         font-size: 14px;
-        font-weight: 600;
+        font-weight: 400;
         color: var(--matchid-field-error-color);
     }
 }
@@ -1176,7 +1186,7 @@ body {
     flex-direction: column;
     gap: 48px;
     @media screen and (max-width: 768px) {
-        gap:36px;
+        gap: 36px;
     }
 
     .matchid-change-network-list {
@@ -1211,7 +1221,7 @@ body {
                 align-items: center;
                 gap: 16px;
                 @media screen and (max-width: 768px) {
-                    gap:8px;
+                    gap: 8px;
                 }
 
                 .matchid-change-network-item-icon {
@@ -1281,6 +1291,7 @@ body {
         @media screen and (max-width: 768px) {
             gap: 24px;
         }
+
         .matchid-receive-text {
             font-size: 14px;
             font-weight: 500;
@@ -1297,6 +1308,7 @@ body {
             @media screen and (max-width: 768px) {
                 padding: 10px;
             }
+
             .matchid-qr-code {
                 width: 148px;
                 height: 148px;
@@ -1344,6 +1356,9 @@ body {
     }
 
     .matchid-wallet-asset-item {
+
+        background: var(--matchid-wallet-asset-bg);
+        color: var(--matchid-wallet-asset-color);
         display: flex;
         cursor: pointer;
         gap: 8px;
@@ -1369,6 +1384,7 @@ body {
                 width: 36px;
                 height: 36px;
             }
+
             .matchid-wallet-asset-icon {
                 width: 40px;
                 height: 40px;
@@ -1387,8 +1403,8 @@ body {
                 right: 0px;
                 bottom: 1px;
                 @media screen and (max-width: 768px) {
-                    wdth:10px;
-                    height:10px;
+                    wdth: 10px;
+                    height: 10px;
                 }
             }
         }
@@ -1404,6 +1420,7 @@ body {
             @media screen and (max-width: 768px) {
                 height: 44px;
             }
+
             .matchid-wallet-asset-name {
                 font-size: 16px;
                 font-weight: 500;
@@ -1485,7 +1502,7 @@ body {
 
     @media (max-width: 768px) {
         padding-bottom: 0px;
-        gap:36px;
+        gap: 36px;
     }
 
     .matchid-token-main {
@@ -1539,7 +1556,7 @@ body {
             background: var(--matchid-gray-100);
             border-radius: 12px;
             @media (max-width: 768px) {
-               gap:8px;
+                gap: 8px;
             }
 
             .matchid-token-contract-title {
@@ -1573,7 +1590,7 @@ body {
     gap: 40px;
     @media (max-width: 768px) {
         padding-bottom: 0px;
-        gap:68px;
+        gap: 68px;
     }
 
     .matchid-token-send-content {
@@ -1733,7 +1750,7 @@ body {
 
     @media (max-width: 768px) {
         padding-bottom: 0px;
-        gap:36px;
+        gap: 36px;
     }
 
     .matchid-token-send-list {
@@ -1830,6 +1847,8 @@ body {
     border: 1px solid var(--matchid-line);
     border-radius: 16px;
     height: 78px;
+    background: var(--matchid-wallet-transaction-bg);
+    color: var(--matchid-wallet-transaction-color);
     @media screen and (max-width: 768px) {
         height: 64px;
     }
@@ -1895,7 +1914,8 @@ body {
         gap: 8px;
         font-size: 16px;
         font-weight: 500;
-        span{
+
+        span {
             text-align: right;
         }
 
@@ -1954,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 {
@@ -1985,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-Cv5UhCIP.mjs';
-export { i as Hooks, M as ModalProvider, T as ToastProvider } from './index-Bsfb3Ysq.mjs';
-export { i as Components } from './index-0EM3dXJ4.mjs';
-export { i as UI } from './index-CqO8nMTh.mjs';
-export { i as Api } from './index-CteYYAoN.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-C29kl7io.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-CGx_yc95.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-Cv5UhCIP.js';
-export { i as Hooks, M as ModalProvider, T as ToastProvider } from './index-C7InzeOC.js';
-export { i as Components } from './index-Ce5JlNJv.js';
-export { i as UI } from './index-CO1j3Cxc.js';
-export { i as Api } from './index-BoIDCH41.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-BNNgBoTN.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-BlYHNOxm.js';
+import './index-CQmN0dN4.js';
 
 type MatchContextType = {
     appid: string;
     events?: IMatchEvents;
     login: (data: {
-        mid: string;
         token: string;
     }) => Promise<void>;
     theme: "light" | "dark";