astra-modal-test 1.0.4 → 1.0.6

package/src/comps/AstraNetwork.jsx

@@ -1,15 +1,76 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import { Select, Form, Flex, Spin, Space } from "antd";
-import { useAccount, useChains, useChainId, useSwitchChain, useDisconnect } from "wagmi";
+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 { DisconnectOutlined } from "@ant-design/icons";
 import Decimal from "decimal.js";
+import { AvalibleBalance } from "./CommonStyle";
+import { numberWithCommas } from "../utils";
+const GlobalStyle = createGlobalStyle`
+  .popup-astra-select-content {
+    border-radius: 5px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    width: 200px;
+
+    .label-box {
+      display: flex;
+      
+      align-items: center;
+      justify-content: space-between;
+      .label-flex{
+        display: flex;
+        gap: 3px;
+        align-items: center;
+      }
+      .label-soon {
+        border-radius: 10px;
+        background: rgba(202, 255, 51, 0.1);
+        color: #caff33;
+        padding: 0px 10px 2px;
+        font-size: 12px;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+`;
 const AstraSelect = styled(Select)`
-  width: 60px !important;
+  // width: 60px !important;
   .astra-select-selector {
     padding: 0 0px !important;
+    .label-box {
+      display: flex;
+      align-items: center;
+      .label-flex {
+        display: flex;
+        gap: 3px;
+        align-items: center;
+      }
+    }
+  }
+  @media (max-width: 768px) {
+    .astra-select-selector {
+      padding: 0 0px !important;
+      .label-box {
+        display: flex;
+        align-items: center;
+        .label-flex {
+          font-size: 13px;
+          display: flex;
+          gap: 3px;
+          align-items: center;
+        }
+      }
+    }
   }
   .astra-select-selection-item {
     display: flex !important;
@@ -18,6 +79,7 @@ const AstraSelect = styled(Select)`
   }
   .astra-select-arrow {
     color: #fff;
+    right: 3px;
   }
 `;
 const AstraAccount = styled.div`
@@ -39,7 +101,7 @@ const StyledDisconnectOutlined = styled(DisconnectOutlined)`
   color: rgba(202, 255, 51, 1);
   cursor: pointer;
   &:hover {
-    color:red;
+    color: red;
   }
 `;
 const FormItemPair = styled(Form.Item)`
@@ -86,47 +148,107 @@ export default function AstraNetwork({ messageApi, balance }) {
 
   const memoBalance = useMemo(() => {
     if (!balance?.formatted) return 0;
-    return new Decimal(balance?.formatted).toFixed(4);
+    return numberWithCommas(new Decimal(balance?.formatted).toFixed(4));
   }, [balance?.formatted]);
+  const newworkOptions = useMemo(() => {
+    const openChains = chains.map((chain) => ({
+      label: (
+        <div className="label-box">
+          <div className="label-flex">
+            <AstraImg name={chain.name} width="22px" />
+            <div className="label-name">{chain.name}</div>
+          </div>
+        </div>
+      ),
+      value: chain.id,
+    }));
+    const soon = [
+      {
+        label: (
+          <div className="label-box">
+            <div className="label-flex">
+              <AstraImg name="Arbitrum" width="22px" />
+              <div className="label-name">Arbitrum</div>
+            </div>
+            <div className="label-soon">soon</div>
+          </div>
+        ),
+        value: "Arbitrum",
+        disabled: true,
+      },
+      {
+        label: (
+          <div className="label-box">
+            <div className="label-flex">
+              <AstraImg name="Solana" width="22px" />
+              <div className="label-name">Solana</div>
+            </div>
+            <div className="label-soon">soon</div>
+          </div>
+        ),
+        value: "Solana",
+        disabled: true,
+      },
+      {
+        label: (
+          <div className="label-box">
+            <div className="label-flex">
+              <AstraImg name="Polygon" width="22px" />
+              <div className="label-name">Polygon</div>
+            </div>
+            <div className="label-soon">soon</div>
+          </div>
+        ),
+        value: "Polygon",
+        disabled: true,
+      },
+    ];
+    return openChains.concat(soon);
+  }, [chains]);
   return (
-    <FormItemPair
-      label={
-        <AstraSelect
-          variant="borderless"
-          value={chainId}
-          options={chains.map((chain) => ({
-            label: <AstraImg name={chain.name} width="22px" />,
-            value: chain.id,
-          }))}
-          onChange={onNetWorkChange}
-        />
-      }
-    >
-      <Spin spinning={loading}>
-        <Flex justify="end">
-          <AstraAccount>
-            {account?.address ? (
-              <>
-                <Space>
-                  <EllipsisMiddle suffixCount={8}>
-                    {account?.address}
-                  </EllipsisMiddle>
-                  <StyledDisconnectOutlined onClick={() => disconnect()} />
-                </Space>
-              </>
-
-
-            ) : (
-              "Connect Wallet"
-            )}
-          </AstraAccount>
-        </Flex>
-        <BalanceFlex justify="end">
-          <span className="available_token_balance">
-            Available: {memoBalance} {balance?.symbol}
-          </span>
-        </BalanceFlex>
-      </Spin>
-    </FormItemPair>
+    <>
+      <GlobalStyle />
+      <FormItemPair
+        label={
+          <AstraSelect
+            variant="borderless"
+            value={chainId}
+            dropdownStyle={{
+              width: "200px",
+            }}
+            popupClassName="popup-astra-select-content"
+            options={newworkOptions}
+            onChange={onNetWorkChange}
+          />
+        }
+      >
+        <Spin spinning={loading}>
+          <Flex justify="end">
+            <AstraAccount>
+              {account?.address ? (
+                <>
+                  <Space>
+                    <EllipsisMiddle suffixCount={8}>
+                      {account?.address}
+                    </EllipsisMiddle>
+                    <StyledDisconnectOutlined onClick={() => disconnect()} />
+                  </Space>
+                </>
+              ) : (
+                "Connect Wallet"
+              )}
+            </AstraAccount>
+          </Flex>
+          <BalanceFlex justify="end">
+            <span className="available_token_balance">
+              Available:{" "}
+              <AvalibleBalance>
+                {memoBalance} {balance?.symbol}
+              </AvalibleBalance>
+            </span>
+          </BalanceFlex>
+        </Spin>
+      </FormItemPair>
+    </>
   );
 }

package/src/comps/CommonStyle.jsx

@@ -0,0 +1,4 @@
+import styled from "styled-components";
+export const AvalibleBalance = styled.span`
+  padding-left: 5px;
+`;

package/src/comps/ResultModal.jsx

@@ -90,7 +90,7 @@ const StyledModal = styled(Modal)`
 
     .astra-modal-content {
       padding: 20px 10px;
-      background: rgba(51, 51, 51, 1);
+      background: rgba(24, 30, 35, 1);
       .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, 1);
+      background: rgba(24, 30, 35, 1);
       .astra-modal-header .modal-title {
         font-size: 16px;
       }
@@ -158,8 +158,8 @@ export default function ResultModal({
             <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>
           </ModalTitle>
@@ -206,7 +206,7 @@ export default function ResultModal({
                     target="_blank"
                     rel="noreferrer"
                   >
-                    View on explore
+                    View on explorer
                   </a>
                 </Flex>
                 <Flex
@@ -292,7 +292,7 @@ export default function ResultModal({
                     target="_blank"
                     rel="noreferrer"
                   >
-                    View on explore
+                    View on explorer
                   </a>
                 </Flex>
               </BridgeDetailShow>

package/src/comps/ToLightning.jsx

@@ -12,10 +12,11 @@ import { useBridgeContract } from "../hooks/useContract";
 import { useGetReserveInfo } from "../hooks/useLspApi";
 import ConnectButton from "./ConnectButton";
 import Decimal from "decimal.js";
-import { formatAssetByDecimal } from "../utils";
+import { formatAssetByDecimal,numberWithCommas } from "../utils";
 import AstraNetwork from "./AstraNetwork";
 import IconTip from "../assets/tip.svg";
 import IconArrowRight from "../assets/arrow-right.svg";
+import {AvalibleBalance} from './CommonStyle'
 const WrapperToLightning = styled.div``;
 
 const FormItem = styled(Form.Item)``;
@@ -99,6 +100,7 @@ const AstraButton = styled(Button)`
   font-size: 16px;
   line-height: 42px;
 `;
+
 function ToLightning({
   messageApi,
   setResultModalShow,
@@ -111,6 +113,7 @@ function ToLightning({
     setCurrentAssetPair,
     currentAssetPair,
     setAstraModalShow,
+    astraModalShow
   } = useStore();
 
   const account = useAccount();
@@ -131,22 +134,23 @@ function ToLightning({
   const tokenBalanceRet = useBalance({
     address: account?.address,
     token: currentAssetPair?.token?.address,
-    enabled: !!currentAssetPair?.token?.address && !!account?.address,
+    query:{
+      enabled: !!currentAssetPair?.token?.address && !!account?.address && astraModalShow,
+    },
     formatUnits: currentAssetPair?.token?.decimal,
     scopeKey: "token",
   });
 
   const mainnetBalanceRet = useBalance({
     address: account?.address,
-    enabled: !!account?.address,
+    query:{
+      enabled: !!account?.address && astraModalShow,
+    },
     formatUnits: "ether",
     scopeKey: "mainnet",
   });
 
-  const serviceFee = useMemo(() => {
-    const recieveBaseFee = reserveInfo?.toAssetBaseFee || 0;
-    return new Decimal(recieveBaseFee.toString()).div(10 ** 18).toFixed(4);
-  }, [reserveInfo?.toAssetBaseFee]);
+
 
   const {
     assetAmt,
@@ -159,12 +163,19 @@ function ToLightning({
 
   const {
     allowanceRet,
+    feeRet,
     formatAllowance,
     onReloadAllowance,
     onApprove,
     onDeposit,
   } = useBridgeContract(account);
 
+
+  const serviceFee = useMemo(() => {
+    return feeRet?new Decimal(feeRet.toString()).div(10 ** 18).toFixed(8):0;
+  }, [feeRet]);
+
+
   const onAssetPairChange = useCallback(
     (pairId) => {
       const selectedPair = pairId
@@ -181,7 +192,7 @@ function ToLightning({
    
     if (
       !Number(mainetBalance) ||
-      Number(mainetBalance) < Number(reserveInfo?.toAssetBaseFee)
+      Number(mainetBalance) < Number(feeRet)
     ) {
       throw new Error("Insufficient balance to pay service fee.");
     }
@@ -201,7 +212,7 @@ function ToLightning({
         `The minimum amount is ${reserveInfo?.min} ${currentAssetPair?.asset?.symbol}.`
       );
     }
-  }, [assetAmt, currentAssetPair, formatAssetAmt, mainnetBalanceRet?.data?.value, reserveInfo, tokenAmt, tokenBalanceRet?.data?.value]);
+  }, [assetAmt, currentAssetPair, formatAssetAmt,feeRet, mainnetBalanceRet?.data?.value, reserveInfo, tokenAmt, tokenBalanceRet?.data?.value]);
   
   const handleApprove = useCallback(
     async (approveAmt) => {
@@ -240,7 +251,7 @@ function ToLightning({
           type="primary"
           // disabled={btnDisabled}
           onClick={() => {
-            handleApprove(Number.MAX_SAFE_INTEGER);
+            handleApprove(tokenAmt);
           }}
           loading={approveLoading}
         >
@@ -295,7 +306,7 @@ function ToLightning({
       await onReloadAllowance();
 
       if (Number(allowanceRet) < Number(tokenAmt)) {
-        const approveTx = await onApprove(Number.MAX_SAFE_INTEGER);
+        const approveTx = await onApprove(Number.tokenAmt);
         if (approveTx) {
           messageApi.open({
             type: "success",
@@ -312,7 +323,7 @@ function ToLightning({
         amount: tokenAmt,
         timeLock: reserveInfo?.deltaSecond,
         toLightning: true,
-        fee: reserveInfo?.toAssetBaseFee,
+        fee: feeRet?.toString(),
         signature: "0x",
       };
       const tx = await onDeposit(depositArgs);
@@ -343,7 +354,7 @@ function ToLightning({
     } finally {
       setSubmitLoading(false);
     }
-  }, [account.address, onCheckBalance, assetAmt, reserveInfo, formatAssetAmt, onReloadAllowance, allowanceRet, tokenAmt, hashlock, currentAssetPair, onDeposit, onApprove, messageApi, targetNetwork.id, receiveArgs?.invoice, setResultModalRequest, formatTokenAmt, setAstraModalShow, setResultModalShow]);
+  }, [account.address, onCheckBalance, feeRet,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);
@@ -364,12 +375,7 @@ function ToLightning({
             name="basic"
             form={form}
             colon={false}
-            // labelCol={{
-            //   span: 8,
-            // }}
-            // wrapperCol={{
-            //   span: 16,
-            // }}
+        
             style={{
               width: "100%",
             }}
@@ -404,13 +410,13 @@ function ToLightning({
                 </Flex>
                 <BalanceFlex justify="end" align="center" gap="5px">
                   <span className="available_token_balance">
-                    Available: {tokenBalanceRet?.data?.formatted || 0}{" "}
+                    Available: <AvalibleBalance>{numberWithCommas(tokenBalanceRet?.data?.formatted || 0)}</AvalibleBalance>
                     {tokenBalanceRet?.data?.symbol}
                   </span>
                 </BalanceFlex>
               </FormItem>
 
-              <FormItem label="Received" style={{ marginBottom: 0 }}>
+              <FormItem label="Receiving" style={{ marginBottom: 0 }}>
                 <Flex justify="end" align="center" gap="5px">
                   <AstraImage name={"Lightning"} />
                   <span className="colorcaff33">{formatAssetAmt}</span>

package/src/comps/ToToken.jsx

@@ -12,9 +12,10 @@ import { useGetReserveInfo } from "../hooks/useLspApi";
 import { toEVM, getSignature } from "../apis/lspApi";
 import Decimal from "decimal.js";
 import ConnectButton from "./ConnectButton";
-import { formatAssetByDecimal } from "../utils";
+import { formatAssetByDecimal, sleep } from "../utils";
 import AstraNetwork from "./AstraNetwork";
 import IconArrowRight from "../assets/arrow-right.svg";
+import {AvalibleBalance} from './CommonStyle'
 const { Countdown } = Statistic;
 const WrapperToLightning = styled.div``;
 
@@ -84,6 +85,7 @@ function ToToken({ messageApi }) {
     currentAssetPair,
     onAstraInvoice,
     setAstraModalShow,
+    astraModalShow
   } = useStore();
 
   const [sendInvoice, setSendInvoice] = useState("");
@@ -101,39 +103,30 @@ function ToToken({ messageApi }) {
   }, [allAssetPairs, sendArgs.assetId]);
   //   console.log("🚀 ~ ToLightning ~ allAssetPairs:", allAssetPairs, receiveArgs);
   const { reserveInfo } = useGetReserveInfo(targetNetwork, currentAssetPair);
-
+  const { onDeposit,feeRet } = useBridgeContract(account);
   const serviceFee = useMemo(() => {
-    const recieveBaseFee = reserveInfo?.toTokenBaseFee || 0;
-    return new Decimal(recieveBaseFee.toString()).div(10 ** 18).toFixed(4);
-  }, [reserveInfo?.toTokenBaseFee]);
+    return feeRet?new Decimal(feeRet.toString()).div(10 ** 18).toFixed(8):0;
+  }, [feeRet]);
 
   const tokenBalanceRet = useBalance({
     address: account?.address,
     token: currentAssetPair?.token?.address,
-    enabled: !!currentAssetPair?.token?.address && !!account?.address,
+    query:{
+      enabled: !!currentAssetPair?.token?.address && !!account?.address && astraModalShow,
+    },
     formatUnits: currentAssetPair?.token?.decimal,
+    scopeKey: "tokenBalance",
   });
 
   const mainnetBalanceRet = useBalance({
     address: account?.address,
-    enabled: !!account?.address,
+    query:{
+      enabled: !!account?.address && astraModalShow,
+    },
     formatUnits: "ether",
+    scopeKey: "mainnetBalance",
   });
 
-  // 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(
@@ -145,12 +138,14 @@ function ToToken({ messageApi }) {
       ),
       reserveInfo.max
     );
-    if (Number(mainetBalance) < Number(reserveInfo?.toTokenBaseFee)) {
+    if (Number(mainetBalance) < Number(feeRet)) {
        throw new Error('Insufficient balance to pay service fee.')
     }
-    
-    if(sendArgs.amount < reserveInfo.min){
-      throw new Error(`The minimum amount is ${reserveInfo.min} ${currentAssetPair?.asset?.symbol}`)
+
+    if (sendArgs.amount < reserveInfo.min) {
+      throw new Error(
+        `The minimum amount is ${reserveInfo.min} ${currentAssetPair?.asset?.symbol}`
+      );
     }
     if (sendArgs.amount > max) {
       throw new Error(
@@ -158,7 +153,7 @@ function ToToken({ messageApi }) {
       );
     }
 
-  },[currentAssetPair, mainnetBalanceRet?.data?.value, reserveInfo?.max, reserveInfo?.maxToken, reserveInfo?.min, reserveInfo?.toTokenBaseFee, sendArgs.amount])
+  },[currentAssetPair, mainnetBalanceRet?.data?.value, reserveInfo?.max, reserveInfo?.maxToken, reserveInfo?.min,feeRet,sendArgs.amount])
 
 
   const onResetInvoice = useCallback(() => {
@@ -166,7 +161,7 @@ function ToToken({ messageApi }) {
     setInvoiceExpired(0);
     setSendInvoice("");
   }, []);
-  const { onDeposit } = useBridgeContract(account);
+
 
   const onAssetPairChange = useCallback(
     (pairId) => {
@@ -182,7 +177,7 @@ function ToToken({ messageApi }) {
       setSubmitLoading(true);
       onResetInvoice();
       await onCheckBalance();
-      
+
       const retGetSignature = await getSignature({
         chainId: targetNetwork.id,
         amount: sendArgs.amount,
@@ -201,7 +196,7 @@ function ToToken({ messageApi }) {
       const expiredAt = Date.now() + Number(timeLock) * 1000;
       setInvoiceExpired(expiredAt);
       const signature = signatureRes.signature;
-      const fee = BigInt(signatureRes.fee);
+      const fee = feeRet;
 
       const depositArgs = {
         hashlock,
@@ -227,9 +222,10 @@ function ToToken({ messageApi }) {
             hashlock: signatureRes.hashlock,
             depositTx: tx,
           };
-       
+
           const retToEVM = await toEVM(request);
           if (retToEVM.code === 200) {
+            await sleep(3000);
             messageApi.success("Submit success.");
             setSendInvoice(retToEVM.data.invoice);
           }
@@ -247,7 +243,7 @@ function ToToken({ messageApi }) {
     } finally {
       setSubmitLoading(false);
     }
-  }, [onResetInvoice, onCheckBalance, targetNetwork?.id, sendArgs?.amount, sendArgs?.waitConfirm, currentAssetPair?.pairName, currentAssetPair?.asset?.assetId, account?.address, onDeposit, messageApi]);
+  }, [onResetInvoice, onCheckBalance, targetNetwork?.id, sendArgs?.amount, sendArgs?.waitConfirm, currentAssetPair?.pairName, currentAssetPair?.asset?.assetId, feeRet, account?.address, onDeposit, messageApi]);
 
   const btn = useMemo(() => {
     if (!account?.address) {
@@ -265,7 +261,7 @@ function ToToken({ messageApi }) {
           loading={payInvoiceLoading}
           onClick={async () => {
             setPayInvoiceLoading(true);
-            const txUrl = `${targetNetwork?.blockExplorers?.default.url}/tx/${tx}`
+            const txUrl = `${targetNetwork?.blockExplorers?.default.url}/tx/${tx}`;
             await onAstraInvoice(sendInvoice, tx, txUrl)
               .catch((e) => {
                 messageApi.error(e.message);
@@ -290,12 +286,23 @@ function ToToken({ messageApi }) {
           loading={submitLoading}
           disabled={isInvoiceExpired}
         >
-          <span>{submitLoading ? "Waiting for Confirmation" : "Submit"}</span>
+          <span>{submitLoading ? "Waiting for Confirmation" : "Withdraw"}</span>
           <img src={IconArrowRight} alt="" />
         </SubmitBtn>
       );
     }
-  }, [account?.address, isInvoiceExpired, messageApi, onAstraInvoice, payInvoiceLoading, sendInvoice, setAstraModalShow, submitLoading, targetNetwork?.blockExplorers?.default.url, tx]);
+  }, [
+    account?.address,
+    isInvoiceExpired,
+    messageApi,
+    onAstraInvoice,
+    payInvoiceLoading,
+    sendInvoice,
+    setAstraModalShow,
+    submitLoading,
+    targetNetwork?.blockExplorers?.default.url,
+    tx,
+  ]);
 
   const onExpired = useCallback(() => {
     setIsInvoiceExpired(true);
@@ -313,12 +320,7 @@ function ToToken({ messageApi }) {
         name="basic"
         form={form}
         colon={false}
-        // labelCol={{
-        //   span: 8,
-        // }}
-        // wrapperCol={{
-        //   span: 16,
-        // }}
+    
         style={{
           width: "100%",
         }}
@@ -343,7 +345,7 @@ function ToToken({ messageApi }) {
             </Flex>
           </FormItem>
 
-          <FormItem label="Received" style={{ marginBottom: 0 }}>
+          <FormItem label="Receiving" style={{ marginBottom: 0 }}>
             <Flex justify="end" align="center" gap="5px">
               <FormItem name="received" noStyle className="form-item-pair">
                 <AstraSelect
@@ -366,7 +368,7 @@ function ToToken({ messageApi }) {
             </Flex>
             <BalanceFlex justify="end" align="center" gap="5px">
               <span className="available_token_balance">
-                Available:{tokenBalanceRet?.data?.formatted}{" "}
+                Available:<AvalibleBalance>{tokenBalanceRet?.data?.formatted}</AvalibleBalance>
                 {tokenBalanceRet?.data?.symbol}
               </span>
             </BalanceFlex>