Move change rate drawer to provider section

Author: chabroA

src/renderer/screens/exchange/Swap2/Form/FormSummary/SectionProvider.js

@@ -1,18 +1,20 @@
 // @flow
-import React from "react";
-import SummaryLabel from "./SummaryLabel";
-import SummaryValue, { NoValuePlaceholder } from "./SummaryValue";
-import SummarySection from "./SummarySection";
-import styled from "styled-components";
+import type { KYCStatus } from "@ledgerhq/live-common/lib/exchange/swap/utils";
+import { getProviderName } from "@ledgerhq/live-common/lib/exchange/swap/utils";
+import React, { useContext, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import Text from "~/renderer/components/Text";
-import { rgba } from "~/renderer/styles/helpers";
+import { context } from "~/renderer/drawers/Provider";
 import CheckCircleIcon from "~/renderer/icons/CheckCircle";
 import ClockIcon from "~/renderer/icons/Clock";
 import ExclamationCircleIcon from "~/renderer/icons/ExclamationCircle";
-import { getProviderName } from "@ledgerhq/live-common/lib/exchange/swap/utils";
-import type { KYCStatus } from "@ledgerhq/live-common/lib/exchange/swap/utils";
+import { rgba } from "~/renderer/styles/helpers";
 import { iconByProviderName } from "../../utils";
+import RatesDrawer from "../RatesDrawer";
+import SummaryLabel from "./SummaryLabel";
+import SummarySection from "./SummarySection";
+import SummaryValue, { NoValuePlaceholder } from "./SummaryValue";
 
 const StatusTag = styled.div`
   display: flex;
@@ -27,6 +29,9 @@ const StatusTag = styled.div`
 export type SectionProviderProps = {
   provider?: string,
   status?: KYCStatus,
+  ratesState: RatesReducerState,
+  fromCurrency: $PropertyType<SwapSelectorStateType, "currency">,
+  toCurrency: $PropertyType<SwapSelectorStateType, "currency">,
 };
 type ProviderStatusTagProps = {
   status: $NonMaybeType<$PropertyType<SectionProviderProps, "status">>,
@@ -53,19 +58,41 @@ const ProviderStatusTag = ({ status }: ProviderStatusTagProps) => {
   );
 };
 
-const SectionProvider = ({ provider, status }: SectionProviderProps) => {
+const SectionProvider = ({
+  provider,
+  status,
+  fromCurrency,
+  toCurrency,
+  ratesState,
+}: SectionProviderProps) => {
   const { t } = useTranslation();
   const ProviderIcon = provider && iconByProviderName[provider.toLowerCase()];
 
+  const { setDrawer } = useContext(context);
+  const rates = ratesState.value;
+  const handleChange = useMemo(
+    () =>
+      rates &&
+      rates.length > 1 &&
+      (() =>
+        setDrawer(RatesDrawer, {
+          fromCurrency,
+          toCurrency,
+          rates,
+          provider,
+        })),
+    [setDrawer, rates, fromCurrency, toCurrency, provider],
+  );
+
   return (
     <SummarySection>
       <SummaryLabel label={t("swap2.form.details.label.provider")} />
       {(provider && (
         <div style={{ display: "flex", columnGap: "6px", alignItems: "center" }}>
-          <SummaryValue value={getProviderName(provider)}>
+          <SummaryValue value={getProviderName(provider)} handleChange={handleChange}>
+            {status ? <ProviderStatusTag status={status} /> : null}
             {ProviderIcon && <ProviderIcon size={19} />}
           </SummaryValue>
-          {status ? <ProviderStatusTag status={status} /> : null}
         </div>
       )) || (
         <SummaryValue>

src/renderer/screens/exchange/Swap2/Form/FormSummary/SectionRate.js

@@ -1,25 +1,23 @@
 // @flow
-import React, { useContext, useMemo } from "react";
-import { useSelector } from "react-redux";
-import SummaryLabel from "./SummaryLabel";
-import SummaryValue, { NoValuePlaceholder } from "./SummaryValue";
-import { useTranslation } from "react-i18next";
-import IconLock from "~/renderer/icons/Lock";
-import IconLockOpen from "~/renderer/icons/LockOpen";
-import SummarySection from "./SummarySection";
-import { context } from "~/renderer/drawers/Provider";
-import RatesDrawer from "../RatesDrawer";
 import type {
-  SwapSelectorStateType,
   RatesReducerState,
   SwapDataType,
+  SwapSelectorStateType,
 } from "@ledgerhq/live-common/lib/exchange/swap/hooks";
-import Price from "~/renderer/components/Price";
-import { rateSelector, rateExpirationSelector } from "~/renderer/actions/swap";
-import CountdownTimer from "~/renderer/components/CountdownTimer";
-import Box from "~/renderer/components/Box";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { rateExpirationSelector, rateSelector } from "~/renderer/actions/swap";
 import AnimatedCountdown from "~/renderer/components/AnimatedCountdown";
+import Box from "~/renderer/components/Box";
+import CountdownTimer from "~/renderer/components/CountdownTimer";
+import Price from "~/renderer/components/Price";
+import IconLock from "~/renderer/icons/Lock";
+import IconLockOpen from "~/renderer/icons/LockOpen";
 import { ratesExpirationThreshold } from "~/renderer/reducers/swap";
+import SummaryLabel from "./SummaryLabel";
+import SummarySection from "./SummarySection";
+import SummaryValue, { NoValuePlaceholder } from "./SummaryValue";
 
 type Props = {
   ratesState: RatesReducerState,
@@ -30,29 +28,14 @@ type Props = {
 };
 const SectionRate = ({ fromCurrency, toCurrency, ratesState, refetchRates, provider }: Props) => {
   const { t } = useTranslation();
-  const { setDrawer } = useContext(context);
   const exchangeRate = useSelector(rateSelector);
   const ratesExpiration = useSelector(rateExpirationSelector);
-  const rates = ratesState.value;
-  const handleChange = useMemo(
-    () =>
-      rates &&
-      rates.length > 1 &&
-      (() =>
-        setDrawer(RatesDrawer, {
-          fromCurrency,
-          toCurrency,
-          rates,
-          provider,
-        })),
-    [setDrawer, rates, fromCurrency, toCurrency, provider],
-  );
 
   const summaryValue =
     ratesState.status === "loading" ? (
       <NoValuePlaceholder />
     ) : exchangeRate && fromCurrency && toCurrency ? (
-      <SummaryValue handleChange={handleChange}>
+      <SummaryValue>
         {ratesExpiration && exchangeRate.tradeMethod === "fixed" && ratesExpiration > Date.now() && (
           <Box horizontal alignItems="center" mr={2}>
             <Box mr={1}>

src/renderer/screens/exchange/Swap2/Form/FormSummary/index.js

@@ -1,13 +1,13 @@
 // @flow
+import type { SwapTransactionType } from "@ledgerhq/live-common/lib/exchange/swap/hooks";
 import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
+import SectionFees from "./SectionFees";
+import type { SectionProviderProps } from "./SectionProvider";
 import SectionProvider from "./SectionProvider";
 import SectionRate from "./SectionRate";
-import SectionFees from "./SectionFees";
 import SectionTarget from "./SectionTarget";
-import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
-import styled from "styled-components";
-import type { SwapTransactionType } from "@ledgerhq/live-common/lib/exchange/swap/hooks";
-import type { SectionProviderProps } from "./SectionProvider";
 
 const Form: ThemedComponent<{}> = styled.section.attrs(({ ready }) => ({
   style: ready ? { opacity: 1, maxHeight: "100vh", overflow: "auto" } : {},
@@ -54,7 +54,13 @@ const SwapFormSummary = ({ swapTransaction, kycStatus, provider }: SwapFormSumma
 
   return (
     <Form ready={hasFetchedRates}>
-      <SectionProvider provider={provider} status={kycStatus} />
+      <SectionProvider
+        provider={provider}
+        status={kycStatus}
+        fromCurrency={fromCurrency}
+        toCurrency={toCurrency}
+        ratesState={ratesState}
+      />
       <SectionRate
         fromCurrency={fromCurrency}
         toCurrency={toCurrency}