From 4ced747e8dffdf577e349766162af1fd3e51ef1d Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Mon, 29 Jan 2024 14:56:48 -0800
Subject: [PATCH] Address feedback

---
 src/components/TimeoutButton.tsx              |  6 +++---
 .../AccountManagementForms/DepositForm.tsx    |  2 +-
 .../SourceSelectMenu.tsx                      | 17 ++++++++--------
 .../AccountManagementForms/WithdrawForm.tsx   |  2 +-
 src/views/forms/NobleDeposit.tsx              | 20 ++++++++++++-------
 5 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/TimeoutButton.tsx b/src/components/TimeoutButton.tsx
index d18b568..4e0c4e6 100644
--- a/src/components/TimeoutButton.tsx
+++ b/src/components/TimeoutButton.tsx
@@ -8,7 +8,7 @@ import { Button, type ButtonStateConfig, type ButtonProps } from '@/components/B
 
 type ElementProps = {
   timeoutInSeconds: number;
-  finalSlot?: ReactNode;
+  slotFinal?: ReactNode;
 } & ButtonProps;
 
 export type TimeoutButtonProps = ElementProps;
@@ -16,7 +16,7 @@ export type TimeoutButtonProps = ElementProps;
 export const TimeoutButton = ({
   children,
   timeoutInSeconds,
-  finalSlot,
+  slotFinal,
   ...otherProps
 }: TimeoutButtonProps) => {
   const [timeoutDeadline] = useState(Date.now() + timeoutInSeconds * 1000);
@@ -25,7 +25,7 @@ export const TimeoutButton = ({
 
   const secondsLeft = Math.max(0, (timeoutDeadline - now) / 1000);
 
-  if (finalSlot && secondsLeft <= 0) return finalSlot;
+  if (slotFinal && secondsLeft <= 0) return slotFinal;
 
   return (
     <Button
diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx
index 898dbde..26bf651 100644
--- a/src/views/forms/AccountManagementForms/DepositForm.tsx
+++ b/src/views/forms/AccountManagementForms/DepositForm.tsx
@@ -380,7 +380,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
       <SourceSelectMenu
         selectedChain={chainIdStr || undefined}
         selectedExchange={exchange || undefined}
-        onSelectChain={onSelectChain}
+        onSelect={onSelectChain}
       />
       {exchange && nobleAddress ? (
         <NobleDeposit />
diff --git a/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx b/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx
index a2f656a..bb4b91b 100644
--- a/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx
+++ b/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx
@@ -3,8 +3,6 @@ import { shallowEqual, useSelector } from 'react-redux';
 
 import { TransferType } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
-import { isTruthy } from '@/lib/isTruthy';
-import { testFlags } from '@/lib/testFlags';
 
 import { useStringGetter } from '@/hooks';
 
@@ -15,18 +13,21 @@ import { popoverMixins } from '@/styles/popoverMixins';
 
 import { getTransferInputs } from '@/state/inputsSelectors';
 
+import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
+
 type ElementProps = {
   label?: string;
   selectedExchange?: string;
   selectedChain?: string;
-  onSelectChain: (name: string, type: 'chain' | 'exchange') => void;
+  onSelect: (name: string, type: 'chain' | 'exchange') => void;
 };
 
 export const SourceSelectMenu = ({
   label,
   selectedExchange,
   selectedChain,
-  onSelectChain,
+  onSelect,
 }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { type, depositOptions, withdrawalOptions, resources } =
@@ -42,7 +43,7 @@ export const SourceSelectMenu = ({
     value: chain.type,
     label: chain.stringKey,
     onSelect: () => {
-      onSelectChain(chain.type, 'chain');
+      onSelect(chain.type, 'chain');
     },
     slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
   }));
@@ -51,7 +52,7 @@ export const SourceSelectMenu = ({
     value: exchange.type,
     label: exchange.string,
     onSelect: () => {
-      onSelectChain(exchange.type, 'exchange');
+      onSelect(exchange.type, 'exchange');
     },
     slotBefore: <Styled.Img src={exchange.iconUrl} alt="" />,
   }));
@@ -78,12 +79,12 @@ export const SourceSelectMenu = ({
       <Styled.ChainRow>
         {selectedChainOption ? (
           <>
-            <Styled.Img src={selectedChainOption.iconUrl} alt="" /> {selectedChainOption.stringKey}
+            <Styled.Img src={selectedChainOption.iconUrl} alt="" /> {selectedChainOption.string}
           </>
         ) : selectedExchangeOption ? (
           <>
             <Styled.Img src={selectedExchangeOption.iconUrl} alt="" />{' '}
-            {selectedExchangeOption.stringKey}
+            {selectedExchangeOption.string}
           </>
         ) : (
           stringGetter({ key: STRING_KEYS.SELECT_CHAIN })
diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx
index f0971fb..8a9d413 100644
--- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx
+++ b/src/views/forms/AccountManagementForms/WithdrawForm.tsx
@@ -377,7 +377,7 @@ export const WithdrawForm = () => {
         <SourceSelectMenu
           label={stringGetter({ key: STRING_KEYS.NETWORK })}
           selectedChain={chainIdStr || undefined}
-          onSelectChain={onSelectChain}
+          onSelect={onSelectChain}
         />
       </Styled.DestinationRow>
       <TokenSelectMenu selectedToken={toToken || undefined} onSelectToken={onSelectToken} />
diff --git a/src/views/forms/NobleDeposit.tsx b/src/views/forms/NobleDeposit.tsx
index 6ed9418..a965c3c 100644
--- a/src/views/forms/NobleDeposit.tsx
+++ b/src/views/forms/NobleDeposit.tsx
@@ -1,18 +1,21 @@
 import { useState } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
+import { OpacityToken } from '@/constants/styles/base';
 import { STRING_KEYS } from '@/constants/localization';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { QrCode } from '@/components/QrCode';
+import { useAccounts, useStringGetter } from '@/hooks';
+
 import { CopyButton } from '@/components/CopyButton';
-import { TimeoutButton } from '@/components/TimeoutButton';
+import { QrCode } from '@/components/QrCode';
 import { Checkbox } from '@/components/Checkbox';
+import { Icon, IconName } from '@/components/Icon';
+import { TimeoutButton } from '@/components/TimeoutButton';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { WithReceipt } from '@/components/WithReceipt';
-import { Icon, IconName } from '@/components/Icon';
 
-import { useAccounts, useStringGetter } from '@/hooks';
+import { generateFadedColorVariant } from '@/lib/styles';
 
 export const NobleDeposit = () => {
   const [hasAcknowledged, setHasAcknowledged] = useState(false);
@@ -60,7 +63,7 @@ export const NobleDeposit = () => {
       >
         <TimeoutButton
           timeoutInSeconds={8}
-          finalSlot={<CopyButton state={{ isDisabled: !hasAcknowledged }} value={nobleAddress} />}
+          slotFinal={<CopyButton state={{ isDisabled: !hasAcknowledged }} value={nobleAddress} />}
         />
       </Styled.WithReceipt>
     </>
@@ -83,7 +86,10 @@ Styled.QrCodeContainer = styled.div`
   display: flex;
   justify-content: center;
 
+  padding: 0.5rem;
+
   background-color: var(--color-layer-2);
+  border-radius: 0.5rem;
 `;
 
 Styled.QrCode = styled(QrCode)`
@@ -119,7 +125,7 @@ Styled.CautionIconContainer = styled.div`
     content: '';
     width: 2.5rem;
     height: 2.5rem;
-    background-color: var(--color-warning);
-    opacity: 0.1;
+    background-color: ${({ theme }) =>
+      generateFadedColorVariant(theme.warning, OpacityToken.Opacity16)};
   }
 `;