From 2607c6033e32014d63c67cae1a0a286dd6aba050 Mon Sep 17 00:00:00 2001 From: Gareth Fuller Date: Wed, 2 Oct 2024 14:10:49 +0100 Subject: [PATCH] chore: Cleanup --- .../actions/PoolActionsPriceImpactDetails.tsx | 8 +-- .../add-liquidity/AddLiquidityProvider.tsx | 7 +-- .../add-liquidity/form/AddLiquidityForm.tsx | 2 + .../modal/AddLiquiditySummary.tsx | 2 + .../form/RemoveLiquidityForm.tsx | 3 ++ .../modal/RemoveLiquiditySummary.tsx | 3 ++ lib/shared/components/counter/Counter.tsx | 49 ------------------- 7 files changed, 16 insertions(+), 58 deletions(-) delete mode 100644 lib/shared/components/counter/Counter.tsx diff --git a/lib/modules/pool/actions/PoolActionsPriceImpactDetails.tsx b/lib/modules/pool/actions/PoolActionsPriceImpactDetails.tsx index 8fd73d615..736a71fa6 100644 --- a/lib/modules/pool/actions/PoolActionsPriceImpactDetails.tsx +++ b/lib/modules/pool/actions/PoolActionsPriceImpactDetails.tsx @@ -2,18 +2,17 @@ import { NumberText } from '@/lib/shared/components/typography/NumberText' import { fNum, bn } from '@/lib/shared/utils/numbers' import { HStack, VStack, Text, Tooltip, Icon, Box, Skeleton } from '@chakra-ui/react' import { usePriceImpact } from '@/lib/modules/price-impact/PriceImpactProvider' -import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider' import { useCurrency } from '@/lib/shared/hooks/useCurrency' import { usePool } from '../PoolProvider' import { ArrowRight } from 'react-feather' import { calcShareOfPool, calcUserShareOfPool } from '../pool.helpers' import { isNumber } from 'lodash' import { InfoIcon } from '@/lib/shared/components/icons/InfoIcon' -import { useAddLiquidity } from './add-liquidity/AddLiquidityProvider' interface PoolActionsPriceImpactDetailsProps { bptAmount: bigint | undefined totalUSDValue: string + slippage: string isAddLiquidity?: boolean isLoading?: boolean } @@ -21,15 +20,12 @@ interface PoolActionsPriceImpactDetailsProps { export function PoolActionsPriceImpactDetails({ bptAmount, totalUSDValue, + slippage, isAddLiquidity = false, isLoading = false, }: PoolActionsPriceImpactDetailsProps) { - const { slippage: userSlippage } = useUserSettings() const { toCurrency } = useCurrency() const { pool } = usePool() - const { isForcedProportionalAdd, proportionalSlippage } = useAddLiquidity() - - const slippage = isForcedProportionalAdd ? proportionalSlippage : userSlippage const { priceImpactLevel, priceImpactColor, PriceImpactIcon, priceImpact } = usePriceImpact() diff --git a/lib/modules/pool/actions/add-liquidity/AddLiquidityProvider.tsx b/lib/modules/pool/actions/add-liquidity/AddLiquidityProvider.tsx index 35c84770b..8b289b5ac 100644 --- a/lib/modules/pool/actions/add-liquidity/AddLiquidityProvider.tsx +++ b/lib/modules/pool/actions/add-liquidity/AddLiquidityProvider.tsx @@ -47,7 +47,7 @@ export function _useAddLiquidity(urlTxHash?: Hash) { useTokens() const { isConnected } = useUserAccount() const { hasValidationErrors } = useTokenInputsValidation() - const { slippage } = useUserSettings() + const { slippage: userSlippage } = useUserSettings() const handler = useMemo(() => selectAddLiquidityHandler(pool), [pool.id, isLoading]) @@ -60,7 +60,7 @@ export function _useAddLiquidity(urlTxHash?: Hash) { const nativeAsset = getNativeAssetToken(chain) const wNativeAsset = getWrappedNativeAssetToken(chain) const isForcedProportionalAdd = requiresProportionalInput(pool.type) - + const slippage = isForcedProportionalAdd ? proportionalSlippage : userSlippage const tokens = getPoolTokens(pool, getToken) function setInitialHumanAmountsIn() { @@ -119,7 +119,7 @@ export function _useAddLiquidity(urlTxHash?: Hash) { handler, humanAmountsIn, simulationQuery, - slippage: isForcedProportionalAdd ? proportionalSlippage : slippage, + slippage, }) const transactionSteps = useTransactionSteps(steps, isLoadingSteps) @@ -191,6 +191,7 @@ export function _useAddLiquidity(urlTxHash?: Hash) { addLiquidityTxHash, hasQuoteContext, addLiquidityTxSuccess, + slippage, proportionalSlippage, isForcedProportionalAdd, setProportionalSlippage, diff --git a/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx b/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx index 5e0874c6b..100c3171e 100644 --- a/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx +++ b/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx @@ -82,6 +82,7 @@ function AddLiquidityMainForm() { wNativeAsset, previewModalDisclosure, proportionalSlippage, + slippage, setProportionalSlippage, } = useAddLiquidity() @@ -217,6 +218,7 @@ function AddLiquidityMainForm() { diff --git a/lib/modules/pool/actions/add-liquidity/modal/AddLiquiditySummary.tsx b/lib/modules/pool/actions/add-liquidity/modal/AddLiquiditySummary.tsx index 8e739c3e1..e7cbb9086 100644 --- a/lib/modules/pool/actions/add-liquidity/modal/AddLiquiditySummary.tsx +++ b/lib/modules/pool/actions/add-liquidity/modal/AddLiquiditySummary.tsx @@ -34,6 +34,7 @@ export function AddLiquiditySummary({ tokens, addLiquidityTxHash, addLiquidityTxSuccess, + slippage, } = useAddLiquidity() const { pool } = usePool() const { isMobile } = useBreakpoints() @@ -123,6 +124,7 @@ export function AddLiquiditySummary({ diff --git a/lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm.tsx b/lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm.tsx index a542f2d1c..0a6deb38c 100644 --- a/lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm.tsx +++ b/lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm.tsx @@ -35,6 +35,7 @@ import { SimulationError } from '@/lib/shared/components/errors/SimulationError' import { InfoIcon } from '@/lib/shared/components/icons/InfoIcon' import { SafeAppAlert } from '@/lib/shared/components/alerts/SafeAppAlert' import { useTokens } from '@/lib/modules/tokens/TokensProvider' +import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider' const TABS: ButtonGroupOption[] = [ { value: 'proportional', @@ -71,6 +72,7 @@ export function RemoveLiquidityForm() { const nextBtn = useRef(null) const [activeTab, setActiveTab] = useState(TABS[0]) const { startTokenPricePolling } = useTokens() + const { slippage } = useUserSettings() useEffect(() => { setPriceImpact(priceImpactQuery.data) @@ -177,6 +179,7 @@ export function RemoveLiquidityForm() { } diff --git a/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquiditySummary.tsx b/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquiditySummary.tsx index a535730d9..0e1758af2 100644 --- a/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquiditySummary.tsx +++ b/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquiditySummary.tsx @@ -14,6 +14,7 @@ import { RemoveLiquidityReceiptResult } from '@/lib/modules/transactions/transac import { BalAlert } from '@/lib/shared/components/alerts/BalAlert' import { useTokens } from '@/lib/modules/tokens/TokensProvider' import { CardPopAnim } from '@/lib/shared/components/animations/CardPopAnim' +import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider' export function RemoveLiquiditySummary({ isLoading: isLoadingReceipt, @@ -34,6 +35,7 @@ export function RemoveLiquiditySummary({ const { getTokensByChain } = useTokens() const { pool } = usePool() const { userAddress, isLoading: isUserAddressLoading } = useUserAccount() + const { slippage } = useUserSettings() const _amountsOut = amountsOut.filter(amount => bn(amount.humanAmount).gt(0)) @@ -87,6 +89,7 @@ export function RemoveLiquiditySummary({ diff --git a/lib/shared/components/counter/Counter.tsx b/lib/shared/components/counter/Counter.tsx deleted file mode 100644 index df3a7bad1..000000000 --- a/lib/shared/components/counter/Counter.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { useEffect, useRef } from 'react' -import { SpringOptions, useInView, useMotionValue, useSpring } from 'framer-motion' -import { Text, TextProps } from '@chakra-ui/react' - -/** - * @see https://github.com/driaug/animated-counter - */ - -interface Props extends TextProps { - value: number - direction?: 'up' | 'down' - springOptions?: SpringOptions - formatter: (value: number) => string -} - -export function Counter({ - value, - direction = 'up', - springOptions = { - stiffness: 190, - damping: 115, - mass: 1, - }, - formatter, - ...rest -}: Props) { - const ref = useRef(null) - const motionValue = useMotionValue(direction === 'down' ? value : 0) - const springValue = useSpring(motionValue, springOptions) - const isInView = useInView(ref, { once: true, margin: '-100px' }) - - useEffect(() => { - if (isInView) { - motionValue.set(direction === 'down' ? 0 : value) - } - }, [motionValue, isInView, value, direction]) - - useEffect( - () => - springValue.on('change', latest => { - if (ref.current) { - ref.current.textContent = formatter(latest) - } - }), - [springValue, formatter] - ) - - return -}