[fix/LIVE-11122]: update quotes when timeout reaches 0 in swap.

.changeset/brown-experts-fly.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/live-common": minor
+"ledger-live-desktop": patch
+---
+
+Return countdown and refresh rates from the useProviderRates hook

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

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

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

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

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

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

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

@@ -1,49 +1,30 @@
-import React, { useEffect, useState } from "react";
+import React 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 { RatesReducerState } from "@ledgerhq/live-common/exchange/swap/types";
+import { DEFAULT_SWAP_RATES_INTERVAL_MS } from "@ledgerhq/live-common/exchange/swap/const/timeout";
 
 export type Props = {
- rates: RatesReducerState["value"];
- refreshTime: number;
+ countdown: number;
 };
 
 const CountdownText = styled(Text)`
  color: ${p => p.theme.colors.neutral.c70};
 `;
 
-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]);
-
+export default function Countdown({ countdown }: Props) {
  return (
  <>
  {countdown >= 0 ? (
  <Box horizontal fontSize={3}>
  <CountdownText>
  <Trans i18nKey="swap2.form.rates.update" />
  </CountdownText>
- <Box horizontal fontSize={3} mx={1} key={iconKey}>
- <AnimatedCountdown size={15} duration={refreshTime} />
+ <Box horizontal fontSize={3} mx={1} key={1}>
+ <AnimatedCountdown size={15} duration={DEFAULT_SWAP_RATES_INTERVAL_MS} />
  </Box>
  <Box
  color="neutral.c100"

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

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

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

@@ -26,7 +26,6 @@ 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";
@@ -128,11 +127,6 @@ 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;
@@ -477,8 +471,6 @@ const SwapForm = () => {
  pageState={pageState}
  swapTransaction={swapTransaction}
  provider={provider}
- refreshTime={refreshTime}
- countdown={!pauseRefreshing}
  // Demo 0 props
  disabled={!isSwapReady}
  onClick={onSubmit}

libs/ledger-live-common/package.json

@@ -244,6 +244,7 @@
  "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 } = useProviderRates({
+ const { rates, refetchRates, updateSelectedRate, countdown } = useProviderRates({
  fromState,
  toState,
  onNoRates,
@@ -176,6 +176,7 @@ export const useSwapTransaction = ({
  value: rates.value.filter(v => v.tradeMethod !== "fixed"),
  }
  : rates,
+ countdown,
  refetchRates,
  updateSelectedRate,
  targetAccounts,