@ensofinance/checkout-widget 0.0.1

package/src/util/wallet.tsx

@@ -0,0 +1,258 @@
+import {
+    ReactElement,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useState,
+} from "react";
+import {
+    useAccount,
+    useBalance,
+    useReadContract,
+    useSendTransaction,
+    UseSimulateContractParameters,
+} from "wagmi";
+import { Address, isAddress, erc20Abi } from "viem";
+import { WalletIcon } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { RouteData } from "@ensofinance/sdk";
+import { usePriorityChainId } from "./common";
+import { ETH_ADDRESS, SupportedChainId } from "@/util/constants";
+import { compareCaseInsensitive } from "@/util/index";
+import { toaster } from "@/components/ui/toaster";
+
+import metamaskIcon from "@/assets/metamask.png";
+import rabbyIcon from "@/assets/rabby.png";
+
+enum TxState {
+    Success,
+    Failure,
+    Pending,
+}
+
+export const toastState: Record<TxState, "success" | "error" | "info"> = {
+    [TxState.Success]: "success",
+    [TxState.Failure]: "error",
+    [TxState.Pending]: "info",
+};
+
+const useInterval = (callback: () => void, interval: number) => {
+    const savedCallback = useCallback(callback, []);
+
+    useEffect(() => {
+        const id = setInterval(savedCallback, interval);
+        return () => clearInterval(id);
+    }, [interval, savedCallback]);
+};
+const useChangingIndex = () => {
+    const [index, setIndex] = useState(0);
+
+    useInterval(() => {
+        setIndex(index + 1);
+    }, 10000);
+
+    return index;
+};
+
+export const useErc20Balance = (
+    tokenAddress: `0x${string}`,
+    priorityChainId?: SupportedChainId,
+) => {
+    const { address } = useAccount();
+    const chainId = usePriorityChainId(priorityChainId);
+
+    return useReadContract({
+        chainId,
+        address: tokenAddress,
+        abi: erc20Abi,
+        functionName: "balanceOf",
+        args: [address],
+        query: {
+            enabled:
+                isAddress(address) &&
+                isAddress(tokenAddress) &&
+                !compareCaseInsensitive(tokenAddress, ETH_ADDRESS),
+        },
+    });
+};
+
+// if token is native ETH, use usBalance instead
+export const useTokenBalance = (
+    token: Address,
+    priorityChainId?: SupportedChainId,
+) => {
+    const { address } = useAccount();
+    const chainId = usePriorityChainId(priorityChainId);
+    const index = useChangingIndex();
+    const queryClient = useQueryClient();
+    const { data: erc20Balance, queryKey: erc20QueryKey } = useErc20Balance(
+        token,
+        priorityChainId,
+    );
+    const { data: balance, queryKey: balanceQueryKey } = useBalance({
+        address,
+        chainId,
+        query: {
+            enabled: compareCaseInsensitive(token, ETH_ADDRESS),
+        },
+    });
+
+    useEffect(() => {
+        queryClient.invalidateQueries({ queryKey: erc20QueryKey });
+        queryClient.invalidateQueries({ queryKey: balanceQueryKey });
+    }, [index, queryClient, erc20QueryKey, balanceQueryKey]);
+
+    const value = compareCaseInsensitive(token, ETH_ADDRESS)
+        ? balance?.value
+        : erc20Balance;
+
+    return value?.toString() ?? "0";
+};
+
+export const useAllowance = (token: Address, spender: Address) => {
+    const { address } = useAccount();
+    const chainId = usePriorityChainId();
+    const index = useChangingIndex();
+    const queryClient = useQueryClient();
+    const { data, queryKey, isLoading, isFetched } = useReadContract({
+        chainId,
+        address: token,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [address, spender],
+        query: {
+            enabled:
+                isAddress(address) &&
+                isAddress(token) &&
+                !compareCaseInsensitive(token, ETH_ADDRESS),
+        },
+    });
+
+    useEffect(() => {
+        queryClient.invalidateQueries({ queryKey });
+    }, [index, queryClient, queryKey]);
+
+    return {
+        allowance: data?.toString() ?? "0",
+        allowanceFetched: isFetched,
+        allowanceLoading: isLoading,
+    };
+};
+
+export const useExtendedSendTransaction = ({
+    title,
+    args,
+    onSuccess,
+    crosschain,
+}: {
+    title: string;
+    args: UseSimulateContractParameters;
+    onSuccess?: (hash: string) => void;
+    crosschain?: boolean;
+}) => {
+    const sendTransaction = useSendTransaction();
+
+    const send = useCallback(() => {
+        sendTransaction.sendTransaction(args, {
+            onError: (error) => {
+                toaster.create({
+                    title: "Error",
+                    // @ts-ignore
+                    description: error?.cause?.shortMessage || error.message,
+                    type: "error",
+                });
+                console.error(error);
+            },
+            onSuccess,
+        });
+    }, [sendTransaction, args, onSuccess]);
+
+    return {
+        ...sendTransaction,
+        send,
+    };
+};
+
+export const useIsApproveNeeded = (
+    tokenIn: Address,
+    target: Address = "0xF75584eF6673aD213a685a1B58Cc0330B8eA22Cf",
+    amount: string,
+) => {
+    const { allowance, allowanceFetched, allowanceLoading } = useAllowance(
+        tokenIn,
+        target,
+    );
+
+    const approveNeeded =
+        !compareCaseInsensitive(tokenIn, ETH_ADDRESS) && +allowance < +amount;
+
+    return {
+        approveNeeded,
+        allowanceFetched,
+        allowanceLoading,
+    };
+};
+
+export const useSendEnsoTransaction = ({
+    args,
+    title,
+    crosschain,
+    onSuccess,
+}: {
+    args: RouteData["tx"];
+    title: string;
+    crosschain?: boolean;
+    onSuccess?: (hash: string) => void;
+}) => {
+    return useExtendedSendTransaction({
+        title,
+        args,
+        crosschain,
+        onSuccess,
+    });
+};
+
+/**
+ * Get the appropriate wallet icon based on the connector name
+ * @param connectorName - The name of the wallet connector
+ * @returns The icon path for the wallet
+ */
+export const getWalletIcon = (
+    connectorName?: string,
+): string | ReactElement => {
+    if (!connectorName) return metamaskIcon; // Default fallback
+
+    const name = connectorName.toLowerCase();
+
+    // MetaMask variants
+    if (name.includes("metamask")) {
+        return metamaskIcon;
+    }
+
+    // Rabby wallet
+    if (name.includes("rabby")) {
+        return rabbyIcon;
+    }
+
+    // Default fallback for unknown wallets
+    return <WalletIcon size={20} />;
+};
+
+/**
+ * Get a user-friendly wallet name for display
+ * @param connectorName - The name of the wallet connector
+ * @returns A formatted wallet name
+ */
+export const getWalletDisplayName = (connectorName?: string): string => {
+    if (!connectorName) return "Wallet";
+
+    const name = connectorName.toLowerCase();
+
+    if (name.includes("metamask")) return "MetaMask";
+    if (name.includes("rabby")) return "Rabby";
+    if (name.includes("walletconnect")) return "WalletConnect";
+    if (name.includes("injected")) return "Browser Wallet";
+
+    // Return the original name with proper capitalization
+    return connectorName.charAt(0).toUpperCase() + connectorName.slice(1);
+};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "skipLibCheck": true,
+        "paths": {
+            "@/*": ["./src/*"]
+        },
+        "jsx": "react-jsx",
+        "declaration": true
+    }
+}

package/vite.config.ts

@@ -0,0 +1,51 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+      mode === "development" ? react() : undefined,
+      dts({
+          insertTypesEntry: true,
+          rollupTypes: true,
+          bundledPackages: ["./src/types"],
+      }), // generates *.d.ts beside the JS
+  ].filter(Boolean),
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
+  build: {
+    lib: {
+      entry: "./src/index.ts", // Entry point for your component
+      name: "CheckoutWidget", // Global name for UMD builds
+      fileName: (format) => `checkout-widget.${format}.js`, // Output file naming
+    },
+    rollupOptions: {
+      external: [
+        /^wagmi($|\/)/,
+        /^react($|\/)/,
+        /^react-dom($|\/)/, // removes legacy react-dom/server
+        "react",
+        "react-dom",
+        "wagmi",
+        "@tanstack/react-query",
+        "react/jsx-runtime",
+        "react/jsx-dev-runtime",
+      ],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react/jsx-runtime": "ReactJsxRuntime",
+        },
+      },
+    },
+    sourcemap: true,
+    target: "es2018",
+  },
+  esbuild: {
+    jsxImportSource: "react",
+  },
+}));