astra-modal-test 1.0.9 → 1.0.11

package/src/comps/ToToken.jsx

@@ -1,550 +0,0 @@
-import { memo } from "react";
-import styled from "styled-components";
-import useStore from "../store";
-import { Form, Button, Select, Flex, QRCode, Statistic, 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 EllipsisMiddle from "./EllipsisMiddle";
-import { useBridgeContract } from "../hooks/useContract";
-import { useGetReserveInfo } from "../hooks/useLspApi";
-import { toEVM, getSignature, bridgeIntervalStatus } from "../apis/lspApi";
-import { useGetMinAndMax } from "../hooks/useGetMinAndMax";
-import Decimal from "decimal.js";
-import ConnectButton from "./ConnectButton";
-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``;
-
-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,
-    astraModalShow,
-  } = 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 { switchChain } = useSwitchChain();
-
-  const { filterdAssetPairs, validationError } = useMemo(() => {
-    const filtered = allAssetPairs.filter((pair) => {
-      return pair.asset.assetId === sendArgs.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 "${sendArgs.assetId.substring(
-        0,
-        8
-      )}..." is not supported. Supported assets: ${supportedAssets}`;
-    }
-
-    return { filterdAssetPairs: filtered, validationError: error };
-  }, [allAssetPairs, sendArgs.assetId]);
-  //   console.log("🚀 ~ ToLightning ~ allAssetPairs:", allAssetPairs, receiveArgs);
-  const { reserveInfo, loading: reserveInfoLoading } = useGetReserveInfo(
-    targetNetwork,
-    currentAssetPair
-  );
-  const { min, max, unitName } = useGetMinAndMax("lightningToEvm", reserveInfo);
-  const { 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 tokenBalanceRet = useBalance({
-    address: account?.address,
-    token: currentAssetPair?.token?.address,
-    query: {
-      enabled:
-        !!currentAssetPair?.token?.address &&
-        !!account?.address &&
-        astraModalShow,
-    },
-    formatUnits: currentAssetPair?.token?.decimal,
-    scopeKey: "tokenBalance",
-  });
-
-  const mainnetBalanceRet = useBalance({
-    address: account?.address,
-    query: {
-      enabled: !!account?.address && astraModalShow,
-    },
-    formatUnits: "ether",
-  });
-
-  const onCheckBalance = useCallback(async () => {
-    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 (Number(sendArgs.amount) < Number(min)) {
-      throw new Error(`The minimum amount is ${min} ${unitName}`);
-    }
-    if (Number(sendArgs.amount) > Number(max)) {
-      throw new Error(`The maximum amount is ${max} ${unitName}`);
-    }
-  }, [
-    mainnetBalanceRet?.data?.value,
-    reserveInfo?.toAssetBaseFee,
-    sendArgs?.amount,
-    min,
-    max,
-    unitName,
-  ]);
-
-  const onResetInvoice = useCallback(() => {
-    setIsInvoiceExpired(false);
-    setInvoiceExpired(0);
-    setSendInvoice("");
-  }, []);
-
-  const onAssetPairChange = useCallback(
-    (pairId) => {
-      const selectedPair = pairId
-        ? allAssetPairs.find((pair) => pair.pairId === pairId)
-        : null;
-      setCurrentAssetPair(selectedPair);
-    },
-    // 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,
-        pairId: currentAssetPair?.pairId,
-      });
-      if (retGetSignature?.code !== 200) {
-        throw new Error(retGetSignature?.msg);
-      }
-      const signatureRes = retGetSignature?.data;
-      const hashlock = signatureRes.hashlock;
-      const fromAddr = signatureRes.lspAddress;
-
-      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 = signatureRes.fee;
-
-      const depositArgs = {
-        hashlock,
-        fromAddr,
-        toAddr: account.address,
-        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,
-        };
-
-        const retToEVM = await toEVM(request);
-        if (retToEVM.code === 200) {
-          messageApi.success("Submit success.");
-          setSendInvoice(retToEVM.data.invoice);
-        }
-      }
-    } 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);
-    }
-  }, [
-    onResetInvoice,
-    onCheckBalance,
-    targetNetwork,
-    sendArgs?.amount,
-    currentAssetPair?.pairId,
-    account?.address,
-    onDeposit,
-    messageApi,
-    switchChain,
-  ]);
-
-  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}
-          loading={payInvoiceLoading}
-          onClick={async () => {
-            setPayInvoiceLoading(true);
-            const txUrl = `${targetNetwork?.blockExplorers?.default.url}/tx/${tx}`;
-            await onAstraInvoice(sendInvoice, tx, txUrl)
-              .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 || validationError}
-        >
-          <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,
-    validationError,
-  ]);
-
-  const onExpired = useCallback(() => {
-    setIsInvoiceExpired(true);
-  }, []);
-
-  useEffect(() => {
-    if (filterdAssetPairs?.length > 0) {
-      setCurrentAssetPair(filterdAssetPairs[0]);
-      form.setFieldValue("received", filterdAssetPairs?.[0]?.pairId);
-    } else {
-      setCurrentAssetPair(null);
-      form.setFieldValue("received", "");
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterdAssetPairs, form]);
-  return (
-    <WrapperToLightning>
-      <Spin spinning={reserveInfoLoading}>
-        {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%",
-          }}
-          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="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>
-  );
-}
-export default memo(ToToken);

package/src/constants/index.js

@@ -1,21 +0,0 @@
-import Decimal from "decimal.js";
-Decimal.set({
-  toExpNeg: -20,
-  toExpPos: 40,
-});
-export const MODAL_DISPLAY_TYPE = {
-  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;
-}