astra-modal-test 1.0.6 → 1.0.8

package/dist/wallet-BcaN7X2R.js

@@ -0,0 +1,12 @@
+import { D as c } from "./index-DLgq0XCK.js";
+const v = c`<svg fill="none" viewBox="0 0 20 20">
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    d="M0 5.5c0-1.8 1.46-3.25 3.25-3.25H14.5c1.8 0 3.25 1.46 3.25 3.25v.28A3.25 3.25 0 0 1 20 8.88v2.24c0 1.45-.94 2.68-2.25 3.1v.28c0 1.8-1.46 3.25-3.25 3.25H3.25A3.25 3.25 0 0 1 0 14.5v-9Zm15.75 8.88h-2.38a4.38 4.38 0 0 1 0-8.76h2.38V5.5c0-.69-.56-1.25-1.25-1.25H3.25C2.56 4.25 2 4.81 2 5.5v9c0 .69.56 1.25 1.25 1.25H14.5c.69 0 1.25-.56 1.25-1.25v-.13Zm-2.38-6.76a2.37 2.37 0 1 0 0 4.75h3.38c.69 0 1.25-.55 1.25-1.24V8.87c0-.69-.56-1.24-1.25-1.24h-3.38Z"
+    clip-rule="evenodd"
+  />
+</svg>`;
+export {
+  v as walletSvg
+};

package/dist/wallet-placeholder-JKwOItCz.js

@@ -0,0 +1,18 @@
+import { D as a } from "./index-DLgq0XCK.js";
+const v = a`
+  <svg fill="none" viewBox="0 0 48 44">
+    <path
+      style="fill: var(--wui-color-bg-300);"
+      d="M4.56 8.64c-1.23 1.68-1.23 4.08-1.23 8.88v8.96c0 4.8 0 7.2 1.23 8.88.39.55.87 1.02 1.41 1.42C7.65 38 10.05 38 14.85 38h14.3c4.8 0 7.2 0 8.88-1.22a6.4 6.4 0 0 0 1.41-1.42c.83-1.14 1.1-2.6 1.19-4.92a6.4 6.4 0 0 0 5.16-4.65c.21-.81.21-1.8.21-3.79 0-1.98 0-2.98-.22-3.79a6.4 6.4 0 0 0-5.15-4.65c-.1-2.32-.36-3.78-1.19-4.92a6.4 6.4 0 0 0-1.41-1.42C36.35 6 33.95 6 29.15 6h-14.3c-4.8 0-7.2 0-8.88 1.22a6.4 6.4 0 0 0-1.41 1.42Z"
+    />
+    <path
+      style="fill: var(--wui-color-fg-200);"
+      fill-rule="evenodd"
+      d="M2.27 11.33a6.4 6.4 0 0 1 6.4-6.4h26.66a6.4 6.4 0 0 1 6.4 6.4v1.7a6.4 6.4 0 0 1 5.34 6.3v5.34a6.4 6.4 0 0 1-5.34 6.3v1.7a6.4 6.4 0 0 1-6.4 6.4H8.67a6.4 6.4 0 0 1-6.4-6.4V11.33ZM39.6 31.07h-6.93a9.07 9.07 0 1 1 0-18.14h6.93v-1.6a4.27 4.27 0 0 0-4.27-4.26H8.67a4.27 4.27 0 0 0-4.27 4.26v21.34a4.27 4.27 0 0 0 4.27 4.26h26.66a4.27 4.27 0 0 0 4.27-4.26v-1.6Zm-6.93-16a6.93 6.93 0 0 0 0 13.86h8a4.27 4.27 0 0 0 4.26-4.26v-5.34a4.27 4.27 0 0 0-4.26-4.26h-8Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+`;
+export {
+  v as walletPlaceholderSvg
+};

package/dist/walletconnect-DT2QhxnA.js

@@ -0,0 +1,36 @@
+import { D as l } from "./index-DLgq0XCK.js";
+const t = l`<svg fill="none" viewBox="0 0 96 67">
+  <path
+    fill="currentColor"
+    d="M25.32 18.8a32.56 32.56 0 0 1 45.36 0l1.5 1.47c.63.62.63 1.61 0 2.22l-5.15 5.05c-.31.3-.82.3-1.14 0l-2.07-2.03a22.71 22.71 0 0 0-31.64 0l-2.22 2.18c-.31.3-.82.3-1.14 0l-5.15-5.05a1.55 1.55 0 0 1 0-2.22l1.65-1.62Zm56.02 10.44 4.59 4.5c.63.6.63 1.6 0 2.21l-20.7 20.26c-.62.61-1.63.61-2.26 0L48.28 41.83a.4.4 0 0 0-.56 0L33.03 56.21c-.63.61-1.64.61-2.27 0L10.07 35.95a1.55 1.55 0 0 1 0-2.22l4.59-4.5a1.63 1.63 0 0 1 2.27 0L31.6 43.63a.4.4 0 0 0 .57 0l14.69-14.38a1.63 1.63 0 0 1 2.26 0l14.69 14.38a.4.4 0 0 0 .57 0l14.68-14.38a1.63 1.63 0 0 1 2.27 0Z"
+  />
+  <path
+    stroke="#000"
+    stroke-opacity=".1"
+    d="M25.67 19.15a32.06 32.06 0 0 1 44.66 0l1.5 1.48c.43.42.43 1.09 0 1.5l-5.15 5.05a.31.31 0 0 1-.44 0l-2.07-2.03a23.21 23.21 0 0 0-32.34 0l-2.22 2.18a.31.31 0 0 1-.44 0l-5.15-5.05a1.05 1.05 0 0 1 0-1.5l1.65-1.63ZM81 29.6l4.6 4.5c.42.41.42 1.09 0 1.5l-20.7 20.26c-.43.43-1.14.43-1.57 0L48.63 41.47a.9.9 0 0 0-1.26 0L32.68 55.85c-.43.43-1.14.43-1.57 0L10.42 35.6a1.05 1.05 0 0 1 0-1.5l4.59-4.5a1.13 1.13 0 0 1 1.57 0l14.68 14.38a.9.9 0 0 0 1.27 0l-.35-.35.35.35L47.22 29.6a1.13 1.13 0 0 1 1.56 0l14.7 14.38a.9.9 0 0 0 1.26 0L79.42 29.6a1.13 1.13 0 0 1 1.57 0Z"
+  />
+</svg>`, C = l`
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_22274_4692)">
+<path d="M0 6.64C0 4.17295 0 2.93942 0.525474 2.01817C0.880399 1.39592 1.39592 0.880399 2.01817 0.525474C2.93942 0 4.17295 0 6.64 0H9.36C11.8271 0 13.0606 0 13.9818 0.525474C14.6041 0.880399 15.1196 1.39592 15.4745 2.01817C16 2.93942 16 4.17295 16 6.64V9.36C16 11.8271 16 13.0606 15.4745 13.9818C15.1196 14.6041 14.6041 15.1196 13.9818 15.4745C13.0606 16 11.8271 16 9.36 16H6.64C4.17295 16 2.93942 16 2.01817 15.4745C1.39592 15.1196 0.880399 14.6041 0.525474 13.9818C0 13.0606 0 11.8271 0 9.36V6.64Z" fill="#C7B994"/>
+<path d="M4.49038 5.76609C6.42869 3.86833 9.5713 3.86833 11.5096 5.76609L11.7429 5.99449C11.8398 6.08938 11.8398 6.24323 11.7429 6.33811L10.9449 7.11942C10.8964 7.16686 10.8179 7.16686 10.7694 7.11942L10.4484 6.80512C9.09617 5.48119 6.90381 5.48119 5.5516 6.80512L5.20782 7.14171C5.15936 7.18915 5.08079 7.18915 5.03234 7.14171L4.23434 6.3604C4.13742 6.26552 4.13742 6.11167 4.23434 6.01678L4.49038 5.76609ZM13.1599 7.38192L13.8702 8.07729C13.9671 8.17217 13.9671 8.32602 13.8702 8.4209L10.6677 11.5564C10.5708 11.6513 10.4137 11.6513 10.3168 11.5564L8.04388 9.33105C8.01965 9.30733 7.98037 9.30733 7.95614 9.33105L5.6833 11.5564C5.58638 11.6513 5.42925 11.6513 5.33234 11.5564L2.12982 8.42087C2.0329 8.32598 2.0329 8.17213 2.12982 8.07724L2.84004 7.38188C2.93695 7.28699 3.09408 7.28699 3.191 7.38188L5.46392 9.60726C5.48815 9.63098 5.52743 9.63098 5.55166 9.60726L7.82447 7.38188C7.92138 7.28699 8.07851 7.28699 8.17543 7.38187L10.4484 9.60726C10.4726 9.63098 10.5119 9.63098 10.5361 9.60726L12.809 7.38192C12.9059 7.28703 13.063 7.28703 13.1599 7.38192Z" fill="#202020"/>
+</g>
+<defs>
+<clipPath id="clip0_22274_4692">
+<path d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`, L = l`
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="11" transform="matrix(-1 0 0 1 23 1)" fill="#202020"/>
+<circle cx="11" cy="11" r="11.5" transform="matrix(-1 0 0 1 23 1)" stroke="#C7B994" stroke-opacity="0.7"/>
+<path d="M15.4523 11.0686L16.7472 9.78167C13.8205 6.87297 10.1838 6.87297 7.25708 9.78167L8.55201 11.0686C10.7779 8.85645 13.2279 8.85645 15.4538 11.0686H15.4523Z" fill="#C7B994"/>
+<path d="M15.0199 14.067L12 11.0656L8.98 14.067L5.96004 11.0656L4.66663 12.3511L8.98 16.6393L12 13.638L15.0199 16.6393L19.3333 12.3511L18.0399 11.0656L15.0199 14.067Z" fill="#C7B994"/>
+</svg>
+`;
+export {
+  L as walletConnectBrownSvg,
+  C as walletConnectLightBrownSvg,
+  t as walletConnectSvg
+};

package/dist/warning-circle-D-vheGlH.js

@@ -0,0 +1,16 @@
+import { D as l } from "./index-DLgq0XCK.js";
+const e = l`<svg fill="none" viewBox="0 0 20 20">
+  <path
+    fill="currentColor"
+    d="M11 6.67a1 1 0 1 0-2 0v2.66a1 1 0 0 0 2 0V6.67ZM10 14.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
+  />
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    d="M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-7 9a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"
+    clip-rule="evenodd"
+  />
+</svg>`;
+export {
+  e as warningCircleSvg
+};

package/dist/x-DzCcyciF.js

@@ -0,0 +1,16 @@
+import { D as l } from "./index-DLgq0XCK.js";
+const h = l`<svg fill="none" viewBox="0 0 41 40">
+  <g clip-path="url(#a)">
+    <path fill="#000" d="M.8 0h40v40H.8z" />
+    <path
+      fill="#fff"
+      d="m22.63 18.46 7.14-8.3h-1.69l-6.2 7.2-4.96-7.2H11.2l7.5 10.9-7.5 8.71h1.7l6.55-7.61 5.23 7.61h5.72l-7.77-11.31Zm-9.13-7.03h2.6l11.98 17.13h-2.6L13.5 11.43Z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M.8 20a20 20 0 1 1 40 0 20 20 0 0 1-40 0Z" /></clipPath>
+  </defs>
+</svg>`;
+export {
+  h as xSvg
+};

package/dist/x-mark-BaQ2cTjZ.js

@@ -0,0 +1,7 @@
+import { D as l } from "./index-DLgq0XCK.js";
+const e = l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.9659 1.96541C2.30063 1.63067 2.84334 1.63067 3.17808 1.96541L6.00056 4.78789L8.82304 1.96541C9.15777 1.63067 9.70049 1.63067 10.0352 1.96541C10.37 2.30014 10.37 2.84285 10.0352 3.17759L7.21274 6.00007L10.0352 8.82255C10.37 9.15729 10.37 9.7 10.0352 10.0347C9.70049 10.3695 9.15777 10.3695 8.82304 10.0347L6.00056 7.21225L3.17808 10.0347C2.84334 10.3695 2.30063 10.3695 1.9659 10.0347C1.63116 9.7 1.63116 9.15729 1.9659 8.82255L4.78837 6.00007L1.9659 3.17759C1.63116 2.84285 1.63116 2.30014 1.9659 1.96541Z" fill="currentColor"/>
+</svg>`;
+export {
+  e as xMarkSvg
+};

package/eslint.config.mjs

@@ -5,7 +5,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'node_modules/', 'src/lib/bolt11.min.js'] },
   {
     files: ['**/*.{js,jsx}'],
     languageOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astra-modal-test",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "license": "MIT",
   "main": "dist/astra-sdk.es.js",
   "type": "module",
@@ -12,27 +12,28 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.2",
-    "@reown/appkit": "^1.6.0",
-    "@reown/appkit-adapter-wagmi": "^1.6.0",
-    "@tanstack/react-query": "^5.62.7",
+    "@reown/appkit": "^1.6.4",
+    "@reown/appkit-adapter-wagmi": "^1.6.4",
+    "@tanstack/react-query": "^5.64.1",
     "ahooks": "^3.8.4",
     "antd": "^5.22.4",
     "axios": "^1.7.9",
+    "consola": "^3.4.2",
     "dayjs": "^1.11.13",
     "decimal.js": "^10.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^6.1.13",
-    "viem": "^2.21.54",
-    "wagmi": "^2.14.0",
+    "viem": "^2.22.9",
+    "wagmi": "^2.14.8",
     "zustand": "^5.0.2"
   },
   "peerDependencies": {
-    "@reown/appkit": "^1.6.0",
-    "@reown/appkit-adapter-wagmi": "^1.6.0",
-    "@tanstack/react-query": "^5.62.7",
-    "viem": "^2.21.54",
-    "wagmi": "^2.14.0"
+    "@reown/appkit": "^1.6.4",
+    "@reown/appkit-adapter-wagmi": "^1.6.4",
+    "@tanstack/react-query": "^5.64.1",
+    "viem": "^2.22.9",
+    "wagmi": "^2.14.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -45,7 +46,7 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
     "vite": "^6.0.3",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-node-polyfills": "^0.24.0",
     "vite-plugin-style-import": "^2.0.0"
   }
 }

package/src/apis/lspApi.js

@@ -3,57 +3,80 @@ export const getTransaction = ({ hashlock }) => {
   const request = getRequest();
   return request.get(`/api/lsp/transaction`, {
     params: {
-      hashlock: hashlock
-    }
+      hashlock: hashlock,
+    },
   });
 };
-export const getReserveInfo = ({ assetId, chainId, pairName }) => {
+export const getReserveInfo = ({ chainId, pairId }) => {
   const request = getRequest();
   return request.get(`/api/lsp/reserveInfo`, {
     params: {
-      assetId,
       chainId,
-      pairName
-    }
+      pairId,
+    },
   });
-}
+};
 export const getPairs = ({ chainId }) => {
   const request = getRequest();
   return request.get(`/api/lsp/pairs`, {
     params: {
-      chainId
-    }
+      chainId,
+    },
   });
-}
-export const getSignature = ({ chainId, amount, pairName }) => {
+};
+export const getSignature = ({ chainId, amount, pairId }) => {
   const request = getRequest();
   return request.post(`/api/lsp/signature`, {
     chainId,
     amount,
-    pairName
-
+    pairId,
   });
-
-}
-export const toLightning = ({ assetId, chainId, amount, lnInvoice, depositTx }) => {
+};
+export const toLightning = ({
+  pairId,
+  chainId,
+  amount,
+  lnInvoice,
+  depositTx,
+}) => {
   const request = getRequest();
   return request.post(`/api/lsp/toLightning`, {
-    assetId,
+    pairId,
     chainId,
     amount,
     lnInvoice,
-    depositTx
+    depositTx,
   });
-}
+};
 
-export const toEVM = ({ assetId, chainId, amount, hashlock, pairName, depositTx }) => {
+export const toEVM = ({ pairId, chainId, amount, hashlock, depositTx }) => {
   const request = getRequest();
   return request.post(`/api/lsp/toEVM`, {
-    assetId,
+    pairId,
     chainId,
     hashlock,
     amount,
-    pairName,
-    depositTx
+    depositTx,
+  });
+};
+export const getContractConfig = () => {
+  const request = getRequest();
+  return request.get(`/api/lsp/contractConfig`, { params: {} });
+};
+export const getAssetPayReq = ({ payReq, assetId }) => {
+  const request = getRequest();
+  return request.get(`/api/lsp/assetPayReq`, {
+    params: {
+      payReq,
+      assetId,
+    },
+  });
+};
+export const bridgeIntervalStatus = ({ address }) => {
+  const request = getRequest();
+  return request.get(`/api/lsp/bridgeIntervalStatus`, {
+    params: {
+      address,
+    },
   });
-}
+};

package/src/comps/AstraImage.jsx

@@ -8,23 +8,30 @@ import iconNetworkPolygon from "../assets/network/Polygon.png";
 import iconNetworkSolana from "../assets/network/Solana.png";
 import iconAssetUSDC from "../assets/tokens/usdc.png";
 import iconAssetUSDT from "../assets/tokens/usdt.png";
-
+import iconAssetPay from "../assets/pay.png";
+import iconNetworkBotanix from "../assets/network/botanix.png";
+import iconLN from "../assets/ln.png";
 const ASSET_NAME_URI_MAP = {
   Sepolia: iconNetworkEth,
   Ethereum: iconNetworkEth,
+  "Botanix Testnet": iconNetworkBotanix,
+  "Botanix Mainnet": iconNetworkBotanix,
+  Botanix: iconNetworkBotanix,
   "Base Sepolia": iconNetworkBase,
   Base: iconNetworkBase,
   Lightning: iconNetorkLightning,
   USDT: iconAssetUSDT,
   USDC: iconAssetUSDC,
+  PAY: iconAssetPay,
   "BNB Smart Chain": iconNetworkBsc,
   Arbitrum: iconNetworkArbitrum,
   Solana: iconNetworkSolana,
   Polygon: iconNetworkPolygon,
+  LN: iconLN,
 };
 export default function AstraImg({ name, width = "20px", height = "20px" }) {
   const url = ASSET_NAME_URI_MAP[name];
   const src = url ? url : "";
-  const style = { width, height };
+  const style = { width, height, borderRadius: "50%" };
   return <img src={src} alt="astra" style={style} />;
 }

package/src/comps/AstraModal.jsx

@@ -1,6 +1,10 @@
-/* eslint-disable react/prop-types */
 import { useEffect, useState } from "react";
 import { Modal, Flex, message } from "antd";
+import Decimal from "decimal.js";
+Decimal.set({
+  toExpNeg: -20,
+  toExpPos: 40,
+});
 import { useChains, useChainId } from "wagmi";
 import useStore from "../store/index.js";
 import styled, { createGlobalStyle } from "styled-components";
@@ -11,6 +15,7 @@ import ToToken from "./ToToken.jsx";
 import { useGetPairs } from "../hooks/useLspApi.js";
 import ResultModal from "./ResultModal.jsx";
 import ClashDisplayFont from "../font/ClashDisplay-Variable.ttf";
+
 const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: 'ClashDisplay';
@@ -133,7 +138,6 @@ export default function AstraModal() {
     }
   }, [chainId, chains, setTargetNetwork]);
 
-
   return (
     <>
       <GlobalStyle />
@@ -177,19 +181,22 @@ export default function AstraModal() {
               <AstraModalLogo />
             </ModalWrapper>
           </StyledModal>
-        ):<></>}
+        ) : (
+          <></>
+        )}
         {contextHolder}
       </div>
-      {
-        resultModalShow ?  <ResultModal
-        messageApi={messageApi}
-        resultModalShow={resultModalShow}
-        requestData={resultModalRequest}
-        setResultModalRequest={setResultModalRequest}
-        setResultModalShow={setResultModalShow}
-      />:<></>
-      }
-     
+      {resultModalShow ? (
+        <ResultModal
+          messageApi={messageApi}
+          resultModalShow={resultModalShow}
+          requestData={resultModalRequest}
+          setResultModalRequest={setResultModalRequest}
+          setResultModalShow={setResultModalShow}
+        />
+      ) : (
+        <></>
+      )}
     </>
   );
 }

package/src/comps/AstraModalLogo.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import IconPowerby from "../assets/powerby.svg";
+// import IconPowerby from "../assets/powerby.svg";
 const AstraLogo = styled.div`
   margin-top: 24px;
   display: flex;
@@ -10,6 +10,7 @@ const AstraLogo = styled.div`
   justify-content: center;
   color: #fff;
   font-family: ClashDisplay;
+  align-items: center;
 `;
 // const BalanceFlex = styled(Flex)`
 //   .available_token_balance {
@@ -20,7 +21,9 @@ const AstraLogo = styled.div`
 export default function AstraModalLogo() {
   return (
     <AstraLogo>
-      Powered By <img src={IconPowerby} alt="" />
+      {/* Powered By <img style={{ width: "120px" }} src={IconPowerby} alt="" /> */}
+      Powered By <span style={{ color: "rgb(202,255,51)" }}>NodeFlow</span>
+      {/* Powered By <img style={{ width: "110px" }} src={IconPowerby} alt="" /> */}
     </AstraLogo>
   );
 }

package/src/comps/AstraNetwork.jsx

@@ -81,6 +81,13 @@ const AstraSelect = styled(Select)`
     color: #fff;
     right: 3px;
   }
+  @media (max-width: 768px) {
+    .astra-select-arrow {
+      color: #fff;
+      right: 5px;
+      font-size: 12px;
+    }
+  }
 `;
 const AstraAccount = styled.div`
   color: #fff;
@@ -148,7 +155,7 @@ export default function AstraNetwork({ messageApi, balance }) {
 
   const memoBalance = useMemo(() => {
     if (!balance?.formatted) return 0;
-    return numberWithCommas(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) => ({
@@ -228,7 +235,7 @@ export default function AstraNetwork({ messageApi, balance }) {
               {account?.address ? (
                 <>
                   <Space>
-                    <EllipsisMiddle suffixCount={8}>
+                    <EllipsisMiddle suffixCount={6}>
                       {account?.address}
                     </EllipsisMiddle>
                     <StyledDisconnectOutlined onClick={() => disconnect()} />

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/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 (
     <>
@@ -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>
@@ -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">