astra-modal-test 1.0.5 → 1.0.7

package/src/comps/ToLightning.jsx

@@ -4,7 +4,7 @@ import useStore from "../store";
 import { Form, Button, Select, Flex, Spin } from "antd";
 import { useCallback, useEffect, useState, useMemo } from "react";
 import AstraImage from "./AstraImage";
-import { useAccount, useBalance } from "wagmi";
+import { useAccount, useBalance, useSwitchChain } from "wagmi";
 import { DoubleRightOutlined } from "@ant-design/icons";
 import useParseInvoice from "../hooks/useParseInvoice";
 import EllipsisMiddle from "./EllipsisMiddle";
@@ -12,10 +12,14 @@ import { useBridgeContract } from "../hooks/useContract";
 import { useGetReserveInfo } from "../hooks/useLspApi";
 import ConnectButton from "./ConnectButton";
 import Decimal from "decimal.js";
-import { formatAssetByDecimal } from "../utils";
+import { useGetMinAndMax } from "../hooks/useGetMinAndMax";
+import { numberWithCommas, getParsedError } from "../utils";
 import AstraNetwork from "./AstraNetwork";
 import IconTip from "../assets/tip.svg";
 import IconArrowRight from "../assets/arrow-right.svg";
+import { AvalibleBalance } from "./CommonStyle";
+import { toLightning, bridgeIntervalStatus } from "../apis/lspApi";
+
 const WrapperToLightning = styled.div``;
 
 const FormItem = styled(Form.Item)``;
@@ -99,6 +103,7 @@ const AstraButton = styled(Button)`
   font-size: 16px;
   line-height: 42px;
 `;
+
 function ToLightning({
   messageApi,
   setResultModalShow,
@@ -111,9 +116,11 @@ function ToLightning({
     setCurrentAssetPair,
     currentAssetPair,
     setAstraModalShow,
+    astraModalShow,
   } = useStore();
 
   const account = useAccount();
+  const { switchChain } = useSwitchChain();
   const [form] = Form.useForm();
   const [submitLoading, setSubmitLoading] = useState(false);
   const [approveLoading, setApproveLoading] = useState(false);
@@ -127,34 +134,36 @@ function ToLightning({
     targetNetwork,
     currentAssetPair
   );
+  const { min, max, unitName } = useGetMinAndMax("evmToLightning", reserveInfo);
 
   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,
     formatAssetAmt,
     tokenAmt,
     formatTokenAmt,
     hashlock,
     parseInvoiceLoading,
+    isExpired,
   } = useParseInvoice(receiveArgs?.invoice);
 
   const {
@@ -165,6 +174,16 @@ function ToLightning({
     onDeposit,
   } = useBridgeContract(account);
 
+  const serviceFee = useMemo(() => {
+    if (!reserveInfo?.toAssetBaseFee) {
+      return 0;
+    }
+    return new Decimal(reserveInfo?.toAssetBaseFee.toString())
+      .div(10 ** 18)
+      .toFixed(8)
+      .replace(/\.?0+$/, "");
+  }, [reserveInfo?.toAssetBaseFee]);
+
   const onAssetPairChange = useCallback(
     (pairId) => {
       const selectedPair = pairId
@@ -178,31 +197,41 @@ function ToLightning({
   const onCheckBalance = useCallback(async () => {
     const tokenBalance = tokenBalanceRet?.data?.value || 0;
     const mainetBalance = mainnetBalanceRet?.data?.value || 0;
-   
+
     if (
-      !Number(mainetBalance) ||
-      Number(mainetBalance) < Number(reserveInfo?.toAssetBaseFee)
+      new Decimal(mainetBalance.toString()).lt(
+        new Decimal(reserveInfo?.toAssetBaseFee?.toString())
+      )
     ) {
       throw new Error("Insufficient balance to pay service fee.");
     }
-    if (Number(tokenBalance) < Number(tokenAmt)) {
+    if (
+      new Decimal(tokenBalance.toString()).lt(new Decimal(tokenAmt.toString()))
+    ) {
       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 (
+      new Decimal(formatAssetAmt.toString()).gt(new Decimal(max.toString()))
+    ) {
+      throw new Error(`The maximum amount is ${max} ${unitName}.`);
     }
-    if (Number(formatAssetAmt) < reserveInfo.min) {
-      throw new Error(
-        `The minimum amount is ${reserveInfo?.min} ${currentAssetPair?.asset?.symbol}.`
-      );
+    if (
+      new Decimal(formatAssetAmt.toString()).lt(new Decimal(min.toString()))
+    ) {
+      throw new Error(`The minimum amount is ${min} ${unitName}.`);
     }
-  }, [assetAmt, currentAssetPair, formatAssetAmt, mainnetBalanceRet?.data?.value, reserveInfo, tokenAmt, tokenBalanceRet?.data?.value]);
-  
+  }, [
+    formatAssetAmt,
+    mainnetBalanceRet?.data?.value,
+    max,
+    min,
+    reserveInfo?.toAssetBaseFee,
+    tokenAmt,
+    tokenBalanceRet?.data?.value,
+    unitName,
+  ]);
+
   const handleApprove = useCallback(
     async (approveAmt) => {
       try {
@@ -217,17 +246,39 @@ function ToLightning({
         }
       } catch (e) {
         const error = e.message;
+
         if (error.includes("User rejected")) {
           messageApi.error("User reject the request.");
         } else {
-          messageApi.error(e.message);
+          if (error.includes("does not match the target chain")) {
+            switchChain(
+              { chainId: targetNetwork.id },
+              {
+                onSuccess: () => {
+                  messageApi.success(
+                    `Switch chain ${targetNetwork.name} success, please try again.`
+                  );
+                },
+              }
+            );
+          } else {
+            messageApi.error(e.message);
+          }
         }
       } finally {
         setApproveLoading(false);
         onReloadAllowance();
       }
     },
-    [messageApi, onApprove, onCheckBalance, onReloadAllowance]
+    [
+      messageApi,
+      onApprove,
+      onCheckBalance,
+      onReloadAllowance,
+      switchChain,
+      targetNetwork.id,
+      targetNetwork.name,
+    ]
   );
 
   const memoBtn = useMemo(() => {
@@ -240,7 +291,7 @@ function ToLightning({
           type="primary"
           // disabled={btnDisabled}
           onClick={() => {
-            handleApprove(Number.MAX_SAFE_INTEGER);
+            handleApprove(tokenAmt);
           }}
           loading={approveLoading}
         >
@@ -272,30 +323,59 @@ function ToLightning({
     tokenAmt,
   ]);
 
+  // const fixedChannelBalance = useMemo(() => {
+  //   if (reserveInfo) {
+  //     return balanceToFixed(
+  //       reserveInfo.maxAsset,
+  //       currentAssetPair?.asset?.decimal
+  //     );
+  //   }
+  //   return 0;
+  // }, [currentAssetPair?.asset?.decimal, reserveInfo]);
+
   const onFinish = useCallback(async () => {
     try {
       if (!account?.address) {
         return;
       }
+      if (isExpired) {
+        throw new Error("The invoice has expired.");
+      }
       setSubmitLoading(true);
       await onCheckBalance();
-      if (
-        BigInt(assetAmt) > BigInt(reserveInfo?.maxAsset) ||
-        Number(formatAssetAmt) < reserveInfo.min
-      ) {
+      const bridgeIntervalRet = await bridgeIntervalStatus({
+        address: account?.address,
+      });
+      if (bridgeIntervalRet.code !== 200) {
+        throw new Error(bridgeIntervalRet.data);
+      }
+      const bridgeIntervalData = bridgeIntervalRet.data;
+      if (!bridgeIntervalData?.isAllowed) {
+        const remainingMinutes = Math.ceil(
+          bridgeIntervalData.remainingSeconds / 60
+        );
         throw new Error(
-          `Amount should be between ${
-            reserveInfo?.min
-          } and ${formatAssetByDecimal(
-            reserveInfo?.maxAsset,
-            currentAssetPair.asset.decimal
-          )}`
+          `Bridge interval not met. Please wait ${remainingMinutes} more minute(s).`
         );
       }
+      const {
+        effectiveSatsBalance,
+        satsCapacity,
+        localAssetbalance,
+        localAssetCapacity,
+      } = reserveInfo;
+
+      if (
+        effectiveSatsBalance < satsCapacity * 0.1 ||
+        localAssetbalance < localAssetCapacity * 0.1
+      ) {
+        throw new Error("Channel not enough balance.");
+      }
+
       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",
@@ -304,26 +384,37 @@ function ToLightning({
         }
       }
 
+      const decodedInvoice = window.lightningPayReq.decode(
+        receiveArgs?.invoice
+      );
+      const lspNodePubKey = decodedInvoice?.payeeNodeKey;
+
       const depositArgs = {
         hashlock,
         fromAddr: account.address,
         toAddr: reserveInfo.lspAddress,
-        tokenAddr: currentAssetPair.token.address,
+        pairId: currentAssetPair.pairId,
         amount: tokenAmt,
-        timeLock: reserveInfo?.deltaSecond,
+        timeLock: reserveInfo?.evm2LightningDeltaSecond,
         toLightning: true,
         fee: reserveInfo?.toAssetBaseFee,
         signature: "0x",
+        nodePubkey: lspNodePubKey,
       };
+
       const tx = await onDeposit(depositArgs);
+      const request = {
+        pairId: currentAssetPair.pairId,
+        chainId: targetNetwork.id,
+        lnInvoice: receiveArgs?.invoice,
+        amount: tokenAmt,
+        depositTx: tx,
+      };
+      const retToEVM = await toLightning(request);
+      if (retToEVM.code !== 200) {
+        throw new Error("Payment failed");
+      }
       if (tx) {
-        const request = {
-          assetId: currentAssetPair.asset.assetId,
-          chainId: targetNetwork.id,
-          lnInvoice: receiveArgs?.invoice,
-          amount: tokenAmt,
-          depositTx: tx,
-        };
         setResultModalRequest({
           txHash: tx,
           timestamp: Date.now(),
@@ -334,16 +425,46 @@ function ToLightning({
         setResultModalShow(true);
       }
     } catch (e) {
-      const error = e.message;
-      if (error.includes("User rejected")) {
-        messageApi.error("User reject the request.");
+      const error = getParsedError(e);
+      if (error.includes("does not match the target chain")) {
+        switchChain(
+          { chainId: targetNetwork.id },
+          {
+            onSuccess: () => {
+              messageApi.success(
+                `Switch chain ${targetNetwork.name} success, please try again.`
+              );
+            },
+          }
+        );
       } else {
-        messageApi.error(e.message);
+        messageApi.error(error);
       }
     } 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,
+    isExpired,
+    onCheckBalance,
+    reserveInfo,
+    onReloadAllowance,
+    allowanceRet,
+    tokenAmt,
+    receiveArgs?.invoice,
+    hashlock,
+    currentAssetPair,
+    targetNetwork.id,
+    targetNetwork.name,
+    onDeposit,
+    onApprove,
+    messageApi,
+    setResultModalRequest,
+    formatTokenAmt,
+    setAstraModalShow,
+    setResultModalShow,
+    switchChain,
+  ]);
 
   const onClearAuth = useCallback(async () => {
     await handleApprove(0);
@@ -364,12 +485,6 @@ function ToLightning({
             name="basic"
             form={form}
             colon={false}
-            // labelCol={{
-            //   span: 8,
-            // }}
-            // wrapperCol={{
-            //   span: 16,
-            // }}
             style={{
               width: "100%",
             }}
@@ -383,34 +498,46 @@ function ToLightning({
             <AstraSendingReceived>
               <FormItem label="Sending">
                 <Flex justify="end" align="center" gap="5px">
-                  <FormItem name="sending" noStyle>
-                    <AstraSelect
-                      variant="borderless"
-                      options={filterdAssetPairs.map((pair) => ({
-                        value: pair.pairId,
-                        label: (
-                          <AstraImage
-                            name={pair.token.name}
-                            width="22px"
-                            height="22px"
-                          />
-                        ),
-                      }))}
-                      onChange={onAssetPairChange}
-                    ></AstraSelect>
-                  </FormItem>
+                  {filterdAssetPairs?.length > 0 && (
+                    <FormItem name="sending" noStyle>
+                      <AstraSelect
+                        variant="borderless"
+                        options={filterdAssetPairs.map((pair) => ({
+                          value: pair.pairId,
+                          label: (
+                            <AstraImage
+                              name={pair.token.name}
+                              width="22px"
+                              height="22px"
+                            />
+                          ),
+                        }))}
+                        onChange={onAssetPairChange}
+                      ></AstraSelect>
+                    </FormItem>
+                  )}
                   <span className="fw500">{formatTokenAmt}</span>
                   <span className="fw500">{currentAssetPair?.token?.name}</span>
                 </Flex>
                 <BalanceFlex justify="end" align="center" gap="5px">
                   <span className="available_token_balance">
-                    Available: {tokenBalanceRet?.data?.formatted || 0}{" "}
+                    Available:{" "}
+                    <AvalibleBalance>
+                      {tokenBalanceRet?.data?.formatted
+                        ? numberWithCommas(
+                            new Decimal(
+                              tokenBalanceRet?.data?.formatted
+                            ).toFixed(4, Decimal.ROUND_DOWN)
+                          )
+                        : 0}
+                    </AvalibleBalance>
+                    &nbsp;
                     {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>