astra-modal-test 1.0.5 → 1.0.7

package/src/comps/ToToken.jsx

@@ -1,20 +1,23 @@
 import { memo } from "react";
 import styled from "styled-components";
 import useStore from "../store";
-import { Form, Button, Select, Flex, QRCode, Statistic } from "antd";
+import { Form, Button, Select, Flex, QRCode, Statistic, 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 EllipsisMiddle from "./EllipsisMiddle";
 import { useBridgeContract } from "../hooks/useContract";
 import { useGetReserveInfo } from "../hooks/useLspApi";
-import { toEVM, getSignature } from "../apis/lspApi";
+import { toEVM, getSignature, bridgeIntervalStatus } from "../apis/lspApi";
+import { useGetMinAndMax } from "../hooks/useGetMinAndMax";
 import Decimal from "decimal.js";
 import ConnectButton from "./ConnectButton";
-import { formatAssetByDecimal } from "../utils";
+import { getParsedError, numberWithCommas } 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 +87,7 @@ function ToToken({ messageApi }) {
     currentAssetPair,
     onAstraInvoice,
     setAstraModalShow,
+    astraModalShow,
   } = useStore();
 
   const [sendInvoice, setSendInvoice] = useState("");
@@ -94,79 +98,84 @@ function ToToken({ messageApi }) {
   const [invoiceExpired, setInvoiceExpired] = useState(0);
   const [isInvoiceExpired, setIsInvoiceExpired] = useState(false);
   const [payInvoiceLoading, setPayInvoiceLoading] = useState(false);
+
+  const { switchChain } = useSwitchChain();
+
   const filterdAssetPairs = useMemo(() => {
     return allAssetPairs.filter((pair) => {
       return pair.asset.assetId === sendArgs.assetId;
     });
   }, [allAssetPairs, sendArgs.assetId]);
   //   console.log("🚀 ~ ToLightning ~ allAssetPairs:", allAssetPairs, receiveArgs);
-  const { reserveInfo } = useGetReserveInfo(targetNetwork, currentAssetPair);
+  const { reserveInfo, loading: reserveInfoLoading } = useGetReserveInfo(
+    targetNetwork,
+    currentAssetPair
+  );
+  const { min, max, unitName } = useGetMinAndMax("lightningToEvm", reserveInfo);
+  const { onDeposit } = useBridgeContract(account);
 
   const serviceFee = useMemo(() => {
-    const recieveBaseFee = reserveInfo?.toTokenBaseFee || 0;
-    return new Decimal(recieveBaseFee.toString()).div(10 ** 18).toFixed(4);
-  }, [reserveInfo?.toTokenBaseFee]);
+    if (!reserveInfo?.toAssetBaseFee) {
+      return 0;
+    }
+    return new Decimal(reserveInfo?.toAssetBaseFee.toString())
+      .div(10 ** 18)
+      .toFixed(8)
+      .replace(/\.?0+$/, "");
+  }, [reserveInfo?.toAssetBaseFee]);
 
   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",
   });
 
-  // 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 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)) {
-       throw new Error('Insufficient balance to pay service fee.')
+
+    if (
+      new Decimal(mainetBalance.toString()).lt(
+        new Decimal(reserveInfo?.toAssetBaseFee?.toString())
+      )
+    ) {
+      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 (Number(sendArgs.amount) < Number(min)) {
+      throw new Error(`The minimum amount is ${min} ${unitName}`);
     }
-    if (sendArgs.amount > max) {
-      throw new Error(
-        `The maximum amount is ${max} ${currentAssetPair?.asset?.symbol}`
-      );
+    if (Number(sendArgs.amount) > Number(max)) {
+      throw new Error(`The maximum amount is ${max} ${unitName}`);
     }
-
-  },[currentAssetPair, mainnetBalanceRet?.data?.value, reserveInfo?.max, reserveInfo?.maxToken, reserveInfo?.min, reserveInfo?.toTokenBaseFee, sendArgs.amount])
-
+  }, [
+    mainnetBalanceRet?.data?.value,
+    reserveInfo?.toAssetBaseFee,
+    sendArgs?.amount,
+    min,
+    max,
+    unitName,
+  ]);
 
   const onResetInvoice = useCallback(() => {
     setIsInvoiceExpired(false);
     setInvoiceExpired(0);
     setSendInvoice("");
   }, []);
-  const { onDeposit } = useBridgeContract(account);
 
   const onAssetPairChange = useCallback(
     (pairId) => {
@@ -175,18 +184,34 @@ function ToToken({ messageApi }) {
         : null;
       setCurrentAssetPair(selectedPair);
     },
-    [allAssetPairs, setCurrentAssetPair]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [allAssetPairs]
   );
+
   const onFinish = useCallback(async () => {
     try {
       setSubmitLoading(true);
       onResetInvoice();
       await onCheckBalance();
-      
+      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(
+          `Bridge interval not met. Please wait ${remainingMinutes} more minute(s).`
+        );
+      }
       const retGetSignature = await getSignature({
         chainId: targetNetwork.id,
         amount: sendArgs.amount,
-        pairName: currentAssetPair?.pairName,
+        pairId: currentAssetPair?.pairId,
       });
       if (retGetSignature?.code !== 200) {
         throw new Error(retGetSignature?.msg);
@@ -195,59 +220,74 @@ function ToToken({ messageApi }) {
       const hashlock = signatureRes.hashlock;
       const fromAddr = signatureRes.lspAddress;
 
-      const tokenAddr = signatureRes.tokenAddress;
+      const pairId = signatureRes.pairId;
       const amount = BigInt(signatureRes.amtInContract);
       const timeLock = BigInt(signatureRes.deltaSecond);
       const expiredAt = Date.now() + Number(timeLock) * 1000;
+      const lspNodePubKey = signatureRes.lspNodePubKey;
       setInvoiceExpired(expiredAt);
       const signature = signatureRes.signature;
-      const fee = BigInt(signatureRes.fee);
+      const fee = signatureRes.fee;
 
       const depositArgs = {
         hashlock,
         fromAddr,
         toAddr: account.address,
-        tokenAddr: tokenAddr,
+        pairId: pairId,
         amount: amount,
         timeLock: timeLock,
         toLightning: false,
         fee: fee,
         signature,
+        nodePubkey: lspNodePubKey,
       };
+      const tx = await onDeposit(depositArgs, true, false);
+      setTx(tx);
+      if (tx) {
+        const request = {
+          pairId: pairId,
+          amount: sendArgs.amount,
+          chainId: targetNetwork.id,
+          hashlock: signatureRes.hashlock,
+          depositTx: tx,
+        };
 
-      if (sendArgs.waitConfirm) {
-        const tx = await onDeposit(depositArgs, true, false);
-        setTx(tx);
-        if (tx) {
-          const request = {
-            assetId: currentAssetPair?.asset?.assetId,
-            amount: sendArgs.amount,
-            chainId: targetNetwork.id,
-            pairName: currentAssetPair?.pairName,
-            hashlock: signatureRes.hashlock,
-            depositTx: tx,
-          };
-       
-          const retToEVM = await toEVM(request);
-          if (retToEVM.code === 200) {
-            messageApi.success("Submit success.");
-            setSendInvoice(retToEVM.data.invoice);
-          }
+        const retToEVM = await toEVM(request);
+        if (retToEVM.code === 200) {
+          messageApi.success("Submit success.");
+          setSendInvoice(retToEVM.data.invoice);
         }
-      } else {
-        //TODO
       }
     } 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);
     }
-  }, [onResetInvoice, onCheckBalance, targetNetwork?.id, sendArgs?.amount, sendArgs?.waitConfirm, currentAssetPair?.pairName, currentAssetPair?.asset?.assetId, account?.address, onDeposit, messageApi]);
+  }, [
+    onResetInvoice,
+    onCheckBalance,
+    targetNetwork,
+    sendArgs?.amount,
+    currentAssetPair?.pairId,
+    account?.address,
+    onDeposit,
+    messageApi,
+    switchChain,
+  ]);
 
   const btn = useMemo(() => {
     if (!account?.address) {
@@ -265,7 +305,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 +330,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);
@@ -306,147 +357,157 @@ function ToToken({ messageApi }) {
       setCurrentAssetPair(filterdAssetPairs[0]);
       form.setFieldValue("received", filterdAssetPairs?.[0]?.pairId);
     }
-  }, [filterdAssetPairs, form, setCurrentAssetPair]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterdAssetPairs, form]);
   return (
     <WrapperToLightning>
-      <Form
-        name="basic"
-        form={form}
-        colon={false}
-        // labelCol={{
-        //   span: 8,
-        // }}
-        // wrapperCol={{
-        //   span: 16,
-        // }}
-        style={{
-          width: "100%",
-        }}
-        initialValues={{
-          remember: true,
-        }}
-        onFinish={onFinish}
-        autoComplete="off"
-      >
-        <AstraNetwork
-          messageApi={messageApi}
-          balance={mainnetBalanceRet?.data}
-        />
-        <AstraSendingReceived>
-          <FormItem label="Sending">
-            <Flex justify="end" align="center" gap="5px">
-              <AstraImage name={"Lightning"} />
-              <span className="fw500 colorcaff33">{sendArgs?.amount}</span>
-              <span className="fw500 colorcaff33">
-                {currentAssetPair?.asset?.name}
-              </span>
-            </Flex>
-          </FormItem>
-
-          <FormItem label="Received" style={{ marginBottom: 0 }}>
-            <Flex justify="end" align="center" gap="5px">
-              <FormItem name="received" noStyle className="form-item-pair">
-                <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>{sendArgs?.amount}</span>
-              <span>{currentAssetPair?.token?.name}</span>
-            </Flex>
-            <BalanceFlex justify="end" align="center" gap="5px">
-              <span className="available_token_balance">
-                Available:{tokenBalanceRet?.data?.formatted}{" "}
-                {tokenBalanceRet?.data?.symbol}
-              </span>
-            </BalanceFlex>
-          </FormItem>
-        </AstraSendingReceived>
-        <AstraFormItemOther>
-          <FormItem label="Service fee">
-            <Flex justify="end" align="center" gap="5px">
-              <span>{serviceFee}</span>
-              <AstraImage
-                name={targetNetwork?.name}
-                width="24px"
-                height="24px"
-              />
-            </Flex>
-          </FormItem>
-
-          <FormItem label="Receiving address">
-            <Flex justify="end" align="center" gap="5px">
-              <AstraImage name={targetNetwork?.name} />
-              <EllipsisMiddle suffixCount={6}>
-                {account?.address ?? "--"}
-              </EllipsisMiddle>
-            </Flex>
-          </FormItem>
-          <FormItem label="Route">
-            <Flex justify="end" align="center" gap="5px">
-              <AstraImage name="Lightning" />
-              <DoubleRightOutlined style={{ color: "#caff33" }} />
-              <AstraImage
-                name={targetNetwork?.name}
-                width="24px"
-                height="24px"
-              />
-            </Flex>
-          </FormItem>
-        </AstraFormItemOther>
-        {sendInvoice && (
-          <>
-            <QRCodeWrapper
-              justify="center"
-              align="center"
-              gap="10px"
-              vertical={true}
-            >
-              <QRCode
-                type="svg"
-                size={200}
-                errorLevel="M"
-                iconSize={40}
-                value={sendInvoice}
-                bordered={false}
-                status={isInvoiceExpired ? "expired" : "active"}
-              />
-              <Countdown
-                title="Invoice expires in"
-                valueStyle={{
-                  color: "#caff33",
-                  fontSize: "14px",
-                  textAlign: "center",
-                }}
-                value={invoiceExpired}
-                onFinish={onExpired}
-              />
-            </QRCodeWrapper>
-          </>
-        )}
-
-        <FormItem
-          label={null}
-          labelCol={{
-            span: 0,
+      <Spin spinning={reserveInfoLoading}>
+        <Form
+          name="basic"
+          form={form}
+          colon={false}
+          style={{
+            width: "100%",
           }}
-          wrapperCol={{
-            span: 24,
+          initialValues={{
+            remember: true,
           }}
+          onFinish={onFinish}
+          autoComplete="off"
         >
-          <Flex justify="center"> {btn}</Flex>
-        </FormItem>
-      </Form>
+          <AstraNetwork
+            messageApi={messageApi}
+            balance={mainnetBalanceRet?.data}
+          />
+          <AstraSendingReceived>
+            <FormItem label="Sending">
+              <Flex justify="end" align="center" gap="5px">
+                <AstraImage name={"Lightning"} />
+                <span className="fw500 colorcaff33">{sendArgs?.amount}</span>
+                <span className="fw500 colorcaff33">
+                  {currentAssetPair?.asset?.name}
+                </span>
+              </Flex>
+            </FormItem>
+
+            <FormItem label="Receiving" style={{ marginBottom: 0 }}>
+              <Flex justify="end" align="center" gap="5px">
+                {filterdAssetPairs.length > 0 && (
+                  <FormItem name="received" noStyle className="form-item-pair">
+                    <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>{sendArgs?.amount}</span>
+                <span>{currentAssetPair?.token?.name}</span>
+              </Flex>
+              <BalanceFlex justify="end" align="center" gap="5px">
+                <span className="available_token_balance">
+                  Available:
+                  <AvalibleBalance>
+                    &nbsp;
+                    {tokenBalanceRet?.data?.formatted
+                      ? numberWithCommas(
+                          new Decimal(tokenBalanceRet?.data?.formatted).toFixed(
+                            4,
+                            Decimal.ROUND_DOWN
+                          )
+                        )
+                      : 0}
+                  </AvalibleBalance>
+                  {tokenBalanceRet?.data?.symbol}
+                </span>
+              </BalanceFlex>
+            </FormItem>
+          </AstraSendingReceived>
+          <AstraFormItemOther>
+            <FormItem label="Service fee">
+              <Flex justify="end" align="center" gap="5px">
+                <span>{serviceFee}</span>
+                <AstraImage
+                  name={targetNetwork?.name}
+                  width="24px"
+                  height="24px"
+                />
+              </Flex>
+            </FormItem>
+
+            <FormItem label="Receiving address">
+              <Flex justify="end" align="center" gap="5px">
+                <AstraImage name={targetNetwork?.name} />
+                <EllipsisMiddle suffixCount={6}>
+                  {account?.address ?? "--"}
+                </EllipsisMiddle>
+              </Flex>
+            </FormItem>
+            <FormItem label="Route">
+              <Flex justify="end" align="center" gap="5px">
+                <AstraImage name="Lightning" />
+                <DoubleRightOutlined style={{ color: "#caff33" }} />
+                <AstraImage
+                  name={targetNetwork?.name}
+                  width="24px"
+                  height="24px"
+                />
+              </Flex>
+            </FormItem>
+          </AstraFormItemOther>
+          {sendInvoice && (
+            <>
+              <QRCodeWrapper
+                justify="center"
+                align="center"
+                gap="10px"
+                vertical={true}
+              >
+                <QRCode
+                  type="svg"
+                  size={200}
+                  errorLevel="M"
+                  iconSize={40}
+                  value={sendInvoice}
+                  bordered={false}
+                  status={isInvoiceExpired ? "expired" : "active"}
+                />
+                <Countdown
+                  title="Invoice expires in"
+                  valueStyle={{
+                    color: "#caff33",
+                    fontSize: "14px",
+                    textAlign: "center",
+                  }}
+                  value={invoiceExpired}
+                  onFinish={onExpired}
+                />
+              </QRCodeWrapper>
+            </>
+          )}
+
+          <FormItem
+            label={null}
+            labelCol={{
+              span: 0,
+            }}
+            wrapperCol={{
+              span: 24,
+            }}
+          >
+            <Flex justify="center"> {btn}</Flex>
+          </FormItem>
+        </Form>
+      </Spin>
     </WrapperToLightning>
   );
 }

package/src/constants/index.js

@@ -1,5 +1,21 @@
+import Decimal from "decimal.js";
+Decimal.set({
+  toExpNeg: -20,
+  toExpPos: 40,
+});
 export const MODAL_DISPLAY_TYPE = {
-    DEFAULT: 0,
-    TO_LIGHTNING: 1,
-    TO_EVM: 2
-}
+  DEFAULT: 0,
+  TO_LIGHTNING: 1,
+  TO_EVM: 2,
+};
+export const ALCHEMY_KEY = "ClvXGqSMvZ6nEb_G5ekJGsZwNdsp72oz";
+
+export function balanceToFixed(balance, decimals) {
+  const fixedBalance = balance
+    ? new Decimal(balance)
+        .div(10 ** decimals)
+        .toFixed(decimals, Decimal.ROUND_DOWN)
+        .toString()
+    : 0;
+  return fixedBalance;
+}