astra-modal-test 1.0.0

package/src/comps/ToLightning.jsx

@@ -0,0 +1,502 @@
+import { memo } from "react";
+import styled from "styled-components";
+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 { DoubleRightOutlined } from "@ant-design/icons";
+import useParseInvoice from "../hooks/useParseInvoice";
+import EllipsisMiddle from "./EllipsisMiddle";
+import { useBridgeContract } from "../hooks/useContract";
+import { useGetReserveInfo } from "../hooks/useLspApi";
+import ConnectButton from "./ConnectButton";
+import Decimal from "decimal.js";
+import { formatAssetByDecimal } from "../utils";
+import AstraNetwork from "./AstraNetwork";
+import IconTip from "../assets/tip.svg";
+import IconArrowRight from "../assets/arrow-right.svg";
+const WrapperToLightning = styled.div``;
+
+const FormItem = styled(Form.Item)``;
+
+const ClearAuthWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+  padding: 10px 20px;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+  color: #fff;
+  font-family: "Clash Display";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  border-radius: 24px;
+  border: 1px solid #333;
+  background: rgba(51, 51, 51, 0.2);
+  backdrop-filter: blur(25px);
+  .clear-auth {
+    color: #caff33;
+    font-family: "Clash Display";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-skip-ink: none;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+  }
+`;
+
+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 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;
+  }
+`;
+const AstraButton = styled(Button)`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 30px;
+  font-size: 16px;
+  line-height: 42px;
+`;
+function ToLightning({
+  messageApi,
+  setResultModalShow,
+  setResultModalRequest,
+}) {
+  const {
+    receiveArgs,
+    allAssetPairs,
+    targetNetwork,
+    setCurrentAssetPair,
+    currentAssetPair,
+    setAstraModalShow,
+  } = useStore();
+
+  const account = useAccount();
+  const [form] = Form.useForm();
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [approveLoading, setApproveLoading] = useState(false);
+  const filterdAssetPairs = useMemo(() => {
+    return allAssetPairs.filter((pair) => {
+      return pair.asset.assetId === receiveArgs.assetId;
+    });
+  }, [allAssetPairs, receiveArgs.assetId]);
+
+  const { reserveInfo, loading: reserveInfoLoading } = useGetReserveInfo(
+    targetNetwork,
+    currentAssetPair
+  );
+
+  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",
+  });
+  //console.log('mainnetBalanceRet', mainnetBalanceRet)
+  // console.log('tokenRet', tokenBalanceRet);
+
+  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,
+  } = useParseInvoice(receiveArgs?.invoice);
+
+  const {
+    allowanceRet,
+    formatAllowance,
+    onReloadAllowance,
+    onApprove,
+    onDeposit,
+  } = useBridgeContract(account);
+
+  const onAssetPairChange = useCallback(
+    (pairId) => {
+      const selectedPair = pairId
+        ? allAssetPairs.find((pair) => pair.pairId === pairId)
+        : null;
+      setCurrentAssetPair(selectedPair);
+    },
+    [allAssetPairs, setCurrentAssetPair]
+  );
+
+  const handleApprove = useCallback(
+    async (approveAmt) => {
+      try {
+        setApproveLoading(true);
+        const approveTx = await onApprove(approveAmt);
+        if (approveTx) {
+          messageApi.open({
+            type: "success",
+            content: approveAmt == 0 ? "Clear Auth success" : "Approve success",
+          });
+        }
+      } catch (e) {
+        const error = e.message;
+        if (error.includes("User rejected")) {
+          messageApi.error("User reject the request.");
+        } else {
+          messageApi.error(e.message);
+        }
+      } finally {
+        setApproveLoading(false);
+        onReloadAllowance();
+      }
+    },
+    [messageApi, onApprove, 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 />;
+    }
+    if (Number(allowanceRet) < Number(tokenAmt)) {
+      return (
+        <AstraButton
+          type="primary"
+          disabled={btnDisabled}
+          onClick={() => {
+            handleApprove(Number.MAX_SAFE_INTEGER);
+          }}
+          loading={approveLoading}
+        >
+          <span>Approve</span>
+          <img src={IconArrowRight} alt="" />
+        </AstraButton>
+      );
+    } else {
+      return (
+        <AstraButton
+          type="primary"
+          disabled={btnDisabled}
+          loading={submitLoading}
+          htmlType="submit"
+        >
+          <span>
+            {submitLoading ? "Waiting for Confirmation..." : "Deposit"}
+          </span>
+          <img src={IconArrowRight} alt="" />
+        </AstraButton>
+      );
+    }
+  }, [
+    account?.address,
+    allowanceRet,
+    approveLoading,
+    btnDisabled,
+    handleApprove,
+    submitLoading,
+    tokenAmt,
+  ]);
+
+  const onFinish = useCallback(async () => {
+    try {
+      if (!account?.address) {
+        return;
+      }
+      setSubmitLoading(true);
+      if (
+        BigInt(assetAmt) > BigInt(reserveInfo?.maxAsset) ||
+        Number(formatAssetAmt) < reserveInfo.min
+      ) {
+        throw new Error(
+          `Amount should be between ${
+            reserveInfo?.min
+          } and ${formatAssetByDecimal(
+            reserveInfo?.maxAsset,
+            currentAssetPair.asset.decimal
+          )}`
+        );
+      }
+      await onReloadAllowance();
+
+      if (Number(allowanceRet) < Number(tokenAmt)) {
+        const approveTx = await onApprove(Number.MAX_SAFE_INTEGER);
+        if (approveTx) {
+          messageApi.open({
+            type: "success",
+            content: "Approve success",
+          });
+        }
+      }
+
+      const depositArgs = {
+        hashlock,
+        fromAddr: account.address,
+        toAddr: reserveInfo.lspAddress,
+        tokenAddr: currentAssetPair.token.address,
+        amount: tokenAmt,
+        timeLock: reserveInfo?.deltaSecond,
+        toLightning: true,
+        fee: reserveInfo?.toAssetBaseFee,
+        signature: "0x",
+      };
+      console.log("depositArgs", depositArgs);
+      const tx = await onDeposit(depositArgs);
+      if (tx) {
+        const request = {
+          assetId: currentAssetPair.asset.assetId,
+          chainId: targetNetwork.id,
+          lnInvoice: receiveArgs?.invoice,
+          amount: tokenAmt,
+          depositTx: tx,
+        };
+        setResultModalRequest({
+          txHash: tx,
+          timestamp: Date.now(),
+          formatTokenAmt,
+          request,
+        });
+        setAstraModalShow(false);
+        setResultModalShow(true);
+      }
+    } 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);
+    }
+  }, [
+    account.address,
+    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);
+  }, [handleApprove]);
+
+  useEffect(() => {
+    if (filterdAssetPairs?.length > 0) {
+      setCurrentAssetPair(filterdAssetPairs[0]);
+      form.setFieldValue("sending", filterdAssetPairs?.[0]?.pairId);
+    }
+  }, [filterdAssetPairs, form, setCurrentAssetPair]);
+
+  return (
+    <>
+      <WrapperToLightning>
+        <Spin spinning={reserveInfoLoading || parseInvoiceLoading}>
+          <Form
+            name="basic"
+            form={form}
+            colon={false}
+            // labelCol={{
+            //   span: 8,
+            // }}
+            // wrapperCol={{
+            //   span: 16,
+            // }}
+            style={{
+              width: "100%",
+            }}
+            onFinish={onFinish}
+            autoComplete="off"
+          >
+            <AstraNetwork
+              messageApi={messageApi}
+              balance={mainnetBalanceRet?.data}
+            />
+            <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>
+                  <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}{" "}
+                    {tokenBalanceRet?.data?.symbol}
+                  </span>
+                </BalanceFlex>
+              </FormItem>
+
+              <FormItem label="Received" style={{ marginBottom: 0 }}>
+                <Flex justify="end" align="center" gap="5px">
+                  <AstraImage name={"Lightning"} />
+                  <span className="colorcaff33">{formatAssetAmt}</span>
+                  <span className="colorcaff33">
+                    {currentAssetPair?.asset?.name}
+                  </span>
+                </Flex>
+              </FormItem>
+            </AstraSendingReceived>
+            <AstraFormItemOther>
+              <FormItem label="Service fee">
+                <Flex justify="end" align="center" gap="5px">
+                  <span>{serviceFee}</span>
+                  <AstraImage
+                    name={targetNetwork?.name}
+                    width="22px"
+                    height="22px"
+                  />
+                </Flex>
+              </FormItem>
+
+              <FormItem label="Receiving LN invoice">
+                <Flex justify="end">
+                  <EllipsisMiddle copyable suffixCount={10}>
+                    {receiveArgs?.invoice}
+                  </EllipsisMiddle>
+                </Flex>
+              </FormItem>
+
+              <FormItem label="Route">
+                <Flex justify="end" align="center" gap="5px">
+                  <AstraImage
+                    name={targetNetwork?.name}
+                    width="22px"
+                    height="22px"
+                  />
+                  <DoubleRightOutlined style={{ color: "#caff33" }} />
+                  <AstraImage name="Lightning" />
+                </Flex>
+              </FormItem>
+            </AstraFormItemOther>
+            <FormItem
+              label={null}
+              labelCol={{ span: 0 }}
+              wrapperCol={{ span: 24 }}
+            >
+              <Flex justify="center">{memoBtn}</Flex>
+            </FormItem>
+          </Form>
+        </Spin>
+
+        {Number(formatAllowance) &&
+        Number(tokenAmt) > Number(formatAllowance) ? (
+          <ClearAuthWrapper>
+            <img src={IconTip} alt="tip" />
+            <span>
+              Your remaining authorization to Astra is {formatAllowance}{" "}
+              {currentAssetPair?.token?.name}. To transact more, clear the
+              current authorization and approve the new amount.
+              <Button
+                type="link"
+                loading={approveLoading}
+                onClick={onClearAuth}
+                className="clear-auth"
+              >
+                Clear Authorization
+              </Button>{" "}
+            </span>
+          </ClearAuthWrapper>
+        ) : (
+          <></>
+        )}
+      </WrapperToLightning>
+    </>
+  );
+}
+export default memo(ToLightning);