From 1e7568ab962a8451d37fe2fc47783dba87bb0f7d Mon Sep 17 00:00:00 2001
From: Bill He <bill@dydx.exchange>
Date: Wed, 4 Oct 2023 17:12:58 -0400
Subject: [PATCH] Polishes for Onboarding

---
 src/views/TransferStatusSteps.tsx             |  2 +-
 .../dialogs/OnboardingDialog/GenerateKeys.tsx |  4 +-
 .../DepositForm/DepositButtonAndReceipt.tsx   | 13 ++++
 .../AccountManagementForms/WithdrawForm.tsx   | 20 ++++-
 .../WithdrawForm/WithdrawButtonAndReceipt.tsx | 78 +++++++++++--------
 5 files changed, 77 insertions(+), 40 deletions(-)

diff --git a/src/views/TransferStatusSteps.tsx b/src/views/TransferStatusSteps.tsx
index cf3d551..409badf 100644
--- a/src/views/TransferStatusSteps.tsx
+++ b/src/views/TransferStatusSteps.tsx
@@ -51,7 +51,7 @@ export const TransferStatusSteps = ({ status }: ElementProps) => {
         label: stringGetter({
           key: type === 'deposit' ? STRING_KEYS.DEPOSIT_TO_CHAIN : STRING_KEYS.WITHDRAW_TO_CHAIN,
           params: {
-            CHAIN: status?.toChain?.chainData?.chainName,
+            CHAIN: type === 'deposit' ? 'dYdX' : status?.toChain?.chainData?.chainName,
           },
         }),
         step: TransferStatusStep.ToChain,
diff --git a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
index 6669a4a..a8bd695 100644
--- a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
+++ b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
@@ -165,8 +165,8 @@ export const GenerateKeys = ({
         {[
           {
             status: EvmDerivedAccountStatus.Deriving,
-            title: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
-            description: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
+            title: stringGetter({ key: STRING_KEYS.GENERATE_DYDX_WALLET }),
+            description: stringGetter({ key: STRING_KEYS.VERIFY_WALLET_OWNERSHIP }),
           },
           status === EvmDerivedAccountStatus.EnsuringDeterminism && {
             status: EvmDerivedAccountStatus.EnsuringDeterminism,
diff --git a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
index f63e649..07d0cb1 100644
--- a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
+++ b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
@@ -168,6 +168,19 @@ export const DepositButtonAndReceipt = ({
         />
       ),
     },
+    {
+      key: 'estimatedRouteDuration',
+      label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
+      value: typeof summary?.estimatedRouteDuration === 'number' && (
+        <Output
+          type={OutputType.Text}
+          value={stringGetter({
+            key: STRING_KEYS.X_MINUTES_LOWERCASED,
+            params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
+          })}
+        />
+      ),
+    },
   ];
 
   const isFormValid = !isDisabled && !isEditingSlippage;
diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx
index 02ce647..898c0a1 100644
--- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx
+++ b/src/views/forms/AccountManagementForms/WithdrawForm.tsx
@@ -26,6 +26,7 @@ import { Link } from '@/components/Link';
 import { OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
+import { Icon, IconName } from '@/components/Icon';
 
 import { ChainSelectMenu } from '@/views/forms/AccountManagementForms/ChainSelectMenu';
 
@@ -37,6 +38,7 @@ import { MustBigNumber } from '@/lib/numbers';
 
 import { TokenSelectMenu } from './TokenSelectMenu';
 import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt';
+import { isAddress } from 'viem';
 
 export const WithdrawForm = () => {
   const stringGetter = useStringGetter();
@@ -59,6 +61,8 @@ export const WithdrawForm = () => {
     resources,
   } = useSelector(getTransferInputs, shallowEqual) || {};
 
+  const isValidAddress = toAddress && isAddress(toAddress);
+
   const toToken = useMemo(
     () => (token ? resources?.tokenResources?.get(token) : undefined),
     [token, resources]
@@ -179,7 +183,6 @@ export const WithdrawForm = () => {
 
   const onSelectChain = useCallback((chain: string) => {
     if (chain) {
-      abacusStateManager.clearTransferInputValues();
       abacusStateManager.setTransferValue({
         field: TransferInputField.chain,
         value: chain,
@@ -190,7 +193,6 @@ export const WithdrawForm = () => {
 
   const onSelectToken = useCallback((token: TransferInputTokenResource) => {
     if (token) {
-      abacusStateManager.clearTransferInputValues();
       abacusStateManager.setTransferValue({
         field: TransferInputField.token,
         value: token.address,
@@ -265,7 +267,12 @@ export const WithdrawForm = () => {
           placeholder={stringGetter({ key: STRING_KEYS.ADDRESS })}
           onChange={onChangeAddress}
           value={toAddress || ''}
-          label={stringGetter({ key: STRING_KEYS.DESTINATION })}
+          label={
+            <span>
+              {stringGetter({ key: STRING_KEYS.DESTINATION })}{' '}
+              {isValidAddress ? <Styled.CheckIcon iconName={IconName.Check} /> : null}
+            </span>
+          }
         />
         <ChainSelectMenu
           label={stringGetter({ key: STRING_KEYS.NETWORK })}
@@ -342,3 +349,10 @@ Styled.TransactionInfo = styled.span`
 Styled.FormInputButton = styled(Button)`
   ${formMixins.inputInnerButton}
 `;
+
+Styled.CheckIcon = styled(Icon)`
+  margin: 0 1ch;
+
+  color: var(--color-positive);
+  font-size: 0.625rem;
+`;
diff --git a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx
index 274bbef..ab92414 100644
--- a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx
+++ b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx
@@ -1,14 +1,19 @@
 import { useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
+import { formatUnits } from 'viem';
 
 import { TransferInputTokenResource } from '@/constants/abacus';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign } from '@/constants/numbers';
+
+import { formatSeconds } from '@/lib/timeUtils';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
 import { useStringGetter } from '@/hooks';
 import { useAccountBalance } from '@/hooks/useAccountBalance';
-import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button } from '@/components/Button';
 
@@ -16,6 +21,7 @@ import { Details, DetailsItem } from '@/components/Details';
 import { DiffOutput } from '@/components/DiffOutput';
 import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
+import { Tag } from '@/components/Tag';
 import { ToggleButton } from '@/components/ToggleButton';
 import { WithReceipt } from '@/components/WithReceipt';
 
@@ -49,22 +55,14 @@ export const WithdrawButtonAndReceipt = ({
   const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
   const stringGetter = useStringGetter();
 
-  // TODO: uncomment when we have a way to get token amount estimate from abacus
-  // const { balance, queryStatus } = useAccountBalance({
-  //   addressOrDenom: withdrawToken?.address || undefined,
-  //   assetSymbol: withdrawToken?.symbol || undefined,
-  //   chainId: withdrawChain ? parseInt(withdrawChain) : undefined,
-  //   decimals: withdrawToken?.decimals || undefined,
-  //   isCosmosChain: false,
-  // });
-
-  // const balanceBN = MustBigNumber(balance);
-  // const newBalance =
-  //   // toAmountMin && withdrawToken && parseUnits(toAmountMin, withdrawToken.decimals).toString();
-
   const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
   const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
 
+  const toAmount =
+    summary?.toAmount &&
+    withdrawToken?.decimals &&
+    formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals);
+
   const feeSubitems: DetailsItem[] = [];
 
   if (typeof summary?.gasFee === 'number') {
@@ -98,9 +96,27 @@ export const WithdrawButtonAndReceipt = ({
       ),
       subitems: feeSubitems,
     },
+    {
+      key: 'wallet',
+      label: (
+        <span>
+          {stringGetter({ key: STRING_KEYS.AMOUNT_RECEIVED })}{' '}
+          {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
+        </span>
+      ),
+      value: (
+        <Styled.DiffOutput
+          type={OutputType.Asset}
+          value={'0'}
+          newValue={toAmount}
+          sign={NumberSign.Positive}
+          withDiff={Boolean(toAmount)}
+        />
+      ),
+    },
     {
       key: 'leverage',
-      label: <span>{stringGetter({ key: STRING_KEYS.LEVERAGE })}</span>,
+      label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
       value: (
         <Styled.DiffOutput
           type={OutputType.Multiple}
@@ -137,25 +153,19 @@ export const WithdrawButtonAndReceipt = ({
         />
       ),
     },
-    // TODO: uncomment when we have a way to get token amount estimate from abacus
-    // {
-    //   key: 'wallet',
-    //   label: (
-    //     <span>
-    //       {stringGetter({ key: STRING_KEYS.WALLET })}{' '}
-    //       {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
-    //     </span>
-    //   ),
-    //   value: (
-    //     <Styled.DiffOutput
-    //       type={OutputType.Asset}
-    //       value={balanceBN?.toString()}
-    //       newValue={newBalance}
-    //       sign={NumberSign.Negative}
-    //       withDiff={Boolean(balance !== newBalance)}
-    //     />
-    //   ),
-    // },
+    {
+      key: 'estimatedRouteDuration',
+      label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
+      value: typeof summary?.estimatedRouteDuration === 'number' && (
+        <Output
+          type={OutputType.Text}
+          value={stringGetter({
+            key: STRING_KEYS.X_MINUTES_LOWERCASED,
+            params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
+          })}
+        />
+      ),
+    },
   ];
 
   const isFormValid = !isDisabled && !isEditingSlippage;