diff --git a/src/components/SelectMenu.tsx b/src/components/SelectMenu.tsx index d6125ef23..ae0546071 100644 --- 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 index 8f89bdf92..2e1dc8799 100644 --- 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 index 857304fe2..f571bb05e 100644 --- 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 index 7d080493c..a48369bfd 100644 --- 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 index 91ccfd803..6c8dde658 100644 --- 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 index 29ad6c519..30b728045 100644 --- 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 index 9a005337a..b24b50a5b 100644 --- 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 index 50a9f004c..8db4851d9 100644 --- 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 index 44b211946..081cda8f8 100644 --- 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 index 2614beb07..aa57d2d6a 100644 --- 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 index 25700dea1..0a316dc2b 100644 --- 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 index 630db13e9..2d0ee82f2 100644 --- 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 index 6068c1672..870a1a2f2 100644 --- 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 index a8406c429..a1033a316 100644 --- 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 index 5e0ee1190..7dd963e16 100644 --- 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; diff --git a/src/views/forms/TradeForm/MarginModeSelector.tsx b/src/views/forms/TradeForm/MarginModeSelector.tsx index 529e9800f..0e84260c8 100644 --- a/src/views/forms/TradeForm/MarginModeSelector.tsx +++ b/src/views/forms/TradeForm/MarginModeSelector.tsx @@ -9,6 +9,8 @@ import { STRING_KEYS } from '@/constants/localization'; import { useStringGetter } from '@/hooks/useStringGetter'; +import { layoutMixins } from '@/styles/layoutMixins'; + import { Button } from '@/components/Button'; import { Icon, IconName } from '@/components/Icon'; import { WithTooltip } from '@/components/WithTooltip'; @@ -42,13 +44,13 @@ export const MarginModeSelector = ({ }, [dispatch, openInTradeBox]); return needsMarginMode ? ( - <Button onClick={handleClick} className={className}> + <$Button onClick={handleClick} className={className}> {marginMode && stringGetter({ key: MARGIN_MODE_STRINGS[marginMode.rawValue], })} <Icon iconName={IconName.Triangle} tw="ml-[0.5ch] rotate-[0.75turn] text-[0.4375rem]" /> - </Button> + </$Button> ) : ( <$WarningTooltip className={className} @@ -64,16 +66,21 @@ export const MarginModeSelector = ({ </div> } > - <Button disabled> + <$Button disabled> {marginMode && stringGetter({ key: MARGIN_MODE_STRINGS[marginMode.rawValue], })} - </Button> + </$Button> </$WarningTooltip> ); }; const $WarningTooltip = styled(WithTooltip)` --tooltip-backgroundColor: var(--color-gradient-warning); border: 1px solid ${({ theme }) => theme.warning}30; + gap: 0.5rem; +`; + +const $Button = styled(Button)` + ${layoutMixins.textTruncate} `; diff --git a/src/views/forms/TradeForm/MarketLeverageInput.tsx b/src/views/forms/TradeForm/MarketLeverageInput.tsx index ceffd2718..ee29bb98d 100644 --- a/src/views/forms/TradeForm/MarketLeverageInput.tsx +++ b/src/views/forms/TradeForm/MarketLeverageInput.tsx @@ -132,7 +132,7 @@ export const MarketLeverageInput = ({ <$WithLabel key="leverage" label={ - <> + <div tw="flex gap-0.5"> <WithTooltip tooltip="leverage" side="right"> {stringGetter({ key: STRING_KEYS.LEVERAGE })} </WithTooltip> @@ -140,7 +140,7 @@ export const MarketLeverageInput = ({ <div onClick={onLeverageSideToggle} tw="cursor-pointer"> <PositionSideTag positionSide={leveragePosition} /> </div> - </> + </div> } > <LeverageSlider diff --git a/src/views/forms/TradeForm/TradeSideToggle.tsx b/src/views/forms/TradeForm/TradeSideToggle.tsx index 44481a9ca..ff10d43e5 100644 --- a/src/views/forms/TradeForm/TradeSideToggle.tsx +++ b/src/views/forms/TradeForm/TradeSideToggle.tsx @@ -10,6 +10,8 @@ import { STRING_KEYS } from '@/constants/localization'; import { useStringGetter } from '@/hooks/useStringGetter'; +import { layoutMixins } from '@/styles/layoutMixins'; + import { ToggleGroup } from '@/components/ToggleGroup'; import { useAppSelector } from '@/state/appTypes'; @@ -65,6 +67,7 @@ const $ToggleContainer = styled(ToggleGroup)<ToggleContainerStyleProps>` position: relative; > button { + ${layoutMixins.textTruncate} --button-toggle-on-border: none; --button-toggle-off-border: none; --button-toggle-off-backgroundColor: transparent;