Revert "[fix/LIVE-11122]: update quotes when timeout reaches 0 in swa…

…p. (#6118)"

This reverts commit 63099cc.

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/FormRates/SectionRate.tsx

@@ -11,15 +11,17 @@ export type SectionRateProps = {
  ratesState: RatesReducerState;
  fromCurrency: SwapSelectorStateType["currency"];
  toCurrency: SwapSelectorStateType["currency"];
- countdownSecondsToRefresh: number | undefined;
+ refreshTime: number;
+ countdown: boolean;
 };
 
 const SectionRate = ({
  provider,
  fromCurrency,
  toCurrency,
  ratesState,
- countdownSecondsToRefresh,
+ refreshTime,
+ countdown,
 }: SectionRateProps) => {
  const rates = ratesState.value;
 
@@ -31,7 +33,8 @@ const SectionRate = ({
  toCurrency,
  rates,
  provider,
- countdownSecondsToRefresh,
+ refreshTime,
+ countdown,
  }}
  />
  </ProvidersSection>

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/FormRates/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import SectionRate from "./SectionRate";
 import { SwapDataType } from "@ledgerhq/live-common/exchange/swap/types";
@@ -10,26 +10,28 @@ const Form = styled.section`
 `;
 type SwapFormProvidersProps = {
  swap: SwapDataType;
- countdownSecondsToRefresh: number | undefined;
  provider?: string;
+ refreshTime: number;
+ countdown: boolean;
 };
 
-const SwapFormProviders = ({
- swap,
- provider,
- countdownSecondsToRefresh,
-}: SwapFormProvidersProps) => {
+const SwapFormProviders = ({ swap, provider, refreshTime, countdown }: SwapFormProvidersProps) => {
  const { currency: fromCurrency } = swap.from;
  const { currency: toCurrency } = swap.to;
 
+ const updatedRatesState = useMemo(() => {
+ return swap.rates;
+ }, [swap.rates]);
+
  return (
  <Form>
  <SectionRate
  provider={provider}
  fromCurrency={fromCurrency}
  toCurrency={toCurrency}
- ratesState={swap.rates}
- countdownSecondsToRefresh={countdownSecondsToRefresh}
+ ratesState={updatedRatesState}
+ refreshTime={refreshTime}
+ countdown={countdown}
  />
  </Form>
  );

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Migrations/SwapMigrationUI.tsx

@@ -22,6 +22,8 @@ type SwapMigrationUIProps = {
  pageState: ReturnType<typeof usePageState>;
  swapTransaction: SwapTransactionType;
  provider?: string;
+ refreshTime: number;
+ countdown: boolean;
  // Demo 0 props
  disabled: boolean;
  onClick: () => void;
@@ -35,6 +37,8 @@ export const SwapMigrationUI = (props: SwapMigrationUIProps) => {
  pageState,
  swapTransaction,
  provider,
+ refreshTime,
+ countdown,
  disabled,
  onClick,
  } = props;
@@ -45,7 +49,8 @@ export const SwapMigrationUI = (props: SwapMigrationUIProps) => {
  <SwapFormRates
  swap={swapTransaction.swap}
  provider={provider}
- countdownSecondsToRefresh={swapTransaction.swap.countdown}
+ refreshTime={refreshTime}
+ countdown={countdown}
  />
  ) : null;
 

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Rates/Countdown.tsx

@@ -1,30 +1,49 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import styled from "styled-components";
 import Box from "~/renderer/components/Box";
 import Text from "~/renderer/components/Text";
 import AnimatedCountdown from "~/renderer/components/AnimatedCountdown";
 import { formatCountdown } from "~/renderer/screens/exchange/Swap2/Form/Rates/utils/formatCountdown";
-import { DEFAULT_SWAP_RATES_INTERVAL_MS } from "@ledgerhq/live-common/exchange/swap/const/timeout";
+import { RatesReducerState } from "@ledgerhq/live-common/exchange/swap/types";
 
 export type Props = {
- countdown: number;
+ rates: RatesReducerState["value"];
+ refreshTime: number;
 };
 
 const CountdownText = styled(Text)`
  color: ${p => p.theme.colors.neutral.c70};
 `;
 
-export default function Countdown({ countdown }: Props) {
+export default function Countdown({ refreshTime, rates }: Props) {
+ const getSeconds = (time: number) => Math.round(time / 1000);
+ const [countdown, setCountdown] = useState(getSeconds(refreshTime));
+ const [iconKey, setIconKey] = useState(0);
+
+ useEffect(() => {
+ setIconKey(key => key + 1);
+ const startTime = new Date().getTime();
+ setCountdown(getSeconds(refreshTime));
+ const countdownInterval = window.setInterval(() => {
+ const now = new Date().getTime();
+ const newCountdown = refreshTime + startTime - now;
+ setCountdown(getSeconds(newCountdown));
+ }, 1000);
+ return () => {
+ clearInterval(countdownInterval);
+ };
+ }, [rates, refreshTime]);
+
  return (
  <>
  {countdown >= 0 ? (
  <Box horizontal fontSize={3}>
  <CountdownText>
  <Trans i18nKey="swap2.form.rates.update" />
  </CountdownText>
- <Box horizontal fontSize={3} mx={1} key={1}>
- <AnimatedCountdown size={15} duration={DEFAULT_SWAP_RATES_INTERVAL_MS} />
+ <Box horizontal fontSize={3} mx={1} key={iconKey}>
+ <AnimatedCountdown size={15} duration={refreshTime} />
  </Box>
  <Box
  color="neutral.c100"

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Rates/index.tsx

@@ -29,7 +29,8 @@ type Props = {
  toCurrency: SwapSelectorStateType["currency"];
  rates: RatesReducerState["value"];
  provider: string | undefined | null;
- countdownSecondsToRefresh: number | undefined;
+ refreshTime: number;
+ countdown: boolean;
 };
 
 const TableHeader = styled(Box).attrs({
@@ -53,20 +54,20 @@ export default function ProviderRate({
  toCurrency,
  rates,
  provider,
- countdownSecondsToRefresh,
+ refreshTime,
+ countdown,
 }: Props) {
  const swapDefaultTrack = useGetSwapTrackingProperties();
  const dispatch = useDispatch();
  const [filter, setFilter] = useState<string[]>([]);
  const [defaultPartner, setDefaultPartner] = useState<string | null>(null);
  const selectedRate = useSelector(rateSelector);
  const filteredRates = useMemo(() => filterRates(rates, filter), [rates, filter]);
- const providers = useMemo(() => [...new Set(rates?.map(rate => rate.provider) ?? [])], [rates]);
- const exchangeRates = useMemo(() => {
- return toCurrency && rates
+ const providers = [...new Set(rates?.map(rate => rate.provider) ?? [])];
+ const exchangeRates =
+ toCurrency && rates
  ? rates.map(({ toAmount }) => formatCurrencyUnit(getFeesUnit(toCurrency), toAmount))
  : [];
- }, [toCurrency, rates]);
  const updateRate = useCallback(
  (rate: ExchangeRate) => {
  const value = rate.rate ?? rate.provider;
@@ -146,9 +147,9 @@ export default function ProviderRate({
  >
  <Trans i18nKey="swap2.form.rates.title" />
  </Text>
- {countdownSecondsToRefresh && (
+ {countdown && (
  <Box horizontal fontSize={3}>
- <Countdown countdown={countdownSecondsToRefresh} />
+ <Countdown refreshTime={refreshTime} rates={rates} />
  </Box>
  )}
  </Box>

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx

@@ -26,6 +26,7 @@ import ExchangeDrawer from "./ExchangeDrawer/index";
 import SwapFormSelectors from "./FormSelectors";
 import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
 import { accountToWalletAPIAccount } from "@ledgerhq/live-common/wallet-api/converters";
+import useRefreshRates from "./hooks/useRefreshRates";
 import LoadingState from "./Rates/LoadingState";
 import EmptyState from "./Rates/EmptyState";
 import { AccountLike } from "@ledgerhq/types-live";
@@ -123,6 +124,11 @@ const SwapForm = () => {
  );
  const { setDrawer } = React.useContext(context);
 
+ const pauseRefreshing = !!swapError || idleState;
+ const refreshTime = useRefreshRates(swapTransaction.swap, {
+ pause: pauseRefreshing,
+ });
+
  const getExchangeSDKParams = useCallback(() => {
  const { swap, transaction } = swapTransaction;
  const { to, from } = swap;
@@ -462,6 +468,8 @@ const SwapForm = () => {
  pageState={pageState}
  swapTransaction={swapTransaction}
  provider={provider}
+ refreshTime={refreshTime}
+ countdown={!pauseRefreshing}
  // Demo 0 props
  disabled={!isSwapReady}
  onClick={onSubmit}

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/utils/getRefreshTime.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, jest } from "@jest/globals";
+import { ExchangeRate } from "@ledgerhq/live-common/exchange/swap/types";
+import { getRefreshTime } from "~/renderer/screens/exchange/Swap2/utils/getRefreshTime";
+const mockDate = new Date("2020-01-01");
+jest.useFakeTimers().setSystemTime(mockDate);
+describe("getRefreshTime", () => {
+ it("returns default refresh time when no rates provided", () => {
+ expect(getRefreshTime(undefined)).toEqual(20000);
+ });
+
+ it("returns the default refresh time when no rates have an expirationTime", () => {
+ expect(
+ getRefreshTime([
+ {
+ rateId: "1",
+ } as ExchangeRate,
+ ]),
+ ).toEqual(20000);
+ });
+
+ it("returns the a refresh time that is the earliest expirationTime in the list of rates if it's under 60s", () => {
+ const mockTimeSinceEpoch = mockDate.getTime();
+ expect(
+ getRefreshTime([
+ {
+ rateId: "1",
+ expirationTime: mockTimeSinceEpoch + 19000,
+ },
+ {
+ rateId: "2",
+ expirationTime: mockTimeSinceEpoch + 18000,
+ },
+ {
+ rateId: "3",
+ },
+ ] as ExchangeRate[]),
+ ).toEqual(18000);
+ });
+
+ it("returns 60s when the earliest expirationTime in the list of rates is over 60s", () => {
+ const mockTimeSinceEpoch = mockDate.getTime();
+ expect(
+ getRefreshTime([
+ {
+ rateId: "1",
+ expirationTime: mockTimeSinceEpoch + 21000,
+ },
+ {
+ rateId: "2",
+ expirationTime: mockTimeSinceEpoch + 22000,
+ },
+ {
+ rateId: "3",
+ },
+ ] as ExchangeRate[]),
+ ).toEqual(20000);
+ });
+});

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/utils/getRefreshTime.ts

@@ -0,0 +1,19 @@
+import { DEFAULT_SWAP_RATES_INTERVAL_MS } from "@ledgerhq/live-common/exchange/swap/const/timeout";
+import { ExchangeRate } from "@ledgerhq/live-common/exchange/swap/types";
+
+const getMinimumExpirationTime = (rates: ExchangeRate[]): number => {
+ return rates.reduce((acc, rate) => {
+ if (!rate.expirationTime) return acc;
+ return acc ? Math.min(acc, rate.expirationTime) : rate.expirationTime;
+ }, 0);
+};
+
+export const getRefreshTime = (rates: ExchangeRate[] | undefined) => {
+ const minimumExpirationTime = rates ? getMinimumExpirationTime(rates) : null;
+ if (minimumExpirationTime) {
+ const timeMs = minimumExpirationTime - Date.now();
+ return Math.min(timeMs, DEFAULT_SWAP_RATES_INTERVAL_MS);
+ } else {
+ return DEFAULT_SWAP_RATES_INTERVAL_MS;
+ }
+};

libs/ledger-live-common/package.json

@@ -244,7 +244,6 @@
  "thor-devkit": "^2.0.6",
  "triple-beam": "^1.3.0",
  "tronweb": "^5.2.0",
- "usehooks-ts": "^2.13.0",
  "utility-types": "^3.10.0",
  "varuint-bitcoin": "1.1.2",
  "winston": "^3.4.0",

libs/ledger-live-common/src/exchange/swap/hooks/useSwapTransaction.ts

@@ -154,7 +154,7 @@ export const useSwapTransaction = ({
  bridge: bridgeTransaction,
  });
 
- const { rates, refetchRates, updateSelectedRate, countdown } = useProviderRates({
+ const { rates, refetchRates, updateSelectedRate } = useProviderRates({
  fromState,
  toState,
  onNoRates,
@@ -176,7 +176,6 @@ export const useSwapTransaction = ({
  value: rates.value.filter(v => v.tradeMethod !== "fixed"),
  }
  : rates,
- countdown,
  refetchRates,
  updateSelectedRate,
  targetAccounts,