astra-modal-test 1.0.10 → 1.0.11

package/src/comps/ToLightning.jsx

@@ -1,653 +0,0 @@
-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, useSwitchChain } 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 { 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)``;
-
-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,
-    astraModalShow,
-  } = useStore();
-  const account = useAccount();
-  const { switchChain } = useSwitchChain();
-  const [form] = Form.useForm();
-  const [submitLoading, setSubmitLoading] = useState(false);
-  const [approveLoading, setApproveLoading] = useState(false);
-  const { filterdAssetPairs, validationError } = useMemo(() => {
-    const filtered = allAssetPairs.filter((pair) => {
-      return pair.asset.assetId === receiveArgs.assetId;
-    });
-
-    // 校验资产是否支持
-    let error = null;
-    if (allAssetPairs.length > 0 && filtered.length === 0) {
-      const supportedAssets = allAssetPairs
-        .map(
-          (pair) =>
-            `${pair.asset.name} (${pair.asset.assetId.substring(0, 8)}...)`
-        )
-        .join(", ");
-      error = `Asset "${receiveArgs.assetId.substring(
-        0,
-        8
-      )}..." is not supported. Supported assets: ${supportedAssets}`;
-    }
-
-    return { filterdAssetPairs: filtered, validationError: error };
-  }, [allAssetPairs, receiveArgs.assetId]);
-
-  const { reserveInfo, loading: reserveInfoLoading } = useGetReserveInfo(
-    targetNetwork,
-    currentAssetPair
-  );
-  const { min, max, unitName } = useGetMinAndMax("evmToLightning", reserveInfo);
-
-  const tokenBalanceRet = useBalance({
-    address: account?.address,
-    token: currentAssetPair?.token?.address,
-    query: {
-      enabled:
-        !!currentAssetPair?.token?.address &&
-        !!account?.address &&
-        astraModalShow,
-    },
-    formatUnits: currentAssetPair?.token?.decimal,
-    scopeKey: "token",
-  });
-
-  const mainnetBalanceRet = useBalance({
-    address: account?.address,
-    query: {
-      enabled: !!account?.address && astraModalShow,
-    },
-    formatUnits: "ether",
-  });
-
-  const {
-    formatAssetAmt,
-    tokenAmt,
-    formatTokenAmt,
-    hashlock,
-    parseInvoiceLoading,
-    isExpired,
-  } = useParseInvoice(receiveArgs?.invoice);
-
-  const {
-    allowanceRet,
-    formatAllowance,
-    onReloadAllowance,
-    onApprove,
-    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
-        ? allAssetPairs.find((pair) => pair.pairId === pairId)
-        : null;
-      setCurrentAssetPair(selectedPair);
-    },
-    [allAssetPairs, setCurrentAssetPair]
-  );
-
-  const onCheckBalance = useCallback(async () => {
-    const tokenBalance = tokenBalanceRet?.data?.value || 0;
-    const mainetBalance = mainnetBalanceRet?.data?.value || 0;
-
-    if (
-      new Decimal(mainetBalance.toString()).lt(
-        new Decimal(reserveInfo?.toAssetBaseFee?.toString())
-      )
-    ) {
-      throw new Error("Insufficient balance to pay service fee.");
-    }
-    if (
-      new Decimal(tokenBalance.toString()).lt(new Decimal(tokenAmt.toString()))
-    ) {
-      throw new Error("Insufficient available balance.");
-    }
-
-    if (
-      new Decimal(formatAssetAmt.toString()).gt(new Decimal(max.toString()))
-    ) {
-      throw new Error(`The maximum amount is ${max} ${unitName}.`);
-    }
-    if (
-      new Decimal(formatAssetAmt.toString()).lt(new Decimal(min.toString()))
-    ) {
-      throw new Error(`The minimum amount is ${min} ${unitName}.`);
-    }
-  }, [
-    formatAssetAmt,
-    mainnetBalanceRet?.data?.value,
-    max,
-    min,
-    reserveInfo?.toAssetBaseFee,
-    tokenAmt,
-    tokenBalanceRet?.data?.value,
-    unitName,
-  ]);
-
-  const handleApprove = useCallback(
-    async (approveAmt) => {
-      try {
-        setApproveLoading(true);
-        await onCheckBalance();
-        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 {
-          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,
-      switchChain,
-      targetNetwork.id,
-      targetNetwork.name,
-    ]
-  );
-
-  const memoBtn = useMemo(() => {
-    if (!account?.address) {
-      return <ConnectButton />;
-    }
-    if (Number(allowanceRet) < Number(tokenAmt)) {
-      return (
-        <AstraButton
-          type="primary"
-          disabled={validationError}
-          onClick={() => {
-            handleApprove(tokenAmt);
-          }}
-          loading={approveLoading}
-        >
-          <span>Approve</span>
-          <img src={IconArrowRight} alt="" />
-        </AstraButton>
-      );
-    } else {
-      return (
-        <AstraButton
-          type="primary"
-          disabled={validationError}
-          loading={submitLoading}
-          htmlType="submit"
-        >
-          <span>
-            {submitLoading ? "Waiting for Confirmation..." : "Deposit"}
-          </span>
-          <img src={IconArrowRight} alt="" />
-        </AstraButton>
-      );
-    }
-  }, [
-    account?.address,
-    allowanceRet,
-    approveLoading,
-    handleApprove,
-    submitLoading,
-    tokenAmt,
-    validationError,
-  ]);
-
-  // 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();
-      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 {
-        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.tokenAmt);
-        if (approveTx) {
-          messageApi.open({
-            type: "success",
-            content: "Approve success",
-          });
-        }
-      }
-
-      const decodedInvoice = window.lightningPayReq.decode(
-        receiveArgs?.invoice
-      );
-      const lspNodePubKey = decodedInvoice?.payeeNodeKey;
-
-      const depositArgs = {
-        hashlock,
-        fromAddr: account.address,
-        toAddr: reserveInfo.lspAddress,
-        pairId: currentAssetPair.pairId,
-        amount: tokenAmt,
-        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) {
-        setResultModalRequest({
-          txHash: tx,
-          timestamp: Date.now(),
-          formatTokenAmt,
-          request,
-        });
-        setAstraModalShow(false);
-        setResultModalShow(true);
-      }
-    } catch (e) {
-      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(error);
-      }
-    } finally {
-      setSubmitLoading(false);
-    }
-  }, [
-    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);
-  }, [handleApprove]);
-
-  useEffect(() => {
-    if (filterdAssetPairs?.length > 0) {
-      setCurrentAssetPair(filterdAssetPairs[0]);
-      form.setFieldValue("sending", filterdAssetPairs?.[0]?.pairId);
-    } else {
-      setCurrentAssetPair(null);
-      form.setFieldValue("sending", "");
-    }
-  }, [filterdAssetPairs, form, setCurrentAssetPair]);
-
-  return (
-    <>
-      <WrapperToLightning>
-        <Spin spinning={reserveInfoLoading || parseInvoiceLoading}>
-          {validationError && (
-            <div
-              style={{
-                padding: "12px 16px",
-                marginBottom: "16px",
-                borderRadius: "8px",
-                background: "rgba(255, 77, 79, 0.1)",
-                border: "1px solid rgba(255, 77, 79, 0.3)",
-                color: "#ff4d4f",
-                fontSize: "14px",
-                lineHeight: "1.5",
-              }}
-            >
-              ⚠️ {validationError}
-            </div>
-          )}
-          <Form
-            name="basic"
-            form={form}
-            colon={false}
-            style={{
-              width: "100%",
-            }}
-            onFinish={onFinish}
-            autoComplete="off"
-          >
-            <AstraNetwork
-              messageApi={messageApi}
-              balance={mainnetBalanceRet?.data}
-            />
-            <AstraSendingReceived>
-              <FormItem label="Sending">
-                <Flex justify="end" align="center" gap="5px">
-                  {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:{" "}
-                    <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="Receiving" 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);