@matchain/matchid-sdk-react 0.1.51-alpha.0 → 0.1.51-alpha.2

package/dist/hooks/index.mjs

@@ -12,12 +12,12 @@ import {
   useTransaction,
   useUserInfo,
   useWallet
-} from "../chunk-5P2AOB6Q.mjs";
+} from "../chunk-OWEJPD4R.mjs";
 import "../chunk-UA6XHZHX.mjs";
+import "../chunk-HLUFAIFV.mjs";
 import {
   useLayout_exports
 } from "../chunk-FB5MHLWX.mjs";
-import "../chunk-HLUFAIFV.mjs";
 import "../chunk-LHNKZISB.mjs";
 import "../chunk-J5LGTIGS.mjs";
 export {

package/dist/{index-BU0r26-N.d.mts → index-B-QfwtE5.d.mts}

@@ -61,7 +61,7 @@ declare const LOGIN_METHOD_MAP: {
 
 declare function useUserInfo(): {
     loginByMethod: (method: ISocialLoginMethod) => Promise<Window | null>;
-    loginByTelegram: () => Promise<Window | null>;
+    loginByTelegram: () => Promise<Window | null | undefined>;
     loginByTwitter: () => Promise<Window | null>;
     loginByGoogle: () => Promise<Window | null>;
     loginByWallet: () => Promise<Window | null>;

package/dist/{index-C3aFwrd4.d.ts → index-X_fw5wX_.d.ts}

@@ -61,7 +61,7 @@ declare const LOGIN_METHOD_MAP: {
 
 declare function useUserInfo(): {
     loginByMethod: (method: ISocialLoginMethod) => Promise<Window | null>;
-    loginByTelegram: () => Promise<Window | null>;
+    loginByTelegram: () => Promise<Window | null | undefined>;
     loginByTwitter: () => Promise<Window | null>;
     loginByGoogle: () => Promise<Window | null>;
     loginByWallet: () => Promise<Window | null>;

package/dist/index.css

@@ -1001,6 +1001,7 @@ body {
 
         display: flex;
         justify-content: space-between;
+
         .matchid-drawer-header-content {
             display: flex;
             gap: 12px;
@@ -1173,11 +1174,17 @@ body {
     display: flex;
     flex-direction: column;
     gap: 48px;
+    @media screen and (max-width: 768px) {
+        gap:36px;
+    }
 
     .matchid-change-network-list {
         display: flex;
         flex-direction: column;
         gap: 24px;
+        @media screen and (max-width: 768px) {
+            gap: 16px;
+        }
 
         .matchid-change-network-item {
             cursor: pointer;
@@ -1189,6 +1196,10 @@ body {
             border: 1px solid var(--matchid-line);
             border-radius: 16px;
             transition: border-color 0.2s;
+            @media screen and (max-width: 768px) {
+                padding: 10px 16px;
+                border-radius: 12px;
+            }
 
             &:hover, &.matchid-change-network-selected {
                 border-color: var(--matchid-highlight-orange);
@@ -1198,15 +1209,17 @@ body {
                 display: flex;
                 align-items: center;
                 gap: 16px;
+                @media screen and (max-width: 768px) {
+                    gap:8px;
+                }
 
                 .matchid-change-network-item-icon {
-                    width: 32px;
-                    height: 32px;
-                    border-radius: 4px;
+                    width: 28px;
+                    height: 28px;
+                    border-radius: 8px;
                     @media (min-width: 768px) {
                         width: 40px;
                         height: 40px;
-
                     }
                 }
 
@@ -1255,13 +1268,18 @@ body {
     align-items: center;
     flex: 1;
     gap: 48px;
+    @media screen and (max-width: 768px) {
+        gap: 36px;
+    }
 
     .matchid-receive-container {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 48px;
-
+        @media screen and (max-width: 768px) {
+            gap: 24px;
+        }
         .matchid-receive-text {
             font-size: 14px;
             font-weight: 500;
@@ -1275,10 +1293,16 @@ body {
             border: 2px solid var(--matchid-line);
             border-radius: 12px;
             padding: 16px;
-
+            @media screen and (max-width: 768px) {
+                padding: 10px;
+            }
             .matchid-qr-code {
                 width: 148px;
                 height: 148px;
+                @media screen and (max-width: 768px) {
+                    width: 88px;
+                    height: 88px;
+                }
             }
         }
 
@@ -1286,12 +1310,8 @@ body {
             text-align: center;
             word-break: break-all;
             color: var(--matchid-link);
-            font-size: 12px;
+            font-size: 14px;
             font-weight: 500;
-
-            @media (min-width: 768px) {
-                font-size: 14px;
-            }
         }
     }
 }
@@ -1300,11 +1320,17 @@ body {
     display: flex;
     flex-direction: column;
     gap: 48px;
+    @media screen and (max-width: 768px) {
+        gap: 36px;
+    }
 
     .matchid-import-token-form {
         display: flex;
         flex-direction: column;
-        gap: 24px
+        gap: 24px;
+        @media screen and (max-width: 768px) {
+            gap: 16px;
+        }
     }
 }
 
@@ -1312,6 +1338,9 @@ body {
     display: flex;
     flex-direction: column;
     gap: 16px;
+    @media screen and (max-width: 768px) {
+        gap: 8px;
+    }
 
     .matchid-wallet-asset-item {
         display: flex;
@@ -1321,6 +1350,9 @@ body {
         padding: 16px;
         border: 1px solid var(--matchid-line);
         border-radius: 16px;
+        @media screen and (max-width: 768px) {
+            padding: 10px 16px;
+        }
 
         &:hover {
             border-color: var(--matchid-highlight-orange);
@@ -1332,11 +1364,18 @@ body {
             width: 42px;
             display: flex;
             align-items: center;
-
+            @media screen and (max-width: 768px) {
+                width: 36px;
+                height: 36px;
+            }
             .matchid-wallet-asset-icon {
                 width: 40px;
                 height: 40px;
                 border-radius: 8px;
+                @media screen and (max-width: 768px) {
+                    width: 36px;
+                    height: 36px;
+                }
             }
 
             .matchid-wallet-asset-chain {
@@ -1346,6 +1385,10 @@ body {
                 height: 12px;
                 right: 0px;
                 bottom: 1px;
+                @media screen and (max-width: 768px) {
+                    wdth:10px;
+                    height:10px;
+                }
             }
         }
 
@@ -1357,6 +1400,9 @@ body {
             justify-content: space-between;
             gap: 10px;
 
+            @media screen and (max-width: 768px) {
+                height: 44px;
+            }
             .matchid-wallet-asset-name {
                 font-size: 16px;
                 font-weight: 500;
@@ -1391,10 +1437,8 @@ body {
                     font-size: 14px;
                     font-weight: 500;
                     color: var(--matchid-gray-600);
-                    @media (max-width: 768px) {
-                        font-size: 12px;
-                    }
                 }
+
             }
 
             .matchid-wallet-asset-footer {
@@ -1416,9 +1460,6 @@ body {
                 .matchid-wallet-asset-change {
                     font-size: 14px;
                     font-weight: 400;
-                    @media (max-width: 768px) {
-                        font-size: 12px;
-                    }
                 }
             }
         }
@@ -1439,9 +1480,11 @@ body {
     justify-content: space-between;
     flex-direction: column;
     padding-bottom: 200px;
-    gap: 40px;
+    gap: 48px;
+
     @media (max-width: 768px) {
         padding-bottom: 0px;
+        gap:36px;
     }
 
     .matchid-token-main {
@@ -1494,6 +1537,9 @@ body {
             padding: 16px;
             background: var(--matchid-gray-100);
             border-radius: 12px;
+            @media (max-width: 768px) {
+               gap:8px;
+            }
 
             .matchid-token-contract-title {
                 color: var(--matchid-black);
@@ -1526,6 +1572,7 @@ body {
     gap: 40px;
     @media (max-width: 768px) {
         padding-bottom: 0px;
+        gap:68px;
     }
 
     .matchid-token-send-content {
@@ -1639,6 +1686,9 @@ body {
         font-weight: 600;
         border-bottom: 1px solid var(--matchid-line);
         caret-color: var(--matchid-black);
+        @media (max-width: 768px) {
+            font-size: 20px;
+        }
 
         &::placeholder {
             color: var(--matchid-disabled);
@@ -1657,6 +1707,9 @@ body {
     &.matchid-token-input-sm {
         .matchid-token-input {
             font-size: 16px;
+            @media (max-width: 768px) {
+                font-size: 14px;
+            }
         }
     }
 
@@ -1676,8 +1729,10 @@ body {
     overflow-y: scroll;
     max-height: 70vh;
 
+
     @media (max-width: 768px) {
         padding-bottom: 0px;
+        gap:36px;
     }
 
     .matchid-token-send-list {
@@ -1686,6 +1741,10 @@ body {
         gap: 24px;
         flex: 1;
         overflow-y: scroll;
+        max-height: calc(70vh - 48px - 50px);
+        @media (max-width: 768px) {
+            max-height: calc(70vh - 48px - 38px);
+        }
 
         .matchid-token-send-item {
             cursor: pointer;
@@ -1697,6 +1756,10 @@ body {
             border: 1px solid var(--matchid-line);
             border-radius: 16px;
             transition: border-color 0.2s;
+            @media (max-width: 768px) {
+                padding: 10px 16px;
+                border-radius: 12px;
+            }
 
             &:hover, &.matchid-token-send-checked {
                 border-color: var(--matchid-highlight-orange);
@@ -1707,10 +1770,13 @@ body {
                 align-items: center;
                 flex: 1;
                 gap: 16px;
+                @media (max-width: 768px) {
+                    gap: 8px;
+                }
 
                 .matchid-token-send-logo {
-                    width: 32px;
-                    height: 32px;
+                    width: 28px;
+                    height: 28px;
                     position: relative;
 
                     .matchid-token-send-icon {
@@ -1763,7 +1829,11 @@ body {
     border: 1px solid var(--matchid-line);
     border-radius: 16px;
     height: 78px;
-    &:hover{
+    @media screen and (max-width: 768px) {
+        height: 64px;
+    }
+
+    &:hover {
         border-color: var(--matchid-highlight-orange);
     }
 
@@ -1780,6 +1850,10 @@ body {
             display: flex;
             align-items: center;
             justify-content: center;
+            @media screen and (max-width: 768px) {
+                width: 36px;
+                height: 36px;
+            }
 
             .rotate-180 {
                 transform: rotate(180deg);
@@ -1820,73 +1894,92 @@ body {
         gap: 8px;
         font-size: 16px;
         font-weight: 500;
+        span{
+            text-align: right;
+        }
 
         @media screen and (max-width: 768px) {
             font-size: 14px;
         }
     }
-    .matchid-transaction-item-loading{
+
+    .matchid-transaction-item-loading {
         color: var(--matchid-black);
     }
-    .matchid-transaction-item-success{
+
+    .matchid-transaction-item-success {
         color: var(--matchid-success);
     }
-    .matchid-transaction-item-error{
+
+    .matchid-transaction-item-error {
         color: var(--matchid-error);
     }
 
 }
 
-.matchid-transaction-list{
+.matchid-transaction-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
+    @media screen and (max-width: 768px) {
+        gap: 8px;
+    }
 }
 
-.matchid-list-nomore{
-    gap:8px;
+.matchid-list-nomore {
+    gap: 8px;
     text-align: center;
     font-size: 16px;
-    padding:16px 0;
+    padding: 16px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--matchid-secondary-grey);
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
         font-size: 14px;
     }
 }
-.matchid-flex{
+
+.matchid-flex {
     display: flex;
 }
-.matchid-import-token-result{
+
+.matchid-import-token-result {
     display: flex;
-    flex:1;
+    flex: 1;
     flex-direction: column;
     padding-bottom: 100px;
     gap: 24px;
     justify-content: space-between;
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
         padding-bottom: 0;
+        gap:115px;
     }
-    .matchid-import-token-result-box{
+
+    .matchid-import-token-result-box {
         display: flex;
         flex-direction: column;
         gap: 48px;
         align-items: center;
-        .matchid-import-token-result-img{
-            width:96px;
-            height:96px;
+        @media screen and (max-width: 768px) {
+            gap: 24px;
+        }
+
+        .matchid-import-token-result-img {
+            width: 96px;
+            height: 96px;
         }
-        .matchid-import-token-result-text{
+
+        .matchid-import-token-result-text {
             font-size: 24px;
             font-weight: 500;
             color: var(--matchid-success);
-            @media screen and (max-width: 768px){
-                font-size: 20px;
+            @media screen and (max-width: 768px) {
+                font-size: 18px;
             }
         }
-        .matchid-import-token-result-text-fail{
+
+        .matchid-import-token-result-text-fail {
             color: var(--matchid-error);
         }
     }

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 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-BU0r26-N.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';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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-C3aFwrd4.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';

package/dist/index.js

@@ -3282,6 +3282,7 @@ function useMatchChain() {
   }) {
     const { chainId: storeChainId2, setChainId: setChainId2 } = useLocalStore_default();
     const [selectedChainId, setSelectedChainId] = (0, import_react13.useState)(storeChainId2);
+    const isDownMd = useDownMd();
     return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: `matchid-change-network-box`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: `matchid-change-network-list`, children: chainListQuery.data?.map((item, index) => {
         return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
@@ -3294,7 +3295,7 @@ function useMatchChain() {
                 /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("img", { src: item.iconUrl, className: `matchid-change-network-item-icon` }),
                 /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "matchid-change-network-item-name", children: item.name })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Radio, { checked: selectedChainId === item.id })
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Radio, { checked: selectedChainId === item.id, size: isDownMd ? 18 : 24 })
             ]
           },
           index
@@ -5604,6 +5605,7 @@ var import_react31 = require("react");
 var import_react_intl16 = require("react-intl");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 function TokenSendList({ close }) {
+  const isDownMd = useDownMd();
   const walletAssets = useMatchWalletAssets();
   const matchWalletAssetList = useMatchWalletAssetList({
     list: walletAssets.mergedAssets
@@ -5630,14 +5632,14 @@ function TokenSendList({ close }) {
             setChecked(n);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Radio, { checked: checked?.address == n.address }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Radio, { checked: checked?.address == n.address, size: isDownMd ? 18 : 24 }),
             /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "matchid-token-send-content", children: [
               /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "matchid-token-send-logo", children: [
                 n.icon ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("img", { src: n.icon, alt: n.symbol, className: `matchid-token-send-icon` }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                   AlphaAvatar2,
                   {
                     className: `matchid-token-send-icon`,
-                    size: 40,
+                    size: isDownMd ? 28 : 40,
                     name: n.symbol || n.name || ""
                   }
                 ),