diff --git a/package.json b/package.json index 06cabea..b114bc8 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@cosmjs/tendermint-rpc": "^0.31.0", "@dydxprotocol/v4-abacus": "^1.0.26", "@dydxprotocol/v4-client-js": "^1.0.0", - "@dydxprotocol/v4-localization": "^1.0.5", + "@dydxprotocol/v4-localization": "^1.0.6", "@ethersproject/providers": "^5.7.2", "@js-joda/core": "^5.5.3", "@radix-ui/react-checkbox": "^1.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3225715..4afd17b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,8 +29,8 @@ dependencies: specifier: ^1.0.0 version: 1.0.0 '@dydxprotocol/v4-localization': - specifier: ^1.0.5 - version: 1.0.5 + specifier: ^1.0.6 + version: 1.0.6 '@ethersproject/providers': specifier: ^5.7.2 version: 5.7.2 @@ -1016,8 +1016,8 @@ packages: - utf-8-validate dev: false - /@dydxprotocol/v4-localization@1.0.5: - resolution: {integrity: sha512-zZm3GFp/ORz9YjigQFVBlcWmaxYY+XEdIw8AWN5nEbsuiA2Jay+/OA7lO9+nV1J1p1T+TgLo9iczIHJsAo3IsA==} + /@dydxprotocol/v4-localization@1.0.6: + resolution: {integrity: sha512-nv/QBKKwixBmhjYmRbA4kSMFznjzYk0MDW8Lq/ht2AUGDnUiBDztxFgYDlxzbf14+1w967NIP0N77GaAZKiFyg==} dev: false /@dydxprotocol/v4-proto@0.4.1: diff --git a/src/components/ComboboxDialogMenu.tsx b/src/components/ComboboxDialogMenu.tsx index 53834f1..cba1a4e 100644 --- a/src/components/ComboboxDialogMenu.tsx +++ b/src/components/ComboboxDialogMenu.tsx @@ -122,6 +122,7 @@ Styled.Dialog = styled(Dialog)` /* Net 0 sticky top inset (let stickyArea1 header stick to top) */ --stickyArea0-topGap: calc(-1 * var(--stickyArea0-topHeight)); + overflow-x: clip; } `; diff --git a/src/components/ComboboxMenu.tsx b/src/components/ComboboxMenu.tsx index 8927397..8009145 100644 --- a/src/components/ComboboxMenu.tsx +++ b/src/components/ComboboxMenu.tsx @@ -254,6 +254,7 @@ Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLa > [cmdk-group-heading] { ${layoutMixins.stickyHeader} + z-index: 2; } > [cmdk-group-items] { diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx index 4c0cf53..bff3368 100644 --- a/src/components/CopyButton.tsx +++ b/src/components/CopyButton.tsx @@ -10,6 +10,7 @@ import { layoutMixins } from '@/styles/layoutMixins'; import { Button, ButtonProps } from './Button'; import { Icon, IconName } from './Icon'; import { IconButton } from './IconButton'; +import { WithTooltip } from './WithTooltip'; export type CopyButtonProps = { value?: string; @@ -40,13 +41,17 @@ export const CopyButton = ({ ) : buttonType === 'icon' ? ( - + + + ) : ( )} - + } > @@ -134,7 +134,7 @@ Styled.Title = styled.h3` } `; -Styled.ReceiveAndTransferButtons = styled(Toolbar)` +Styled.ActionButtons = styled(Toolbar)` ${layoutMixins.inlineRow} --stickyArea-topHeight: max-content; gap: 0.5rem; diff --git a/src/styles/formMixins.ts b/src/styles/formMixins.ts index 5e7b2ff..3345b14 100644 --- a/src/styles/formMixins.ts +++ b/src/styles/formMixins.ts @@ -151,6 +151,8 @@ export const formMixins: Record< --form-input-paddingY: 0.5rem; --form-input-paddingX: 1rem; + height: 100%; + label { --label-textColor: var(--color-text-0); } diff --git a/src/views/dialogs/DepositDialog/DepositDialogContent.tsx b/src/views/dialogs/DepositDialog/DepositDialogContent.tsx index 68367e6..ce51e4b 100644 --- a/src/views/dialogs/DepositDialog/DepositDialogContent.tsx +++ b/src/views/dialogs/DepositDialog/DepositDialogContent.tsx @@ -1,12 +1,15 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import styled, { type AnyStyledComponent } from 'styled-components'; +import { TransferInputField, TransferType } from '@/constants/abacus'; 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'; + type ElementProps = { onDeposit?: () => void; }; @@ -14,6 +17,20 @@ type ElementProps = { export const DepositDialogContent = ({ onDeposit }: ElementProps) => { const [showFaucet, setShowFaucet] = useState(!isMainnet); + useEffect(() => { + abacusStateManager.setTransferValue({ + field: TransferInputField.type, + value: TransferType.deposit.rawValue, + }); + + return () => { + abacusStateManager.setTransferValue({ + field: TransferInputField.type, + value: null, + }); + }; + }, []); + return ( {isMainnet || !showFaucet ? ( diff --git a/src/views/dialogs/ManageFundsDialog.tsx b/src/views/dialogs/ManageFundsDialog.tsx index 862aa5d..3db6519 100644 --- a/src/views/dialogs/ManageFundsDialog.tsx +++ b/src/views/dialogs/ManageFundsDialog.tsx @@ -18,13 +18,14 @@ import abacusStateManager from '@/lib/abacus'; import { DepositDialogContent } from './DepositDialog/DepositDialogContent'; type ElementProps = { + selectedTransferType?: string; setIsOpen?: (open: boolean) => void; }; -export const ManageFundsDialog = ({ setIsOpen }: ElementProps) => { +export const ManageFundsDialog = ({ setIsOpen, selectedTransferType }: ElementProps) => { const stringGetter = useStringGetter(); const { type } = useSelector(getTransferInputs, shallowEqual) || {}; - const currentType = type?.rawValue ?? TransferType.deposit.rawValue; + const currentType = type?.rawValue ?? selectedTransferType ?? TransferType.deposit.rawValue; const closeDialog = () => setIsOpen?.(false); diff --git a/src/views/dialogs/OnboardingTriggerButton.tsx b/src/views/dialogs/OnboardingTriggerButton.tsx index 7a107ef..42e260b 100644 --- a/src/views/dialogs/OnboardingTriggerButton.tsx +++ b/src/views/dialogs/OnboardingTriggerButton.tsx @@ -8,7 +8,7 @@ import { STRING_KEYS } from '@/constants/localization'; import { Button } from '@/components/Button'; -import { openDialog } from '@/state/dialogs'; +import { forceOpenDialog } from '@/state/dialogs'; import { getOnboardingState } from '@/state/accountSelectors'; import { OnboardingState } from '@/constants/account'; @@ -26,7 +26,7 @@ export const OnboardingTriggerButton = ({ size = ButtonSize.Small }: StyleProps) + {!canAccountTrade ? ( + + ) : ( + + )} ); diff --git a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx index 27844e5..6b44ef4 100644 --- a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx +++ b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx @@ -9,6 +9,7 @@ import { TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade'; import { useStringGetter, useTokenConfigs } from '@/hooks'; +import { AssetIcon } from '@/components/AssetIcon'; import { Button } from '@/components/Button'; import { Output, OutputType, ShowSign } from '@/components/Output'; import { WithDetailsReceipt } from '@/components/WithDetailsReceipt'; @@ -77,7 +78,11 @@ export const PlaceOrderButtonAndReceipt = ({ }, { key: 'fee', - label: stringGetter({ key: STRING_KEYS.FEE }), + label: ( + + {stringGetter({ key: STRING_KEYS.FEE })} + + ), value: , }, { @@ -85,7 +90,7 @@ export const PlaceOrderButtonAndReceipt = ({ label: ( <> {stringGetter({ key: STRING_KEYS.MAXIMUM_REWARDS })} - {/* */} + ), value: ( diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index 75369c0..407e9c1 100644 --- a/src/views/forms/TransferForm.tsx +++ b/src/views/forms/TransferForm.tsx @@ -119,6 +119,10 @@ export const TransferForm = ({ return () => { abacusStateManager.clearTransferInputValues(); + abacusStateManager.setTransferValue({ + field: TransferInputField.type, + value: null, + }); }; }, []); diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx index e5514a7..b001fc5 100644 --- a/src/views/menus/AccountMenu.tsx +++ b/src/views/menus/AccountMenu.tsx @@ -1,12 +1,12 @@ import { memo } from 'react'; -import styled, { AnyStyledComponent } from 'styled-components'; +import styled, { AnyStyledComponent, css } from 'styled-components'; import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import type { Dispatch } from '@reduxjs/toolkit'; import { OnboardingState } from '@/constants/account'; import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons'; import { DialogTypes } from '@/constants/dialogs'; -import { STRING_KEYS, TOOLTIP_STRING_KEYS } from '@/constants/localization'; +import { STRING_KEYS, StringGetterFunction, TOOLTIP_STRING_KEYS } from '@/constants/localization'; import { isMainnet } from '@/constants/networks'; import { DydxChainAsset, wallets } from '@/constants/wallets'; @@ -40,7 +40,6 @@ import { layoutMixins } from '@/styles/layoutMixins'; import { headerMixins } from '@/styles/headerMixins'; import { MustBigNumber } from '@/lib/numbers'; - export const AccountMenu = () => { const stringGetter = useStringGetter(); const { mintscanBase } = useURLConfigs(); @@ -91,13 +90,15 @@ export const AccountMenu = () => { {truncateAddress(dydxAddress)} - + + + {walletType && ( @@ -127,6 +128,7 @@ export const AccountMenu = () => { asset={DydxChainAsset.CHAINTOKEN} dispatch={dispatch} hasBalance={nativeTokenBalance.gt(0)} + stringGetter={stringGetter} />
@@ -148,6 +150,7 @@ export const AccountMenu = () => { asset={DydxChainAsset.USDC} dispatch={dispatch} hasBalance={MustBigNumber(usdcBalance).gt(0)} + stringGetter={stringGetter} withOnboarding />
@@ -167,6 +170,12 @@ export const AccountMenu = () => { onSelect: onRecoverKeys, separator: true, }, + { + value: 'Preferences', + icon: , + label: stringGetter({ key: STRING_KEYS.PREFERENCES }), + onSelect: () => dispatch(openDialog({ type: DialogTypes.Preferences })), + }, ...(onboardingState === OnboardingState.AccountConnected && hdKey ? [ !isMainnet && { @@ -184,12 +193,6 @@ export const AccountMenu = () => { }, ].filter(isTruthy) : []), - { - value: 'Preferences', - icon: , - label: stringGetter({ key: STRING_KEYS.PREFERENCES }), - onSelect: () => dispatch(openDialog({ type: DialogTypes.Preferences })), - }, { value: 'Disconnect', icon: , @@ -217,38 +220,48 @@ const AssetActions = memo( dispatch, withOnboarding, hasBalance, + stringGetter, }: { asset: DydxChainAsset; dispatch: Dispatch; withOnboarding?: boolean; hasBalance?: boolean; + stringGetter: StringGetterFunction; }) => ( {[ + withOnboarding && { + dialogType: DialogTypes.Deposit, + iconName: IconName.Deposit, + tooltipStringKey: STRING_KEYS.DEPOSIT, + }, withOnboarding && hasBalance && { dialogType: DialogTypes.Withdraw, iconName: IconName.Withdraw, + tooltipStringKey: STRING_KEYS.WITHDRAW, }, - withOnboarding && { - dialogType: DialogTypes.Deposit, - iconName: IconName.Deposit, - }, hasBalance && { dialogType: DialogTypes.Transfer, dialogProps: { selectedAsset: asset }, iconName: IconName.Send, + tooltipStringKey: STRING_KEYS.TRANSFER, }, ] .filter(isTruthy) - .map(({ iconName, dialogType, dialogProps }) => ( - dispatch(openDialog({ type: dialogType, dialogProps }))} - /> + .map(({ iconName, tooltipStringKey, dialogType, dialogProps }) => ( + + dispatch(openDialog({ type: dialogType, dialogProps }))} + /> + ))} ) @@ -370,12 +383,22 @@ Styled.ConnectToChain = styled(Styled.Column)` } `; -Styled.IconButton = styled(IconButton)` +Styled.IconButton = styled(IconButton)<{ iconName: IconName }>` --button-padding: 0 0.25rem; --button-border: solid var(--border-width) var(--color-layer-6); + + ${({ iconName }) => + [IconName.Withdraw, IconName.Deposit].includes(iconName) && + css` + --button-icon-size: 1.375em; + `} `; Styled.CopyButton = styled(CopyButton)` --button-padding: 0 0.25rem; --button-border: solid var(--border-width) var(--color-layer-6); `; + +Styled.WithTooltip = styled(WithTooltip)` + --tooltip-backgroundColor: var(--color-layer-5); +`; diff --git a/src/views/tables/MarketsTable.tsx b/src/views/tables/MarketsTable.tsx index 807fa45..014a963 100644 --- a/src/views/tables/MarketsTable.tsx +++ b/src/views/tables/MarketsTable.tsx @@ -67,7 +67,8 @@ export const MarketsTable = ({ className }: { className?: string }) => { )} @@ -108,6 +109,7 @@ export const MarketsTable = ({ className }: { className?: string }) => { )} @@ -128,6 +130,7 @@ export const MarketsTable = ({ className }: { className?: string }) => { ), @@ -239,6 +242,11 @@ Styled.TabletPriceChange = styled(Styled.InlineRow)` font: var(--font-small-book); `; -Styled.Output = styled(Output)<{ isNegative?: boolean }>` - color: ${({ isNegative }) => (isNegative ? `var(--color-negative)` : `var(--color-positive)`)}; +Styled.Output = styled(Output)<{ isNegative?: boolean; isPositive?: boolean }>` + color: ${({ isNegative, isPositive }) => + isNegative + ? `var(--color-negative)` + : isPositive + ? `var(--color-positive)` + : `var(--color-text-1)`}; `;