astra-modal-test 1.0.0 → 1.0.2

package/dist/{w3m-modal-R9m1z1SQ.mjs → w3m-modal-BVQPTRZq.js}

@@ -1,4 +1,4 @@
-import { i as v, b as y, O as w, M as s, C as h, aW as k, E as g, x as p, R as u, S as b, U as C, l as x, d as E, g as A, aX as L, f as m, c as N, aY as T } from "./index-BTsa09iy.mjs";
+import { i as v, b as y, O as w, M as s, C as h, aW as k, E as g, x as p, R as u, S as b, U as C, l as x, d as E, g as A, aX as L, f as m, c as N, aY as T } from "./index-tp9lcU8A.js";
 const O = v`
   :host {
     z-index: var(--w3m-z-index);

package/{eslint.config.js → eslint.config.mjs}

@@ -28,6 +28,8 @@ export default [
       ...react.configs.recommended.rules,
       ...react.configs['jsx-runtime'].rules,
       ...reactHooks.configs.recommended.rules,
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
       'react/jsx-no-target-blank': 'off',
       'react-refresh/only-export-components': [
         'warn',

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "astra-modal-test",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "dist/astra-sdk.es.js",
+  "type":"module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -40,7 +41,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.15.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
     "vite": "^6.0.3",

package/src/comps/AstraModal.jsx

@@ -10,31 +10,13 @@ import ToLightning from "./ToLightning.jsx";
 import ToToken from "./ToToken.jsx";
 import { useGetPairs } from "../hooks/useLspApi.js";
 import ResultModal from "./ResultModal.jsx";
-
-// 全局样式
-// const GlobalStyle = createGlobalStyle`
-//   @font-face {
-//     font-family: ClashDisplay;
-//     src: url(../font/ClashDisplay-Variable.ttf);
-//   }
-//   * {
-//     font-family: ClashDisplay;
-//     font-weight: 400;
-//   }
-// `;
+import ClashDisplayFont from "../font/ClashDisplay-Variable.ttf";
 const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: 'ClashDisplay';
-    src: url('../font/ClashDisplay-Variable.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-  }
-
-  body {
-    font-family: 'ClashDisplay', sans-serif;
+    src: url(${ClashDisplayFont});
   }
 `;
-// Modal 标题容器
 const ModalTitleWrapper = styled.div`
   .astra-logo {
     width: 26px;
@@ -46,9 +28,12 @@ const ModalTitleWrapper = styled.div`
   }
 `;
 
-// 自定义 Modal 样式
 const StyledModal = styled(Modal)`
+  * {
+    font-family: "ClashDisplay";
+  }
   .astra-modal-content {
+    font-family: "Clash Display", sans-serif !important;
     background: rgba(51, 51, 51, 0.2);
     border: 1px solid;
     border-image-source: linear-gradient(
@@ -70,15 +55,20 @@ const StyledModal = styled(Modal)`
     .colorcaff33 {
       color: #caff33;
     }
+    .astra-col {
+      font-family: "ClashDisplay";
+    }
+    .astra-typography {
+      font-family: "ClashDisplay";
+    }
   }
 
-  // 媒体查询样式
   @media (max-width: 768px) {
     font-size: 10px;
 
     .astra-modal-content {
       padding: 20px 10px;
-
+      background: rgba(51, 51, 51, 1);
       .astra-modal-header .modal-title {
         font-size: 18px;
       }
@@ -104,7 +94,7 @@ const StyledModal = styled(Modal)`
   @media (max-width: 575px) {
     .astra-modal-content {
       padding: 15px 8px;
-
+      background: rgba(51, 51, 51, 1);
       .astra-modal-header .modal-title {
         font-size: 16px;
       }
@@ -116,12 +106,12 @@ const ModalWrapper = styled.div`
   padding-top: 10px;
 `;
 
-// 主组件
 export default function AstraModal({ astraApiUri }) {
   const chains = useChains();
   const chainId = useChainId();
   const {
     setTargetNetwork,
+    targetNetwork,
     setAstraModalShow,
     astraModalShow,
     modalDisplayType,
@@ -159,8 +149,8 @@ export default function AstraModal({ astraApiUri }) {
                 <Flex align="center">
                   <span className="modal-title">
                     {modalDisplayType === MODAL_DISPLAY_TYPE.TO_LIGHTNING
-                      ? "Ethereum to Lightning"
-                      : "Lightning to Ethereum"}
+                      ? `${targetNetwork?.name} to Lightning`
+                      : `Lightning to ${targetNetwork?.name}`}
                   </span>
                 </Flex>
               </ModalTitleWrapper>
@@ -169,7 +159,6 @@ export default function AstraModal({ astraApiUri }) {
             footer={null}
             open={astraModalShow}
             onCancel={onCancel}
-            centered
             maskClosable={false}
             zIndex={998}
             mask={false}

package/src/comps/AstraModalLogo.jsx

@@ -1,32 +1,15 @@
 import styled from "styled-components";
 import { Select, Form, Flex, Spin, Button } from "antd";
-import { useAccount, useChains, useChainId, useSwitchChain } from "wagmi";
-import EllipsisMiddle from "./EllipsisMiddle";
-import AstraImg from "./AstraImage";
-import { useCallback, useMemo, useState } from "react";
-import Decimal from "decimal.js";
 import IconPowerby from "../assets/powerby.svg";
-const AstraSelect = styled(Select)`
-  width: 60px !important;
-  .astra-select-selector {
-    padding: 0 0px !important;
-  }
-  .astra-select-selection-item {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-  }
-  .astra-select-arrow {
-    color: #fff;
-  }
-`;
-const AstraAccount = styled.div`
+const AstraLogo = styled.div`
+  margin-top: 24px;
+  display: flex;
+  align-items: flex-end;
+  gap: 5px;
+  font-size: 14px;
+  justify-content: center;
   color: #fff;
-  text-align: center;
-  font-family: "ClashDisplay";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
+  font-family: ClashDisplay;
 `;
 const BalanceFlex = styled(Flex)`
   .available_token_balance {
@@ -36,18 +19,8 @@ const BalanceFlex = styled(Flex)`
 `;
 export default function AstraModalLogo({ messageApi, balance }) {
   return (
-    <div
-      style={{
-        marginTop: "24px",
-        display: "flex",
-        alignItems: "flex-end",
-        gap: "5px",
-        fontSize: "14px",
-        justifyContent: "center",
-        color: "#fff",
-      }}
-    >
+    <AstraLogo>
       Power By <img src={IconPowerby} alt="" />
-    </div>
+    </AstraLogo>
   );
 }

package/src/comps/AstraNetwork.jsx

@@ -1,9 +1,10 @@
 import styled from "styled-components";
-import { Select, Form, Flex, Spin, Button } from "antd";
-import { useAccount, useChains, useChainId, useSwitchChain } from "wagmi";
+import { Select, Form, Flex, Spin, Space } from "antd";
+import { useAccount, useChains, useChainId, useSwitchChain, useDisconnect } from "wagmi";
 import EllipsisMiddle from "./EllipsisMiddle";
 import AstraImg from "./AstraImage";
 import { useCallback, useMemo, useState } from "react";
+import { DisconnectOutlined } from '@ant-design/icons'
 import Decimal from "decimal.js";
 const AstraSelect = styled(Select)`
   width: 60px !important;
@@ -33,6 +34,14 @@ const BalanceFlex = styled(Flex)`
     color: #fff;
   }
 `;
+
+const StyledDisconnectOutlined = styled(DisconnectOutlined)`
+  color: rgba(202, 255, 51, 1);
+  cursor: pointer;
+  &:hover {
+    color:red;
+  }
+`;
 const FormItemPair = styled(Form.Item)`
   padding: 8px 20px 8px 10px;
   border-radius: 12px;
@@ -51,6 +60,7 @@ export default function AstraNetwork({ messageApi, balance }) {
   const account = useAccount();
   const chains = useChains();
   const chainId = useChainId();
+  const { disconnect } = useDisconnect();
   const { switchChainAsync } = useSwitchChain();
   const [loading, setLoading] = useState(false);
   const onNetWorkChange = useCallback(
@@ -96,9 +106,16 @@ export default function AstraNetwork({ messageApi, balance }) {
         <Flex justify="end">
           <AstraAccount>
             {account?.address ? (
-              <EllipsisMiddle suffixCount={8}>
-                {account?.address}
-              </EllipsisMiddle>
+              <>
+                <Space>
+                  <EllipsisMiddle suffixCount={8}>
+                    {account?.address}
+                  </EllipsisMiddle>
+                  <StyledDisconnectOutlined onClick={() => disconnect()} />
+                </Space>
+              </>
+
+
             ) : (
               "Connect Wallet"
             )}

package/src/comps/ConnectButton.jsx

@@ -22,13 +22,12 @@ export default function ConnectButton() {
                 button.style.border = "none";
                 button.style.fontFamily = "ClashDisplay";
               }
-              clearInterval(interval); // 找到目标后停止轮询
+              clearInterval(interval);
             }
           }
         }
-      }, 100); // 每 100 毫秒检查一次
+      }, 100);
 
-      // 如果需要，可以设置轮询的最大时间限制
       setTimeout(() => clearInterval(interval), 5000);
     }
   }, []);

package/src/comps/ResultModal.jsx

@@ -1,4 +1,4 @@
-import { Modal, Flex, Button } from "antd";
+import { Modal, Flex } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import { MODAL_DISPLAY_TYPE } from "../constants/index.js";
@@ -9,7 +9,7 @@ import AstraImg from "./AstraImage.jsx";
 import IconBridgeLoading from "../assets/bridge-loading.png";
 import IconSuccess from "../assets/success.svg";
 import AstraModalLogo from "./AstraModalLogo.jsx";
-import { toLightning, toEVM } from "../apis/lspApi";
+import { toLightning } from "../apis/lspApi";
 const ModalWrapper = styled.div``;
 const BridgeDetail = styled.div`
   padding: 10px 20px;
@@ -51,15 +51,10 @@ const ModalTitle = styled.div`
     flex: 1;
   }
 `;
-// 自定义 Modal 样式
 const StyledModal = styled(Modal)`
-  @font-face {
+  * {
     font-family: "ClashDisplay";
-    src: url("../font/ClashDisplay-Variable.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
   }
-  font-family: "ClashDisplay", sans-serif;
   .astra-modal-content {
     background: rgba(51, 51, 51, 0.2);
     border: 1px solid;
@@ -82,15 +77,20 @@ const StyledModal = styled(Modal)`
     .colorcaff33 {
       color: #caff33;
     }
+    .astra-col {
+      font-family: "ClashDisplay";
+    }
+    .astra-typography {
+      font-family: "ClashDisplay";
+    }
   }
 
-  // 媒体查询样式
   @media (max-width: 768px) {
     font-size: 12px;
 
     .astra-modal-content {
       padding: 20px 10px;
-
+      background: rgba(51, 51, 51, 0.2);
       .astra-modal-header .modal-title {
         font-size: 18px;
       }
@@ -100,7 +100,7 @@ const StyledModal = styled(Modal)`
   @media (max-width: 575px) {
     .astra-modal-content {
       padding: 15px 8px;
-
+      background: rgba(51, 51, 51, 0.2);
       .astra-modal-header .modal-title {
         font-size: 16px;
       }
@@ -168,7 +168,6 @@ export default function ResultModal({
         footer={null}
         open={resultModalShow}
         onCancel={onCancel}
-        centered
         maskClosable={false}
         mask={false}
         zIndex={998}
@@ -190,7 +189,7 @@ export default function ResultModal({
                 <BridgeDetailItem justify="space-between" align="center">
                   <div>Value</div>
                   <div className="lightning">
-                    {numberWithCommas(requestData?.formatTokenAmt)}LUSD
+                    {numberWithCommas(requestData?.formatTokenAmt)}{" "}LUSD
                   </div>
                 </BridgeDetailItem>
               </BridgeDetail>

package/src/comps/ToLightning.jsx

@@ -133,15 +133,15 @@ function ToLightning({
     token: currentAssetPair?.token?.address,
     enabled: !!currentAssetPair?.token?.address && !!account?.address,
     formatUnits: currentAssetPair?.token?.decimal,
+    scopeKey: "token",
   });
 
   const mainnetBalanceRet = useBalance({
     address: account?.address,
     enabled: !!account?.address,
     formatUnits: "ether",
+    scopeKey: "mainnet",
   });
-  //console.log('mainnetBalanceRet', mainnetBalanceRet)
-  // console.log('tokenRet', tokenBalanceRet);
 
   const serviceFee = useMemo(() => {
     const recieveBaseFee = reserveInfo?.toAssetBaseFee || 0;
@@ -175,10 +175,39 @@ function ToLightning({
     [allAssetPairs, setCurrentAssetPair]
   );
 
+  const onCheckBalance = useCallback(async () => {
+    const tokenBalance = tokenBalanceRet?.data?.value || 0;
+    const mainetBalance = mainnetBalanceRet?.data?.value || 0;
+   
+    if (
+      !Number(mainetBalance) ||
+      Number(mainetBalance) < Number(reserveInfo?.toAssetBaseFee)
+    ) {
+      throw new Error("Insufficient balance to pay service fee.");
+    }
+    if (Number(tokenBalance) < Number(tokenAmt)) {
+      throw new Error("Insufficient available balance.");
+    }
+    if (Number(assetAmt) > Number(reserveInfo?.maxAsset)) {
+      throw new Error(
+        `The maximum amount is ${formatAssetByDecimal(
+          reserveInfo?.maxAsset,
+          currentAssetPair.asset.decimal
+        )} ${currentAssetPair?.asset?.symbol}.`
+      );
+    }
+    if (Number(formatAssetAmt) < reserveInfo.min) {
+      throw new Error(
+        `The minimum amount is ${reserveInfo?.min} ${currentAssetPair?.asset?.symbol}.`
+      );
+    }
+  }, [assetAmt, currentAssetPair, formatAssetAmt, mainnetBalanceRet?.data?.value, reserveInfo, tokenAmt, tokenBalanceRet?.data?.value]);
+  
   const handleApprove = useCallback(
     async (approveAmt) => {
       try {
         setApproveLoading(true);
+        await onCheckBalance();
         const approveTx = await onApprove(approveAmt);
         if (approveTx) {
           messageApi.open({
@@ -198,30 +227,9 @@ function ToLightning({
         onReloadAllowance();
       }
     },
-    [messageApi, onApprove, onReloadAllowance]
+    [messageApi, onApprove, onCheckBalance, onReloadAllowance]
   );
 
-  const btnDisabled = useMemo(() => {
-    if (filterdAssetPairs?.length === 0) {
-      return true;
-    }
-    const tokenBalance = tokenBalanceRet?.data?.value || 0;
-    const mainetBalance = mainnetBalanceRet?.data?.value || 0;
-    if (
-      !Number(tokenBalance) ||
-      Number(tokenBalance) < Number(tokenAmt) ||
-      Number(mainetBalance) < Number(reserveInfo?.toAssetBaseFee)
-    ) {
-      return true;
-    }
-  }, [
-    filterdAssetPairs?.length,
-    mainnetBalanceRet?.data?.value,
-    reserveInfo?.toAssetBaseFee,
-    tokenAmt,
-    tokenBalanceRet?.data?.value,
-  ]);
-
   const memoBtn = useMemo(() => {
     if (!account?.address) {
       return <ConnectButton />;
@@ -230,7 +238,7 @@ function ToLightning({
       return (
         <AstraButton
           type="primary"
-          disabled={btnDisabled}
+          // disabled={btnDisabled}
           onClick={() => {
             handleApprove(Number.MAX_SAFE_INTEGER);
           }}
@@ -244,7 +252,7 @@ function ToLightning({
       return (
         <AstraButton
           type="primary"
-          disabled={btnDisabled}
+          // disabled={btnDisabled}
           loading={submitLoading}
           htmlType="submit"
         >
@@ -259,7 +267,6 @@ function ToLightning({
     account?.address,
     allowanceRet,
     approveLoading,
-    btnDisabled,
     handleApprove,
     submitLoading,
     tokenAmt,
@@ -271,6 +278,7 @@ function ToLightning({
         return;
       }
       setSubmitLoading(true);
+      await onCheckBalance();
       if (
         BigInt(assetAmt) > BigInt(reserveInfo?.maxAsset) ||
         Number(formatAssetAmt) < reserveInfo.min
@@ -307,7 +315,6 @@ function ToLightning({
         fee: reserveInfo?.toAssetBaseFee,
         signature: "0x",
       };
-      console.log("depositArgs", depositArgs);
       const tx = await onDeposit(depositArgs);
       if (tx) {
         const request = {
@@ -336,26 +343,7 @@ function ToLightning({
     } finally {
       setSubmitLoading(false);
     }
-  }, [
-    account.address,
-    assetAmt,
-    reserveInfo,
-    formatAssetAmt,
-    onReloadAllowance,
-    allowanceRet,
-    tokenAmt,
-    hashlock,
-    currentAssetPair,
-    onDeposit,
-    onApprove,
-    messageApi,
-    targetNetwork.id,
-    receiveArgs?.invoice,
-    setResultModalRequest,
-    formatTokenAmt,
-    setAstraModalShow,
-    setResultModalShow,
-  ]);
+  }, [account.address, onCheckBalance, assetAmt, reserveInfo, formatAssetAmt, onReloadAllowance, allowanceRet, tokenAmt, hashlock, currentAssetPair, onDeposit, onApprove, messageApi, targetNetwork.id, receiveArgs?.invoice, setResultModalRequest, formatTokenAmt, setAstraModalShow, setResultModalShow]);
 
   const onClearAuth = useCallback(async () => {
     await handleApprove(0);

package/src/comps/ToToken.jsx

@@ -120,19 +120,46 @@ function ToToken({ messageApi }) {
     formatUnits: "ether",
   });
 
-  const btnDisabled = useMemo(() => {
-    if (filterdAssetPairs?.length === 0) {
-      return true;
-    }
+  // const btnDisabled = useMemo(() => {
+  //   if (filterdAssetPairs?.length === 0) {
+  //     return true;
+  //   }
+  //   const mainetBalance = mainnetBalanceRet?.data?.value || 0;
+  //   if (Number(mainetBalance) < Number(reserveInfo?.toTokenBaseFee)) {
+  //     return true;
+  //   }
+  // }, [
+  //   filterdAssetPairs?.length,
+  //   mainnetBalanceRet?.data?.value,
+  //   reserveInfo?.toTokenBaseFee,
+  // ]);
+
+  const onCheckBalance = useCallback(async ()=>{
     const mainetBalance = mainnetBalanceRet?.data?.value || 0;
+    const max = Math.min(
+      Number(
+        formatAssetByDecimal(
+          reserveInfo?.maxToken,
+          currentAssetPair.token.decimal
+        )
+      ),
+      reserveInfo.max
+    );
     if (Number(mainetBalance) < Number(reserveInfo?.toTokenBaseFee)) {
-      return true;
+       throw new Error('Insufficient balance to pay service fee.')
     }
-  }, [
-    filterdAssetPairs?.length,
-    mainnetBalanceRet?.data?.value,
-    reserveInfo?.toTokenBaseFee,
-  ]);
+    
+    if(sendArgs.amount < reserveInfo.min){
+      throw new Error(`The minimum amount is ${reserveInfo.min} ${currentAssetPair?.asset?.symbol}`)
+    }
+    if (sendArgs.amount > max) {
+      throw new Error(
+        `The maximum amount is ${max} ${currentAssetPair?.asset?.symbol}`
+      );
+    }
+
+  },[currentAssetPair, mainnetBalanceRet?.data?.value, reserveInfo?.max, reserveInfo?.maxToken, reserveInfo?.min, reserveInfo?.toTokenBaseFee, sendArgs.amount])
+
 
   const onResetInvoice = useCallback(() => {
     setIsInvoiceExpired(false);
@@ -154,22 +181,8 @@ function ToToken({ messageApi }) {
     try {
       setSubmitLoading(true);
       onResetInvoice();
-      const max = Math.min(
-        Number(
-          formatAssetByDecimal(
-            reserveInfo?.maxToken,
-            currentAssetPair.token.decimal
-          )
-        ),
-        reserveInfo.max
-      );
-
-      if (sendArgs.amount > max || sendArgs.amount < reserveInfo.min) {
-        throw new Error(
-          `Amount should be between ${reserveInfo.min} and ${max}`
-        );
-      }
-
+      await onCheckBalance();
+      
       const retGetSignature = await getSignature({
         chainId: targetNetwork.id,
         amount: sendArgs.amount,
@@ -214,14 +227,7 @@ function ToToken({ messageApi }) {
             hashlock: signatureRes.hashlock,
             depositTx: tx,
           };
-          // setResultModalRequest({
-          //   txHash: tx,
-          //   timestamp: Date.now(),
-          //   formatTokenAmt: sendArgs.amount,
-          //   request
-          // })
-          // setAstraModalShow(false)
-          // setResultModalShow(true);
+       
           const retToEVM = await toEVM(request);
           if (retToEVM.code === 200) {
             messageApi.success("Submit success.");
@@ -241,17 +247,7 @@ function ToToken({ messageApi }) {
     } finally {
       setSubmitLoading(false);
     }
-  }, [
-    onResetInvoice,
-    reserveInfo,
-    currentAssetPair,
-    sendArgs.amount,
-    sendArgs.waitConfirm,
-    targetNetwork.id,
-    account.address,
-    onDeposit,
-    messageApi,
-  ]);
+  }, [onResetInvoice, onCheckBalance, targetNetwork?.id, sendArgs?.amount, sendArgs?.waitConfirm, currentAssetPair?.pairName, currentAssetPair?.asset?.assetId, account?.address, onDeposit, messageApi]);
 
   const btn = useMemo(() => {
     if (!account?.address) {
@@ -265,11 +261,12 @@ function ToToken({ messageApi }) {
       ) : (
         <SubmitBtn
           type="primary"
-          disabled={isInvoiceExpired || btnDisabled}
+          disabled={isInvoiceExpired}
           loading={payInvoiceLoading}
           onClick={async () => {
             setPayInvoiceLoading(true);
-            await onAstraInvoice(sendInvoice, tx)
+            const txUrl = `${targetNetwork?.blockExplorers?.default.url}/tx/${tx}`
+            await onAstraInvoice(sendInvoice, tx, txUrl)
               .catch((e) => {
                 messageApi.error(e.message);
                 setPayInvoiceLoading(false);
@@ -291,25 +288,14 @@ function ToToken({ messageApi }) {
           type="primary"
           htmlType="submit"
           loading={submitLoading}
-          disabled={isInvoiceExpired || btnDisabled}
+          disabled={isInvoiceExpired}
         >
           <span>{submitLoading ? "Waiting for Confirmation" : "Submit"}</span>
           <img src={IconArrowRight} alt="" />
         </SubmitBtn>
       );
     }
-  }, [
-    account?.address,
-    btnDisabled,
-    isInvoiceExpired,
-    messageApi,
-    onAstraInvoice,
-    payInvoiceLoading,
-    sendInvoice,
-    setAstraModalShow,
-    submitLoading,
-    tx,
-  ]);
+  }, [account?.address, isInvoiceExpired, messageApi, onAstraInvoice, payInvoiceLoading, sendInvoice, setAstraModalShow, submitLoading, targetNetwork?.blockExplorers?.default.url, tx]);
 
   const onExpired = useCallback(() => {
     setIsInvoiceExpired(true);