From 859c697903011509f9d2676bb3fc7891f375151f Mon Sep 17 00:00:00 2001 From: Gianfranco Date: Tue, 7 Jan 2025 13:49:14 -0300 Subject: [PATCH 1/4] scroll to beginning of the comparisson table when clicked --- src/components/FeeComparison/index.tsx | 28 ++++++++++++++++++++++---- src/pages/swap/index.tsx | 5 +---- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/FeeComparison/index.tsx b/src/components/FeeComparison/index.tsx index 135da6d7..2f85987d 100644 --- a/src/components/FeeComparison/index.tsx +++ b/src/components/FeeComparison/index.tsx @@ -1,5 +1,5 @@ import Big from 'big.js'; -import { useMemo } from 'preact/hooks'; +import { useMemo, useState } from 'preact/hooks'; import { useEffect, useRef } from 'preact/compat'; import { useQuery } from '@tanstack/react-query'; import { ChevronDownIcon } from '@heroicons/react/20/solid'; @@ -10,7 +10,7 @@ import { Skeleton } from '../Skeleton'; import { QuoteProvider, quoteProviders } from './quoteProviders'; import { OfframpingParameters, useEventsContext } from '../../contexts/events'; -type FeeProviderRowProps = FeeComparisonProps & { provider: QuoteProvider }; +type FeeProviderRowProps = Omit & { provider: QuoteProvider }; function VortexRow({ targetAssetSymbol, @@ -112,7 +112,7 @@ function FeeProviderRow({ ); } -type FeeComparisonTableProps = FeeComparisonProps; +type FeeComparisonTableProps = Omit; function FeeComparisonTable({ amount, @@ -171,6 +171,7 @@ interface FeeComparisonProps { targetAssetSymbol: string; vortexPrice: Big; network: Networks; + enabled: boolean; } export function FeeComparison({ @@ -179,9 +180,28 @@ export function FeeComparison({ targetAssetSymbol, vortexPrice, network, + enabled, }: FeeComparisonProps) { + useEffect(() => { + if (enabled) { + const feeComparissonElement = document.getElementById('feeComparisson'); + if (feeComparissonElement) { + setTimeout(() => { + window.scrollTo({ top: feeComparissonElement.offsetTop, behavior: 'smooth' }); + }, 300); + } + } + }, [enabled]); + + if (!enabled) { + return null; + } + return ( -
+

Save on exchange rate markups

diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx index 962e9f39..afbd8c9d 100644 --- a/src/pages/swap/index.tsx +++ b/src/pages/swap/index.tsx @@ -426,10 +426,6 @@ export const SwapPage = () => { onClick={(e) => { e.preventDefault(); setShowCompareFees(!showCompareFees); - // Smooth scroll to bottom of page - setTimeout(() => { - window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); - }, 300); }} > Compare fees @@ -466,6 +462,7 @@ export const SwapPage = () => { targetAssetSymbol={toToken.fiat.symbol} vortexPrice={vortexPrice} network={selectedNetwork} + enabled={showCompareFees} /> )} From a7fc62f9d6ac5b6a68b30f5c5553f44b26246fac Mon Sep 17 00:00:00 2001 From: gianfra-t <96739519+gianfra-t@users.noreply.github.com> Date: Tue, 7 Jan 2025 15:34:41 -0300 Subject: [PATCH 2/4] Update src/components/FeeComparison/index.tsx Co-authored-by: Marcel Ebert --- src/components/FeeComparison/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FeeComparison/index.tsx b/src/components/FeeComparison/index.tsx index 2f85987d..961fd070 100644 --- a/src/components/FeeComparison/index.tsx +++ b/src/components/FeeComparison/index.tsx @@ -184,7 +184,7 @@ export function FeeComparison({ }: FeeComparisonProps) { useEffect(() => { if (enabled) { - const feeComparissonElement = document.getElementById('feeComparisson'); + const feeComparisonElement = document.getElementById('feeComparison'); if (feeComparissonElement) { setTimeout(() => { window.scrollTo({ top: feeComparissonElement.offsetTop, behavior: 'smooth' }); From bda89d8067c586e04f471936429a81bbb6b06ee2 Mon Sep 17 00:00:00 2001 From: Gianfranco Date: Wed, 8 Jan 2025 08:04:37 -0300 Subject: [PATCH 3/4] misspell fix --- src/components/FeeComparison/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/FeeComparison/index.tsx b/src/components/FeeComparison/index.tsx index 961fd070..ab16c816 100644 --- a/src/components/FeeComparison/index.tsx +++ b/src/components/FeeComparison/index.tsx @@ -185,9 +185,9 @@ export function FeeComparison({ useEffect(() => { if (enabled) { const feeComparisonElement = document.getElementById('feeComparison'); - if (feeComparissonElement) { + if (feeComparisonElement) { setTimeout(() => { - window.scrollTo({ top: feeComparissonElement.offsetTop, behavior: 'smooth' }); + window.scrollTo({ top: feeComparisonElement.offsetTop, behavior: 'smooth' }); }, 300); } } @@ -199,7 +199,7 @@ export function FeeComparison({ return (

From 84679267c0b904921a3c7fcbd0d64d45cfb5d238 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Wed, 8 Jan 2025 13:56:45 +0100 Subject: [PATCH 4/4] update FeeComparison component structure --- src/components/FeeComparison/index.tsx | 149 +++++++++++-------------- 1 file changed, 63 insertions(+), 86 deletions(-) diff --git a/src/components/FeeComparison/index.tsx b/src/components/FeeComparison/index.tsx index ab16c816..585e9e75 100644 --- a/src/components/FeeComparison/index.tsx +++ b/src/components/FeeComparison/index.tsx @@ -1,6 +1,5 @@ import Big from 'big.js'; -import { useMemo, useState } from 'preact/hooks'; -import { useEffect, useRef } from 'preact/compat'; +import { useEffect, useRef, useMemo } from 'preact/hooks'; import { useQuery } from '@tanstack/react-query'; import { ChevronDownIcon } from '@heroicons/react/20/solid'; @@ -10,12 +9,21 @@ import { Skeleton } from '../Skeleton'; import { QuoteProvider, quoteProviders } from './quoteProviders'; import { OfframpingParameters, useEventsContext } from '../../contexts/events'; -type FeeProviderRowProps = Omit & { provider: QuoteProvider }; +interface BaseComparisonProps { + amount: Big; + sourceAssetSymbol: string; + targetAssetSymbol: string; + vortexPrice: Big; + network: Networks; +} -function VortexRow({ - targetAssetSymbol, - vortexPrice, -}: Omit) { +interface FeeComparisonProps extends BaseComparisonProps { + enabled: boolean; +} + +type VortexRowProps = Pick; + +function VortexRow({ targetAssetSymbol, vortexPrice }: VortexRowProps) { return (
@@ -23,13 +31,17 @@ function VortexRow({
- {vortexPrice.toFixed(2) + ' ' + targetAssetSymbol} + {`${vortexPrice.toFixed(2)} ${targetAssetSymbol}`}
); } +interface FeeProviderRowProps extends BaseComparisonProps { + provider: QuoteProvider; +} + function FeeProviderRow({ provider, amount, @@ -39,6 +51,9 @@ function FeeProviderRow({ network, }: FeeProviderRowProps) { const { scheduleQuote } = useEventsContext(); + // The vortex price is sometimes lagging behind the amount (as it first has to be calculated asynchronously) + // We keep a reference to the previous vortex price to avoid spamming the server with the same quote. + const prevVortexPrice = useRef(); const { isLoading, @@ -49,31 +64,26 @@ function FeeProviderRow({ queryFn: () => provider.query(sourceAssetSymbol, targetAssetSymbol, amount, network), retry: false, // We don't want to retry the request to avoid spamming the server }); - // The vortex price is sometimes lagging behind the amount (as it first has to be calculated asynchronously) - // We keep a reference to the previous vortex price to avoid spamming the server with the same quote. - const prevVortexPrice = useRef(undefined); const priceDiff = useMemo(() => { - if (isLoading || error || !providerPrice) { - return undefined; - } - + if (isLoading || error || !providerPrice) return undefined; return providerPrice.minus(vortexPrice); }, [isLoading, error, providerPrice, vortexPrice]); useEffect(() => { - if (!isLoading && (providerPrice || error)) { - const parameters: OfframpingParameters = { - from_amount: amount.toFixed(2), - from_asset: sourceAssetSymbol, - to_amount: vortexPrice.toFixed(2), - to_asset: targetAssetSymbol, - }; - if (!prevVortexPrice.current || vortexPrice !== prevVortexPrice.current) { - scheduleQuote(provider.name, providerPrice ? providerPrice.toFixed(2, 0) : '-1', parameters); - prevVortexPrice.current = vortexPrice; - } - } + if (isLoading || (!providerPrice && !error)) return; + + const parameters: OfframpingParameters = { + from_amount: amount.toFixed(2), + from_asset: sourceAssetSymbol, + to_amount: vortexPrice.toFixed(2), + to_asset: targetAssetSymbol, + }; + + if (prevVortexPrice.current?.eq(vortexPrice)) return; + + scheduleQuote(provider.name, providerPrice ? providerPrice.toFixed(2, 0) : '-1', parameters); + prevVortexPrice.current = vortexPrice; }, [ amount, provider.name, @@ -97,12 +107,12 @@ function FeeProviderRow({ ) : (
- {error || !providerPrice ? 'N/A' : providerPrice.toFixed(2) + ' ' + targetAssetSymbol} + {error || !providerPrice ? 'N/A' : `${providerPrice.toFixed(2)} ${targetAssetSymbol}`} {priceDiff && ( - {priceDiff.toFixed(2)}{' '} - {targetAssetSymbol} + + {`${priceDiff.toFixed(2)} ${targetAssetSymbol}`} )}
@@ -112,15 +122,9 @@ function FeeProviderRow({ ); } -type FeeComparisonTableProps = Omit; +function FeeComparisonTable(props: BaseComparisonProps) { + const { amount, sourceAssetSymbol, network, targetAssetSymbol, vortexPrice } = props; -function FeeComparisonTable({ - amount, - sourceAssetSymbol, - targetAssetSymbol, - vortexPrice, - network, -}: FeeComparisonTableProps) { return (
@@ -146,60 +150,39 @@ function FeeComparisonTable({
- - {quoteProviders.map((provider, index) => ( - <> + + {quoteProviders.map((provider) => ( +
- - + +
))}
); } -interface FeeComparisonProps { - amount: Big; - sourceAssetSymbol: string; - targetAssetSymbol: string; - vortexPrice: Big; - network: Networks; - enabled: boolean; -} +export function FeeComparison({ enabled, ...props }: FeeComparisonProps) { + const feeComparisonRef = useRef(null); -export function FeeComparison({ - amount, - sourceAssetSymbol, - targetAssetSymbol, - vortexPrice, - network, - enabled, -}: FeeComparisonProps) { useEffect(() => { - if (enabled) { - const feeComparisonElement = document.getElementById('feeComparison'); - if (feeComparisonElement) { - setTimeout(() => { - window.scrollTo({ top: feeComparisonElement.offsetTop, behavior: 'smooth' }); - }, 300); - } - } + if (!enabled) return; + if (!feeComparisonRef.current) return; + + const timer = setTimeout(() => { + window.scrollTo({ + top: feeComparisonRef.current!.offsetTop, + behavior: 'smooth', + }); + }, 300); + + return () => clearTimeout(timer); }, [enabled]); - if (!enabled) { - return null; - } + if (!enabled) return null; return (
@@ -210,13 +193,7 @@ export function FeeComparison({

At Vortex, we’ll never do that and show our fees upfront.

- +
); }