refactor: rename useTransitionAwait, add tx types, bring out farm img

cryptoalgebra · Apr 12, 2024 · 0df89a1 · 0df89a1
1 parent cfb2a4b
commit 0df89a1
Show file tree

Hide file tree

Showing 17 changed files with 195 additions and 170 deletions.
diff --git a/src/components/common/TransactionCard/index.tsx b/src/components/common/TransactionCard/index.tsx
@@ -5,29 +5,37 @@ import CurrencyLogo from "../CurrencyLogo";
 import EtherScanLogo from "@/assets/etherscan-logo-circle.svg"
 import { Check, ExternalLinkIcon, X } from "lucide-react";
 import { Link } from "react-router-dom";
-import { Transaction } from "@/state/pendingTransactionsStore";
+import { Transaction, TransactionType } from "@/state/pendingTransactionsStore";
 import Loader from "../Loader";
+import { FarmingPositionImg } from "@/components/farming/FarmingPositionImg";
 
 export const TransactionCard = ({ hash, transaction }: { hash: Address, transaction: Transaction }) => {
     const currencyA = useCurrency(transaction.data.tokenA, true);
     const currencyB = useCurrency(transaction.data.tokenB, true);
 
+    const txType = transaction.data.type;
+
     return <Link
             to={`https://holesky.etherscan.io/tx/${hash}`}
             target={'_blank'}
             >
                 <li className="flex group h-16 justify-between items-center gap-4 w-full bg-card-dark rounded-3xl p-4 border border-border/60 hover:border-border hover:bg-card-dark/60 transition-all duration-200" key={hash}>
                     {
-                        currencyB && currencyA ?
-                        <div className="w-[36px] relative">
-                            <CurrencyLogo className="absolute bottom-0 translate-y-1/4" currency={currencyA} size={28} />
-                            <CurrencyLogo className="absolute top-0 left-3 -translate-y-1/4" currency={currencyB} size={28} />
-                        </div>
-                        :
-                        currencyA ?
-                        <CurrencyLogo currency={currencyA} size={36} />
+                        txType === TransactionType.FARM && transaction.data.tokenId ?
+                        <FarmingPositionImg positionId={BigInt(transaction.data.tokenId)} size={10} />
                         :
-                        <img className="brightness-150" src={EtherScanLogo} width={36} height={36} />
+
+                            currencyB && currencyA ?
+                            <div className="w-[36px] relative">
+                                <CurrencyLogo className="absolute bottom-0 translate-y-1/4" currency={currencyA} size={28} />
+                                <CurrencyLogo className="absolute top-0 left-3 -translate-y-1/4" currency={currencyB} size={28} />
+                            </div>
+                            :
+                            currencyA ?
+                            <CurrencyLogo currency={currencyA} size={40} />
+                            :
+                            <img className="brightness-150" src={EtherScanLogo} width={40} height={40} />
+
                     }
                     <div className="flex flex-col mr-auto">
                         <span className="text-xs opacity-60">{transaction.data.title}</span>

diff --git a/src/components/create-pool/CreatePoolForm/index.tsx b/src/components/create-pool/CreatePoolForm/index.tsx
@@ -9,14 +9,15 @@ import {
     computePoolAddress,
 } from '@cryptoalgebra/integral-sdk';
 import { usePrepareAlgebraPositionManagerMulticall } from '@/generated';
-import { useTransitionAwait } from '@/hooks/common/useTransactionAwait';
+import { useTransactionAwait } from '@/hooks/common/useTransactionAwait';
 import { Address, useContractWrite } from 'wagmi';
 import { useDerivedMintInfo, useMintState } from '@/state/mintStore';
 import Loader from '@/components/common/Loader';
 import { PoolState, usePool } from '@/hooks/pools/usePool';
 import Summary from '../Summary';
 import SelectPair from '../SelectPair';
 import { STABLECOINS } from '@/constants/tokens';
+import { TransactionType } from '@/state/pendingTransactionsStore';
 
 const CreatePoolForm = () => {
     const { currencies } = useDerivedSwapInfo();
@@ -77,13 +78,15 @@ const CreatePoolForm = () => {
     const { data: createPoolData, write: createPool } =
         useContractWrite(createPoolConfig);
 
-    const { isLoading } = useTransitionAwait(
+    const { isLoading } = useTransactionAwait(
         createPoolData?.hash,
-        'Create Pool',
-        '',
-        '/pools',
-        currencyA?.wrapped.address as Address,
-        currencyB?.wrapped.address as Address
+        {
+            title: 'Create Pool',
+            tokenA: currencyA?.wrapped.address as Address,
+            tokenB: currencyB?.wrapped.address as Address,
+            type: TransactionType.POOL,
+        },
+        '/pools'
     );
 
     useEffect(() => {

diff --git a/src/components/create-position/AddLiquidityButton/index.tsx b/src/components/create-position/AddLiquidityButton/index.tsx
@@ -7,8 +7,9 @@ import {
 } from '@/constants/default-chain-id';
 import { usePrepareAlgebraPositionManagerMulticall } from '@/generated';
 import { useApprove } from '@/hooks/common/useApprove';
-import { useTransitionAwait } from '@/hooks/common/useTransactionAwait';
+import { useTransactionAwait } from '@/hooks/common/useTransactionAwait';
 import { IDerivedMintInfo } from '@/state/mintStore';
+import { TransactionType } from '@/state/pendingTransactionsStore';
 import { useUserState } from '@/state/userStore';
 import { ApprovalState } from '@/types/approve-state';
 import {
@@ -118,13 +119,15 @@ export const AddLiquidityButton = ({
     const { data: addLiquidityData, write: addLiquidity } =
         useContractWrite(addLiquidityConfig);
 
-    const { isLoading: isAddingLiquidityLoading } = useTransitionAwait(
+    const { isLoading: isAddingLiquidityLoading } = useTransactionAwait(
         addLiquidityData?.hash,
-        'Add liquidity',
-        '',
-        `/pool/${poolAddress}`,
-        baseCurrency?.wrapped.address as Address,
-        quoteCurrency?.wrapped.address as Address
+        {
+            title: 'Add liquidity',
+            tokenA: baseCurrency?.wrapped.address as Address,
+            tokenB: quoteCurrency?.wrapped.address as Address,
+            type: TransactionType.POOL,
+        },
+        `/pool/${poolAddress}`
     );
 
     const isWrongChain = selectedNetworkId !== DEFAULT_CHAIN_ID;

diff --git a/src/components/farming/FarmingPositionCard/index.tsx b/src/components/farming/FarmingPositionCard/index.tsx
@@ -1,7 +1,6 @@
-import { useAlgebraPositionManagerTokenUri } from '@/generated';
 import { Deposit } from '@/graphql/generated/graphql';
 import { cn } from '@/lib/utils';
-import { useEffect, useRef } from 'react';
+import { FarmingPositionImg } from '../FarmingPositionImg';
 
 interface FarmingPositionCardProps {
     position: Deposit;
@@ -16,22 +15,6 @@ const FarmingPositionCard = ({
     className,
     onClick,
 }: FarmingPositionCardProps) => {
-    const { data: uri } = useAlgebraPositionManagerTokenUri({
-        args: [BigInt(position.id)],
-    });
-
-    const imgRef = useRef<any>();
-
-    const json =
-        uri &&
-        JSON.parse(atob(uri.slice('data:application/json;base64,'.length)));
-
-    useEffect(() => {
-        if (!imgRef?.current || !json) return;
-
-        imgRef.current.src = json.image;
-    }, [imgRef, json]);
-
     return (
         <div
             onClick={onClick}
@@ -40,23 +23,7 @@ const FarmingPositionCard = ({
                 className
             )}
         >
-            <div
-                className="w-12 h-12 rounded-full flex items-center justify-center overflow-hidden"
-                style={{
-                    background:
-                        'linear-gradient(181.1deg, #686EFF 0.93%, #141520 99.07%)',
-                }}
-            >
-                {json ? (
-                    <img
-                        ref={imgRef}
-                        style={{ transform: 'scale(2)' }}
-                        className=""
-                    />
-                ) : (
-                    <p>{position.id}</p>
-                )}
-            </div>
+            <FarmingPositionImg positionId={BigInt(position.id)} size={12} />
             <div className="flex flex-col">
                 <p>Position #{position.id}</p>
                 <div>

diff --git a/src/components/farming/FarmingPositionImg/index.tsx b/src/components/farming/FarmingPositionImg/index.tsx
@@ -0,0 +1,40 @@
+import { useAlgebraPositionManagerTokenUri } from "@/generated";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef } from "react";
+
+export const FarmingPositionImg = ({ positionId, size, className }: { positionId: bigint, size: number, className?: string }) => {
+    const { data: uri } = useAlgebraPositionManagerTokenUri({
+        args: [positionId],
+    });
+
+    const imgRef = useRef<any>();
+
+    const json =
+        uri &&
+        JSON.parse(atob(uri.slice('data:application/json;base64,'.length)));
+
+    useEffect(() => {
+        if (!imgRef?.current || !json) return;
+
+        imgRef.current.src = json.image;
+    }, [imgRef, json]);
+
+    return (
+        <div
+            className={cn("rounded-full flex items-center justify-center overflow-hidden", className, `w-${size}`)}
+            style={{
+                background:
+                    'linear-gradient(181.1deg, #686EFF 0.93%, #141520 99.07%)',
+            }}
+        >
+            {json ? (
+                <img
+                    ref={imgRef}
+                    className="scale-[2]"
+                />
+            ) : (
+                <p>{positionId.toString()}</p>
+            )}
+        </div>
+    )
+}
diff --git a/src/components/modals/RemoveLiquidityModal/index.tsx b/src/components/modals/RemoveLiquidityModal/index.tsx
@@ -3,9 +3,10 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Slider } from "@/components/ui/slider";
 import { usePrepareAlgebraPositionManagerMulticall } from "@/generated";
-import { useTransitionAwait } from "@/hooks/common/useTransactionAwait";
+import { useTransactionAwait } from "@/hooks/common/useTransactionAwait";
 import { usePosition, usePositions } from "@/hooks/positions/usePositions";
 import { useBurnActionHandlers, useBurnState, useDerivedBurnInfo } from "@/state/burnStore";
+import { TransactionType } from "@/state/pendingTransactionsStore";
 import { useUserState } from "@/state/userStore";
 import { NonfungiblePositionManager, Percent } from "@cryptoalgebra/integral-sdk";
 import { useEffect, useMemo, useState } from "react";
@@ -81,13 +82,14 @@ const RemoveLiquidityModal = ({ positionId }: RemoveLiquidityModalProps) => {
 
     const { data: removeLiquidityData, write: removeLiquidity } = useContractWrite(removeLiquidityConfig)
 
-    const { isLoading: isRemoveLoading, isSuccess } = useTransitionAwait(
+    const { isLoading: isRemoveLoading, isSuccess } = useTransactionAwait(
         removeLiquidityData?.hash,
-        'Remove liquidity',
-        '',
-        '',
-        position?.token0 as Address,
-        position?.token1 as Address
+        {
+            title: 'Removing liquidity',
+            tokenA: position?.token0 as Address,
+            tokenB: position?.token1 as Address,
+            type: TransactionType.POOL
+        }
     )
 
     const isDisabled = sliderValue[0] === 0 || isRemoveLoading || !removeLiquidity

diff --git a/src/components/modals/SelectPositionFarmModal/index.tsx b/src/components/modals/SelectPositionFarmModal/index.tsx
@@ -35,11 +35,7 @@ export function SelectPositionFarmModal({
 
     const { approved, isLoading: isApproving } = useFarmCheckApprove(tokenId);
 
-    const { isLoading: isApproveLoading, onApprove } = useFarmApprove(
-        tokenId,
-        farming.farming.rewardToken,
-        farming.farming.bonusRewardToken
-    );
+    const { isLoading: isApproveLoading, onApprove } = useFarmApprove(tokenId);
 
     const { isLoading: isStakeLoading, onStake } = useFarmStake({
         tokenId,

diff --git a/src/components/position/CollectFees/index.tsx b/src/components/position/CollectFees/index.tsx
@@ -2,9 +2,10 @@ import Loader from "@/components/common/Loader";
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { usePrepareAlgebraPositionManagerMulticall } from "@/generated";
-import { useTransitionAwait } from "@/hooks/common/useTransactionAwait";
+import { useTransactionAwait } from "@/hooks/common/useTransactionAwait";
 import { usePositionFees } from "@/hooks/positions/usePositionFees";
 import { IDerivedMintInfo } from "@/state/mintStore";
+import { TransactionType } from "@/state/pendingTransactionsStore";
 import { NonfungiblePositionManager } from "@cryptoalgebra/integral-sdk";
 import { useMemo } from "react";
 import { Address, useAccount, useContractWrite } from "wagmi";
@@ -49,13 +50,14 @@ const CollectFees = ({ mintInfo, positionFeesUSD, positionId }: CollectFeesProps
 
     const { data: collectData, write: collect } = useContractWrite(collectConfig)
 
-    const { isLoading } = useTransitionAwait(
+    const { isLoading } = useTransactionAwait(
         collectData?.hash,
-        'Collect fees',
-        '',
-        '',
-        mintInfo.currencies.CURRENCY_A?.wrapped.address as Address,
-        mintInfo.currencies.CURRENCY_B?.wrapped.address as Address
+        {
+            title: 'Collect fees',
+            tokenA: mintInfo.currencies.CURRENCY_A?.wrapped.address as Address,
+            tokenB: mintInfo.currencies.CURRENCY_B?.wrapped.address as Address,
+            type: TransactionType.POOL
+        }
     )
 
     const collectedFees = positionFeesUSD === '$0' && !zeroRewards ? '< $0.001' : positionFeesUSD

diff --git a/src/components/position/IncreaseLiquidityButton/index.tsx b/src/components/position/IncreaseLiquidityButton/index.tsx
@@ -7,9 +7,10 @@ import {
 } from '@/constants/default-chain-id';
 import { usePrepareAlgebraPositionManagerMulticall } from '@/generated';
 import { useApprove } from '@/hooks/common/useApprove';
-import { useTransitionAwait } from '@/hooks/common/useTransactionAwait';
+import { useTransactionAwait } from '@/hooks/common/useTransactionAwait';
 import { usePosition, usePositions } from '@/hooks/positions/usePositions';
 import { IDerivedMintInfo } from '@/state/mintStore';
+import { TransactionType } from '@/state/pendingTransactionsStore';
 import { useUserState } from '@/state/userStore';
 import { ApprovalState } from '@/types/approve-state';
 import {
@@ -125,13 +126,14 @@ export const IncreaseLiquidityButton = ({
         useContractWrite(increaseLiquidityConfig);
 
     const { isLoading: isIncreaseLiquidityLoading, isSuccess } =
-        useTransitionAwait(
+        useTransactionAwait(
             increaseLiquidityData?.hash,
-            `Add Liquidity to #${tokenId}`,
-            "",
-            "",
-            baseCurrency?.wrapped.address as Address,
-            quoteCurrency?.wrapped.address as Address
+            {
+                title: `Add Liquidity to #${tokenId}`,
+                tokenA: baseCurrency?.wrapped.address as Address,
+                tokenB: quoteCurrency?.wrapped.address as Address,
+                type: TransactionType.POOL
+            }
         );
 
     useEffect(() => {

diff --git a/src/hooks/common/useApprove.ts b/src/hooks/common/useApprove.ts
@@ -4,8 +4,9 @@ import { ApprovalState, ApprovalStateType } from "@/types/approve-state";
 import { useMemo } from "react";
 import { Address, erc20ABI, useContractWrite, usePrepareContractWrite } from "wagmi";
 import { ALGEBRA_ROUTER } from "@/constants/addresses";
-import { useTransitionAwait } from "./useTransactionAwait";
+import { useTransactionAwait } from "./useTransactionAwait";
 import { formatCurrency } from "@/utils/common/formatCurrency";
+import { TransactionType } from "@/state/pendingTransactionsStore";
 
 export function useApprove(amountToApprove: CurrencyAmount<Currency> | undefined, spender: Address) {
 
@@ -31,12 +32,13 @@ export function useApprove(amountToApprove: CurrencyAmount<Currency> | undefined
 
     const { data: approvalData, writeAsync: approve } = useContractWrite(config);
 
-    const { isLoading, isSuccess } = useTransitionAwait(
+    const { isLoading, isSuccess } = useTransactionAwait(
         approvalData?.hash,
-        `Approve ${formatCurrency.format(Number(amountToApprove?.toSignificant()))} ${amountToApprove?.currency.symbol}`,
-        "",
-        "",
-        token?.address as Address
+        {
+            title: `Approve ${formatCurrency.format(Number(amountToApprove?.toSignificant()))} ${amountToApprove?.currency.symbol}`,
+            tokenA: token?.address as Address,
+            type: TransactionType.SWAP
+        }
     )
 
     return {