astra-modal-test 1.0.0

package/src/hooks/useContract.js

@@ -0,0 +1,127 @@
+
+import {
+    useChainId,
+    useReadContract,
+    useWriteContract,
+    useConfig,
+} from "wagmi";
+import { waitForTransactionReceipt, readContract } from "@wagmi/core";
+import { useMemo, useCallback } from "react";
+import contractConfig from "../constants/contracts";
+import useStore from "../store";
+import { formatAssetByDecimal } from "../utils";
+export function useBridgeContract(account) {
+
+    const chainId = useChainId();
+    const config = contractConfig[chainId];
+
+    const { currentAssetPair } = useStore();
+
+
+    const bridgeContractConfig = useMemo(() => {
+        return {
+            address: config?.Bridge?.address,
+            abi: config?.Bridge?.abi,
+            enabled: !!config && !!account?.address
+        };
+    }, [account?.address, config]);
+
+
+    const tokenContractConfig = useMemo(() => {
+        return {
+            address: currentAssetPair?.token?.address,
+            abi: config?.USDT?.abi,
+            enabled: !!currentAssetPair
+        }
+    }, [config?.USDT?.abi, currentAssetPair])
+
+
+
+    const { data: allowanceRet, isLoading: allowanceLoading, refetch: onReloadAllowance } = useReadContract({
+        ...tokenContractConfig,
+        functionName: "allowance",
+        args: [account?.address, config?.Bridge?.address],
+        enabled: !!account?.address
+    });
+
+    const formatAllowance = useMemo(() => {
+        if (!allowanceRet) return 0;
+        return formatAssetByDecimal(allowanceRet?.toString(), currentAssetPair?.token?.decimal);
+    }, [allowanceRet, currentAssetPair?.token?.decimal])
+
+    const wagmiConfig = useConfig();
+    const { writeContractAsync } = useWriteContract();
+
+    const onApprove = useCallback(
+        async (approveAmount, wait = true) => {
+            //console.log("🚀 ~ onApprove ~ approveAmount:", approveAmount, config?.address)
+            const tx = await writeContractAsync({
+                ...tokenContractConfig,
+                functionName: "approve",
+                args: [config?.Bridge?.address, BigInt(approveAmount)],
+            });
+
+            if (wait) {
+                await waitForTransactionReceipt(
+                    wagmiConfig,
+                    {
+                        hash: tx
+                    },
+                    1
+                );
+                if (onReloadAllowance) {
+                    await onReloadAllowance();
+                }
+            }
+            return tx;
+        },
+        [config?.Bridge?.address, onReloadAllowance, tokenContractConfig, wagmiConfig, writeContractAsync]
+    );
+
+
+
+    const onDeposit = useCallback(
+        async ({ hashlock, fromAddr, toAddr, tokenAddr, amount, timeLock, fee, toLightning = true, signature = '0x' }, wait = true, reloadAllowance = true) => {
+
+            const contractInfo = await readContract(wagmiConfig, {
+                ...bridgeContractConfig,
+                functionName: "getContractByKey",
+                args: [hashlock],
+            });
+            if (contractInfo?.hashlock === hashlock) {
+                throw new Error('Invoice already exists.');
+            }
+
+            const tx = await writeContractAsync({
+                ...bridgeContractConfig,
+                functionName: "deposit",
+                args: [hashlock, fromAddr, toAddr, tokenAddr, BigInt(amount), timeLock, fee, toLightning, signature],
+                value: fee
+            });
+
+            if (wait) {
+                await waitForTransactionReceipt(
+                    wagmiConfig,
+                    {
+                        hash: tx
+                    },
+                    1
+                );
+                if (onReloadAllowance && reloadAllowance) {
+                    await onReloadAllowance();
+                }
+            }
+            return tx;
+        },
+        [bridgeContractConfig, onReloadAllowance, wagmiConfig, writeContractAsync]
+    );
+
+    return {
+        allowanceRet,
+        formatAllowance,
+        allowanceLoading,
+        onReloadAllowance,
+        onApprove,
+        onDeposit
+    };
+}

package/src/hooks/useLspApi.js

@@ -0,0 +1,53 @@
+import { useRequest } from "ahooks";
+import { useEffect, useMemo } from "react";
+import { getPairs, getReserveInfo } from "../apis/lspApi";
+import useStore from "../store";
+export const useGetPairs = () => {
+    const { setCurrentAssetPair, setAllAssetPairs, targetNetwork, astraApiUrl } = useStore();
+    const { data, run, loading, refresh, cancel } = useRequest(() => getPairs({ chainId: targetNetwork?.id }), {
+        refreshDeps: [targetNetwork?.id, astraApiUrl],
+        ready: !!targetNetwork?.id && !!astraApiUrl
+    });
+
+    useEffect(() => {
+        if (data?.data?.pairs) {
+            setAllAssetPairs(data?.data?.pairs);
+            //setCurrentAssetPair(data?.data?.pairs[0]);
+        }
+    }, [data?.data?.pairs, setAllAssetPairs, setCurrentAssetPair])
+
+    return {
+        summary: data?.data || null,
+        loading,
+        run,
+        refresh,
+        cancel
+    };
+};
+
+export const useGetReserveInfo = (targetNetwork, currentAssetPair) => {
+
+    const assetId = useMemo(() => {
+        return currentAssetPair?.asset?.assetId
+    }, [currentAssetPair?.asset?.assetId])
+    const chainId = useMemo(() => {
+        return targetNetwork?.id
+    }, [targetNetwork?.id])
+
+    const pairName = useMemo(() => {
+        return currentAssetPair?.pairName
+    }, [currentAssetPair])
+
+
+    const { data, loading, refresh } = useRequest(() => getReserveInfo({ chainId: chainId, assetId: assetId, pairName: pairName }), {
+        refreshDeps: [assetId, chainId, pairName],
+        ready: !!chainId && !!assetId && !!pairName,
+        debounceWait: 300,
+    });
+
+    return {
+        reserveInfo: data?.data,
+        loading,
+        refresh
+    }
+}

package/src/hooks/useParseInvoice.js

@@ -0,0 +1,85 @@
+import { useCallback, useMemo, useState } from "react";
+import "../lib/bolt11.min.js"
+import useStore from "../store";
+import { msatsToTprAsset } from "../utils";
+// import { useEffect } from "react";
+import Decimal from "decimal.js";
+import { useDebounceEffect } from "ahooks";
+// window.decode = decode;
+function getPaymentHash(requestObject) {
+    // go through the tags and find the 'payment_hash' tagName and return the 'data'
+    const paymentHash = requestObject.tags.find(tag => tag.tagName === "payment_hash");
+    if (!paymentHash) {
+        return undefined;
+    }
+    return "0x" + paymentHash.data.toString();
+}
+export default function useParseInvoice(invoice) {
+    const [assetAmt, setAssetAmt] = useState(0);
+    const [hashlock, setHashlock] = useState("");
+    const { currentAssetPair } = useStore();
+    const [parseInvoiceLoading, setParseInvoiceLoading] = useState(false);
+    const formatAssetAmt = useMemo(() => {
+        if (assetAmt && currentAssetPair) {
+            const decimal = currentAssetPair.asset.decimal;
+            return new Decimal(assetAmt).div(10 ** decimal).toFixed(decimal);
+        }
+        return 0;
+    }, [assetAmt, currentAssetPair])
+
+    const tokenAmt = useMemo(() => {
+        if (currentAssetPair) {
+            const decimal = currentAssetPair.token.decimal;
+            return new Decimal(formatAssetAmt).mul(10 ** decimal).toFixed(0);
+        }
+        return 0;
+    }, [currentAssetPair, formatAssetAmt])
+
+    const formatTokenAmt = useMemo(() => {
+        if (currentAssetPair) {
+            const decimal = currentAssetPair.token.decimal;
+            return new Decimal(tokenAmt).div(10 ** decimal).toFixed(decimal);
+        }
+        return 0;
+
+    }, [currentAssetPair, tokenAmt])
+
+
+    const parseInvoice = useCallback(async () => {
+        try {
+            setParseInvoiceLoading(true)
+            const decoded = window.lightningPayReq.decode(invoice);
+            const numMsat = decoded.millisatoshis;
+            const amt = await msatsToTprAsset(numMsat, currentAssetPair.asset.assetId);
+            setAssetAmt(amt);
+            const hashlock = getPaymentHash(decoded);
+            setHashlock(hashlock);
+
+        } catch (e) {
+            console.log(e.message)
+            setAssetAmt(0);
+        } finally {
+            setParseInvoiceLoading(false)
+        }
+
+
+    }, [currentAssetPair, invoice])
+    useDebounceEffect(() => {
+        if (invoice && currentAssetPair) {
+            parseInvoice();
+        }
+
+    }, [currentAssetPair, invoice, parseInvoice], {
+        wait: 500
+    })
+
+
+    return {
+        assetAmt,
+        formatAssetAmt,
+        tokenAmt,
+        formatTokenAmt,
+        hashlock,
+        parseInvoiceLoading
+    }
+}

package/src/index.css

@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: rgba(26, 26, 26, 0.5);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+} */
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: #041011;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+/* button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+} */
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.jsx

@@ -0,0 +1,112 @@
+// import { Button } from "antd";
+import { ConfigProvider, theme } from "antd";
+import { createAppKit } from "@reown/appkit/react";
+import { WagmiProvider } from "wagmi";
+import { sepolia, baseSepolia } from "@reown/appkit/networks";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import AstraDialog from "./comps/AstraModal.jsx";
+import useStore from "./store/index.js";
+import { themeConfig } from "./theme.js";
+import { MODAL_DISPLAY_TYPE } from "./constants/index.js";
+import IconEthNetwork from "./assets/network/eth.png";
+import IconBaseNetwork from "./assets/network/base.png";
+const defaultMetadata = {
+  name: "Lnfi",
+  description: "Lnfi",
+  url: "https://devoflnfi.unift.xyz/", // origin must match your domain & subdomain
+  icons: ["https://avatars.githubusercontent.com/u/37784886"],
+};
+// 3. Set the networks
+const networks = [sepolia, baseSepolia];
+let wagmiAdapter = null;
+let appKit = null;
+export default function AstraProvider({
+  projectId,
+  metadata,
+  adapter,
+  children,
+}) {
+  const queryClient = new QueryClient();
+
+  if (!wagmiAdapter) {
+    wagmiAdapter = adapter
+      ? adapter
+      : new WagmiAdapter({
+        networks,
+        projectId: projectId,
+        ssr: false,
+      });
+  }
+  if (!appKit) {
+    createAppKit({
+      adapters: [wagmiAdapter],
+      networks,
+      chainImages: {
+        [sepolia.id]: IconEthNetwork,
+        [baseSepolia.id]: IconBaseNetwork,
+      },
+      debug: false,
+      themeMode: "dark",
+      projectId: projectId,
+      metadata: metadata || defaultMetadata,
+      showWallets: true,
+      featuredWalletIds: [
+        "c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96",
+        "971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709",
+        "8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4",
+        "20459438007b75f4f4acb98bf29aa3b800550309646d375da5fd4aac6c2a2c66",
+        "fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa",
+      ],
+      features: {
+        analytics: false,
+        swaps: false,
+        onramp: false,
+        socials: [],
+        email: false,
+      },
+    });
+  }
+
+  return (
+    <>
+      <>
+        <ConfigProvider theme={{ algorithm: theme.darkAlgorithm, cssVar: false, ...themeConfig }} prefixCls="astra">
+          <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+            <QueryClientProvider client={queryClient}>
+              <>{children}</>
+            </QueryClientProvider>
+          </WagmiProvider>
+        </ConfigProvider>
+      </>
+    </>
+  );
+}
+
+export const AstraModal = AstraDialog;
+// eslint-disable-next-line react-refresh/only-export-components
+export function astraReceive({ invoice, assetId }) {
+  //evm2lightning
+  const store = useStore;
+  store.setState(() => ({
+    astraModalShow: true,
+    receiveArgs: { invoice, assetId },
+    modalDisplayType: MODAL_DISPLAY_TYPE.TO_LIGHTNING,
+  }));
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function astraSend({
+  amount,
+  assetId,
+  onAstraInvoice,
+  waitConfirm = true,
+}) {
+  // lightning2evm
+  const store = useStore;
+  store.setState(() => ({
+    astraModalShow: true,
+    sendArgs: { amount, assetId, waitConfirm },
+    modalDisplayType: MODAL_DISPLAY_TYPE.TO_EVM,
+    onAstraInvoice,
+  }));
+}