astra-modal-test 1.0.0

package/src/comps/ToToken.jsx

@@ -0,0 +1,467 @@
+import { memo } from "react";
+import styled from "styled-components";
+import useStore from "../store";
+import { Form, Button, Select, Flex, QRCode, Statistic } from "antd";
+import { useCallback, useEffect, useState, useMemo } from "react";
+import AstraImage from "./AstraImage";
+import { useAccount, useBalance } 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 Decimal from "decimal.js";
+import ConnectButton from "./ConnectButton";
+import { formatAssetByDecimal } from "../utils";
+import AstraNetwork from "./AstraNetwork";
+import IconArrowRight from "../assets/arrow-right.svg";
+const { Countdown } = Statistic;
+const WrapperToLightning = styled.div``;
+
+const FormItem = styled(Form.Item)`
+  .ant-form-item-label {
+    text-align: right;
+  }
+`;
+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 QRCodeWrapper = styled(Flex)`
+  /* margin-bottom: 20px; */
+`;
+
+const SubmitBtn = styled(Button)`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 30px;
+  font-size: 16px;
+  line-height: 42px;
+  margin-top: 10px;
+`;
+
+const BalanceFlex = styled(Flex)`
+  .available_token_balance {
+    font-size: 12px;
+    color: #fff;
+  }
+`;
+const AstraSendingReceived = styled.div`
+  padding: 8px 20px;
+  border-radius: 12px;
+  background: rgba(166, 166, 166, 0.1);
+  margin-bottom: 14px;
+  @media (max-width: 768px) {
+    padding: 8px 10px;
+    border-radius: 12px;
+    background: rgba(166, 166, 166, 0.1);
+    margin-bottom: 14px;
+  }
+`;
+const AstraFormItemOther = styled.div`
+  padding: 0 20px;
+  @media (max-width: 768px) {
+    padding: 0 10px;
+  }
+`;
+function ToToken({ messageApi }) {
+  const {
+    sendArgs,
+    allAssetPairs,
+    targetNetwork,
+    setCurrentAssetPair,
+    currentAssetPair,
+    onAstraInvoice,
+    setAstraModalShow,
+  } = useStore();
+
+  const [sendInvoice, setSendInvoice] = useState("");
+  const [tx, setTx] = useState("");
+  const account = useAccount();
+  const [form] = Form.useForm();
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [invoiceExpired, setInvoiceExpired] = useState(0);
+  const [isInvoiceExpired, setIsInvoiceExpired] = useState(false);
+  const [payInvoiceLoading, setPayInvoiceLoading] = useState(false);
+  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 serviceFee = useMemo(() => {
+    const recieveBaseFee = reserveInfo?.toTokenBaseFee || 0;
+    return new Decimal(recieveBaseFee.toString()).div(10 ** 18).toFixed(4);
+  }, [reserveInfo?.toTokenBaseFee]);
+
+  const tokenBalanceRet = useBalance({
+    address: account?.address,
+    token: currentAssetPair?.token?.address,
+    enabled: !!currentAssetPair?.token?.address && !!account?.address,
+    formatUnits: currentAssetPair?.token?.decimal,
+  });
+
+  const mainnetBalanceRet = useBalance({
+    address: account?.address,
+    enabled: !!account?.address,
+    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 onResetInvoice = useCallback(() => {
+    setIsInvoiceExpired(false);
+    setInvoiceExpired(0);
+    setSendInvoice("");
+  }, []);
+  const { onDeposit } = useBridgeContract(account);
+
+  const onAssetPairChange = useCallback(
+    (pairId) => {
+      const selectedPair = pairId
+        ? allAssetPairs.find((pair) => pair.pairId === pairId)
+        : null;
+      setCurrentAssetPair(selectedPair);
+    },
+    [allAssetPairs, setCurrentAssetPair]
+  );
+  const onFinish = useCallback(async () => {
+    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}`
+        );
+      }
+
+      const retGetSignature = await getSignature({
+        chainId: targetNetwork.id,
+        amount: sendArgs.amount,
+        pairName: currentAssetPair?.pairName,
+      });
+      if (retGetSignature?.code !== 200) {
+        throw new Error(retGetSignature?.msg);
+      }
+      const signatureRes = retGetSignature?.data;
+      const hashlock = signatureRes.hashlock;
+      const fromAddr = signatureRes.lspAddress;
+
+      const tokenAddr = signatureRes.tokenAddress;
+      const amount = BigInt(signatureRes.amtInContract);
+      const timeLock = BigInt(signatureRes.deltaSecond);
+      const expiredAt = Date.now() + Number(timeLock) * 1000;
+      setInvoiceExpired(expiredAt);
+      const signature = signatureRes.signature;
+      const fee = BigInt(signatureRes.fee);
+
+      const depositArgs = {
+        hashlock,
+        fromAddr,
+        toAddr: account.address,
+        tokenAddr: tokenAddr,
+        amount: amount,
+        timeLock: timeLock,
+        toLightning: false,
+        fee: fee,
+        signature,
+      };
+
+      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,
+          };
+          // 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.");
+            setSendInvoice(retToEVM.data.invoice);
+          }
+        }
+      } else {
+        //TODO
+      }
+    } catch (e) {
+      const error = e.message;
+      if (error.includes("User rejected")) {
+        messageApi.error("User reject the request.");
+      } else {
+        messageApi.error(e.message);
+      }
+    } finally {
+      setSubmitLoading(false);
+    }
+  }, [
+    onResetInvoice,
+    reserveInfo,
+    currentAssetPair,
+    sendArgs.amount,
+    sendArgs.waitConfirm,
+    targetNetwork.id,
+    account.address,
+    onDeposit,
+    messageApi,
+  ]);
+
+  const btn = useMemo(() => {
+    if (!account?.address) {
+      return <ConnectButton />;
+    }
+    if (sendInvoice) {
+      return submitLoading ? (
+        <SubmitBtn type="primary" loading={submitLoading}>
+          <span>Waiting for Confirmation</span>
+        </SubmitBtn>
+      ) : (
+        <SubmitBtn
+          type="primary"
+          disabled={isInvoiceExpired || btnDisabled}
+          loading={payInvoiceLoading}
+          onClick={async () => {
+            setPayInvoiceLoading(true);
+            await onAstraInvoice(sendInvoice, tx)
+              .catch((e) => {
+                messageApi.error(e.message);
+                setPayInvoiceLoading(false);
+                return;
+              })
+              .finally(() => {
+                setPayInvoiceLoading(false);
+              });
+            setAstraModalShow(false);
+          }}
+        >
+          <span>Pay Invoice</span>
+          <img src={IconArrowRight} alt="" />
+        </SubmitBtn>
+      );
+    } else {
+      return (
+        <SubmitBtn
+          type="primary"
+          htmlType="submit"
+          loading={submitLoading}
+          disabled={isInvoiceExpired || btnDisabled}
+        >
+          <span>{submitLoading ? "Waiting for Confirmation" : "Submit"}</span>
+          <img src={IconArrowRight} alt="" />
+        </SubmitBtn>
+      );
+    }
+  }, [
+    account?.address,
+    btnDisabled,
+    isInvoiceExpired,
+    messageApi,
+    onAstraInvoice,
+    payInvoiceLoading,
+    sendInvoice,
+    setAstraModalShow,
+    submitLoading,
+    tx,
+  ]);
+
+  const onExpired = useCallback(() => {
+    setIsInvoiceExpired(true);
+  }, []);
+
+  useEffect(() => {
+    if (filterdAssetPairs?.length > 0) {
+      setCurrentAssetPair(filterdAssetPairs[0]);
+      form.setFieldValue("received", filterdAssetPairs?.[0]?.pairId);
+    }
+  }, [filterdAssetPairs, form, setCurrentAssetPair]);
+  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,
+          }}
+          wrapperCol={{
+            span: 24,
+          }}
+        >
+          <Flex justify="center"> {btn}</Flex>
+        </FormItem>
+      </Form>
+    </WrapperToLightning>
+  );
+}
+export default memo(ToToken);