From 126bca67312a97ab43baab6d7ce08bbff227d20a Mon Sep 17 00:00:00 2001
From: torof <scottpanam@protonmail.com>
Date: Fri, 8 Nov 2024 11:20:10 +0100
Subject: [PATCH] fix(xswap modal to widget): moved from xswap deprecated modal
 to widget

---
 src/app/app/[tab]/AppTabs.tsx            |   5 +-
 src/components/app/xswap/XswapModal.tsx  | 110 -----------------------
 src/components/app/xswap/XswapWidget.tsx |  14 +++
 3 files changed, 16 insertions(+), 113 deletions(-)
 delete mode 100644 src/components/app/xswap/XswapModal.tsx
 create mode 100644 src/components/app/xswap/XswapWidget.tsx

diff --git a/src/app/app/[tab]/AppTabs.tsx b/src/app/app/[tab]/AppTabs.tsx
index 814fec60..0f5ae68d 100644
--- a/src/app/app/[tab]/AppTabs.tsx
+++ b/src/app/app/[tab]/AppTabs.tsx
@@ -7,11 +7,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui";
 import { SwitchAppTabProvider } from "@/contexts/SwitchAppTabContext";
 import { useSwitchAppTab } from "@/hooks/useSwitchAppTab";
 import { FC } from "react";
-import { twMerge } from "tailwind-merge";
 import { AppPreMining } from "@/components/app/pre-mining/AppPreMining";
 import { SessionProvider } from "next-auth/react";
 import { AppStaking } from "@/components/app/staking/AppStaking";
-import { XPayButton } from "@/components/app/xswap/XswapModal";
+import { XSwapWidget } from "@/components/app/xswap/XswapWidget";
 import Link from "next/link";
 import { AppAffiliate } from "@/components/app/affiliate/AppAffiliate";
 import { AppSwap } from "@/components/app/swap/AppSwap";
@@ -66,7 +65,7 @@ const _AppTabs: FC = () => {
         <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
         <TabsTrigger value="affiliate">Affiliate Program</TabsTrigger>
         <TabsTrigger value="swap">Swap</TabsTrigger>
-        <XPayButton />
+        <XSwapWidget />
       </TabsList>
       <div className="[&_>_*]:animate-fadeAndMoveIn [&_>_*]:[animation-duration:300ms] sm:px-5 max-w-[100vw]">
         <SessionProvider>
diff --git a/src/components/app/xswap/XswapModal.tsx b/src/components/app/xswap/XswapModal.tsx
deleted file mode 100644
index 07a93cd8..00000000
--- a/src/components/app/xswap/XswapModal.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useAccount, useWalletClient } from 'wagmi';
-import { openTransactionModal, renderTxStatus, Transactions } from "@xswap-link/sdk";
-import { useState, useRef, useEffect } from 'react';
-import { waitForTransactionReceipt } from 'viem/actions';
-import { dstChain, dstToken } from '@/constants/xswap';
-
-export const XPayButton = () => {
-  const { address, chain, connector } = useAccount();
-  const { data: walletClient } = useWalletClient();
-  const [isHovered, setIsHovered] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleOpenXPay = async () => {
-    setIsLoading(true);
-    
-    timeoutRef.current = setTimeout(() => {
-      setIsLoading(false);
-    }, 5000);
-
-    const integratorId = process.env.NEXT_PUBLIC_INTEGRATOR_ID;
-    if (!integratorId) {
-      throw new Error("INTEGRATOR_ID is not set in the .env file");
-    }
-
-    if (!address || !chain || !connector || !walletClient) {
-      throw new Error("Wallet not connected");
-    }
-
-    try {
-      const result = await openTransactionModal({
-        integratorId,
-        dstChain,
-        dstToken,
-        returnTransactions: true,
-      });
-
-      if (!result) {
-        throw new Error("No transactions returned from openTransactionModal");
-      }
-
-      const transactions: Transactions = result;
-
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      setIsLoading(false);
-
-      if (transactions.approve && transactions.approve.to && transactions.approve.data) {
-        const approveTxHash = await walletClient.sendTransaction({
-          to: transactions.approve.to as `0x${string}`,
-          data: transactions.approve.data as `0x${string}`,
-          value: BigInt(transactions.approve.value || '0'),
-        });
-        await waitForTransactionReceipt(walletClient, { hash: approveTxHash });
-      }
-
-      if (transactions.swap && transactions.swap.to && transactions.swap.data) {
-        const swapTxHash = await walletClient.sendTransaction({
-          to: transactions.swap.to as `0x${string}`,
-          data: transactions.swap.data as `0x${string}`,
-          value: BigInt(transactions.swap.value || '0'),
-        });
-        await waitForTransactionReceipt(walletClient, { hash: swapTxHash });
-        await renderTxStatus(chain.id.toString(), swapTxHash);
-      }
-    } catch (error) {
-      console.error("Error in openXPay:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <button 
-      onClick={handleOpenXPay} 
-      disabled={!address || isLoading}
-      className={`
-        text-gray-500
-        py-2 px-4
-        transition-all duration-300 ease-in-out
-        ${isHovered ? 'bg-gray-100 rounded-lg' : ''}
-        ${(!address || isLoading) ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-100 hover:rounded-lg'}
-        flex items-center justify-center
-      `}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      {isLoading ? (
-        <>
-          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-          Loading...
-        </>
-      ) : (
-        'Bridge'
-      )}
-    </button>
-  );
-};
\ No newline at end of file
diff --git a/src/components/app/xswap/XswapWidget.tsx b/src/components/app/xswap/XswapWidget.tsx
new file mode 100644
index 00000000..b8abf0d9
--- /dev/null
+++ b/src/components/app/xswap/XswapWidget.tsx
@@ -0,0 +1,14 @@
+import { dstChain, dstToken } from '@/constants/xswap';
+import { TxWidget } from '@xswap-link/sdk';
+
+export const XSwapWidget = () => {
+    return(
+        <TxWidget
+            integratorId={process.env.NEXT_PUBLIC_INTEGRATOR_ID || ""}
+            dstChain={dstChain}
+            dstToken={dstToken}
+            lightTheme={true}
+            defaultWalletPicker={true}
+        />
+    )
+}
\ No newline at end of file