feat: cctp withdrawals: withdraw form [OTE-855][5/n] (#1155)

dydxprotocol · Oct 24, 2024 · e6b8258 · e6b8258
1 parent f013a09
commit e6b8258
Show file tree

Hide file tree

Showing 10 changed files with 657 additions and 29 deletions.
diff --git a/src/components/ArrowIcon.tsx b/src/components/ArrowIcon.tsx
@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+
+import { Icon, IconName } from './Icon';
+
+export const ArrowIcon = (props: { direction: 'up' | 'down'; color: string }) => {
+  return <$ArrowIcon {...props} iconName={IconName.Arrow} />;
+};
+
+const $ArrowIcon = styled(Icon)<{ direction: 'up' | 'down'; color: string }>`
+  position: absolute;
+  ${({ direction }) =>
+    ({
+      up: css`
+        transform: rotate(-90deg);
+      `,
+      down: css`
+        transform: rotate(90deg);
+      `,
+    })[direction]}
+  ${({ color }) => css`
+    color: var(${color});
+  `};
+`;
diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
@@ -13,6 +13,7 @@ import { WithLabel } from '@/components/WithLabel';
 
 type StyleProps = {
   className?: string;
+  backgroundColorOverride?: string;
 };
 
 type ElementProps = {
@@ -28,15 +29,33 @@ type ElementProps = {
 export type FormInputProps = ElementProps & StyleProps & InputProps;
 
 export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
-  ({ id, label, slotRight, className, validationConfig, ...otherProps }, ref) => (
+  (
+    { id, label, slotRight, className, validationConfig, backgroundColorOverride, ...otherProps },
+    ref
+  ) => (
     <$FormInputContainer className={className} isValidationAttached={validationConfig?.attached}>
       <$InputContainer hasLabel={!!label} hasSlotRight={!!slotRight}>
         {label ? (
-          <$WithLabel label={label} inputID={id} disabled={otherProps.disabled}>
-            <Input ref={ref} id={id} {...otherProps} />
+          <$WithLabel
+            label={label}
+            inputID={id}
+            disabled={otherProps.disabled}
+            $backgroundColorOverride={backgroundColorOverride}
+          >
+            <Input
+              ref={ref}
+              id={id}
+              {...otherProps}
+              $backgroundColorOverride={backgroundColorOverride}
+            />
           </$WithLabel>
         ) : (
-          <Input ref={ref} id={id} {...otherProps} />
+          <Input
+            ref={ref}
+            id={id}
+            {...otherProps}
+            $backgroundColorOverride={backgroundColorOverride}
+          />
         )}
         {slotRight}
       </$InputContainer>
@@ -65,9 +84,11 @@ const $FormInputContainer = styled.div<{ isValidationAttached?: boolean }>`
     `}
 `;
 
-const $InputContainer = styled.div<{ hasLabel?: boolean; hasSlotRight?: boolean }>`
+const $InputContainer = styled.div<{
+  hasLabel?: boolean;
+  hasSlotRight?: boolean;
+}>`
   ${formMixins.inputContainer}
-
   input {
     ${({ hasLabel }) =>
       !hasLabel &&
@@ -89,8 +110,13 @@ const $InputContainer = styled.div<{ hasLabel?: boolean; hasSlotRight?: boolean
     `}
 `;
 
-const $WithLabel = styled(WithLabel)<{ disabled?: boolean }>`
+const $WithLabel = styled(WithLabel)<{ disabled?: boolean; $backgroundColorOverride?: string }>`
   ${formMixins.inputLabel}
+  ${({ $backgroundColorOverride }) =>
+    $backgroundColorOverride &&
+    css`
+      background-color: ${$backgroundColorOverride};
+    `}
 
   label {
     ${({ disabled }) => !disabled && 'cursor: text;'}

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -100,6 +100,7 @@ import {
 } from '@/icons';
 import { ChaosLabsIcon } from '@/icons/chaos-labs';
 import { LogoShortIcon } from '@/icons/logo-short';
+import UsdcIcon from '@/icons/usdc.svg';
 
 export enum IconName {
   AddressConnector = 'AddressConnector',
@@ -194,6 +195,7 @@ export enum IconName {
   Translate = 'Translate',
   Triangle = 'Triangle',
   TryAgain = 'TryAgain',
+  Usdc = 'Usdc',
   Warning = 'Warning',
   Website = 'Website',
   Whitepaper = 'Whitepaper',
@@ -293,6 +295,7 @@ const icons = {
   [IconName.Translate]: TranslateIcon,
   [IconName.Triangle]: TriangleIcon,
   [IconName.TryAgain]: TryAgainIcon,
+  [IconName.Usdc]: UsdcIcon,
   [IconName.Warning]: WarningIcon,
   [IconName.Website]: WebsiteIcon,
   [IconName.Whitepaper]: WhitepaperIcon,

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -26,6 +26,7 @@ export enum InputType {
 
 type StyleProps = {
   className?: string;
+  $backgroundColorOverride?: string;
 };
 
 type ElementProps = {
@@ -81,6 +82,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       onFocus,
       onInput,
       type = InputType.Number,
+      // TODO: https://linear.app/dydx/issue/OTE-888/simplify-input-component-bg-styles
+      // simplify input component styles. backgroundColorOverride has to override styles in too many places
+      $backgroundColorOverride: backgroundColorOverride,
       ...otherProps
     },
     ref
@@ -126,6 +130,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <$InputContainer className={className}>
         {type === InputType.Text || type === InputType.Search ? (
           <$Input
+            $backgroundColorOverride={backgroundColorOverride}
             // React
             ref={ref}
             id={id}
@@ -145,6 +150,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           />
         ) : (
           <$NumericFormat
+            $backgroundColorOverride={backgroundColorOverride}
             // React
             getInputRef={ref}
             id={id}
@@ -234,11 +240,21 @@ const InputStyle = css`
   }
 `;
 
-const $NumericFormat = styled(NumericFormat)`
+const $NumericFormat = styled(NumericFormat)<{ $backgroundColorOverride?: string }>`
   ${InputStyle}
   font-feature-settings: var(--fontFeature-monoNumbers);
+  ${({ $backgroundColorOverride }) =>
+    $backgroundColorOverride &&
+    css`
+      background-color: ${$backgroundColorOverride};
+    `}
 `;
 
-const $Input = styled.input`
+const $Input = styled.input<{ $backgroundColorOverride?: string }>`
   ${InputStyle}
+  ${({ $backgroundColorOverride }) =>
+    $backgroundColorOverride &&
+    css`
+      background-color: ${$backgroundColorOverride};
+    `}
 `;
diff --git a/src/hooks/transfers/useTransfers.tsx b/src/hooks/transfers/useTransfers.tsx
@@ -142,6 +142,24 @@ export const useTransfers = () => {
     return getDefaultTokenDenomFromAssets(assetsForSelectedChain);
   }, [assetsForSelectedChain]);
 
+  const cosmosChainAddresses = useMemo(() => {
+    if (!dydxAddress) return {};
+    return {
+      [getOsmosisChainId()]: convertBech32Address({
+        address: dydxAddress,
+        bech32Prefix: OSMO_BECH32_PREFIX,
+      }),
+      [getNeutronChainId()]: convertBech32Address({
+        address: dydxAddress,
+        bech32Prefix: NEUTRON_BECH32_PREFIX,
+      }),
+      [getNobleChainId()]: convertBech32Address({
+        address: dydxAddress,
+        bech32Prefix: NOBLE_BECH32_PREFIX,
+      }),
+    };
+  }, [dydxAddress]);
+
   const hasAllParams =
     !!fromToken?.denom &&
     !!toToken?.denom &&
@@ -204,21 +222,6 @@ export const useTransfers = () => {
         amountIn: parseUnits(amount, fromToken.decimals).toString(),
       };
 
-      // consider moving to useMemo outside of this query
-      const cosmosChainAddresses = {
-        [getOsmosisChainId()]: convertBech32Address({
-          address: dydxAddress,
-          bech32Prefix: OSMO_BECH32_PREFIX,
-        }),
-        [getNeutronChainId()]: convertBech32Address({
-          address: dydxAddress,
-          bech32Prefix: NEUTRON_BECH32_PREFIX,
-        }),
-        [getNobleChainId()]: convertBech32Address({
-          address: dydxAddress,
-          bech32Prefix: NOBLE_BECH32_PREFIX,
-        }),
-      };
       // WITHDRAWALS
       if (transferType === TransferType.Withdraw) {
         return skipClient.msgsDirect({
@@ -261,6 +264,7 @@ export const useTransfers = () => {
   });
 
   const { route, txs } = routeQuery.data ?? {};
+  const routeLoading = routeQuery.isLoading;
   return {
     // TODO [onboarding-rewrite]: Think about trimming this list
     // Right now we're exposing everything, but there's a good chance we can only expose a few properties
@@ -291,5 +295,7 @@ export const useTransfers = () => {
     fromToken,
     debouncedAmount,
     debouncedAmountBN,
+    routeLoading,
+    cosmosChainAddresses,
   };
 };
diff --git a/src/icons/usdc.svg b/src/icons/usdc.svg
diff --git a/src/lib/testFlags.ts b/src/lib/testFlags.ts
@@ -65,6 +65,10 @@ class TestFlags {
   get uiRefresh() {
     return !!this.queryParams.uirefresh || isDev;
   }
+
+  get onboardingRewrite() {
+    return !!this.queryParams.onboarding_rewrite;
+  }
 }
 
 export const testFlags = new TestFlags();
diff --git a/src/views/dialogs/WithdrawDialog.tsx b/src/views/dialogs/WithdrawDialog.tsx
@@ -9,22 +9,33 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Dialog, DialogPlacement } from '@/components/Dialog';
+import { Icon, IconName } from '@/components/Icon';
 import { WithdrawForm } from '@/views/forms/AccountManagementForms/WithdrawForm';
+import { WithdrawForm as WithdrawFormV2 } from '@/views/forms/AccountManagementFormsNew/WithdrawForm/WithdrawForm';
+
+import { testFlags } from '@/lib/testFlags';
 
 export const WithdrawDialog = ({ setIsOpen }: DialogProps<WithdrawDialogProps>) => {
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
-
   return (
     <Dialog
       isOpen
       setIsOpen={setIsOpen}
-      title={stringGetter({ key: STRING_KEYS.WITHDRAW })}
+      title={
+        testFlags.onboardingRewrite ? (
+          <span tw="row gap-[0.5ch]">
+            <Icon iconName={IconName.Usdc} size="1.5em" />
+            {/* TODO [onboarding-rewrite]: localize */}
+            {stringGetter({ key: STRING_KEYS.WITHDRAW })} USDC
+          </span>
+        ) : (
+          stringGetter({ key: STRING_KEYS.WITHDRAW })
+        )
+      }
       placement={isTablet ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
-      <$Content>
-        <WithdrawForm />
-      </$Content>
+      <$Content>{testFlags.onboardingRewrite ? <WithdrawFormV2 /> : <WithdrawForm />}</$Content>
     </Dialog>
   );
 };