add manage funds dialog and transfers form styling (#147)

* add manage funds dialog and transfers form styling

* add sticky footer backdrop

* add testnet deposit toggle

src/components/SearchSelectMenu.tsx

@@ -12,6 +12,8 @@ import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { WithLabel } from '@/components/WithLabel';
 
 import { layoutMixins } from '@/styles/layoutMixins';
+import { formMixins } from '@/styles/formMixins';
+import breakpoints from '@/styles/breakpoints';
 
 type ElementProps = {
   asChild?: boolean;
@@ -84,27 +86,30 @@ export const SearchSelectMenu = ({
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
+Styled.SearchSelectMenu = styled.div`
+  ${layoutMixins.column}
+`;
+
 Styled.MenuTrigger = styled.div`
   height: var(--form-input-height);
 
   ${layoutMixins.spacedRow}
   align-items: center;
-  padding: 0 1rem;
+  padding: var(--form-input-paddingY) var(--form-input-paddingX);
+
+  @media ${breakpoints.tablet} {
+    height: var(--form-input-height-mobile);
+  }
 `;
 
 Styled.WithLabel = styled(WithLabel)`
-  --label-textColor: var(--color-text-0);
-  gap: 0.25rem;
+  ${formMixins.inputLabel}
 
   label {
     font: var(--font-mini-book);
   }
 `;
 
-Styled.SearchSelectMenu = styled.div`
-  ${layoutMixins.column}
-`;
-
 Styled.WithDetailsReceipt = styled(WithDetailsReceipt)`
   --withReceipt-backgroundColor: var(--color-layer-2);
 

src/components/SelectMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { type AnyStyledComponent } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 
 import {
   Root,
@@ -19,6 +19,7 @@ import { popoverMixins } from '@/styles/popoverMixins';
 import { formMixins } from '@/styles/formMixins';
 
 import { WithLabel } from '@/components/WithLabel';
+import { Icon, IconName } from './Icon';
 
 export const SelectMenu = <T extends string>({
   children,
@@ -45,7 +46,9 @@ export const SelectMenu = <T extends string>({
         ) : (
           <Value />
         )}
-        {React.Children.toArray(children).length > 1 && <Styled.DropdownIcon />}
+        {React.Children.toArray(children).length > 1 && (
+          <Styled.TriggerIcon iconName={IconName.Triangle} />
+        )}
       </Styled.Trigger>
       <Portal>
         <Styled.Content className={className}>
@@ -91,12 +94,6 @@ Styled.Trigger = styled(Trigger)<{ $withBlur?: boolean }>`
   }
 `;
 
-Styled.DropdownIcon = styled(SelectIcon)`
-  font-size: 0.675em;
-  color: var(--color-text-1);
-  margin-left: auto;
-`;
-
 Styled.Content = styled(Content)`
   --select-menu-content-maxWidth: ;
   max-width: var(--select-menu-content-maxWidth);
@@ -119,3 +116,9 @@ Styled.WithLabel = styled(WithLabel)`
   ${formMixins.inputLabel}
   border-radius: 0;
 `;
+
+Styled.TriggerIcon = styled(Icon)`
+  width: 0.625rem;
+  height: 0.375rem;
+  color: var(--color-text-0);
+`;

src/components/ToggleButton.tsx

@@ -52,15 +52,19 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.BaseButton = styled(BaseButton)`
   --button-toggle-off-backgroundColor: var(--color-layer-3);
   --button-toggle-off-textColor: var(--color-text-0);
+  --button-toggle-off-border: solid var(--border-width) var(--button-border-color);
   --button-toggle-on-backgroundColor: var(--color-layer-1);
   --button-toggle-on-textColor: var(--color-text-2);
+  --button-toggle-on-border: solid var(--border-width) var(--button-border-color);
 
   --button-backgroundColor: var(--button-toggle-off-backgroundColor);
   --button-textColor: var(--button-toggle-off-textColor);
+  --button-border: var(--button-toggle-off-border);
 
   &[data-state='on'],
   &[data-state='active'] {
     --button-backgroundColor: var(--button-toggle-on-backgroundColor);
     --button-textColor: var(--button-toggle-on-textColor);
+    --button-border: var(--button-toggle-on-border);
   }
 `;

src/constants/dialogs.ts

@@ -18,6 +18,7 @@ export enum DialogTypes {
   Trade = 'Trade',
   Transfer = 'Transfer',
   Withdraw = 'Withdraw',
+  ManageFunds = 'ManageFunds',
 }
 
 export enum TradeBoxDialogTypes {

src/layout/DialogManager.tsx

@@ -23,6 +23,7 @@ import { TradeDialog } from '@/views/dialogs/TradeDialog';
 import { TransferDialog } from '@/views/dialogs/TransferDialog';
 import { RestrictedWalletDialog } from '@/views/dialogs/RestrictedWalletDialog';
 import { WithdrawDialog } from '@/views/dialogs/WithdrawDialog';
+import { ManageFundsDialog } from '@/views/dialogs/ManageFundsDialog';
 
 import { OrderDetailsDialog } from '@/views/dialogs/DetailsDialog/OrderDetailsDialog';
 import { FillDetailsDialog } from '@/views/dialogs/DetailsDialog/FillDetailsDialog';
@@ -65,5 +66,6 @@ export const DialogManager = () => {
     [DialogTypes.Trade]: <TradeDialog {...modalProps} />,
     [DialogTypes.Transfer]: <TransferDialog {...modalProps} />,
     [DialogTypes.Withdraw]: <WithdrawDialog {...modalProps} />,
+    [DialogTypes.ManageFunds]: <ManageFundsDialog {...modalProps} />,
   }[type];
 };

src/pages/Profile.tsx

@@ -51,11 +51,14 @@ const Profile = () => {
       icon: { iconName: IconName.Gear },
       href: AppRoute.Settings,
     },
-    // {
-    //   key: 'tutorials',
-    //   label: stringGetter({ key: STRING_KEYS.TUTORIALS }),
-    //   icon: { iconName: IconName.Comment },
-    // },
+    isConnected && {
+      key: 'transfers',
+      label: stringGetter({ key: STRING_KEYS.MANAGE_FUNDS }),
+      icon: { iconName: IconName.Transfer },
+      onClick: () => {
+        dispatch(openDialog({ type: DialogTypes.ManageFunds }));
+      },
+    },
     isConnected
       ? {
           key: 'sign-out',

src/styles/formMixins.ts

@@ -107,12 +107,17 @@ export const formMixins: Record<
   `,
 
   inputLabel: css`
+    --label-textColor: var(--color-text-1);
     position: relative;
     height: 100%;
     width: 100%;
     gap: 0;
 
     border-radius: inherit;
+
+    @media ${breakpoints.tablet} {
+      gap: 0.25rem;
+    }
   `,
 
   inputToggleGroup: css`
@@ -130,4 +135,28 @@ export const formMixins: Record<
       --button-toggle-off-textColor: var(--color-text-1);
     }
   `,
+
+  footer: css`
+    ${layoutMixins.stickyFooter}
+    ${layoutMixins.withStickyFooterBackdrop}
+
+    margin-top: auto;
+  `,
+
+  transfersForm: css`
+    ${() => formMixins.inputsColumn}
+    --form-input-gap: 1.25rem;
+    --form-input-height: 3.5rem;
+    --form-input-height-mobile: 4rem;
+    --form-input-paddingY: 0.5rem;
+    --form-input-paddingX: 1rem;
+
+    label {
+      --label-textColor: var(--color-text-0);
+    }
+
+    @media ${breakpoints.tablet} {
+      --form-input-gap: 1rem;
+    }
+  `,
 };

src/views/dialogs/DepositDialog.tsx

@@ -1,23 +1,15 @@
-import { useState } from 'react';
-import styled, { type AnyStyledComponent } from 'styled-components';
-
-import { isMainnet } from '@/constants/networks';
 import { STRING_KEYS } from '@/constants/localization';
 import { useBreakpoints, useStringGetter } from '@/hooks';
 
 import { Dialog, DialogPlacement } from '@/components/Dialog';
 
-import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
-import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
-
-import { layoutMixins } from '@/styles/layoutMixins';
+import { DepositDialogContent } from './DepositDialog/DepositDialogContent';
 
 type ElementProps = {
   setIsOpen?: (open: boolean) => void;
 };
 
 export const DepositDialog = ({ setIsOpen }: ElementProps) => {
-  const [showFaucet, setShowFaucet] = useState(!isMainnet);
   const stringGetter = useStringGetter();
   const { isMobile } = useBreakpoints();
 
@@ -28,45 +20,9 @@ export const DepositDialog = ({ setIsOpen }: ElementProps) => {
       isOpen
       setIsOpen={setIsOpen}
       title={stringGetter({ key: STRING_KEYS.DEPOSIT })}
-      description={showFaucet && 'Test funds will be sent directly to your dYdX account.'}
       placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
-      <Styled.Content>
-        {isMainnet || !showFaucet ? (
-          <DepositForm />
-        ) : (
-          <TestnetDepositForm onDeposit={closeDialog} />
-        )}
-        {!isMainnet && (
-          <Styled.TextToggle onClick={() => setShowFaucet(!showFaucet)}>
-            {showFaucet ? 'Show deposit form' : 'Show test faucet'}
-          </Styled.TextToggle>
-        )}
-      </Styled.Content>
+      <DepositDialogContent onDeposit={closeDialog} />
     </Dialog>
   );
 };
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.TextToggle = styled.div`
-  ${layoutMixins.stickyFooter}
-  color: var(--color-accent);
-  cursor: pointer;
-
-  margin-top: auto;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-Styled.Content = styled.div`
-  ${layoutMixins.stickyArea0}
-  --stickyArea0-bottomHeight: 2rem;
-  --stickyArea0-bottomGap: 1rem;
-  --stickyArea0-totalInsetBottom: 0.5rem;
-
-  ${layoutMixins.flexColumn}
-  gap: 1rem;
-`;

src/views/dialogs/DepositDialog/DepositDialogContent.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import styled, { type AnyStyledComponent } from 'styled-components';
+
+import { isMainnet } from '@/constants/networks';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
+import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
+
+type ElementProps = {
+  onDeposit?: () => void;
+};
+
+export const DepositDialogContent = ({ onDeposit }: ElementProps) => {
+  const [showFaucet, setShowFaucet] = useState(!isMainnet);
+
+  return (
+    <Styled.Content>
+      {isMainnet || !showFaucet ? (
+        <DepositForm onDeposit={onDeposit} />
+      ) : (
+        <TestnetDepositForm onDeposit={onDeposit} />
+      )}
+      {!isMainnet && (
+        <Styled.TextToggle onClick={() => setShowFaucet(!showFaucet)}>
+          {showFaucet ? 'Show deposit form' : 'Show test faucet'}
+        </Styled.TextToggle>
+      )}
+    </Styled.Content>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Content = styled.div`
+  ${layoutMixins.flexColumn}
+  gap: 1rem;
+
+  form {
+    flex: 1;
+  }
+`;
+
+Styled.TextToggle = styled.div`
+  ${layoutMixins.stickyFooter}
+  --stickyArea-bottomHeight: 0;
+
+  color: var(--color-accent);
+  cursor: pointer;
+
+  margin-top: auto;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;

src/views/dialogs/ManageFundsDialog.tsx

@@ -0,0 +1,86 @@
+import { shallowEqual, useSelector } from 'react-redux';
+import styled, { type AnyStyledComponent } from 'styled-components';
+
+import { TransferInputField, TransferType } from '@/constants/abacus';
+import { STRING_KEYS } from '@/constants/localization';
+import { ButtonSize } from '@/constants/buttons';
+import { useStringGetter } from '@/hooks';
+
+import { Dialog, DialogPlacement } from '@/components/Dialog';
+import { ToggleGroup } from '@/components/ToggleGroup';
+import { TransferForm } from '@/views/forms/TransferForm';
+import { WithdrawForm } from '@/views/forms/AccountManagementForms/WithdrawForm';
+
+import { getTransferInputs } from '@/state/inputsSelectors';
+
+import abacusStateManager from '@/lib/abacus';
+
+import { DepositDialogContent } from './DepositDialog/DepositDialogContent';
+
+type ElementProps = {
+  setIsOpen?: (open: boolean) => void;
+};
+
+export const ManageFundsDialog = ({ setIsOpen }: ElementProps) => {
+  const stringGetter = useStringGetter();
+  const { type } = useSelector(getTransferInputs, shallowEqual) || {};
+  const currentType = type?.rawValue ?? TransferType.deposit.rawValue;
+
+  const closeDialog = () => setIsOpen?.(false);
+
+  const transferTypeConfig = {
+    [TransferType.deposit.rawValue]: {
+      value: TransferType.deposit.rawValue,
+      label: stringGetter({ key: STRING_KEYS.DEPOSIT }),
+      component: <DepositDialogContent />,
+    },
+    [TransferType.withdrawal.rawValue]: {
+      value: TransferType.withdrawal.rawValue,
+      label: stringGetter({ key: STRING_KEYS.WITHDRAW }),
+      component: <WithdrawForm />,
+    },
+    [TransferType.transferOut.rawValue]: {
+      value: TransferType.transferOut.rawValue,
+      label: stringGetter({ key: STRING_KEYS.TRANSFER }),
+      component: <TransferForm onDone={closeDialog} />,
+    },
+  };
+
+  return (
+    <Styled.Dialog
+      isOpen
+      setIsOpen={setIsOpen}
+      placement={DialogPlacement.FullScreen}
+      title={
+        <Styled.ToggleGroup
+          items={Object.values(transferTypeConfig)}
+          value={currentType}
+          size={ButtonSize.Medium}
+          onValueChange={(value: string) =>
+            abacusStateManager.setTransferValue({
+              field: TransferInputField.type,
+              value,
+            })
+          }
+        />
+      }
+      hasHeaderBorder
+    >
+      {transferTypeConfig[currentType].component}
+    </Styled.Dialog>
+  );
+};
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Dialog = styled(Dialog)`
+  --dialog-content-paddingTop: 1.5rem;
+`;
+
+Styled.ToggleGroup = styled(ToggleGroup)`
+  overflow-x: auto;
+
+  button {
+    --button-toggle-off-border: none;
+    --button-padding: 0 1rem;
+  }
+`;

src/views/dialogs/TradeDialog.tsx

@@ -112,8 +112,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.Dialog = styled(Dialog)<{ currentStep: MobilePlaceOrderSteps }>`
   --dialog-backgroundColor: var(--color-layer-2);
   --dialog-header-height: 1rem;
-  --dialog-header-paddingTop: 1.5rem;
-  --dialog-header-paddingBottom: 1rem;
   --dialog-content-paddingTop: 0;
   --dialog-content-paddingBottom: 0;
   --dialog-content-paddingLeft: 0;

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -353,14 +353,17 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         />
       </Styled.WithDetailsReceipt>
       {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
-      <DepositButtonAndReceipt
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        chainId={chainId || undefined}
-        setSlippage={onSetSlippage}
-        slippage={slippage}
-        sourceToken={sourceToken || undefined}
-      />
+
+      <Styled.Footer>
+        <DepositButtonAndReceipt
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          chainId={chainId || undefined}
+          setSlippage={onSetSlippage}
+          slippage={slippage}
+          sourceToken={sourceToken || undefined}
+        />
+      </Styled.Footer>
     </Styled.Form>
   );
 };
@@ -368,13 +371,12 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Form = styled.form`
-  --form-input-height: 3.5rem;
+  ${formMixins.transfersForm}
+`;
 
-  ${layoutMixins.flexColumn}
-  gap: 1.5rem;
-
-  ${layoutMixins.stickyArea1}
-  min-height: calc(100% - var(--stickyArea0-bottomHeight));
+Styled.Footer = styled.footer`
+  ${formMixins.footer}
+  --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom);
 `;
 
 Styled.WithDetailsReceipt = styled(WithDetailsReceipt)`

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -28,7 +28,9 @@ import { Output, OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
 import { ToggleButton } from '@/components/ToggleButton';
 import { WithReceipt } from '@/components/WithReceipt';
+import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
 
+import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
@@ -64,6 +66,8 @@ export const DepositButtonAndReceipt = ({
   const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
   const stringGetter = useStringGetter();
 
+  const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
+
   const {
     matchNetwork: switchNetwork,
     isSwitchingNetwork,
@@ -210,7 +214,9 @@ export const DepositButtonAndReceipt = ({
       }
       slotError={slotError}
     >
-      {!isMatchingNetwork ? (
+      {!canAccountTrade ? (
+        <OnboardingTriggerButton size={ButtonSize.Base} />
+      ) : !isMatchingNetwork ? (
         <Button
           action={ButtonAction.Primary}
           onClick={switchNetwork}
@@ -247,8 +253,7 @@ Styled.WithReceipt = styled(WithReceipt)`
 
 Styled.CollapsibleDetails = styled.div`
   ${layoutMixins.column}
-  padding: 0.375rem 1rem 0.5rem;
-  gap: 0.5rem;
+  padding: var(--form-input-paddingY) var(--form-input-paddingX);
 `;
 
 Styled.Details = styled(Details)`

src/views/forms/AccountManagementForms/TestnetDepositForm.tsx

@@ -6,7 +6,7 @@ import { ButtonAction, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import { useAccounts, useStringGetter, useSubaccount } from '@/hooks';
-import { layoutMixins } from '@/styles/layoutMixins';
+import { formMixins } from '@/styles/formMixins';
 
 import { Button } from '@/components/Button';
 
@@ -71,13 +71,11 @@ export const TestnetDepositForm = ({ onDeposit, onError }: DepositFormProps) =>
           },
         })}
       </p>
-      <Styled.SubmitButton
-        action={ButtonAction.Primary}
-        type={ButtonType.Submit}
-        state={{ isLoading }}
-      >
-        {stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
-      </Styled.SubmitButton>
+      <Styled.Footer>
+        <Button action={ButtonAction.Primary} type={ButtonType.Submit} state={{ isLoading }}>
+          {stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
+        </Button>
+      </Styled.Footer>
     </Styled.Form>
   );
 };
@@ -85,10 +83,14 @@ export const TestnetDepositForm = ({ onDeposit, onError }: DepositFormProps) =>
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Form = styled.form`
-  ${layoutMixins.column}
-  gap: 1rem;
+  ${formMixins.transfersForm}
 `;
 
-Styled.SubmitButton = styled(Button)`
-  ${layoutMixins.stickyFooter}
+Styled.Footer = styled.footer`
+  ${formMixins.footer}
+  --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom);
+
+  button {
+    --button-width: 100%;
+  }
 `;

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -371,14 +371,16 @@ export const WithdrawForm = () => {
         />
       </Styled.WithDetailsReceipt>
       {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
-      <WithdrawButtonAndReceipt
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        setSlippage={onSetSlippage}
-        slippage={slippage}
-        withdrawChain={chainIdStr || undefined}
-        withdrawToken={toToken || undefined}
-      />
+      <Styled.Footer>
+        <WithdrawButtonAndReceipt
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          setSlippage={onSetSlippage}
+          slippage={slippage}
+          withdrawChain={chainIdStr || undefined}
+          withdrawToken={toToken || undefined}
+        />
+      </Styled.Footer>
     </Styled.Form>
   );
 };
@@ -390,14 +392,12 @@ Styled.DiffOutput = styled(DiffOutput)`
 `;
 
 Styled.Form = styled.form`
-  --form-input-height: 3.5rem;
+  ${formMixins.transfersForm}
+`;
 
-  min-height: calc(100% - var(--stickyArea0-bottomHeight));
-
-  ${layoutMixins.flexColumn}
-  gap: 1.25rem;
-
-  ${layoutMixins.stickyArea1}
+Styled.Footer = styled.footer`
+  ${formMixins.footer}
+  --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom);
 `;
 
 Styled.DestinationRow = styled.div`

src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx

@@ -24,7 +24,9 @@ import { Output, OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
 import { ToggleButton } from '@/components/ToggleButton';
 import { WithReceipt } from '@/components/WithReceipt';
+import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
 
+import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getSubaccount } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
@@ -57,6 +59,7 @@ export const WithdrawButtonAndReceipt = ({
 
   const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
   const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
 
   const toAmount =
     summary?.toAmount &&
@@ -192,16 +195,20 @@ export const WithdrawButtonAndReceipt = ({
         </Styled.CollapsibleDetails>
       }
     >
-      <Button
-        action={ButtonAction.Primary}
-        type={ButtonType.Submit}
-        state={{
-          isDisabled: !isFormValid,
-          isLoading: (isFormValid && !requestPayload) || isLoading,
-        }}
-      >
-        {stringGetter({ key: STRING_KEYS.WITHDRAW })}
-      </Button>
+      {!canAccountTrade ? (
+        <OnboardingTriggerButton size={ButtonSize.Base} />
+      ) : (
+        <Button
+          action={ButtonAction.Primary}
+          type={ButtonType.Submit}
+          state={{
+            isDisabled: !isFormValid,
+            isLoading: (isFormValid && !requestPayload) || isLoading,
+          }}
+        >
+          {stringGetter({ key: STRING_KEYS.WITHDRAW })}
+        </Button>
+      )}
     </Styled.WithReceipt>
   );
 };
@@ -223,8 +230,7 @@ Styled.WithReceipt = styled(WithReceipt)`
 
 Styled.CollapsibleDetails = styled.div`
   ${layoutMixins.column}
-  padding: 0.375rem 1rem 0.5rem;
-  gap: 0.5rem;
+  padding: var(--form-input-paddingY) var(--form-input-paddingX);
 `;
 
 Styled.Details = styled(Details)`

src/views/forms/TradeForm.tsx

@@ -460,10 +460,10 @@ Styled.ButtonRow = styled.div`
 `;
 
 Styled.Footer = styled.footer`
-  ${layoutMixins.stickyFooter}
+  ${formMixins.footer}
+  --stickyFooterBackdrop-outsetY: var(--tradeBox-content-paddingBottom);
   backdrop-filter: none;
 
   ${layoutMixins.column}
   ${layoutMixins.noPointerEvents}
-  margin-top: auto;
 `;

src/views/forms/TradeForm/TradeSideToggle.tsx

@@ -56,7 +56,8 @@ const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>`
   position: relative;
 
   > button {
-    --button-border: none;
+    --button-toggle-on-border: none;
+    --button-toggle-off-border: none;
     --button-toggle-off-backgroundColor: transparent;
     --button-toggle-on-backgroundColor: transparent;
     --button-toggle-on-textColor: var(--toggle-color);

src/views/forms/TransferForm.tsx

@@ -300,7 +300,7 @@ export const TransferForm = ({
       }}
     >
       <Styled.Row>
-        <Styled.FormInput
+        <FormInput
           id="destination"
           onInput={(e: SyntheticInputEvent) => onChangeAddress(e.target?.value)}
           label={
@@ -353,8 +353,8 @@ export const TransferForm = ({
         ))}
       </Styled.SelectMenu>
 
-      <WithDetailsReceipt side="bottom" detailItems={amountDetailItems}>
-        <Styled.FormInput
+      <Styled.WithDetailsReceipt side="bottom" detailItems={amountDetailItems}>
+        <FormInput
           label={stringGetter({ key: STRING_KEYS.AMOUNT })}
           type={InputType.Number}
           onChange={({ floatValue }: NumberFormatValues) => onChangeAmount(floatValue)}
@@ -371,7 +371,7 @@ export const TransferForm = ({
           }
           disabled={isLoading}
         />
-      </WithDetailsReceipt>
+      </Styled.WithDetailsReceipt>
 
       {showNotEnoughGasWarning && (
         <AlertMessage type={AlertType.Warning}>
@@ -399,17 +399,12 @@ export const TransferForm = ({
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Form = styled.form`
-  ${formMixins.inputsColumn}
-  gap: 1.25rem;
-`;
-
-Styled.FormInput = styled(FormInput)`
-  --form-input-height: 3.5rem;
+  ${formMixins.transfersForm}
 `;
 
 Styled.Footer = styled.footer`
-  ${layoutMixins.stickyFooter}
-  margin-top: auto;
+  ${formMixins.footer}
+  --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom);
 `;
 
 Styled.Row = styled.div`
@@ -419,7 +414,6 @@ Styled.Row = styled.div`
 
 Styled.SelectMenu = styled(SelectMenu)`
   ${formMixins.inputSelectMenu}
-  --form-input-height: 3.5rem;
 `;
 
 Styled.SelectItem = styled(SelectItem)`
@@ -430,6 +424,10 @@ Styled.NetworkSelectMenu = styled(Styled.SelectMenu)`
   pointer-events: none;
 `;
 
+Styled.WithDetailsReceipt = styled(WithDetailsReceipt)`
+  --withReceipt-backgroundColor: var(--color-layer-2);
+`;
+
 Styled.InlineRow = styled.span`
   ${layoutMixins.inlineRow}
   height: 100%;

src/views/forms/TransferForm/TransferButtonAndReceipt.tsx

@@ -1,4 +1,5 @@
 import { shallowEqual, useSelector } from 'react-redux';
+import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
@@ -12,9 +13,9 @@ import { DiffOutput } from '@/components/DiffOutput';
 import { Output, OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
-import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
 
+import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getSubaccount } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
@@ -102,7 +103,7 @@ export const TransferButtonAndReceipt = ({
   ].filter(isTruthy);
 
   return (
-    <WithDetailsReceipt detailItems={transferDetailItems}>
+    <Styled.WithDetailsReceipt detailItems={transferDetailItems}>
       {!canAccountTrade ? (
         <OnboardingTriggerButton size={ButtonSize.Base} />
       ) : (
@@ -114,6 +115,16 @@ export const TransferButtonAndReceipt = ({
           {stringGetter({ key: STRING_KEYS.CONFIRM_TRANSFER })}
         </Button>
       )}
-    </WithDetailsReceipt>
+    </Styled.WithDetailsReceipt>
   );
 };
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.WithDetailsReceipt = styled(WithDetailsReceipt)`
+  --withReceipt-backgroundColor: var(--color-layer-2);
+
+  dl {
+    padding: var(--form-input-paddingY) var(--form-input-paddingX);
+  }
+`;