astra-modal-test 1.0.5 → 1.0.7

package/src/comps/AstraNetwork.jsx

@@ -1,15 +1,76 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import { Select, Form, Flex, Spin, Space } from "antd";
-import { useAccount, useChains, useChainId, useSwitchChain, useDisconnect } from "wagmi";
+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 { 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;
+  // 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;
@@ -18,6 +79,14 @@ const AstraSelect = styled(Select)`
   }
   .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`
@@ -39,7 +108,7 @@ const StyledDisconnectOutlined = styled(DisconnectOutlined)`
   color: rgba(202, 255, 51, 1);
   cursor: pointer;
   &:hover {
-    color:red;
+    color: red;
   }
 `;
 const FormItemPair = styled(Form.Item)`
@@ -86,47 +155,107 @@ export default function AstraNetwork({ messageApi, balance }) {
 
   const memoBalance = useMemo(() => {
     if (!balance?.formatted) return 0;
-    return new Decimal(balance?.formatted).toFixed(4);
+    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 (
-    <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 ? (
-              <>
-                <Space>
-                  <EllipsisMiddle suffixCount={8}>
-                    {account?.address}
-                  </EllipsisMiddle>
-                  <StyledDisconnectOutlined onClick={() => disconnect()} />
-                </Space>
-              </>
-
-
-            ) : (
-              "Connect Wallet"
-            )}
-          </AstraAccount>
-        </Flex>
-        <BalanceFlex justify="end">
-          <span className="available_token_balance">
-            Available: {memoBalance} {balance?.symbol}
-          </span>
-        </BalanceFlex>
-      </Spin>
-    </FormItemPair>
+    <>
+      <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,6 +1,6 @@
 // import React, { useCallback } from "react";
 
-import { useAppKit, useAppKitAccount } from "@reown/appkit/react";
+import { useAppKitAccount } from "@reown/appkit/react";
 
 export default function CheckErc20ButtonWrap({ children }) {
   // const { open } = useAppKit();

package/src/comps/CommonStyle.jsx

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

package/src/comps/ConnectButton.jsx

@@ -1,36 +1,19 @@
-import React, { useEffect } from "react";
+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() {
-  useEffect(() => {
-    const appkitConnectButton = document.querySelector("appkit-connect-button");
+  
+  const { connect } = useConnect();
 
-    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);
-
-      setTimeout(() => clearInterval(interval), 5000);
-    }
-  }, []);
-
-  return <appkit-connect-button class="custom-connect-button" />;
+  return <AstraButton type="primary" onClick={() => connect({ connector: injected() })}>Connect Wallet</AstraButton>;
 }

package/src/comps/ResultModal.jsx

@@ -1,5 +1,5 @@
 import { Modal, Flex } from "antd";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { MODAL_DISPLAY_TYPE } from "../constants/index.js";
 import useStore from "../store/index.js";
@@ -9,7 +9,6 @@ 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 } from "../apis/lspApi";
 const ModalWrapper = styled.div``;
 const BridgeDetail = styled.div`
   padding: 10px 20px;
@@ -108,47 +107,46 @@ const StyledModal = styled(Modal)`
   }
 `;
 export default function ResultModal({
-  messageApi,
   resultModalShow = false,
   requestData,
   setResultModalShow,
   setResultModalRequest,
 }) {
-  const { modalDisplayType, targetNetwork } = useStore();
-  const [submitLoading, setSubmitLoading] = useState(false);
+  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]);
+  // 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]);
+  // useEffect(() => {
+  //   if (resultModalShow && requestData) {
+  //     handleRequest();
+  //   }
+  // }, [handleRequest, requestData, resultModalShow]);
 
   return (
     <>
@@ -158,8 +156,8 @@ export default function ResultModal({
             <Flex align="center">
               <span className="modal-title">
                 {modalDisplayType === MODAL_DISPLAY_TYPE.TO_LIGHTNING
-                  ? "Ethereum to Lightning"
-                  : "Lightning to ethereum"}
+                  ? `${targetNetwork?.name} to Lightning`
+                  : `Lightning to ${targetNetwork?.name}`}
               </span>
             </Flex>
           </ModalTitle>
@@ -189,7 +187,10 @@ export default function ResultModal({
                 <BridgeDetailItem justify="space-between" align="center">
                   <div>Value</div>
                   <div className="lightning">
-                    {numberWithCommas(requestData?.formatTokenAmt)} LUSD
+                    {numberWithCommas(requestData?.formatTokenAmt)}
+                    <span style={{ paddingLeft: "5px" }}>
+                      {currentAssetPair?.asset?.name}
+                    </span>
                   </div>
                 </BridgeDetailItem>
               </BridgeDetail>
@@ -206,7 +207,7 @@ export default function ResultModal({
                     target="_blank"
                     rel="noreferrer"
                   >
-                    View on explore
+                    View on explorer
                   </a>
                 </Flex>
                 <Flex
@@ -251,7 +252,12 @@ export default function ResultModal({
                 </BridgeDetailItem>
                 <BridgeDetailItem justify="space-between" align="center">
                   <div>Value</div>
-                  <div className="lightning">{numberWithCommas(10000)}LUSD</div>
+                  <div className="lightning">
+                    {numberWithCommas(10000)}
+                    <span style={{ paddingLeft: "5px" }}>
+                      {currentAssetPair?.asset?.name}
+                    </span>
+                  </div>
                 </BridgeDetailItem>
               </BridgeDetail>
               <BridgeDetailShow align="center" justify="center">
@@ -292,7 +298,7 @@ export default function ResultModal({
                     target="_blank"
                     rel="noreferrer"
                   >
-                    View on explore
+                    View on explorer
                   </a>
                 </Flex>
               </BridgeDetailShow>