Cex withdraw (#301)

* Coinbase withdrawal and deposit UI

* analytics

* packages bumps

* address comments

* address comments

* add test flag

package.json

@@ -40,9 +40,9 @@
     "@cosmjs/proto-signing": "^0.32.1",
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.4.5",
+    "@dydxprotocol/v4-abacus": "^1.4.6",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.30",
+    "@dydxprotocol/v4-localization": "^1.1.31",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

src/components/SearchSelectMenu.tsx

@@ -39,7 +39,7 @@ export const SearchSelectMenu = ({
   disabled,
   label,
   items,
-  withSearch,
+  withSearch = true,
   withReceiptItems,
 }: SearchSelectMenuProps) => {
   const [open, setOpen] = useState(false);
@@ -77,6 +77,7 @@ export const SearchSelectMenu = ({
             withSearch={withSearch}
             onItemSelected={() => setOpen(false)}
             withStickyLayout
+            $withSearch={withSearch}
           />
         </Styled.Popover>
       </Styled.WithDetailsReceipt>
@@ -127,7 +128,7 @@ Styled.Popover = styled(Popover)`
   box-shadow: none;
 `;
 
-Styled.ComboboxMenu = styled(ComboboxMenu)`
+Styled.ComboboxMenu = styled(ComboboxMenu)<{ $withSearch?: boolean }>`
   ${layoutMixins.withInnerHorizontalBorders}
 
   --comboboxMenu-backgroundColor: var(--color-layer-4);
@@ -140,7 +141,8 @@ Styled.ComboboxMenu = styled(ComboboxMenu)`
   --comboboxMenu-item-checked-textColor: var(--color-text-2);
   --comboboxMenu-item-highlighted-textColor: var(--color-text-2);
 
-  --stickyArea1-topHeight: var(--form-input-height);
+  --stickyArea1-topHeight: ${({ $withSearch }) =>
+    !$withSearch ? '0' : 'var(--form-input-height)'};
 
   input:focus-visible {
     outline: none;

src/components/TimeoutButton.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect } from 'react';
 
 import { ButtonAction, ButtonState } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
@@ -8,6 +8,7 @@ import { Button, type ButtonStateConfig, type ButtonProps } from '@/components/B
 
 type ElementProps = {
   timeoutInSeconds: number;
+  onTimeOut?: () => void;
   slotFinal?: ReactNode;
 } & ButtonProps;
 
@@ -16,6 +17,7 @@ export type TimeoutButtonProps = ElementProps;
 export const TimeoutButton = ({
   children,
   timeoutInSeconds,
+  onTimeOut,
   slotFinal,
   ...otherProps
 }: TimeoutButtonProps) => {
@@ -25,6 +27,11 @@ export const TimeoutButton = ({
 
   const secondsLeft = Math.max(0, (timeoutDeadline - now) / 1000);
 
+  useEffect(() => {
+    if (secondsLeft > 0) return;
+    onTimeOut?.();
+  }, [secondsLeft]);
+
   if (slotFinal && secondsLeft <= 0) return slotFinal;
 
   return (

src/constants/analytics.ts

@@ -144,9 +144,17 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         validatorUrl: string;
       }
     : T extends AnalyticsEvent.TransferDeposit
-    ? {}
+    ? {
+        chainId?: string;
+        tokenAddress?: string;
+        tokenSymbol?: string;
+      }
     : T extends AnalyticsEvent.TransferWithdraw
-    ? {}
+    ? {
+        chainId?: string;
+        tokenAddress?: string;
+        tokenSymbol?: string;
+      }
     : // Trading
     T extends AnalyticsEvent.TradeOrderTypeSelected
     ? {

src/constants/notifications.ts

@@ -140,6 +140,7 @@ export type TransferNotifcation = {
   isCctp?: boolean;
   errorCount?: number;
   status?: StatusResponse;
+  isExchange?: boolean;
 };
 
 /**

src/hooks/useLocalNotifications.tsx

@@ -82,24 +82,30 @@ const useLocalNotificationsContext = () => {
               isCctp,
               errorCount,
               status: currentStatus,
+              isExchange,
             } = transferNotification;
 
-            // @ts-ignore status.errors is not in the type definition but can be returned
-            // also error can some time come back as an empty object so we need to ignore for that
-            const hasErrors = !!currentStatus?.errors || 
-                 (currentStatus?.error && Object.keys(currentStatus.error).length !== 0);
+            const hasErrors =
+              // @ts-ignore status.errors is not in the type definition but can be returned
+              // also error can some time come back as an empty object so we need to ignore for that
+              !!currentStatus?.errors ||
+              (currentStatus?.error && Object.keys(currentStatus.error).length !== 0);
 
             if (
+              !isExchange &&
               !hasErrors &&
               (!currentStatus?.squidTransactionStatus ||
                 currentStatus?.squidTransactionStatus === 'ongoing')
             ) {
               try {
-                const status = await fetchSquidStatus({
-                  transactionId: txHash,
-                  toChainId,
-                  fromChainId,
-                }, isCctp);
+                const status = await fetchSquidStatus(
+                  {
+                    transactionId: txHash,
+                    toChainId,
+                    fromChainId,
+                  },
+                  isCctp
+                );
 
                 if (status) {
                   transferNotification.status = status;

src/hooks/useNotificationTypes.tsx

@@ -179,8 +179,9 @@ export const notificationTypes: NotificationTypeConfig[] = [
 
       useEffect(() => {
         for (const transfer of transferNotifications) {
-          const { fromChainId, status, txHash, toAmount, type } = transfer;
-          const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
+          const { fromChainId, status, txHash, toAmount, type, isExchange } = transfer;
+          const isFinished =
+            (Boolean(status) && status?.squidTransactionStatus !== 'ongoing') || isExchange;
           const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
 
           const transferType =

src/lib/addressUtils.ts

@@ -25,3 +25,22 @@ export function convertBech32Address({
 }): string {
   return toBech32(bech32Prefix, fromHex(toHex(fromBech32(address).data)));
 }
+
+/**
+ * Validates a Cosmos address with a specific prefix.
+ * @param {string} address The Cosmos address to validate.
+ * @param {string} prefix The expected prefix for the address.
+ * @returns {boolean} True if the address is valid and matches the prefix, false otherwise.
+ */
+export function validateCosmosAddress(address: string, prefix: string) {
+  try {
+    // Decode the address to verify its structure and prefix
+    const { prefix: decodedPrefix } = fromBech32(address);
+
+    // Check if the decoded address has the expected prefix
+    return decodedPrefix === prefix;
+  } catch (error) {
+    // If decoding fails, the address is not valid
+    return false;
+  }
+}

src/lib/testFlags.ts

@@ -19,13 +19,17 @@ class TestFlags {
     return !!this.queryParams.displayinitializingmarkets;
   }
 
-  get addressOverride():string {
+  get addressOverride(): string {
     return this.queryParams.address;
   }
-  
+
   get showTradingRewards() {
     return !!this.queryParams.tradingrewards;
   }
+
+  get showCexWithdrawal() {
+    return !!this.queryParams.cexwithdrawal;
+  }
 }
 
 export const testFlags = new TestFlags();

src/views/dialogs/DepositDialog.tsx

@@ -13,16 +13,14 @@ export const DepositDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { isMobile } = useBreakpoints();
 
-  const closeDialog = () => setIsOpen?.(false);
-
   return (
     <Dialog
       isOpen
       setIsOpen={setIsOpen}
       title={stringGetter({ key: STRING_KEYS.DEPOSIT })}
       placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
-      <DepositDialogContent onDeposit={closeDialog} />
+      <DepositDialogContent />
     </Dialog>
   );
 };

src/views/dialogs/DepositDialog/DepositDialogContent.tsx

@@ -2,13 +2,15 @@ import { useEffect, useState } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { TransferInputField, TransferType } from '@/constants/abacus';
+import { AnalyticsEvent } from '@/constants/analytics';
 import { isMainnet } from '@/constants/networks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
 import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
 
 import abacusStateManager from '@/lib/abacus';
+import { track } from '@/lib/analytics';
 
 type ElementProps = {
   onDeposit?: () => void;
@@ -34,9 +36,19 @@ export const DepositDialogContent = ({ onDeposit }: ElementProps) => {
   return (
     <Styled.Content>
       {isMainnet || !showFaucet ? (
-        <DepositForm onDeposit={onDeposit} />
+        <DepositForm
+          onDeposit={(event) => {
+            track(AnalyticsEvent.TransferDeposit, event);
+            onDeposit?.();
+          }}
+        />
       ) : (
-        <TestnetDepositForm onDeposit={onDeposit} />
+        <TestnetDepositForm
+          onDeposit={() => {
+            track(AnalyticsEvent.TransferFaucet);
+            onDeposit?.();
+          }}
+        />
       )}
       {!isMainnet && (
         <Styled.TextToggle onClick={() => setShowFaucet(!showFaucet)}>

src/views/dialogs/OnboardingDialog.tsx

@@ -105,8 +105,8 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
               <Styled.Content>
                 {isMainnet ? (
                   <DepositForm
-                    onDeposit={() => {
-                      track(AnalyticsEvent.TransferDeposit);
+                    onDeposit={(event) => {
+                      track(AnalyticsEvent.TransferDeposit, event);
                     }}
                   />
                 ) : (

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -7,6 +7,7 @@ import { Abi, parseUnits } from 'viem';
 import erc20 from '@/abi/erc20.json';
 import erc20_usdt from '@/abi/erc20_usdt.json';
 import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
+import { AnalyticsEvent, AnalyticsEventData } from '@/constants/analytics';
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
@@ -48,7 +49,7 @@ import { DepositButtonAndReceipt } from './DepositForm/DepositButtonAndReceipt';
 import { NobleDeposit } from '../NobleDeposit';
 
 type DepositFormProps = {
-  onDeposit?: () => void;
+  onDeposit?: (event?: AnalyticsEventData<AnalyticsEvent.TransferDeposit>) => void;
   onError?: () => void;
 };
 
@@ -132,7 +133,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     if (error) onError?.();
   }, [error]);
 
-  const onSelectChain = useCallback((name: string, type: 'chain' | 'exchange') => {
+  const onSelectNetwork = useCallback((name: string, type: 'chain' | 'exchange') => {
     if (name) {
       abacusStateManager.clearTransferInputValues();
       setFromAmount('');
@@ -258,8 +259,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         };
         const txHash = await signerWagmi.sendTransaction(tx);
 
-        onDeposit?.();
-
         if (txHash) {
           addTransferNotification({
             txHash: txHash,
@@ -271,6 +270,12 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           });
           abacusStateManager.clearTransferInputValues();
           setFromAmount('');
+
+          onDeposit?.({
+            chainId: chainIdStr || undefined,
+            tokenAddress: sourceToken?.address || undefined,
+            tokenSymbol: sourceToken?.symbol || undefined,
+          });
         }
       } catch (error) {
         log('DepositForm/onSubmit', error);
@@ -279,7 +284,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         setIsLoading(false);
       }
     },
-    [requestPayload, signerWagmi, chainId]
+    [requestPayload, signerWagmi, chainId, sourceToken, sourceChain]
   );
 
   const amountInputReceipt = [
@@ -378,7 +383,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
       <SourceSelectMenu
         selectedChain={chainIdStr || undefined}
         selectedExchange={exchange || undefined}
-        onSelect={onSelectChain}
+        onSelect={onSelectNetwork}
       />
       {exchange && nobleAddress ? (
         <NobleDeposit />