astra-modal-test 1.0.0

package/src/comps/AstraModalLogo.jsx

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+import { Select, Form, Flex, Spin, Button } from "antd";
+import { useAccount, useChains, useChainId, useSwitchChain } from "wagmi";
+import EllipsisMiddle from "./EllipsisMiddle";
+import AstraImg from "./AstraImage";
+import { useCallback, useMemo, useState } from "react";
+import Decimal from "decimal.js";
+import IconPowerby from "../assets/powerby.svg";
+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 AstraAccount = styled.div`
+  color: #fff;
+  text-align: center;
+  font-family: "ClashDisplay";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+`;
+const BalanceFlex = styled(Flex)`
+  .available_token_balance {
+    font-size: 12px;
+    color: #fff;
+  }
+`;
+export default function AstraModalLogo({ messageApi, balance }) {
+  return (
+    <div
+      style={{
+        marginTop: "24px",
+        display: "flex",
+        alignItems: "flex-end",
+        gap: "5px",
+        fontSize: "14px",
+        justifyContent: "center",
+        color: "#fff",
+      }}
+    >
+      Power By <img src={IconPowerby} alt="" />
+    </div>
+  );
+}

package/src/comps/AstraNetwork.jsx

@@ -0,0 +1,115 @@
+import styled from "styled-components";
+import { Select, Form, Flex, Spin, Button } from "antd";
+import { useAccount, useChains, useChainId, useSwitchChain } from "wagmi";
+import EllipsisMiddle from "./EllipsisMiddle";
+import AstraImg from "./AstraImage";
+import { useCallback, useMemo, useState } from "react";
+import Decimal from "decimal.js";
+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 AstraAccount = styled.div`
+  color: #fff;
+  text-align: center;
+  font-family: "ClashDisplay";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+`;
+const BalanceFlex = styled(Flex)`
+  .available_token_balance {
+    font-size: 12px;
+    color: #fff;
+  }
+`;
+const FormItemPair = styled(Form.Item)`
+  padding: 8px 20px 8px 10px;
+  border-radius: 12px;
+  background: rgba(166, 166, 166, 0.1);
+  border: 1px solid rgba(166, 166, 166, 1);
+  margin-bottom: 10px;
+  @media (max-width: 768px) {
+    padding: 8px 10px 8px 5px;
+    border-radius: 12px;
+    background: rgba(166, 166, 166, 0.1);
+    border: 1px solid rgba(166, 166, 166, 1);
+    margin-bottom: 10px;
+  }
+`;
+export default function AstraNetwork({ messageApi, balance }) {
+  const account = useAccount();
+  const chains = useChains();
+  const chainId = useChainId();
+  const { switchChainAsync } = useSwitchChain();
+  const [loading, setLoading] = useState(false);
+  const onNetWorkChange = useCallback(
+    async (value) => {
+      try {
+        setLoading(true);
+        const ret = await switchChainAsync({
+          chainId: value,
+        });
+        if (ret) {
+          messageApi.success(
+            "Switched to " + chains.find((chain) => chain.id === value).name
+          );
+        }
+      } catch (e) {
+        messageApi.error(e.message);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [switchChainAsync, messageApi, chains]
+  );
+
+  const memoBalance = useMemo(() => {
+    if (!balance?.formatted) return 0;
+    return new Decimal(balance?.formatted).toFixed(4);
+  }, [balance?.formatted]);
+  return (
+    <FormItemPair
+      label={
+        <AstraSelect
+          variant="borderless"
+          value={chainId}
+          options={chains.map((chain) => ({
+            label: <AstraImg name={chain.name} width="22px" />,
+            value: chain.id,
+          }))}
+          onChange={onNetWorkChange}
+        />
+      }
+    >
+      <Spin spinning={loading}>
+        <Flex justify="end">
+          <AstraAccount>
+            {account?.address ? (
+              <EllipsisMiddle suffixCount={8}>
+                {account?.address}
+              </EllipsisMiddle>
+            ) : (
+              "Connect Wallet"
+            )}
+          </AstraAccount>
+        </Flex>
+        <BalanceFlex justify="end">
+          <span className="available_token_balance">
+            Available: {memoBalance} {balance?.symbol}
+          </span>
+        </BalanceFlex>
+      </Spin>
+    </FormItemPair>
+  );
+}

package/src/comps/CheckErc20Button.jsx

@@ -0,0 +1,28 @@
+// import React, { useCallback } from "react";
+
+import { useAppKit, useAppKitAccount } from "@reown/appkit/react";
+
+export default function CheckErc20ButtonWrap({ children }) {
+  // const { open } = useAppKit();
+  const { address } = useAppKitAccount();
+  // const handleClick = useCallback(async () => {
+  //   if (!address) {
+  //     open({ view: "Connect" });
+  //   }
+  // }, [address, open]);
+
+  // const childWithNewOnClick = React.cloneElement(children, {
+  //   onClick: handleClick,
+  //   loading: isConnecting,
+  // });
+
+  return (
+    <>
+      {!address ? (
+        <appkit-connect-button class="custom-connect-button" />
+      ) : (
+        children
+      )}
+    </>
+  );
+}

package/src/comps/ConnectButton.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+export default function ConnectButton() {
+  useEffect(() => {
+    const appkitConnectButton = document.querySelector("appkit-connect-button");
+
+    if (appkitConnectButton) {
+      const interval = setInterval(() => {
+        if (appkitConnectButton.shadowRoot) {
+          const wuiConnectButton =
+            appkitConnectButton.shadowRoot.querySelector("wui-connect-button");
+          if (wuiConnectButton) {
+            const shadowRoot = wuiConnectButton.shadowRoot;
+            if (shadowRoot) {
+              const button = shadowRoot.querySelector("button");
+              if (button) {
+                button.style.backgroundColor = "#33ba91";
+                button.style.width = "100%";
+                button.style.color = "#1A1A1A";
+                button.style.padding = "12px 30px";
+                button.style.borderRadius = "12px";
+                button.style.fontSize = "16px";
+                button.style.border = "none";
+                button.style.fontFamily = "ClashDisplay";
+              }
+              clearInterval(interval); // 找到目标后停止轮询
+            }
+          }
+        }
+      }, 100); // 每 100 毫秒检查一次
+
+      // 如果需要，可以设置轮询的最大时间限制
+      setTimeout(() => clearInterval(interval), 5000);
+    }
+  }, []);
+
+  return <appkit-connect-button class="custom-connect-button" />;
+}

package/src/comps/EllipsisMiddle.jsx

@@ -0,0 +1,42 @@
+import { Typography } from "antd";
+
+// import { ReactComponent as CopySvg } from "img/svg/copy.svg";
+// const { Text } = Typography;
+const EllipsisMiddle = ({
+  suffixCount = 6,
+  children,
+  copyable = true,
+  suffixCountMore = 1,
+  suffixEnable = true,
+  handleClick,
+  className,
+}) => {
+  const strChildren = "" + children;
+  const formatChildren =
+    suffixEnable && strChildren?.length > suffixCount * 2 + suffixCountMore
+      ? `${strChildren.substring(
+          0,
+          suffixCount + suffixCountMore
+        )}...${strChildren.substring(strChildren.length - suffixCount)}`
+      : strChildren;
+
+  return (
+    <Typography.Text
+      style={{
+        maxWidth: "100%",
+      }}
+      className={className || ""}
+      copyable={
+        copyable
+          ? {
+              text: children,
+            }
+          : false
+      }
+      onClick={() => handleClick && handleClick()}
+    >
+      {formatChildren}
+    </Typography.Text>
+  );
+};
+export default EllipsisMiddle;

package/src/comps/ResultModal.jsx

@@ -0,0 +1,307 @@
+import { Modal, Flex, Button } from "antd";
+import { useCallback, useEffect, useState } from "react";
+import styled from "styled-components";
+import { MODAL_DISPLAY_TYPE } from "../constants/index.js";
+import useStore from "../store/index.js";
+import { numberWithCommas } from "../utils";
+import dayjs from "dayjs";
+import AstraImg from "./AstraImage.jsx";
+import IconBridgeLoading from "../assets/bridge-loading.png";
+import IconSuccess from "../assets/success.svg";
+import AstraModalLogo from "./AstraModalLogo.jsx";
+import { toLightning, toEVM } from "../apis/lspApi";
+const ModalWrapper = styled.div``;
+const BridgeDetail = styled.div`
+  padding: 10px 20px;
+  border-radius: 12px;
+  background: rgba(166, 166, 166, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const BridgeDetailItem = styled(Flex)`
+  .lightning {
+    color: #caff33;
+  }
+`;
+const BridgeDetailShow = styled(Flex)`
+  padding-top: 30px;
+  .lightning {
+    color: #caff33;
+  }
+  .success_small {
+    width: 20px;
+    height: 20px;
+  }
+  .bridge_loading {
+    flex: 1;
+    width: 172px;
+    height: 70px;
+  }
+`;
+const ModalTitle = styled.div`
+  .modal-title {
+    width: 100%;
+    text-align: left;
+  }
+  .astra-wrapper-account {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 30px;
+    flex: 1;
+  }
+`;
+// 自定义 Modal 样式
+const StyledModal = styled(Modal)`
+  @font-face {
+    font-family: "ClashDisplay";
+    src: url("../font/ClashDisplay-Variable.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+  }
+  font-family: "ClashDisplay", sans-serif;
+  .astra-modal-content {
+    background: rgba(51, 51, 51, 0.2);
+    border: 1px solid;
+    border-image-source: linear-gradient(
+      147.76deg,
+      #333333 0.7%,
+      rgba(51, 51, 51, 0) 98.42%
+    );
+    backdrop-filter: blur(50px);
+    padding: 20px 30px;
+
+    .astra-modal-header {
+      background: transparent;
+
+      .modal-title {
+        font-size: 20px;
+        font-weight: 500;
+      }
+    }
+    .colorcaff33 {
+      color: #caff33;
+    }
+  }
+
+  // 媒体查询样式
+  @media (max-width: 768px) {
+    font-size: 12px;
+
+    .astra-modal-content {
+      padding: 20px 10px;
+
+      .astra-modal-header .modal-title {
+        font-size: 18px;
+      }
+    }
+  }
+
+  @media (max-width: 575px) {
+    .astra-modal-content {
+      padding: 15px 8px;
+
+      .astra-modal-header .modal-title {
+        font-size: 16px;
+      }
+    }
+  }
+`;
+export default function ResultModal({
+  messageApi,
+  resultModalShow = false,
+  requestData,
+  setResultModalShow,
+  setResultModalRequest,
+}) {
+  const { modalDisplayType, targetNetwork } = useStore();
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const onCancel = useCallback(() => {
+    setResultModalShow(false);
+    setResultModalRequest(null);
+  }, [setResultModalRequest, setResultModalShow]);
+  const handleRequest = useCallback(async () => {
+    try {
+      setSubmitLoading(true);
+      if (modalDisplayType === MODAL_DISPLAY_TYPE.TO_LIGHTNING) {
+        const retToLightning = await toLightning(requestData?.request);
+        if (retToLightning?.code == 200) {
+          messageApi.open({
+            type: "success",
+            content: "Deposit success",
+          });
+        }
+      } else {
+        // handle ethereum request
+      }
+    } catch (e) {
+      messageApi.open({
+        type: "error",
+        content: e.message,
+      });
+    } finally {
+      setSubmitLoading(false);
+    }
+  }, [messageApi, modalDisplayType, requestData?.request]);
+
+  useEffect(() => {
+    if (resultModalShow && requestData) {
+      handleRequest();
+    }
+  }, [handleRequest, requestData, resultModalShow]);
+
+  return (
+    <>
+      <StyledModal
+        title={
+          <ModalTitle>
+            <Flex align="center">
+              <span className="modal-title">
+                {modalDisplayType === MODAL_DISPLAY_TYPE.TO_LIGHTNING
+                  ? "Ethereum to Lightning"
+                  : "Lightning to ethereum"}
+              </span>
+            </Flex>
+          </ModalTitle>
+        }
+        width={"500px"}
+        footer={null}
+        open={resultModalShow}
+        onCancel={onCancel}
+        centered
+        maskClosable={false}
+        mask={false}
+        zIndex={998}
+      >
+        <ModalWrapper>
+          {modalDisplayType === MODAL_DISPLAY_TYPE.TO_LIGHTNING && (
+            <>
+              <BridgeDetail>
+                <BridgeDetailItem justify="space-between" align="center">
+                  <div>Timestamp</div>
+                  <div className="lightning">
+                    {requestData?.timestamp
+                      ? dayjs(requestData.timestamp).format(
+                          "YYYY-MM-DD HH:mm:ss"
+                        )
+                      : "--"}
+                  </div>
+                </BridgeDetailItem>
+                <BridgeDetailItem justify="space-between" align="center">
+                  <div>Value</div>
+                  <div className="lightning">
+                    {numberWithCommas(requestData?.formatTokenAmt)}LUSD
+                  </div>
+                </BridgeDetailItem>
+              </BridgeDetail>
+              <BridgeDetailShow align="center" justify="center">
+                <Flex vertical={true} justify="center" align="center" gap="5px">
+                  <AstraImg
+                    name={targetNetwork?.name}
+                    width="40px"
+                    height="40px"
+                  />
+                  <span>{targetNetwork?.name}</span>
+                  <a
+                    href={`${targetNetwork?.blockExplorers?.default.url}/tx/${requestData?.txHash}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    View on explore
+                  </a>
+                </Flex>
+                <Flex
+                  justify="center"
+                  align="center"
+                  style={{ width: "170px" }}
+                >
+                  {submitLoading ? (
+                    <img
+                      className="bridge_loading"
+                      src={IconBridgeLoading}
+                      alt="loading"
+                    />
+                  ) : (
+                    <img className="success" src={IconSuccess} alt="success" />
+                  )}
+                </Flex>
+                <Flex vertical={true} justify="center" align="center" gap="5px">
+                  <AstraImg name="Lightning" width="40px" height="40px" />
+                  <span className="lightning">Lightning</span>
+                  <img
+                    className="success_small"
+                    src={IconSuccess}
+                    alt="success"
+                  />
+                </Flex>
+              </BridgeDetailShow>
+            </>
+          )}
+          {modalDisplayType === MODAL_DISPLAY_TYPE.TO_EVM && (
+            <>
+              <BridgeDetail>
+                <BridgeDetailItem justify="space-between" align="center">
+                  <div>Timestamp</div>
+                  <div className="lightning">
+                    {requestData?.timestamp
+                      ? dayjs(requestData.timestamp).format(
+                          "YYYY-MM-DD HH:mm:ss"
+                        )
+                      : "--"}
+                  </div>
+                </BridgeDetailItem>
+                <BridgeDetailItem justify="space-between" align="center">
+                  <div>Value</div>
+                  <div className="lightning">{numberWithCommas(10000)}LUSD</div>
+                </BridgeDetailItem>
+              </BridgeDetail>
+              <BridgeDetailShow align="center" justify="center">
+                <Flex vertical={true} justify="center" align="center" gap="5px">
+                  <AstraImg name="Lightning" width="40px" height="40px" />
+                  <span className="lightning">Lightning</span>
+                  <img
+                    className="success_small"
+                    src={IconSuccess}
+                    alt="success"
+                  />
+                </Flex>
+
+                <Flex
+                  justify="center"
+                  align="center"
+                  style={{ width: "170px" }}
+                >
+                  {submitLoading ? (
+                    <img
+                      className="bridge_loading"
+                      src={IconBridgeLoading}
+                      alt="loading"
+                    />
+                  ) : (
+                    <img className="success" src={IconSuccess} alt="success" />
+                  )}
+                </Flex>
+                <Flex vertical={true} justify="center" align="center" gap="5px">
+                  <AstraImg
+                    name={targetNetwork?.name}
+                    width="40px"
+                    height="40px"
+                  />
+                  <span>{targetNetwork?.name}</span>
+                  <a
+                    href={`${targetNetwork?.blockExplorers?.default.url}/tx/${requestData?.txHash}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    View on explore
+                  </a>
+                </Flex>
+              </BridgeDetailShow>
+            </>
+          )}
+          <AstraModalLogo />
+        </ModalWrapper>
+      </StyledModal>
+    </>
+  );
+}