From 257614df3500491a3300ae616533635e240f04eb Mon Sep 17 00:00:00 2001
From: torof <scottpanam@protonmail.com>
Date: Mon, 7 Oct 2024 14:23:09 +0200
Subject: [PATCH] fix(deploy fix try): fixing deployment issues

4
---
 .../src/components/ui/AllowanceTxButton.tsx   | 273 +++++++++---------
 1 file changed, 129 insertions(+), 144 deletions(-)

diff --git a/frontend/src/components/ui/AllowanceTxButton.tsx b/frontend/src/components/ui/AllowanceTxButton.tsx
index d19802bc..6e401d50 100644
--- a/frontend/src/components/ui/AllowanceTxButton.tsx
+++ b/frontend/src/components/ui/AllowanceTxButton.tsx
@@ -1,152 +1,137 @@
-import { FC } from "react";
+"use client";
+import { type FC, useEffect, type ReactNode, useState } from "react";
+import {
+  useSimulateContract,
+  useReadContract,
+  useAccount,
+  UseSimulateContractReturnType,
+} from "wagmi";
+import { erc20Abi, zeroAddress } from "viem";
+import { TxButton } from "./TxButton";
+import { Amount } from "./Amount";
+import { twMerge } from "tailwind-merge";
 
-import { CarouselItem } from "@/components/ui/Carousel";
-import { TxButton } from "@/components/ui";
-import { formatUnits } from "viem";
-import { useSimulateLdyStakingGetReward, useSimulateLdyStakingUnstake } from "@/generated";
-import dayjs from "dayjs";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import relativeTime from "dayjs/plugin/relativeTime";
-import utc from "dayjs/plugin/utc";
-import { OneMonth, StakeDurations } from "@/constants/staking";
-import { getAPRCalculation } from "@/lib/getAPRCalculation";
-import { QueryKey } from "@tanstack/react-query";
-import { IUserStakingInfo } from "@/services/graph/hooks/useStakingEvent";
-import { getTimeLeftString } from "@/lib/utils";
-import { UseSimulateContractReturnType } from "wagmi";
+interface Props extends React.ComponentPropsWithoutRef<typeof TxButton> {
+  token: `0x${string}`;
+  spender: `0x${string}`;
+  amount?: bigint;
+  preparation: UseSimulateContractReturnType;
+  transactionSummary?: string | ReactNode;
+  // This prevents displaying errors when user hasn't interacted with the button or input yet
+  hasUserInteracted?: boolean;
 
-dayjs.extend(localizedFormat);
-dayjs.extend(relativeTime);
-dayjs.extend(utc);
+  // Allow parent to force error state
+  parentIsError?: boolean;
+  parentError?: string;
 
-export interface IPoolInfo {
-  stakedAmount: bigint;
-  unStakeAt: bigint;
-  duration: bigint;
-  rewardPerTokenPaid: bigint;
-  rewards: bigint;
+  // Allow 0 amount
+  allowZeroAmount?: boolean;
 }
-
-export const AppStakingPoolPane: FC<{
-  poolInfo: IPoolInfo;
-  poolIndex: number;
-  ldyTokenDecimals: number;
-  userStakingInfo: IUserStakingInfo | undefined;
-  rewardsArray: readonly bigint[] | undefined;
-  rewardRate: number;
-  totalWeightedStake: number;
-  getUserStakesQuery?: QueryKey;
-  ldyTokenBalanceQuery?: QueryKey;
-  rewardsArrayQuery?: QueryKey;
-}> = ({
-  poolInfo,
-  poolIndex,
-  ldyTokenDecimals,
-  userStakingInfo,
-  rewardsArray,
-  rewardRate,
-  totalWeightedStake,
-  getUserStakesQuery,
-  ldyTokenBalanceQuery,
-  rewardsArrayQuery,
+/**
+ * A version of the TxButton that allows to ensure and set (if needed) a given ERC20 allowance before
+ * signing the transaction.
+ */
+export const AllowanceTxButton: FC<Props> = ({
+  token,
+  spender,
+  amount = 0n,
+  preparation,
+  transactionSummary = "",
+  hasUserInteracted = false,
+  parentIsError = false,
+  parentError = undefined,
+  allowZeroAmount = false,
+  disabled,
+  className,
   ...props
 }) => {
+  const account = useAccount();
+  const [hasEnoughAllowance, setHasEnoughAllowance] = useState(false);
+  const { data: symbol } = useReadContract({
+    abi: erc20Abi,
+    functionName: "symbol",
+    address: token,
+  });
+  const { data: decimals } = useReadContract({
+    abi: erc20Abi,
+    functionName: "decimals",
+    address: token,
+  });
+  const { data: allowance, queryKey: allowanceQueryKey } = useReadContract({
+    abi: erc20Abi,
+    functionName: "allowance",
+    address: token,
+    args: [account.address || zeroAddress, spender],
+  });
+  const { data: balance, queryKey: balanceQueryKey } = useReadContract({
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    address: token,
+    args: [account.address || zeroAddress],
+  });
+  const allowancePreparation = useSimulateContract({
+    abi: erc20Abi,
+    functionName: "approve",
+    address: token,
+    args: [spender, amount],
+  });
+
+  // Set hasEnoughAllowance when allowance or amount chanages
+  useEffect(() => {
+    preparation.refetch();
+    setHasEnoughAllowance(allowance !== undefined && allowance >= amount);
+  }, [allowance, amount]);
+
+  // Check if the user has enough balance, and raise error else
+  let isError = false;
+  let errorMessage: string = "";
+
+  useEffect(() => {
+    if (!balance || balance < amount) {
+      isError = true;
+      errorMessage = "Insufficient balance";
+    }
+  }, [balance, amount]);
+
   return (
-    <CarouselItem key={poolIndex} className="px-2 md:basis-1/2 lg:basis-1/3">
-      <div className="p-3 lg:p-4 rounded-lg bg-card-content-default">
-        <div className="flex flex-col justify-start">
-          <span className="font-semibold text-lg">Pool #{poolIndex + 1}</span>
-          <div className="flex text-sm justify-between">
-            <span>Staked Amount</span>
-            <span className="font-semibold">
-              {formatUnits(poolInfo.stakedAmount, ldyTokenDecimals!)}
-            </span>
-          </div>
-          <div className="flex text-sm justify-between">
-            <span>Duration</span>
-            <span className="font-semibold">{Number(poolInfo.duration) / OneMonth} Months</span>
-          </div>
-          <div className="flex text-sm justify-between">
-            <span>Unlock Timestamp</span>
-            <span className="font-semibold">
-              {dayjs.utc(Number(poolInfo.unStakeAt) * 1000).format("DD/MM/YYYY")}
-            </span>
-          </div>
-          <div className="flex text-sm justify-between">
-            <span>Earned</span>
-            <span className="font-semibold">
-              {userStakingInfo
-                ? Number(
-                    formatUnits(BigInt(userStakingInfo.earnedAmount), ldyTokenDecimals!),
-                  ).toFixed(4)
-                : 0}{" "}
-              Token
-            </span>
-          </div>
-          <div className="flex text-sm justify-between">
-            <span>APY</span>
-            <span className="font-semibold">
-              {getAPRCalculation(
-                rewardRate,
-                totalWeightedStake,
-                StakeDurations.findIndex((duration) => {
-                  return duration == Number(poolInfo.duration) / OneMonth;
-                }),
-              )}
-              %
-            </span>
-          </div>
-          <div className="flex text-sm justify-between">
-            <span>Time Left</span>
-            <span className="font-semibold">
-              {getTimeLeftString(Number(poolInfo.unStakeAt) * 1000)}
-            </span>
-          </div>
-          <div className="flex py-1 w-full">
-            <TxButton
-              preparation={
-                useSimulateLdyStakingUnstake({
-                  args: [poolInfo.stakedAmount, BigInt(poolIndex)],
-                }) as UseSimulateContractReturnType
-              }
-              variant="primary"
-              size="tiny"
-              disabled={dayjs().isBefore(Number(poolInfo.unStakeAt) * 1000)}
-              className="w-full"
-              queryKeys={[ldyTokenBalanceQuery, getUserStakesQuery, rewardsArrayQuery]}
-            >
-              UNSTAKE
-            </TxButton>
-          </div>
-          <div className="flex py-1 w-full">
-            <TxButton
-              preparation={
-                useSimulateLdyStakingGetReward({
-                  args: [BigInt(poolIndex)],
-                }) as UseSimulateContractReturnType
-              }
-              variant="outline"
-              size="tiny"
-              disabled={
-                Number(
-                  formatUnits(
-                    BigInt(rewardsArray ? rewardsArray[poolIndex] : 0),
-                    ldyTokenDecimals!,
-                  ),
-                ) < 0.0001
-              }
-              className="w-full"
-              queryKeys={[rewardsArrayQuery, ldyTokenBalanceQuery]}
-            >
-              CLAIM{" "}
-              {Number(
-                formatUnits(BigInt(rewardsArray ? rewardsArray[poolIndex] : 0), ldyTokenDecimals!),
-              ).toFixed(4)}{" "}
-              Token
-            </TxButton>
-          </div>
-        </div>
-      </div>
-    </CarouselItem>
+    <div>
+      <TxButton
+        className={twMerge(!hasEnoughAllowance && "pointer-events-none hidden", className)}
+        hideTooltips={!hasEnoughAllowance}
+        hasUserInteracted={hasUserInteracted}
+        preparation={preparation}
+        disabled={(amount === 0n && !allowZeroAmount) || disabled}
+        transactionSummary={transactionSummary}
+        parentIsError={isError}
+        parentError={errorMessage}
+        queryKeys={[balanceQueryKey, allowanceQueryKey]}
+        {...props}
+      />
+      <TxButton
+        className={twMerge(hasEnoughAllowance && "pointer-events-none hidden", className)}
+        hideTooltips={hasEnoughAllowance}
+        preparation={allowancePreparation as UseSimulateContractReturnType}
+        disabled={(amount === 0n && !allowZeroAmount) || disabled}
+        hasUserInteracted={hasUserInteracted}
+        parentIsError={parentIsError || isError}
+        parentError={parentIsError ? parentError : errorMessage}
+        transactionSummary={
+          <span>
+            Allow Ledgity Yield to use{" "}
+            <Amount
+              value={amount}
+              decimals={decimals}
+              suffix={symbol}
+              displaySymbol={true}
+              className="text-indigo-300 underline decoration-indigo-300 decoration-2 underline-offset-4 whitespace-nowrap"
+            />
+          </span>
+        }
+        queryKeys={[allowanceQueryKey]}
+        {...props}
+      >
+        Allow
+      </TxButton>
+    </div>
   );
-};
\ No newline at end of file
+};