@ensofinance/checkout-widget 0.0.1

package/src/util/enso-hooks.tsx

@@ -0,0 +1,203 @@
+import {
+    useAccount,
+    useCapabilities,
+    useSendCalls,
+    useWalletClient,
+} from "wagmi";
+import { Address } from "viem";
+import { useCallback, useMemo } from "react";
+import { useEnsoToken, useEnsoPrice, useEnsoData } from "@/enso-api/api";
+import { getWalletDisplayName, getWalletIcon } from "@/util/wallet";
+import { formatUSD, normalizeValue } from "@/util";
+import { useAppStore } from "@/store";
+import { VITALIK_ADDRESS } from "./constants";
+
+export const useAppDetails = () => {
+    const { address = VITALIK_ADDRESS } = useAccount();
+    const amountIn = useAppStore((state) => state.amountIn);
+    const tokenIn = useAppStore((state) => state.tokenIn);
+    const tokenOut = useAppStore((state) => state.tokenOut);
+    const slippage = useAppStore((state) => state.slippage);
+    const chainIdIn = useAppStore((state) => state.chainIdIn);
+    const chainIdOut = useAppStore((state) => state.chainIdOut);
+    const isCheckout = useAppStore((state) => state.isCheckout);
+
+    const {
+        data: [tokenInData],
+    } = useEnsoToken(tokenIn, chainIdIn);
+    const {
+        data: [tokenOutData],
+    } = useEnsoToken(tokenOut, chainIdOut);
+    const { data: tokenInPrice } = useEnsoPrice(chainIdIn, tokenIn);
+    const { data: tokenOutPrice } = useEnsoPrice(chainIdOut, tokenOut);
+
+    return {
+        chainIdIn,
+        chainIdOut,
+        tokenInData,
+        tokenOutData,
+        amountIn,
+        slippage,
+        address,
+        tokenInPrice,
+        tokenOutPrice,
+        tokenIn,
+        tokenOut,
+        isCheckout,
+    };
+};
+
+export const useSendTxns = ({
+    address,
+    chainId,
+    calls,
+}: {
+    address: string;
+    chainId: number;
+    calls: any[];
+}) => {
+    const { sendCalls } = useSendCalls();
+    const { data: caps } = useCapabilities();
+    // const atomicOkay = caps?.[chainId]?.atomic?.status === "ready";
+    const atomicOkay = false;
+    // const useFallback = !atomicOkay; // one-line policy; tweak to taste
+    const wallet = useWalletClient();
+
+    console.log(caps, atomicOkay);
+
+    const sendTxns = useCallback(
+        async (
+            onTxSend: (hash: string) => void,
+            onFail: (error: any) => void,
+        ) => {
+            if (!atomicOkay) {
+                // Send transactions sequentially when atomic is not supported
+                console.log(
+                    "Atomic not supported, sending transactions sequentially",
+                );
+
+                try {
+                    for (const call of calls) {
+                        console.log("Sending individual transaction:", call);
+
+                        const result = await wallet.data?.sendTransaction({
+                            ...call,
+                            account: address as Address,
+                            chainId,
+                        });
+
+                        console.log("Sequential transaction result:", result);
+
+                        // Check if transaction failed and stop execution
+                        if (!result) {
+                            throw new Error(
+                                `Transaction failed for call: ${JSON.stringify(call)}`,
+                            );
+                        }
+
+                        if (call === calls[calls.length - 1]) {
+                            onTxSend(result);
+                        }
+                    }
+
+                    console.log("All sequential transactions completed");
+                } catch (err) {
+                    console.error("Error in sequential transaction:", err);
+                    onFail(err);
+                    throw err;
+                }
+                return;
+            }
+
+            // Use atomic transactions when supported
+            wallet.data
+                ?.sendCalls(
+                    // @ts-ignore
+                    {
+                        calls,
+                        account: address as Address,
+                        forceAtomic: true, // request atomic only when possible
+                    },
+                )
+                .then((result) => {
+                    debugger;
+                    console.log(result);
+                })
+                .catch((err) => {
+                    debugger;
+                    console.error(err);
+                    onFail(err);
+                });
+        },
+        [sendCalls, calls, atomicOkay, chainId, wallet.data],
+    );
+
+    const ready = calls.length > 0 && wallet.data;
+
+    return {
+        ready,
+        sendTxns,
+    };
+};
+
+export const useRouteData = () => {
+    const {
+        tokenInData,
+        amountIn,
+        slippage,
+        address,
+        chainIdIn,
+        chainIdOut,
+        tokenInPrice,
+        tokenIn,
+        tokenOut,
+        isCheckout,
+    } = useAppDetails();
+
+    const {
+        data: routeData,
+        isLoading,
+        error,
+        isFetched,
+    } = useEnsoData({
+        routingStrategy: isCheckout ? "checkout" : "router",
+        fromAddress: address,
+        receiver: address,
+        spender: address,
+        amountIn,
+        tokenIn,
+        tokenOut,
+        slippage,
+        chainId: chainIdIn,
+        outChainId: chainIdOut,
+    });
+
+    const usdAmountIn = useMemo(
+        () =>
+            formatUSD(
+                normalizeValue(
+                    (+amountIn * tokenInPrice).toFixed(),
+                    tokenInData?.decimals,
+                ),
+            ),
+        [amountIn, tokenInPrice, tokenInData?.decimals],
+    );
+
+    return {
+        chainIdOut,
+        routeData,
+        routeFetched: isFetched,
+        routeLoading: isLoading,
+        usdAmountIn,
+        routerError: error,
+    };
+};
+
+export const useWalletIcon = () => {
+    const { connector } = useAccount();
+
+    return {
+        walletIcon: getWalletIcon(connector?.name),
+        walletDisplayName: getWalletDisplayName(connector?.name),
+    };
+};

package/src/util/index.tsx

@@ -0,0 +1,68 @@
+import { Address, formatUnits, parseUnits } from "viem";
+import { STARGATE_CHAIN_NAMES } from "./constants";
+import { useEffect, useRef } from "react";
+
+export const denormalizeValue = (value: string, decimals = 0) =>
+    parseUnits(value, decimals).toString();
+
+export const normalizeValue = (value: bigint | string = "0", decimals = 0) => {
+    try {
+        return formatUnits(BigInt(value), decimals);
+    } catch (e) {
+        console.error(e);
+        return "0";
+    }
+};
+
+export const compareCaseInsensitive = (a: string, b: string) => {
+    return !!(a && b && a?.toLowerCase() === b?.toLowerCase());
+};
+
+export const shortenAddress = (address: Address, short = false) =>
+    `${short ? "" : address.slice(0, 4)}...${address.slice(-4)}`;
+
+const formatter = Intl.NumberFormat("en", {
+    maximumFractionDigits: 4,
+});
+
+const preciseFormatter = Intl.NumberFormat("en", {
+    maximumFractionDigits: 6,
+});
+const usdFormatter = Intl.NumberFormat("en", {
+    style: "currency",
+    currency: "USD",
+});
+
+export const formatNumber = (value: number | string, precise?: boolean) => {
+    const formatterToUse = precise ? preciseFormatter : formatter;
+
+    return isNaN(+value) ? "0.0" : formatterToUse.format(+value);
+};
+
+export const formatUSD = (value: number | string) => {
+    return usdFormatter.format(+value);
+};
+
+export const formatCompactUsd = (value: number | string) => {
+    const num = typeof value === "string" ? parseFloat(value) : value;
+
+    if (isNaN(num)) return "0";
+
+    const formatter = Intl.NumberFormat("en", {
+        notation: "compact",
+        maximumFractionDigits: 2,
+    });
+
+    return formatter.format(num);
+};
+
+export const getChainIcon = (chainId: number) =>
+    `https://icons-ckg.pages.dev/stargate-light/networks/${STARGATE_CHAIN_NAMES[chainId]}.svg`;
+
+export const usePrevious = <T extends any>(value: T): T | undefined => {
+    const ref = useRef<T>();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};

package/src/util/tx-tracker.tsx

@@ -0,0 +1,301 @@
+import { ReactNode, useCallback, useEffect, useState } from "react";
+import { useWaitForTransactionReceipt } from "wagmi";
+import { create } from "zustand";
+import { useQuery } from "@tanstack/react-query";
+import { getChainEtherscanUrl } from "./common";
+import { SupportedChainId } from "@/util/constants";
+
+type TrackParams = {
+    hash: `0x${string}` | undefined;
+    chainId: SupportedChainId;
+    crosschain: boolean;
+    message: string;
+    onConfirmed: (
+        receipt: ReturnType<typeof useWaitForTransactionReceipt>["data"],
+    ) => void;
+    status?: string | ReactNode;
+    isActive?: boolean;
+};
+
+const useTrackingStore = create<{
+    txs: TrackParams[];
+    addTx: (tx: TrackParams) => void;
+    removeTx: (hash: `0x${string}`) => void;
+    updateTx: (hash: `0x${string}`, tx: Partial<TrackParams>) => void;
+}>((set) => ({
+    txs: [],
+    addTx: (tx: TrackParams) => set((state) => ({ txs: [...state.txs, tx] })),
+    removeTx: (hash: `0x${string}`) =>
+        set((state) => ({ txs: state.txs.filter((tx) => tx.hash !== hash) })),
+    updateTx: (hash: `0x${string}`, tx: Partial<TrackParams>) =>
+        set((state) => ({
+            txs: state.txs.map((txn) =>
+                txn.hash === hash ? { ...txn, ...tx } : txn,
+            ),
+        })),
+}));
+
+export const useTxByHash = (hash: string) => {
+    const { txs } = useTrackingStore();
+
+    return txs.find((tx) => tx.hash === hash);
+};
+
+export const useTrackTx = () => {
+    const { addTx } = useTrackingStore();
+
+    const track = useCallback((args: TrackParams) => {
+        if (!args.hash) return;
+        addTx(args);
+    }, []);
+
+    return { track };
+};
+
+enum LayerZeroStatus {
+    Pending = "PENDING",
+    Success = "SUCCEEDED",
+    Failed = "FAILED",
+    Inflight = "INFLIGHT",
+    Confirming = "CONFIRMING",
+    Delivered = "DELIVERED",
+}
+
+const useLayerZeroUrl = (hash?: `0x${string}`, reset?: () => void) => {
+    // const [loadingToastId, setLoadingToastId] = useState<string>();
+    const updateTx = useTrackingStore((state) => state.updateTx);
+    const { data } = useQuery({
+        queryKey: ["layerZeroUrl", hash || "none", !!reset],
+        queryFn: async () => {
+            if (!hash) return null;
+            return fetch(
+                `https://scan.layerzero-api.com/v1/messages/tx/${hash}`,
+            )
+                .then((res) => res.json())
+                .then((res) => res.data[0]);
+        },
+        refetchInterval: 2000,
+        enabled: !!(reset && hash),
+    });
+
+    // useEffect(() => {
+    //     if (data?.source?.status === LayerZeroStatus.Success) {
+    //         updateTx(hash, {
+    //             status: "(0/4) Waiting for source transaction completion",
+    //         });
+    //     }
+    // }, [data?.source?.status]);
+
+    useEffect(() => {
+        if (!hash) return;
+
+        // const action = {
+        //     label: "View on Explorer",
+        //     onClick: () =>
+        //         window.open(`https://layerzeroscan.com/tx/${hash}`, "_blank"),
+        // };
+
+        // if (!loadingToastId) {
+
+        // toaster.create({
+        //     id: hash,
+        //     title: "Pending (0/4)",
+        //     description: "Waiting for source transaction completion",
+        //     type: "loading",
+        //     action,
+        // });
+        // } else
+        if (
+            data?.source?.status &&
+            data.source.status !== LayerZeroStatus.Success
+        ) {
+            updateTx(hash, {
+                status: "(1/4) Waiting for funds to be sent on destination",
+            });
+            // toaster.update(loadingToastId, {
+            //     title: "Pending (1/4)",
+            //     description: "Waiting for funds to be sent on destination",
+            // });
+        } else if (data?.status?.name === LayerZeroStatus.Delivered) {
+            reset?.();
+            updateTx(hash, {
+                status: "(4/4) Bridging is complete",
+                isActive: false,
+            });
+            // toaster.update(loadingToastId, {
+            //     title: "Success (4/4) ",
+            //     description: "Bridging is complete",
+            //     type: "success",
+            //     action,
+            // });
+            // setLoadingToastId(undefined);
+        } else if (data?.status?.name === LayerZeroStatus.Confirming) {
+            updateTx(hash, {
+                status: "(3/4) Waiting for destination execution",
+            });
+            // toaster.update(loadingToastId, {
+            //     title: "Pending (3/4)",
+            //     description: "Waiting for destination execution",
+            // });
+        } else if (data?.status?.name === LayerZeroStatus.Inflight) {
+            updateTx(hash, {
+                status: "(2/4) Waiting for funds to be delivered on destination",
+            });
+            // toaster.update(loadingToastId, {
+            //     title: "Pending (2/4)",
+            //     description: "Waiting for funds to be delivered on destination",
+            // });
+        }
+    }, [data, hash]);
+};
+
+const useSingleChainTransactionTracking = (
+    hash: `0x${string}` | undefined,
+    chainId: SupportedChainId,
+    description: string,
+    waitForTransaction: ReturnType<typeof useWaitForTransactionReceipt>,
+    reset?: () => void,
+) => {
+    // const [loadingToastId, setLoadingToastId] = useState<string | undefined>();
+    const link = getChainEtherscanUrl({ hash, chainId });
+    const updateTx = useTrackingStore((state) => state.updateTx);
+
+    // toast error if tx failed to be mined and success if it is having confirmation
+    useEffect(() => {
+        if (!reset) return;
+
+        if (waitForTransaction.error) {
+            updateTx(hash, {
+                status: "Transaction Failed",
+                isActive: false,
+            });
+            // toaster.update(hash, {
+            //     title: "Error",
+            //     description: waitForTransaction.error.message,
+            //     type: "error",
+            //     action: link
+            //         ? {
+            //               label: "View on Explorer",
+            //               onClick: () => window.open(link, "_blank"),
+            //           }
+            //         : undefined,
+            // });
+        } else if (waitForTransaction.data) {
+            // Close loading toast if it exists
+            // setLoadingToastId(undefined);
+            // reset tx hash to eliminate recurring notifications
+            reset?.();
+            updateTx(hash, {
+                status: "Transaction Confirmed",
+                isActive: false,
+            });
+
+            // toaster.update(loadingToastId, {
+            //     title: "Success",
+            //     description: description,
+            //     type: "success",
+            //     action: link
+            //         ? {
+            //               label: "View on Explorer",
+            //               onClick: () => window.open(link, "_blank"),
+            //           }
+            //         : undefined,
+            // });
+        }
+        // else if (waitForTransaction.isLoading) {
+
+        //     // if (!loadingToastId) {
+        //     toaster.create({
+        //         id: hash,
+        //         title: "Transaction Pending",
+        //         description: description,
+        //         type: "loading",
+        //         action: link
+        //             ? {
+        //                   label: "View on Explorer",
+        //                   onClick: () => window.open(link, "_blank"),
+        //               }
+        //             : undefined,
+        //     });
+        //     setLoadingToastId(hash);
+        // }
+        // }
+    }, [
+        waitForTransaction.data,
+        waitForTransaction.error,
+        waitForTransaction.isLoading,
+        description,
+        link,
+        reset,
+    ]);
+};
+
+const SingleChainTracker = ({
+    hash,
+    chainId,
+    message = "Transaction confirmed",
+    onConfirmed,
+}: Omit<TrackParams, "crosschain">) => {
+    const { removeTx } = useTrackingStore();
+    const receipt = useWaitForTransactionReceipt({
+        hash,
+        chainId,
+    });
+
+    useEffect(() => {
+        if (receipt.data) {
+            onConfirmed?.(receipt.data);
+        }
+    }, [receipt.data, onConfirmed]);
+
+    useSingleChainTransactionTracking(hash, chainId, message, receipt, () =>
+        removeTx(hash),
+    );
+
+    return null;
+};
+
+const CrosschainTracker = ({
+    hash,
+    chainId,
+    onConfirmed,
+}: Omit<TrackParams, "crosschain" | "message">) => {
+    // const { removeTx } = useTrackingStore();
+    const receipt = useWaitForTransactionReceipt({
+        hash,
+        chainId,
+    });
+
+    // useEffect(() => {
+    //     if (receipt.data) {
+    //         onConfirmed?.(receipt.data);
+    //     }
+    // }, [receipt.data, onConfirmed]);
+
+    useLayerZeroUrl(receipt.data ? hash : undefined, () =>
+        onConfirmed?.(receipt.data),
+    );
+
+    return null;
+};
+
+const Tracker = (props: TrackParams) => {
+    if (props.crosschain) {
+        return <CrosschainTracker {...props} />;
+    }
+    return <SingleChainTracker {...props} />;
+};
+
+export const TxTracker = () => {
+    const { txs } = useTrackingStore();
+
+    return (
+        <>
+            {txs
+                .filter((tx) => tx.isActive)
+                .map((tx) => (
+                    <Tracker key={tx.hash} {...tx} />
+                ))}
+        </>
+    );
+};