diff --git a/src/components/common/TransactionCard/index.tsx b/src/components/common/TransactionCard/index.tsx index b4bc18b..a70d39a 100644 --- 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
  • { - currencyB && currencyA ? -
    - - -
    - : - currencyA ? - + txType === TransactionType.FARM && transaction.data.tokenId ? + : - + + currencyB && currencyA ? +
    + + +
    + : + currencyA ? + + : + + }
    {transaction.data.title} diff --git a/src/components/create-pool/CreatePoolForm/index.tsx b/src/components/create-pool/CreatePoolForm/index.tsx index a48eba9..9b826c4 100644 --- a/src/components/create-pool/CreatePoolForm/index.tsx +++ b/src/components/create-pool/CreatePoolForm/index.tsx @@ -9,7 +9,7 @@ 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'; @@ -17,6 +17,7 @@ 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 index 73bcbc0..d712464 100644 --- 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 index d1ababc..676b42a 100644 --- 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(); - - 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 (
    -
    - {json ? ( - - ) : ( -

    {position.id}

    - )} -
    +

    Position #{position.id}

    diff --git a/src/components/farming/FarmingPositionImg/index.tsx b/src/components/farming/FarmingPositionImg/index.tsx new file mode 100644 index 0000000..2f162c6 --- /dev/null +++ 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(); + + 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 ( +
    + {json ? ( + + ) : ( +

    {positionId.toString()}

    + )} +
    + ) +} \ No newline at end of file diff --git a/src/components/modals/RemoveLiquidityModal/index.tsx b/src/components/modals/RemoveLiquidityModal/index.tsx index b7780fc..23b716f 100644 --- 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 index 63b88e9..4425b2f 100644 --- 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 index 713bc87..b030a95 100644 --- 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 index f1144d8..88b300b 100644 --- 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 index 6009ba6..07432cf 100644 --- 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 | undefined, spender: Address) { @@ -31,12 +32,13 @@ export function useApprove(amountToApprove: CurrencyAmount | 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 { diff --git a/src/hooks/common/useTransactionAwait.tsx b/src/hooks/common/useTransactionAwait.tsx index 3f74757..58af22a 100644 --- a/src/hooks/common/useTransactionAwait.tsx +++ b/src/hooks/common/useTransactionAwait.tsx @@ -1,6 +1,6 @@ import { ToastAction } from '@/components/ui/toast'; import { useToast } from '@/components/ui/use-toast'; -import { usePendingTransactionsStore } from '@/state/pendingTransactionsStore'; +import { TransactionInfo, usePendingTransactionsStore } from '@/state/pendingTransactionsStore'; import { ExternalLinkIcon } from 'lucide-react'; import { useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; @@ -22,13 +22,10 @@ export const ViewTxOnExplorer = ({ hash }: { hash: Address | undefined }) => <> ); -export function useTransitionAwait( +export function useTransactionAwait( hash: Address | undefined, - title: string, - description?: string, + transactionInfo: TransactionInfo, redirectPath?: string, - tokenA?: Address, - tokenB?: Address ) { const { toast } = useToast(); @@ -45,20 +42,20 @@ export function useTransitionAwait( useEffect(() => { if (isLoading && hash && account) { toast({ - title: title, - description: description || 'Transaction was sent', + title: transactionInfo.title, + description: transactionInfo.description || 'Transaction was sent', action: , }); addPendingTransaction(account, hash); - updatePendingTransaction(account, hash, { data: { title, description, tokenA, tokenB }, loading: true, success: null, error: null }); + updatePendingTransaction(account, hash, { data: transactionInfo, loading: true, success: null, error: null }); } }, [isLoading, hash, account]); useEffect(() => { if (isError && hash) { toast({ - title: title, - description: description || 'Transaction failed', + title: transactionInfo.title, + description: transactionInfo.description || 'Transaction failed', action: , }); } @@ -67,8 +64,8 @@ export function useTransitionAwait( useEffect(() => { if (isSuccess && hash) { toast({ - title: title, - description: description || 'Transaction confirmed', + title: transactionInfo.title, + description: transactionInfo.description || 'Transaction confirmed', action: , }); if (redirectPath) { diff --git a/src/hooks/farming/useFarmApprove.ts b/src/hooks/farming/useFarmApprove.ts index 5699221..b5cc8dd 100644 --- a/src/hooks/farming/useFarmApprove.ts +++ b/src/hooks/farming/useFarmApprove.ts @@ -3,13 +3,13 @@ import { FARMING_CENTER, } from '@/constants/addresses'; import { algebraPositionManagerABI } from '@/generated'; -import { Address, useContractWrite, usePrepareContractWrite } from 'wagmi'; -import { useTransitionAwait } from '../common/useTransactionAwait'; +import { useContractWrite, usePrepareContractWrite } from 'wagmi'; +import { useTransactionAwait } from '../common/useTransactionAwait'; import { useEffect } from 'react'; import { useFarmCheckApprove } from './useFarmCheckApprove'; -import { isSameRewards } from '@/utils/farming/isSameRewards'; +import { TransactionType } from '@/state/pendingTransactionsStore'; -export function useFarmApprove(tokenId: bigint, rewardToken: Address, bonusRewardToken: Address) { +export function useFarmApprove(tokenId: bigint) { const APPROVE = true; const { config } = usePrepareContractWrite({ @@ -21,15 +21,13 @@ export function useFarmApprove(tokenId: bigint, rewardToken: Address, bonusRewar const { data: data, writeAsync: onApprove } = useContractWrite(config); - const isSameReward = isSameRewards(rewardToken, bonusRewardToken) - - const { isLoading, isSuccess } = useTransitionAwait( + const { isLoading, isSuccess } = useTransactionAwait( data?.hash, - `Approve Position #${tokenId}`, - '', - '', - rewardToken, - !isSameReward ? bonusRewardToken : undefined, + { + title: `Approve Position #${tokenId}`, + tokenId: tokenId.toString(), + type: TransactionType.FARM + } ); const { handleCheckApprove } = useFarmCheckApprove(tokenId); diff --git a/src/hooks/farming/useFarmHarvest.ts b/src/hooks/farming/useFarmHarvest.ts index 2864095..f7a2740 100644 --- a/src/hooks/farming/useFarmHarvest.ts +++ b/src/hooks/farming/useFarmHarvest.ts @@ -2,10 +2,10 @@ import { FARMING_CENTER } from '@/constants/addresses'; import { farmingCenterABI } from '@/generated'; import { getRewardsCalldata } from '@/utils/farming/getRewardsCalldata'; import { Address, useContractWrite, usePrepareContractWrite } from 'wagmi'; -import { useTransitionAwait } from '../common/useTransactionAwait'; +import { useTransactionAwait } from '../common/useTransactionAwait'; import { encodeFunctionData } from 'viem'; import { Deposit } from '@/graphql/generated/graphql'; -import { isSameRewards } from '@/utils/farming/isSameRewards'; +import { TransactionType } from '@/state/pendingTransactionsStore'; export function useFarmHarvest({ tokenId, @@ -40,15 +40,13 @@ export function useFarmHarvest({ const { data: data, writeAsync: onHarvest } = useContractWrite(config); - const isSameReward = isSameRewards(rewardToken, bonusRewardToken) - - const { isLoading, isSuccess } = useTransitionAwait( + const { isLoading, isSuccess } = useTransactionAwait( data?.hash, - `Harvest Position #${tokenId}`, - '', - '', - rewardToken, - !isSameReward ? bonusRewardToken : undefined, + { + title: `Harvest Position #${tokenId}`, + tokenId: tokenId.toString(), + type: TransactionType.FARM + } ); return { @@ -105,15 +103,13 @@ export function useFarmHarvestAll( const { data: data, writeAsync: onHarvestAll } = useContractWrite(config); - const isSameReward = isSameRewards(rewardToken, bonusRewardToken) - - const { isLoading, isSuccess } = useTransitionAwait( + const { isLoading, isSuccess } = useTransactionAwait( data?.hash, - `Harvest All Positions`, - '', - '', - rewardToken, - !isSameReward ? bonusRewardToken : undefined, + { + title: `Harvest All Positions`, + type: TransactionType.FARM, + tokenId: "0", + } ); return { diff --git a/src/hooks/farming/useFarmStake.ts b/src/hooks/farming/useFarmStake.ts index e630696..73087c9 100644 --- a/src/hooks/farming/useFarmStake.ts +++ b/src/hooks/farming/useFarmStake.ts @@ -1,14 +1,14 @@ import { FARMING_CENTER } from '@/constants/addresses'; import { farmingCenterABI } from '@/generated'; import { Address, useContractWrite, usePrepareContractWrite } from 'wagmi'; -import { useTransitionAwait } from '../common/useTransactionAwait'; +import { useTransactionAwait } from '../common/useTransactionAwait'; import { encodeFunctionData } from 'viem'; import { MaxUint128 } from '@cryptoalgebra/integral-sdk'; import { useFarmCheckApprove } from './useFarmCheckApprove'; import { useEffect, useState } from 'react'; import { farmingClient } from '@/graphql/clients'; import { Deposit } from '@/graphql/generated/graphql'; -import { isSameRewards } from '@/utils/farming/isSameRewards'; +import { TransactionType } from '@/state/pendingTransactionsStore'; export function useFarmStake({ tokenId, @@ -46,15 +46,13 @@ export function useFarmStake({ const { data: data, writeAsync: onStake } = useContractWrite(config); - const isSameReward = isSameRewards(rewardToken, bonusRewardToken) - - const { isLoading, isSuccess } = useTransitionAwait( + const { isLoading, isSuccess } = useTransactionAwait( data?.hash, - `Stake Position #${tokenId}`, - '', - '', - rewardToken, - !isSameReward ? bonusRewardToken : undefined, + { + title: `Stake Position #${tokenId}`, + tokenId: tokenId.toString(), + type: TransactionType.FARM + } ); useEffect(() => { @@ -153,15 +151,13 @@ export function useFarmUnstake({ const { data: data, writeAsync: onUnstake } = useContractWrite(config); - const isSameReward = isSameRewards(rewardToken, bonusRewardToken) - - const { isLoading, isSuccess } = useTransitionAwait( + const { isLoading, isSuccess } = useTransactionAwait( data?.hash, - `Unstake Position #${tokenId}`, - '', - '', - rewardToken, - !isSameReward ? bonusRewardToken : undefined, + { + title: `Unstake Position #${tokenId}`, + tokenId: tokenId.toString(), + type: TransactionType.FARM + } ); useEffect(() => { diff --git a/src/hooks/swap/useSwapCallback.ts b/src/hooks/swap/useSwapCallback.ts index b72c7b2..13df435 100644 --- a/src/hooks/swap/useSwapCallback.ts +++ b/src/hooks/swap/useSwapCallback.ts @@ -4,9 +4,10 @@ import { useSwapCallArguments } from "./useSwapCallArguments"; import { getAlgebraRouter, usePrepareAlgebraRouterMulticall } from "@/generated"; import { useEffect, useMemo, useState } from "react"; import { SwapCallbackState } from "@/types/swap-state"; -import { useTransitionAwait } from "../common/useTransactionAwait"; +import { useTransactionAwait } from "../common/useTransactionAwait"; import { formatCurrency } from "@/utils/common/formatCurrency"; import { ApprovalStateType } from "@/types/approve-state"; +import { TransactionType } from "@/state/pendingTransactionsStore"; interface SwapCallEstimate { calldata: string @@ -113,13 +114,14 @@ export function useSwapCallback( const { data: swapData, writeAsync: swapCallback } = useContractWrite(swapConfig) - const { isLoading, isSuccess } = useTransitionAwait( + const { isLoading, isSuccess } = useTransactionAwait( swapData?.hash, - `Swap ${formatCurrency.format(Number(trade?.inputAmount.toSignificant()))} ${trade?.inputAmount.currency.symbol}`, - "", - "", - trade?.inputAmount.currency.wrapped.address as Address, - trade?.outputAmount.currency.wrapped.address as Address + { + title: `Swap ${formatCurrency.format(Number(trade?.inputAmount.toSignificant()))} ${trade?.inputAmount.currency.symbol}`, + tokenA: trade?.inputAmount.currency.wrapped.address as Address, + tokenB: trade?.outputAmount.currency.wrapped.address as Address, + type: TransactionType.SWAP + } ) return useMemo(() => { diff --git a/src/hooks/swap/useWrapCallback.ts b/src/hooks/swap/useWrapCallback.ts index 8247926..e353b38 100644 --- a/src/hooks/swap/useWrapCallback.ts +++ b/src/hooks/swap/useWrapCallback.ts @@ -3,8 +3,9 @@ import { usePrepareWrappedNativeDeposit, usePrepareWrappedNativeWithdraw } from import { Currency, WNATIVE, tryParseAmount } from "@cryptoalgebra/integral-sdk"; import { useMemo } from "react"; import { Address, useAccount, useBalance, useChainId, useContractWrite } from "wagmi"; -import { useTransitionAwait } from "../common/useTransactionAwait"; +import { useTransactionAwait } from "../common/useTransactionAwait"; import { DEFAULT_NATIVE_SYMBOL } from "@/constants/default-chain-id"; +import { TransactionType } from "@/state/pendingTransactionsStore"; export const WrapType = { NOT_APPLICABLE: 'NOT_APPLICABLE', @@ -32,7 +33,10 @@ export default function useWrapCallback( const { data: wrapData, write: wrap } = useContractWrite(wrapConfig) - const { isLoading: isWrapLoading } = useTransitionAwait(wrapData?.hash, `Wrap ${inputAmount?.toSignificant(3)} ${DEFAULT_NATIVE_SYMBOL} to W${DEFAULT_NATIVE_SYMBOL}`) + const { isLoading: isWrapLoading } = useTransactionAwait( + wrapData?.hash, + { title: `Wrap ${inputAmount?.toSignificant(3)} ${DEFAULT_NATIVE_SYMBOL} to W${DEFAULT_NATIVE_SYMBOL}`, type: TransactionType.SWAP } + ) const { config: unwrapConfig } = usePrepareWrappedNativeWithdraw({ address: WNATIVE[chainId].address as Address, @@ -41,7 +45,10 @@ export default function useWrapCallback( const { data: unwrapData, write: unwrap } = useContractWrite(unwrapConfig) - const { isLoading: isUnwrapLoading } = useTransitionAwait(unwrapData?.hash, `Unwrap ${inputAmount?.toSignificant(3)} W${DEFAULT_NATIVE_SYMBOL} to ${DEFAULT_NATIVE_SYMBOL}`) + const { isLoading: isUnwrapLoading } = useTransactionAwait( + unwrapData?.hash, + { title: `Unwrap ${inputAmount?.toSignificant(3)} W${DEFAULT_NATIVE_SYMBOL} to ${DEFAULT_NATIVE_SYMBOL}`, type: TransactionType.SWAP } + ) const { data: balance } = useBalance({ enabled: Boolean(inputCurrency), diff --git a/src/state/pendingTransactionsStore.ts b/src/state/pendingTransactionsStore.ts index c16ec7d..747d1d5 100644 --- a/src/state/pendingTransactionsStore.ts +++ b/src/state/pendingTransactionsStore.ts @@ -5,27 +5,31 @@ import { create } from "zustand"; import { persist } from "zustand/middleware"; import { waitForTransactionReceipt } from 'viem/actions'; -interface TransactionData { +export enum TransactionType { + SWAP = "SWAP", + FARM = "FARM", + POOL = "POOL", +} + +export interface TransactionInfo { title: string; description?: string; tokenA?: Address; tokenB?: Address; + tokenId?: string; + type: TransactionType; } export interface Transaction { - data: TransactionData; + data: TransactionInfo; success: boolean | null; loading: boolean; error: Error | null; } -interface PendingTransactions { - [hash: Address]: Transaction -} +type PendingTransactions = Record; -interface UserTransactions { - [account: Address]: PendingTransactions -} +type UserTransactions = Record; const MAX_TRANSACTIONS = 10;