Merge remote-tracking branch 'origin/main' into tu/vault-e2e-1

dydxprotocol · Sep 26, 2024 · 9510741 · 9510741
2 parents 7f49616 + 6a43b3e
commit 9510741
Show file tree

Hide file tree

Showing 18 changed files with 111 additions and 65 deletions.
diff --git a/src/components/SelectMenu.tsx b/src/components/SelectMenu.tsx
@@ -15,6 +15,7 @@ import {
 import styled from 'styled-components';
 
 import { formMixins } from '@/styles/formMixins';
+import { layoutMixins } from '@/styles/layoutMixins';
 import { popoverMixins } from '@/styles/popoverMixins';
 
 import { WithLabel } from '@/components/WithLabel';
@@ -112,4 +113,8 @@ const $ItemIndicator = styled(ItemIndicator)`
 const $WithLabel = styled(WithLabel)`
   ${formMixins.inputLabel}
   border-radius: 0;
+
+  > * {
+    ${layoutMixins.textTruncate}
+  }
 `;
diff --git a/src/components/WithLabel.tsx b/src/components/WithLabel.tsx
@@ -1,3 +1,7 @@
+import styled from 'styled-components';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
 type ElementProps = {
   label?: React.ReactNode;
   children?: React.ReactNode;
@@ -9,10 +13,16 @@ type StyleProps = {
 };
 
 export const WithLabel = ({ label, inputID, children, className }: ElementProps & StyleProps) => (
-  <div className={className} tw="grid gap-0.5 [--label-textColor:--color-text-1]">
+  <$Container className={className} tw="grid gap-0.5 [--label-textColor:--color-text-1]">
     <label htmlFor={inputID} tw="inlineRow text-[color:--label-textColor] font-mini-book">
       {label}
     </label>
     {children}
-  </div>
+  </$Container>
 );
+
+const $Container = styled.div`
+  label {
+    ${layoutMixins.textTruncate}
+  }
+`;
diff --git a/src/pages/trade/Trade.tsx b/src/pages/trade/Trade.tsx
@@ -162,7 +162,8 @@ const $TradeLayout = styled.article<{
   }
 
   > * {
-    display: grid;
+    display: flex;
+    flex-direction: column;
   }
 
   > section {

diff --git a/src/styles/layoutMixins.ts b/src/styles/layoutMixins.ts
@@ -361,6 +361,12 @@ export const layoutMixins = {
     }
   `,
 
+  // a flex child that grows to fill any remaining space, but also shrinks past its min-content if necessary
+  flexExpandToSpace: css`
+    flex: 1;
+    min-width: 1px;
+  `,
+
   stack: css`
     display: grid;
     grid-template-areas: 'stack';

diff --git a/src/views/AccountInfo.tsx b/src/views/AccountInfo.tsx
@@ -53,6 +53,7 @@ const $DisconnectedAccountInfoContainer = styled.div`
   gap: 0.5em;
 
   p {
+    ${layoutMixins.textLineClamp}
     font: var(--font-small-book);
     max-width: 14.5rem;
   }

diff --git a/src/views/TradeBox.tsx b/src/views/TradeBox.tsx
@@ -76,9 +76,14 @@ const $TradeBox = styled.section`
   --tradeBox-content-paddingLeft: 1rem;
 
   ${layoutMixins.container}
+  display: flex;
+  flex: 1;
+  min-height: 1px;
   z-index: 0;
 
-  ${layoutMixins.stack}
+  & > * {
+    width: 100%;
+  }
 `;
 
 const $Dialog = styled(Dialog)`

diff --git a/src/views/TradeBoxOrderView.tsx b/src/views/TradeBoxOrderView.tsx
@@ -6,7 +6,6 @@ import { TradeInputField } from '@/constants/abacus';
 import { OnboardingState } from '@/constants/account';
 import { TradeTypes } from '@/constants/trade';
 
-import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Tabs } from '@/components/Tabs';
@@ -77,27 +76,24 @@ const $Tabs = styled(Tabs)`
   }
 ` as typeof Tabs;
 
+const $TopActionsRow = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+
+  > * {
+    ${layoutMixins.flexExpandToSpace}
+  }
+`;
+
 const $MarginAndLeverageButtons = styled.div`
-  ${layoutMixins.inlineRow}
+  display: flex;
   gap: 0.5rem;
   margin-right: 0.5rem;
 
   abbr,
   button {
-    width: 100%;
+    ${layoutMixins.flexExpandToSpace}
     height: 2.5rem;
   }
 `;
-
-const $TopActionsRow = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-
-  padding-left: 1rem;
-  padding-right: 1rem;
-
-  @media ${breakpoints.tablet} {
-    grid-auto-columns: var(--orderbox-column-width) 1fr;
-    gap: var(--form-input-gap);
-  }
-`;
diff --git a/src/views/dialogs/OnboardingDialog.tsx b/src/views/dialogs/OnboardingDialog.tsx
@@ -68,7 +68,7 @@ export const OnboardingDialog = ({ setIsOpen }: DialogProps<OnboardingDialogProp
         {
           [OnboardingSteps.ChooseWallet]: {
             title: stringGetter({ key: STRING_KEYS.CONNECT_YOUR_WALLET }),
-            description: 'Select your wallet from these supported options.',
+            description: stringGetter({ key: STRING_KEYS.CONNECT_YOUR_WALLET_SUBTITLE }),
             children: (
               <$Content>
                 <ChooseWallet onChooseWallet={onChooseWallet} />

diff --git a/src/views/dialogs/OnboardingDialog/ChooseWallet.tsx b/src/views/dialogs/OnboardingDialog/ChooseWallet.tsx
@@ -60,9 +60,11 @@ export const ChooseWallet = ({
             slotLeft={<WalletIcon wallet={wallet} size="1.5em" />}
             size={ButtonSize.Small}
           >
-            {wallet.connectorType === ConnectorType.Injected
-              ? wallet.name
-              : stringGetter({ key: wallets[wallet.name].stringKey })}
+            <$WalletName>
+              {wallet.connectorType === ConnectorType.Injected
+                ? wallet.name
+                : stringGetter({ key: wallets[wallet.name].stringKey })}
+            </$WalletName>
           </$WalletButton>
         ))}
       </$Wallets>
@@ -113,6 +115,11 @@ const $WalletButton = styled(Button)`
     }
   }
 `;
+
+const $WalletName = styled.div`
+  ${layoutMixins.textTruncate}
+`;
+
 const $Footer = styled.footer`
   ${layoutMixins.spacedRow}
   justify-content: center;

diff --git a/src/views/dialogs/TradeDialog.tsx b/src/views/dialogs/TradeDialog.tsx
@@ -9,6 +9,8 @@ import { MobilePlaceOrderSteps } from '@/constants/trade';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
+import { layoutMixins } from '@/styles/layoutMixins';
+
 import { Dialog, DialogPlacement } from '@/components/Dialog';
 import { GreenCheckCircle } from '@/components/GreenCheckCircle';
 import { Icon, IconName } from '@/components/Icon';
@@ -42,14 +44,14 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: DialogProps<Trad
       {...{
         [MobilePlaceOrderSteps.EditOrder]: {
           title: (
-            <div tw="grid grid-cols-[1fr_2fr] gap-0.5">
-              <div tw="flex gap-0.5">
+            <$TopActionsRow tw="flex gap-0.5">
+              <$MarginAndLeverageButtons tw="flex gap-0.5">
                 <MarginModeSelector openInTradeBox={false} tw="flex-1" />
                 <$TargetLeverageButton />
-              </div>
+              </$MarginAndLeverageButtons>
 
               <TradeSideToggle />
-            </div>
+            </$TopActionsRow>
           ),
         },
         [MobilePlaceOrderSteps.PreviewOrder]: {
@@ -102,6 +104,20 @@ const $Dialog = styled(Dialog)<{ currentStep: MobilePlaceOrderSteps }>`
       --dialog-icon-size: 2.5rem;
     `}
 `;
+
+const $TopActionsRow = styled.div`
+  > * {
+    ${layoutMixins.flexExpandToSpace}
+  }
+`;
+
+const $MarginAndLeverageButtons = styled.div`
+  abbr,
+  button {
+    ${layoutMixins.flexExpandToSpace}
+  }
+`;
+
 const $TargetLeverageButton = styled(TargetLeverageButton)`
   flex: 1;
 

diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx
@@ -209,10 +209,13 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
       // worth investigating a better fix on abacus
       if (connectedWallet?.name === WalletType.Keplr && nobleAddress) {
         abacusStateManager.setTransfersSourceAddress(nobleAddress);
-      } else if (evmAddress) {
-        abacusStateManager.setTransfersSourceAddress(evmAddress);
+        // put sol first. some users with phantom wallet have previously connected with evm
+        // so they will have both sol and evm addresses. we assume the phantom wallet
+        // is connected with a sol address, not evm.
       } else if (solAddress) {
         abacusStateManager.setTransfersSourceAddress(solAddress);
+      } else if (evmAddress) {
+        abacusStateManager.setTransfersSourceAddress(evmAddress);
       }
       abacusStateManager.setTransferValue({
         field: TransferInputField.type,
@@ -468,7 +471,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         gasFee: summary?.gasFee || undefined,
         bridgeFee: summary?.bridgeFee || undefined,
         exchangeRate: summary?.exchangeRate || undefined,
-        estimatedRouteDuration: summary?.estimatedRouteDuration || undefined,
+        estimatedRouteDuration: summary?.estimatedRouteDurationSeconds || undefined,
         toAmount: summary?.toAmount || undefined,
         toAmountMin: summary?.toAmountMin || undefined,
       });
@@ -505,7 +508,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         gasFee: summary?.gasFee ?? undefined,
         bridgeFee: summary?.bridgeFee ?? undefined,
         exchangeRate: summary?.exchangeRate ?? undefined,
-        estimatedRouteDuration: summary?.estimatedRouteDuration ?? undefined,
+        estimatedRouteDuration: summary?.estimatedRouteDurationSeconds ?? undefined,
         toAmount: summary?.toAmount ?? undefined,
         toAmountMin: summary?.toAmountMin ?? undefined,
         depositCTAString,

diff --git a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
@@ -7,7 +7,6 @@ import { TransferInputTokenResource } from '@/constants/abacus';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
-import { SKIP_EST_TIME_DEFAULT_MINUTES } from '@/constants/skip';
 import { WalletType } from '@/constants/wallets';
 
 import { ConnectionErrorType, useApiState } from '@/hooks/useApiState';
@@ -111,13 +110,6 @@ export const DepositButtonAndReceipt = ({
 
   const showExchangeRate = typeof summary?.exchangeRate === 'number';
   const showMinDepositAmount = typeof summary?.toAmountMin === 'number';
-  const fallbackRouteDuration = stringGetter({
-    key: STRING_KEYS.X_MINUTES_LOWERCASED,
-    params: {
-      X: `< ${SKIP_EST_TIME_DEFAULT_MINUTES}`,
-    },
-  });
-
   const submitButtonReceipt = [
     {
       key: 'expected-deposit-amount',
@@ -222,23 +214,23 @@ export const DepositButtonAndReceipt = ({
       ),
     },
     {
-      key: 'estimatedRouteDuration',
+      key: 'estimatedRouteDurationSeconds',
       label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
       value: (
         <Output
           type={OutputType.Text}
           value={
-            summary != null && typeof summary.estimatedRouteDuration === 'number'
+            typeof summary?.estimatedRouteDurationSeconds === 'number'
               ? stringGetter({
                   key: STRING_KEYS.X_MINUTES_LOWERCASED,
                   params: {
                     X:
-                      summary.estimatedRouteDuration < 60
+                      summary.estimatedRouteDurationSeconds < 60
                         ? '< 1'
-                        : Math.round(summary.estimatedRouteDuration / 60),
+                        : Math.round(summary.estimatedRouteDurationSeconds / 60),
                   },
                 })
-              : fallbackRouteDuration
+              : undefined
           }
         />
       ),

diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx
@@ -255,7 +255,7 @@ export const WithdrawForm = () => {
               gasFee: summary?.gasFee || undefined,
               bridgeFee: summary?.bridgeFee || undefined,
               exchangeRate: summary?.exchangeRate || undefined,
-              estimatedRouteDuration: summary?.estimatedRouteDuration || undefined,
+              estimatedRouteDuration: summary?.estimatedRouteDurationSeconds || undefined,
               toAmount: summary?.toAmount || undefined,
               toAmountMin: summary?.toAmountMin || undefined,
               txHash,

diff --git a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx
@@ -8,7 +8,6 @@ import { TransferInputTokenResource } from '@/constants/abacus';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
-import { SKIP_EST_TIME_DEFAULT_MINUTES } from '@/constants/skip';
 
 import { ConnectionErrorType, useApiState } from '@/hooks/useApiState';
 import { useStringGetter } from '@/hooks/useStringGetter';
@@ -68,12 +67,6 @@ export const WithdrawButtonAndReceipt = ({
 
   const showExchangeRate =
     !exchange || (withdrawToken && typeof summary?.exchangeRate === 'number' && !exchange);
-  const fallbackRouteDuration = stringGetter({
-    key: STRING_KEYS.X_MINUTES_LOWERCASED,
-    params: {
-      X: `< ${SKIP_EST_TIME_DEFAULT_MINUTES}`,
-    },
-  });
 
   const submitButtonReceipt = [
     {
@@ -136,22 +129,20 @@ export const WithdrawButtonAndReceipt = ({
       key: 'estimated-route-duration',
       label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
       value:
-        summary != null && typeof summary.estimatedRouteDuration === 'number' ? (
+        typeof summary?.estimatedRouteDurationSeconds === 'number' ? (
           <Output
             type={OutputType.Text}
             value={stringGetter({
               key: STRING_KEYS.X_MINUTES_LOWERCASED,
               params: {
                 X:
-                  summary.estimatedRouteDuration < 60
+                  summary.estimatedRouteDurationSeconds < 60
                     ? '< 1'
-                    : Math.round(summary.estimatedRouteDuration / 60),
+                    : Math.round(summary.estimatedRouteDurationSeconds / 60),
               },
             })}
           />
-        ) : (
-          fallbackRouteDuration
-        ),
+        ) : undefined,
     },
     {
       key: 'leverage',

diff --git a/src/views/forms/TradeForm.tsx b/src/views/forms/TradeForm.tsx
@@ -405,10 +405,13 @@ const $TopActionsRow = styled.div`
     gap: var(--orderbox-gap);
   }
 `;
+
 const $OrderbookButton = styled(ToggleButton)`
   --button-toggle-off-textColor: var(--color-text-1);
   --button-toggle-off-backgroundColor: transparent;
 
+  ${layoutMixins.flexExpandToSpace}
+
   > svg {
     color: var(--color-text-0);
     height: 0.875em;