address nit

package.json

@@ -37,9 +37,9 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^0.6.3",
+    "@dydxprotocol/v4-abacus": "^0.6.4",
     "@dydxprotocol/v4-client-js": "^0.36.1",
-    "@dydxprotocol/v4-localization": "^0.1.23",
+    "@dydxprotocol/v4-localization": "^0.1.24",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -27,14 +27,14 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^0.6.3
+    specifier: ^0.6.4
-    version: 0.6.3
+    version: 0.6.4
   '@dydxprotocol/v4-client-js':
     specifier: ^0.36.1
     version: 0.36.1
   '@dydxprotocol/v4-localization':
-    specifier: ^0.1.23
+    specifier: ^0.1.24
-    version: 0.1.23
+    version: 0.1.24
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -979,8 +979,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@0.6.3:
+  /@dydxprotocol/v4-abacus@0.6.4:
-    resolution: {integrity: sha512-oYMbII7o7fXjNpl2PZpG6mwKQ49e8Qky5vA8Ua9boNs7nRUx3PC6azfoPtjHKMdYY33eHoXcZBpTynhneLXCVg==}
+    resolution: {integrity: sha512-eH+/9Q/OnQtwzBwM1BJyXybFPdivGmFQWrxM71MFWGs6uIQGbZX775mpoa8deweSTyQ/QrRLRQ1mP2BPDgBQYg==}
     dev: false
 
   /@dydxprotocol/v4-client-js@0.36.1:
@@ -1010,8 +1010,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@0.1.23:
+  /@dydxprotocol/v4-localization@0.1.24:
-    resolution: {integrity: sha512-TaEey7dINwxELlEyA8XsQ4GQLfJ7e1b434bafpnlG9ccW1sIW7TYTsfaSkck2egR4R736hA7k5WvVy0aI/0TFw==}
+    resolution: {integrity: sha512-zSiu8+/6BWNWZXxe73zUp/UjuLG1Cp5UuhXKtbATqqkeZyVCs01QxbBCTs1MLfgsLh02IrfhXCPHvXnzZyReEw==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.2.1:

src/views/TransferStatus.tsx

@@ -53,6 +53,15 @@ export const TransferStatusToast = ({
 
   if (!status) return <LoadingDots size={3} />;
 
+  const statusString =
+    type === 'deposit'
+      ? status?.squidTransactionStatus === 'success'
+        ? STRING_KEYS.DEPOSIT_COMPLETE
+        : STRING_KEYS.DEPOSIT_STATUS
+      : status?.squidTransactionStatus === 'success'
+      ? STRING_KEYS.WITHDRAW_COMPLETE
+      : STRING_KEYS.WITHDRAW_STATUS;
+
   return (
     <Styled.Root open={open} onOpenChange={setOpen}>
       <WithReceipt
@@ -67,7 +76,7 @@ export const TransferStatusToast = ({
         <Styled.BridgingStatus>
           <Styled.Status>
             {stringGetter({
-              key: type === 'deposit' ? STRING_KEYS.DEPOSIT_STATUS : STRING_KEYS.WITHDRAW_STATUS,
+              key: statusString,
               params: {
                 AMOUNT_USD: <Styled.InlineOutput type={OutputType.Fiat} value={toAmount} />,
                 ESTIMATED_DURATION: (

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,

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -165,8 +165,8 @@ export const GenerateKeys = ({
         {[
           {
             status: EvmDerivedAccountStatus.Deriving,
-            title: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
+            title: stringGetter({ key: STRING_KEYS.GENERATE_DYDX_WALLET }),
-            description: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
+            description: stringGetter({ key: STRING_KEYS.VERIFY_WALLET_OWNERSHIP }),
           },
           status === EvmDerivedAccountStatus.EnsuringDeterminism && {
             status: EvmDerivedAccountStatus.EnsuringDeterminism,

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;

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -4,6 +4,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 import type { NumberFormatValues } from 'react-number-format';
 import { shallowEqual, useSelector } from 'react-redux';
 import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';
+import { isAddress } from 'viem';
 
 import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
@@ -26,6 +27,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';
 
@@ -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;
+`;

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: 'estimatedRouteDuration',
-    //   key: 'wallet',
+      label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
-    //   label: (
+      value: typeof summary?.estimatedRouteDuration === 'number' && (
-    //     <span>
+        <Output
-    //       {stringGetter({ key: STRING_KEYS.WALLET })}{' '}
+          type={OutputType.Text}
-    //       {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
+          value={stringGetter({
-    //     </span>
+            key: STRING_KEYS.X_MINUTES_LOWERCASED,
-    //   ),
+            params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
-    //   value: (
+          })}
-    //     <Styled.DiffOutput
+        />
-    //       type={OutputType.Asset}
+      ),
-    //       value={balanceBN?.toString()}
+    },
-    //       newValue={newBalance}
-    //       sign={NumberSign.Negative}
-    //       withDiff={Boolean(balance !== newBalance)}
-    //     />
-    //   ),
-    // },
   ];
 
   const isFormValid = !isDisabled && !isEditingSlippage;