From 148cc5da5551db292787a5bb1fe6e2f734537c9b Mon Sep 17 00:00:00 2001 From: JaiBo <65864145+iafhurtado@users.noreply.github.com> Date: Wed, 11 Sep 2024 10:28:29 +0200 Subject: [PATCH 1/5] renamed Vault to Liquidity --- .../app/components/abis/{vault.ts => liquidity.ts} | 2 +- .../components/LiquidityInfo}/index.tsx | 10 +++++----- .../components/LiquidityWidget/index.tsx | 0 .../components/OverviewWidget/index.tsx | 4 ++-- packages/nextjs/app/{vault => liquidity}/page.tsx | 8 ++++---- 5 files changed, 12 insertions(+), 12 deletions(-) rename packages/nextjs/app/components/abis/{vault.ts => liquidity.ts} (99%) rename packages/nextjs/app/{vault/components/VaultInfo => liquidity/components/LiquidityInfo}/index.tsx (95%) rename packages/nextjs/app/{vault => liquidity}/components/LiquidityWidget/index.tsx (100%) rename packages/nextjs/app/{vault => liquidity}/components/OverviewWidget/index.tsx (96%) rename packages/nextjs/app/{vault => liquidity}/page.tsx (74%) diff --git a/packages/nextjs/app/components/abis/vault.ts b/packages/nextjs/app/components/abis/liquidity.ts similarity index 99% rename from packages/nextjs/app/components/abis/vault.ts rename to packages/nextjs/app/components/abis/liquidity.ts index bf9dd86..17fa024 100644 --- a/packages/nextjs/app/components/abis/vault.ts +++ b/packages/nextjs/app/components/abis/liquidity.ts @@ -1,4 +1,4 @@ -export const vaultABI = [ +export const liquidityABI = [ { inputs: [ { internalType: "address", name: "_pool", type: "address" }, diff --git a/packages/nextjs/app/vault/components/VaultInfo/index.tsx b/packages/nextjs/app/liquidity/components/LiquidityInfo/index.tsx similarity index 95% rename from packages/nextjs/app/vault/components/VaultInfo/index.tsx rename to packages/nextjs/app/liquidity/components/LiquidityInfo/index.tsx index ff54242..145e0c9 100644 --- a/packages/nextjs/app/vault/components/VaultInfo/index.tsx +++ b/packages/nextjs/app/liquidity/components/LiquidityInfo/index.tsx @@ -3,15 +3,15 @@ import React, { useEffect, useState } from "react"; import Image from "next/image"; import { useReadContract } from "wagmi"; -import { vaultABI } from "~~/app/components/abis/vault"; +import { liquidityABI } from "~~/app/components/abis/liquidity"; import { useTranslation } from "~~/app/context/LanguageContext"; -const VaultInfo: React.FC = () => { +const LiquidityInfo: React.FC = () => { const { t } = useTranslation(); const [, setTotalReserves] = useState(null); const { data: totalReserves } = useReadContract({ address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", - abi: vaultABI, + abi: liquidityABI, functionName: "totalSupply", }); @@ -33,7 +33,7 @@ const VaultInfo: React.FC = () => { error: lpTokenError, } = useReadContract({ address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", - abi: vaultABI, + abi: liquidityABI, functionName: "getTotalAmounts", }); @@ -101,4 +101,4 @@ const VaultInfo: React.FC = () => { ); }; -export default VaultInfo; +export default LiquidityInfo; diff --git a/packages/nextjs/app/vault/components/LiquidityWidget/index.tsx b/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx similarity index 100% rename from packages/nextjs/app/vault/components/LiquidityWidget/index.tsx rename to packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx diff --git a/packages/nextjs/app/vault/components/OverviewWidget/index.tsx b/packages/nextjs/app/liquidity/components/OverviewWidget/index.tsx similarity index 96% rename from packages/nextjs/app/vault/components/OverviewWidget/index.tsx rename to packages/nextjs/app/liquidity/components/OverviewWidget/index.tsx index 25884e0..3bd591b 100644 --- a/packages/nextjs/app/vault/components/OverviewWidget/index.tsx +++ b/packages/nextjs/app/liquidity/components/OverviewWidget/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { useReadContract } from "wagmi"; -import { vaultABI } from "~~/app/components/abis/vault"; +import { liquidityABI } from "~~/app/components/abis/liquidity"; const OverviewWidget: React.FC = () => { const [tokenA, setTokenA] = useState(null); @@ -13,7 +13,7 @@ const OverviewWidget: React.FC = () => { error: lpTokenError, } = useReadContract({ address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", - abi: vaultABI, + abi: liquidityABI, functionName: "getTotalAmounts", }); diff --git a/packages/nextjs/app/vault/page.tsx b/packages/nextjs/app/liquidity/page.tsx similarity index 74% rename from packages/nextjs/app/vault/page.tsx rename to packages/nextjs/app/liquidity/page.tsx index d91bbae..2af6e55 100644 --- a/packages/nextjs/app/vault/page.tsx +++ b/packages/nextjs/app/liquidity/page.tsx @@ -1,13 +1,13 @@ +import LiquidityInfo from "./components/LiquidityInfo"; import LiquidityWidget from "./components/LiquidityWidget"; import OverviewWidget from "./components/OverviewWidget"; -import VaultInfo from "./components/VaultInfo"; import { NextPage } from "next"; -const VaultPage: NextPage = () => { +const LiquidityPage: NextPage = () => { return (
{/* VaultInfo at 4/5 width */} - + {/* Container for Widgets */}
@@ -18,4 +18,4 @@ const VaultPage: NextPage = () => { ); }; -export default VaultPage; +export default LiquidityPage; From 5b60f84b43830114f135be9b6912edd954890e88 Mon Sep 17 00:00:00 2001 From: JaiBo <65864145+iafhurtado@users.noreply.github.com> Date: Wed, 11 Sep 2024 13:02:24 +0200 Subject: [PATCH 2/5] Liqudity Widget In Progress --- .../components/LiquidityWidget/index.tsx | 188 +++++++++++++----- packages/nextjs/app/locales/en/common.json | 4 +- packages/nextjs/app/locales/mx/common.json | 4 +- 3 files changed, 149 insertions(+), 47 deletions(-) diff --git a/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx b/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx index 8f61329..0a13397 100644 --- a/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx +++ b/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx @@ -2,19 +2,31 @@ import React, { useEffect, useState } from "react"; import { spenderAddress, usdcContract, xocContract } from "@/app/constants/contracts"; -import { useAccount, useReadContract } from "wagmi"; +import { parseEther, parseUnits } from "viem"; +import { useAccount, useReadContract, useWriteContract } from "wagmi"; import { ERC20ABI } from "~~/app/components/abis/erc20"; +import { liquidityABI } from "~~/app/components/abis/liquidity"; import { useTranslation } from "~~/app/context/LanguageContext"; +// Use parseUnits for USDC + const LiquidityWidget: React.FC = () => { const { address: accountAddress } = useAccount(); // Get the address, not the entire account object const { t } = useTranslation(); const [action, setAction] = useState<"Deposit" | "Withdraw">("Deposit"); - const [tokenA, setTokenA] = useState(""); - const [tokenB, setTokenB] = useState(""); + const [tokenA, setTokenA] = useState(""); // USDC amount + const [tokenB, setTokenB] = useState(""); // XOC amount const [xocAllowanceState, xocSetAllowanceState] = useState("0"); const [usdcAllowanceState, usdcSetAllowanceState] = useState("0"); + // State to track if approval is needed + const [requiresApproval, setRequiresApproval] = useState(false); + + const { writeContract: deposit } = useWriteContract(); + + const { writeContract: approveXoc } = useWriteContract(); + + // Hook to read the XOC contract allowance const { data: xocAllowance, isError, @@ -36,8 +48,7 @@ const LiquidityWidget: React.FC = () => { } }, [xocAllowance, isError, isLoading]); - console.log("XOCAllowance", xocAllowanceState); - + // Hook to read the USDC contract allowance const { data: usdcAllowance, isError: usdcIsError, @@ -54,21 +65,92 @@ const LiquidityWidget: React.FC = () => { console.error("Error fetching allowance"); usdcSetAllowanceState("0"); } else if (!usdcIsLoading && usdcAllowance) { - const allowanceInEther = (Number(usdcAllowance) / 1e6).toFixed(7); + const allowanceInEther = (Number(usdcAllowance) / 1e6).toFixed(7); // USDC has 6 decimals usdcSetAllowanceState(allowanceInEther); } }, [usdcAllowance, usdcIsError, usdcIsLoading]); - console.log("USDCAllowance", usdcAllowanceState); + // Trigger approval check whenever tokenA or tokenB changes + useEffect(() => { + // Function to check if approval is required + const checkIfApprovalNeeded = () => { + const usdcAmount = parseFloat(tokenA) || 0; + const xocAmount = parseFloat(tokenB) || 0; + + // Compare the input values against the allowance states + const needsApproval = xocAmount > parseFloat(xocAllowanceState) || usdcAmount > parseFloat(usdcAllowanceState); + setRequiresApproval(needsApproval); + }; + + checkIfApprovalNeeded(); + }, [tokenA, tokenB, xocAllowanceState, usdcAllowanceState]); const handleActionChange = (newAction: "Deposit" | "Withdraw") => { setAction(newAction); }; - const calculateOutput = () => { - return parseFloat(tokenA) + parseFloat(tokenB); + // Function to handle the deposit + const handleDeposit = async () => { + if (!accountAddress) { + console.error("Account address not found"); + return; + } + + const usdcAmount = parseFloat(tokenA) || 0; + const xocAmount = parseFloat(tokenB) || 0; + const xocAmountInWei = parseEther(xocAmount.toString()); // XOC uses 18 decimals + const usdcAmountInWei = parseUnits(usdcAmount.toString(), 6); // USDC uses 6 decimals + + try { + const tx = await deposit({ + abi: liquidityABI, + address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", // Liquidity contract address + functionName: "deposit", + args: [xocAmountInWei, usdcAmountInWei, accountAddress], + }); + + console.log("Transaction submitted:", tx); + // Optionally wait for the transaction to be mined + // const receipt = await tx.wait(); + // console.log("Transaction confirmed:", receipt); + } catch (err) { + console.error("Error executing contract function:", err); + } + }; + + // Function to handle approval + const handleApproval = async () => { + const usdcAmount = parseFloat(tokenA) || 0; + const xocAmount = parseFloat(tokenB) || 0; + + try { + // Approve XOC + if (xocAmount > parseFloat(xocAllowanceState)) { + await approveXoc({ + abi: ERC20ABI, + address: usdcContract, + functionName: "approve", + args: [spenderAddress, parseEther(usdcAmount.toString())], + }); + } + + // Approve USDC + if (usdcAmount > parseFloat(usdcAllowanceState)) { + await approveXoc({ + abi: ERC20ABI, + address: usdcContract, + functionName: "approve", + args: [spenderAddress, usdcAmount], + }); + } + } catch (err) { + console.error("Error approving tokens:", err); + } }; + console.log("Xoc Allowance", xocAllowanceState); + console.log("USDC Allowance", usdcAllowanceState); + return (
@@ -84,7 +166,7 @@ const LiquidityWidget: React.FC = () => { action === "Deposit" ? "bg-base-300 text-xl text-white" : "bg-gray-200 text-gray-800" }`} > - {action === "Deposit" ? t("XoktleDepositSwitcher") : t("XoktleWithdrawSwitcher")} + {t("XoktleDepositSwitcher")}
-
-
- - setTokenA(e.target.value)} - className="w-full p-2 border rounded-lg dark:bg-neutral dark:text-neutral-content" - placeholder={t("XoktleXOCAmount")} - /> + {/* Conditionally render input fields based on the selected action */} + {action === "Deposit" ? ( +
+
+ + setTokenA(e.target.value)} + className="w-full p-2 border rounded-lg dark:bg-neutral dark:text-neutral-content" + placeholder={t("XoktleUSDCAmount")} + /> +
+ +
+ + setTokenB(e.target.value)} + className="w-full p-2 border rounded-lg dark:bg-neutral dark:text-neutral-content" + placeholder={t("XoktleXOCAmount")} + /> +
- -
- - setTokenB(e.target.value)} - className="w-full p-2 border rounded-lg dark:bg-neutral dark:text-neutral-content" - placeholder={t("XoktleUSDCAmount")} - /> -
- -
- - + ) : ( +
+
+ + setTokenB(e.target.value)} + className="w-full p-2 border rounded-lg dark:bg-neutral dark:text-neutral-content" + placeholder={t("XoktleShareAmount")} + /> +
-
- - + )} + +
); }; diff --git a/packages/nextjs/app/locales/en/common.json b/packages/nextjs/app/locales/en/common.json index ab1cc21..c111fd9 100644 --- a/packages/nextjs/app/locales/en/common.json +++ b/packages/nextjs/app/locales/en/common.json @@ -101,5 +101,7 @@ "XoktleXOCIndicate": "Indicate the amount of $XOC to deposit", "XoktleXOCAmount": "Enter amount of $XOC", "XoktleUSDCIndicate": "Indicate the amount of $USDC to deposit", - "XoktleUSDCAmount": "Enter amount of $USDC" + "XoktleUSDCAmount": "Enter amount of $USDC", + "XoktleShareIndicate": "Indicate the amount of shares to withdraw", + "XoktleShareAmount": "Enter amount of shares" } diff --git a/packages/nextjs/app/locales/mx/common.json b/packages/nextjs/app/locales/mx/common.json index 59bbd8b..e5551d5 100644 --- a/packages/nextjs/app/locales/mx/common.json +++ b/packages/nextjs/app/locales/mx/common.json @@ -113,7 +113,9 @@ "XoktleXOCIndicate": "Indica la cantidad de $XOC a depositar", "XoktleXOCAmount": "Cantidad de $XOC", "XoktleUSDCIndicate": "Indica la cantidad de $USDC a depositar", - "XoktleUSDCAmount": "Cantidad de $USDC" + "XoktleUSDCAmount": "Cantidad de $USDC", + "XoktleShareIndicate": "Indica la cantidad de acciones a depositar", + "XoktleShareAmount": "Cantidad de acciones" From 3e112e567474b54ce90a5804f8c76ba7aeba3790 Mon Sep 17 00:00:00 2001 From: JaiBo <65864145+iafhurtado@users.noreply.github.com> Date: Wed, 11 Sep 2024 13:33:27 +0200 Subject: [PATCH 3/5] Overview Widget refactor --- .../components/OverviewWidget/index.tsx | 71 ++++++++----------- packages/nextjs/app/locales/en/common.json | 4 +- packages/nextjs/app/locales/mx/common.json | 4 +- 3 files changed, 36 insertions(+), 43 deletions(-) diff --git a/packages/nextjs/app/liquidity/components/OverviewWidget/index.tsx b/packages/nextjs/app/liquidity/components/OverviewWidget/index.tsx index 3bd591b..4569aea 100644 --- a/packages/nextjs/app/liquidity/components/OverviewWidget/index.tsx +++ b/packages/nextjs/app/liquidity/components/OverviewWidget/index.tsx @@ -1,74 +1,63 @@ "use client"; import React, { useEffect, useState } from "react"; -import { useReadContract } from "wagmi"; +import { useAccount, useReadContract } from "wagmi"; import { liquidityABI } from "~~/app/components/abis/liquidity"; +import { useTranslation } from "~~/app/context/LanguageContext"; const OverviewWidget: React.FC = () => { - const [tokenA, setTokenA] = useState(null); - const [tokenB, setTokenB] = useState(null); + const { t } = useTranslation(); + const [balance, setBalance] = useState(null); + const { address: accountAddress } = useAccount(); // Get accountAddress using useAccount hook + + // Fetch the balanceOf using the accountAddress const { - data: lpTokenData, - isLoading: lpTokenLoading, - error: lpTokenError, + data: balanceData, + isLoading: balanceLoading, + error: balanceError, } = useReadContract({ - address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", + address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", // Liquidity contract address abi: liquidityABI, - functionName: "getTotalAmounts", + functionName: "balanceOf", + args: [accountAddress], // Pass accountAddress as argument to balanceOf }); useEffect(() => { - if (lpTokenData) { - // Extract and format tokenA and tokenB from lpTokenData - const [tokenAValue, tokenBValue] = (lpTokenData as bigint[]).map((value: bigint) => Number(value) / 10 ** 18); - setTokenA(tokenAValue); - setTokenB(tokenBValue); + if (balanceData) { + // Convert the BigInt to a number and format it + const balanceValue = Number(balanceData) / 10 ** 18; // Assuming the token has 18 decimals + setBalance(balanceValue); } - }, [lpTokenData]); + }, [balanceData]); - // Format as currency: tokenA as USD and tokenB as MXN - const formatCurrency = (amount: number, currency: string) => { + // Function to format the balance as a standard number with commas + const formatNumber = (amount: number) => { return new Intl.NumberFormat("en-US", { - style: "currency", - currency, - minimumFractionDigits: 2, - maximumFractionDigits: 2, + minimumFractionDigits: 6, + maximumFractionDigits: 6, }).format(amount); }; - const formattedTokenA = tokenA !== null ? formatCurrency(tokenA, "USD") : null; - const formattedTokenB = tokenB !== null ? formatCurrency(tokenB, "MXN") : null; + const formattedBalance = balance !== null ? formatNumber(balance) : null; return (
{/* Title */}
-

Overview

+

{t("XoktleOverView")}

{/* Loading and Error States */} - {lpTokenLoading &&

Loading data...

} - {lpTokenError &&

Error loading data.

} + {balanceLoading &&

Loading balance...

} + {balanceError &&

Error loading balance.

} - {/* Token Information */} - {!lpTokenLoading && !lpTokenError && tokenA !== null && tokenB !== null && ( + {/* Display Balance */} + {!balanceLoading && !balanceError && balance !== null && (
- Total USDC Deposits: - {formattedTokenA} -
- -
- Total XOC Deposits: - {formattedTokenB} -
- -
- Total Value: - - {formattedTokenA && formattedTokenB ? `${formattedTokenA} + ${formattedTokenB}` : ""} - + {t("XoktleAccountShares")}: + {formattedBalance} shares
)} diff --git a/packages/nextjs/app/locales/en/common.json b/packages/nextjs/app/locales/en/common.json index c111fd9..696c85c 100644 --- a/packages/nextjs/app/locales/en/common.json +++ b/packages/nextjs/app/locales/en/common.json @@ -103,5 +103,7 @@ "XoktleUSDCIndicate": "Indicate the amount of $USDC to deposit", "XoktleUSDCAmount": "Enter amount of $USDC", "XoktleShareIndicate": "Indicate the amount of shares to withdraw", - "XoktleShareAmount": "Enter amount of shares" + "XoktleShareAmount": "Enter amount of shares", + "XoktleOverView": "Overview", + "XoktleAccountShares": "Your Liquidity Shares" } diff --git a/packages/nextjs/app/locales/mx/common.json b/packages/nextjs/app/locales/mx/common.json index e5551d5..56690aa 100644 --- a/packages/nextjs/app/locales/mx/common.json +++ b/packages/nextjs/app/locales/mx/common.json @@ -115,7 +115,9 @@ "XoktleUSDCIndicate": "Indica la cantidad de $USDC a depositar", "XoktleUSDCAmount": "Cantidad de $USDC", "XoktleShareIndicate": "Indica la cantidad de acciones a depositar", - "XoktleShareAmount": "Cantidad de acciones" + "XoktleShareAmount": "Cantidad de acciones", + "XoktleOverView": "Vista General", + "XoktleAccountShares": "Acciones en tu cuenta" From bf28016498189bae8ba3993bdbd470575aa31f4a Mon Sep 17 00:00:00 2001 From: JaiBo <65864145+iafhurtado@users.noreply.github.com> Date: Wed, 11 Sep 2024 15:18:20 +0200 Subject: [PATCH 4/5] DepositLiquidity function working --- .../components/LiquidityWidget/index.tsx | 18 +++++++++--------- packages/nextjs/app/locales/mx/common.json | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx b/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx index 0a13397..9a8a4b0 100644 --- a/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx +++ b/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx @@ -24,7 +24,7 @@ const LiquidityWidget: React.FC = () => { const { writeContract: deposit } = useWriteContract(); - const { writeContract: approveXoc } = useWriteContract(); + const { writeContract: approveERC20 } = useWriteContract(); // Hook to read the XOC contract allowance const { @@ -106,7 +106,7 @@ const LiquidityWidget: React.FC = () => { abi: liquidityABI, address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", // Liquidity contract address functionName: "deposit", - args: [xocAmountInWei, usdcAmountInWei, accountAddress], + args: [usdcAmountInWei, xocAmountInWei, accountAddress], }); console.log("Transaction submitted:", tx); @@ -125,22 +125,22 @@ const LiquidityWidget: React.FC = () => { try { // Approve XOC - if (xocAmount > parseFloat(xocAllowanceState)) { - await approveXoc({ + if (usdcAmount > parseFloat(usdcAllowanceState)) { + await approveERC20({ abi: ERC20ABI, address: usdcContract, functionName: "approve", - args: [spenderAddress, parseEther(usdcAmount.toString())], + args: [spenderAddress, usdcAmount * 1e6], // Multiply by 1e6 to convert to USDC decimals }); } // Approve USDC - if (usdcAmount > parseFloat(usdcAllowanceState)) { - await approveXoc({ + if (xocAmount > parseFloat(xocAllowanceState)) { + await approveERC20({ abi: ERC20ABI, - address: usdcContract, + address: xocContract, functionName: "approve", - args: [spenderAddress, usdcAmount], + args: [spenderAddress, xocAmount * 1e18], // Multiply by 1e18 to convert to XOC decimals }); } } catch (err) { diff --git a/packages/nextjs/app/locales/mx/common.json b/packages/nextjs/app/locales/mx/common.json index 56690aa..e22117c 100644 --- a/packages/nextjs/app/locales/mx/common.json +++ b/packages/nextjs/app/locales/mx/common.json @@ -114,7 +114,7 @@ "XoktleXOCAmount": "Cantidad de $XOC", "XoktleUSDCIndicate": "Indica la cantidad de $USDC a depositar", "XoktleUSDCAmount": "Cantidad de $USDC", - "XoktleShareIndicate": "Indica la cantidad de acciones a depositar", + "XoktleShareIndicate": "Indica la cantidad de acciones a retirar", "XoktleShareAmount": "Cantidad de acciones", "XoktleOverView": "Vista General", "XoktleAccountShares": "Acciones en tu cuenta" From 82eae63a7214b65a02f51edbbb08aec9436f83a8 Mon Sep 17 00:00:00 2001 From: JaiBo <65864145+iafhurtado@users.noreply.github.com> Date: Wed, 11 Sep 2024 15:44:25 +0200 Subject: [PATCH 5/5] Withdrawal working as well --- .../components/LiquidityWidget/index.tsx | 40 +++++++++++++++++-- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx b/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx index 9a8a4b0..bd6fa7a 100644 --- a/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx +++ b/packages/nextjs/app/liquidity/components/LiquidityWidget/index.tsx @@ -18,6 +18,8 @@ const LiquidityWidget: React.FC = () => { const [tokenB, setTokenB] = useState(""); // XOC amount const [xocAllowanceState, xocSetAllowanceState] = useState("0"); const [usdcAllowanceState, usdcSetAllowanceState] = useState("0"); + // State for share withdrawal input + const [shareAmount, setShareAmount] = useState(""); // Share amount // State to track if approval is needed const [requiresApproval, setRequiresApproval] = useState(false); @@ -26,6 +28,8 @@ const LiquidityWidget: React.FC = () => { const { writeContract: approveERC20 } = useWriteContract(); + const { writeContract: withdraw } = useWriteContract(); + // Hook to read the XOC contract allowance const { data: xocAllowance, @@ -151,6 +155,32 @@ const LiquidityWidget: React.FC = () => { console.log("Xoc Allowance", xocAllowanceState); console.log("USDC Allowance", usdcAllowanceState); + // Function to handle the withdrawal + const handleWithdrawal = async () => { + if (!accountAddress) { + console.error("Account address not found"); + return; + } + + const shareAmountInWei = parseEther(shareAmount.toString()); // XOC uses 18 decimals + + try { + const tx = await withdraw({ + abi: liquidityABI, + address: "0xD6DaB267b7C23EdB2ed5605d9f3f37420e88e291", // Liquidity contract address + functionName: "withdraw", + args: [shareAmountInWei, accountAddress], + }); + + console.log("Transaction submitted:", tx); + // Optionally wait for the transaction to be mined + // const receipt = await tx.wait(); + // console.log("Transaction confirmed:", receipt); + } catch (err) { + console.error("Error executing contract function:", err); + } + }; + return (
@@ -210,8 +240,8 @@ const LiquidityWidget: React.FC = () => { setTokenB(e.target.value)} + value={shareAmount} // This will represent the share amount to withdraw + onChange={e => setShareAmount(e.target.value)} className="w-full p-2 border rounded-lg dark:bg-neutral dark:text-neutral-content" placeholder={t("XoktleShareAmount")} /> @@ -224,8 +254,10 @@ const LiquidityWidget: React.FC = () => { onClick={() => { if (requiresApproval) { handleApproval(); // Call handleApproval when approval is needed - } else { - handleDeposit(); // Call handleDeposit if approval isn't required + } else if (action === "Deposit") { + handleDeposit(); // Call handleDeposit if deposit is selected + } else if (action === "Withdraw") { + handleWithdrawal(); // Call handleWithdrawal if withdraw is selected } }} >