astra-modal-test 1.0.10 → 1.0.11

package/src/comps/AstraNetwork.jsx

@@ -1,261 +0,0 @@
-import styled, { createGlobalStyle } from "styled-components";
-import { Select, Form, Flex, Spin, Space } from "antd";
-import {
-  useAccount,
-  useChains,
-  useChainId,
-  useSwitchChain,
-  useDisconnect,
-} from "wagmi";
-import EllipsisMiddle from "./EllipsisMiddle";
-import AstraImg from "./AstraImage";
-import { useCallback, useMemo, useState } from "react";
-import { DisconnectOutlined } from "@ant-design/icons";
-import Decimal from "decimal.js";
-import { AvalibleBalance } from "./CommonStyle";
-import { numberWithCommas } from "../utils";
-const GlobalStyle = createGlobalStyle`
-  .popup-astra-select-content {
-    border-radius: 5px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    width: 200px;
-
-    .label-box {
-      display: flex;
-      
-      align-items: center;
-      justify-content: space-between;
-      .label-flex{
-        display: flex;
-        gap: 3px;
-        align-items: center;
-      }
-      .label-soon {
-        border-radius: 10px;
-        background: rgba(202, 255, 51, 0.1);
-        color: #caff33;
-        padding: 0px 10px 2px;
-        font-size: 12px;
-        font-weight: 400;
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-`;
-const AstraSelect = styled(Select)`
-  // width: 60px !important;
-  .astra-select-selector {
-    padding: 0 0px !important;
-    .label-box {
-      display: flex;
-      align-items: center;
-      .label-flex {
-        display: flex;
-        gap: 3px;
-        align-items: center;
-      }
-    }
-  }
-  @media (max-width: 768px) {
-    .astra-select-selector {
-      padding: 0 0px !important;
-      .label-box {
-        display: flex;
-        align-items: center;
-        .label-flex {
-          font-size: 13px;
-          display: flex;
-          gap: 3px;
-          align-items: center;
-        }
-      }
-    }
-  }
-  .astra-select-selection-item {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-  }
-  .astra-select-arrow {
-    color: #fff;
-    right: 3px;
-  }
-  @media (max-width: 768px) {
-    .astra-select-arrow {
-      color: #fff;
-      right: 5px;
-      font-size: 12px;
-    }
-  }
-`;
-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 StyledDisconnectOutlined = styled(DisconnectOutlined)`
-  color: rgba(202, 255, 51, 1);
-  cursor: pointer;
-  &:hover {
-    color: red;
-  }
-`;
-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 { disconnect } = useDisconnect();
-  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 numberWithCommas(new Decimal(balance?.formatted).toFixed(5, Decimal.ROUND_DOWN));
-  }, [balance?.formatted]);
-  const newworkOptions = useMemo(() => {
-    const openChains = chains.map((chain) => ({
-      label: (
-        <div className="label-box">
-          <div className="label-flex">
-            <AstraImg name={chain.name} width="22px" />
-            <div className="label-name">{chain.name}</div>
-          </div>
-        </div>
-      ),
-      value: chain.id,
-    }));
-    const soon = [
-      {
-        label: (
-          <div className="label-box">
-            <div className="label-flex">
-              <AstraImg name="Arbitrum" width="22px" />
-              <div className="label-name">Arbitrum</div>
-            </div>
-            <div className="label-soon">soon</div>
-          </div>
-        ),
-        value: "Arbitrum",
-        disabled: true,
-      },
-      {
-        label: (
-          <div className="label-box">
-            <div className="label-flex">
-              <AstraImg name="Solana" width="22px" />
-              <div className="label-name">Solana</div>
-            </div>
-            <div className="label-soon">soon</div>
-          </div>
-        ),
-        value: "Solana",
-        disabled: true,
-      },
-      {
-        label: (
-          <div className="label-box">
-            <div className="label-flex">
-              <AstraImg name="Polygon" width="22px" />
-              <div className="label-name">Polygon</div>
-            </div>
-            <div className="label-soon">soon</div>
-          </div>
-        ),
-        value: "Polygon",
-        disabled: true,
-      },
-    ];
-    return openChains.concat(soon);
-  }, [chains]);
-  return (
-    <>
-      <GlobalStyle />
-      <FormItemPair
-        label={
-          <AstraSelect
-            variant="borderless"
-            value={chainId}
-            dropdownStyle={{
-              width: "200px",
-            }}
-            popupClassName="popup-astra-select-content"
-            options={newworkOptions}
-            onChange={onNetWorkChange}
-          />
-        }
-      >
-        <Spin spinning={loading}>
-          <Flex justify="end">
-            <AstraAccount>
-              {account?.address ? (
-                <>
-                  <Space>
-                    <EllipsisMiddle suffixCount={6}>
-                      {account?.address}
-                    </EllipsisMiddle>
-                    <StyledDisconnectOutlined onClick={() => disconnect()} />
-                  </Space>
-                </>
-              ) : (
-                "Connect Wallet"
-              )}
-            </AstraAccount>
-          </Flex>
-          <BalanceFlex justify="end">
-            <span className="available_token_balance">
-              Available:{" "}
-              <AvalibleBalance>
-                {memoBalance} {balance?.symbol}
-              </AvalibleBalance>
-            </span>
-          </BalanceFlex>
-        </Spin>
-      </FormItemPair>
-    </>
-  );
-}

package/src/comps/CheckErc20Button.jsx

@@ -1,28 +0,0 @@
-// import React, { useCallback } from "react";
-
-import { 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/CommonStyle.jsx

@@ -1,4 +0,0 @@
-import styled from "styled-components";
-export const AvalibleBalance = styled.span`
-  padding-left: 5px;
-`;

package/src/comps/ConnectButton.jsx

@@ -1,19 +0,0 @@
-import { Button } from "antd";
-import { useConnect } from "wagmi";
-import { injected } from '@wagmi/connectors'
-import styled from "styled-components";
-const AstraButton = styled(Button)`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  padding: 0 30px;
-  font-size: 16px;
-  line-height: 42px;
-  background-color: #33ba91;
-`;
-export default function ConnectButton() {
-  
-  const { connect } = useConnect();
-
-  return <AstraButton type="primary" onClick={() => connect({ connector: injected() })}>Connect Wallet</AstraButton>;
-}

package/src/comps/EllipsisMiddle.jsx

@@ -1,42 +0,0 @@
-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

@@ -1,312 +0,0 @@
-import { Modal, Flex } from "antd";
-import { useCallback, 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";
-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;
-  }
-`;
-const StyledModal = styled(Modal)`
-  * {
-    font-family: "ClashDisplay";
-  }
-  .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;
-    }
-    .astra-col {
-      font-family: "ClashDisplay";
-    }
-    .astra-typography {
-      font-family: "ClashDisplay";
-    }
-  }
-
-  @media (max-width: 768px) {
-    font-size: 12px;
-
-    .astra-modal-content {
-      padding: 20px 10px;
-      background: rgba(24, 30, 35, 1);
-      .astra-modal-header .modal-title {
-        font-size: 18px;
-      }
-    }
-  }
-
-  @media (max-width: 575px) {
-    .astra-modal-content {
-      padding: 15px 8px;
-      background: rgba(24, 30, 35, 1);
-      .astra-modal-header .modal-title {
-        font-size: 16px;
-      }
-    }
-  }
-`;
-export default function ResultModal({
-  resultModalShow = false,
-  requestData,
-  setResultModalShow,
-  setResultModalRequest,
-}) {
-  const { modalDisplayType, targetNetwork, currentAssetPair } = useStore();
-  const [submitLoading] = 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
-                  ? `${targetNetwork?.name} to Lightning`
-                  : `Lightning to ${targetNetwork?.name}`}
-              </span>
-            </Flex>
-          </ModalTitle>
-        }
-        width={"500px"}
-        footer={null}
-        open={resultModalShow}
-        onCancel={onCancel}
-        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)}
-                    <span style={{ paddingLeft: "5px" }}>
-                      {currentAssetPair?.asset?.name}
-                    </span>
-                  </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 explorer
-                  </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)}
-                    <span style={{ paddingLeft: "5px" }}>
-                      {currentAssetPair?.asset?.name}
-                    </span>
-                  </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 explorer
-                  </a>
-                </Flex>
-              </BridgeDetailShow>
-            </>
-          )}
-          <AstraModalLogo />
-        </ModalWrapper>
-      </StyledModal>
-    </>
-  );
-}