merge: dev into feature/swap-chart

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>

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(() => {

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;

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>

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>
+    )
+}

src/components/modals/RemoveLiquidityModal/index.tsx

@@ -3,9 +3,12 @@ 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 { farmingClient } from "@/graphql/clients";
+import { Deposit } from "@/graphql/generated/graphql";
+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 +84,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
@@ -104,8 +108,38 @@ const RemoveLiquidityModal = ({ positionId }: RemoveLiquidityModalProps) => {
 
     useEffect(() => {
         if (!isSuccess) return;
+        let interval: NodeJS.Timeout;
+
+        /* pool positions refetch */
         Promise.all([refetchPosition(), refetchAllPositions()])
-            .then(() => handleCloseModal?.());
+
+        /* farming deposits refetch */
+            .then(() => {
+                handleCloseModal?.();
+                if(sliderValue[0] !== 100) return;
+                interval = setInterval(
+                    () =>
+                        farmingClient.refetchQueries({
+                            include: ['Deposits'],
+                            onQueryUpdated: (query, { result: diff }) => {
+                                const currentPos = diff.deposits.find(
+                                    (deposit: Deposit) =>
+                                        deposit.id.toString() === positionId.toString()
+                                );
+                                if (!currentPos) return;
+
+                                if (currentPos.eternalFarming === null) {
+                                    clearInterval(interval);
+                                } else {
+                                    query.refetch().then();
+                                }
+                            },
+                        }),
+                    2000
+                );
+            });
+
+        return () => clearInterval(interval);
     }, [isSuccess]);
 
     return <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -122,26 +156,15 @@ const RemoveLiquidityModal = ({ positionId }: RemoveLiquidityModalProps) => {
                 <h2 className="text-3xl font-bold select-none">{`${sliderValue}%`}</h2>
 
                 <div className="flex gap-2">
-                    <Button
-                        variant={'icon'}
-                        className="border border-card-border"
-                        size={'sm'}
-                        onClick={() => setSliderValue([25])}>25%</Button>
-                    <Button
-                        variant={'icon'}
-                        className="border border-card-border"
-                        size={'sm'}
-                        onClick={() => setSliderValue([50])}>50%</Button>
-                    <Button
-                        variant={'icon'}
-                        className="border border-card-border"
-                        size={'sm'}
-                        onClick={() => setSliderValue([75])}>75%</Button>
-                    <Button
-                        variant={'icon'}
-                        className="border border-card-border"
-                        size={'sm'}
-                        onClick={() => setSliderValue([100])}>100%</Button>
+                    {[25, 50, 75, 100].map((v) => (
+                        <Button
+                            key={`liquidity-percent-${v}`}
+                            disabled={isRemoveLoading}
+                            variant={'icon'}
+                            className="border border-card-border"
+                            size={'sm'}
+                            onClick={() => setSliderValue([v])}>{v}%</Button>
+                    ))}
                 </div>
 
                 <Slider
@@ -153,6 +176,7 @@ const RemoveLiquidityModal = ({ positionId }: RemoveLiquidityModalProps) => {
                     onValueChange={(v) => setSliderValue(v)}
                     className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
                     aria-label="Liquidity Percent"
+                    disabled={isRemoveLoading}
                 />
 
                 <Button disabled={isDisabled} onClick={() => removeLiquidity && removeLiquidity()}>