diff --git a/src/constants/routes.ts b/src/constants/routes.ts index bd8642a..a7f415d 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -5,7 +5,7 @@ export enum AppRoute { Profile = '/profile', Alerts = '/alerts', Settings = '/settings', - Rewards = '/DYDX', + Rewards = '/DV4TNT', } export enum PortfolioRoute { diff --git a/src/constants/wallets.ts b/src/constants/wallets.ts index 6451456..8e5299b 100644 --- a/src/constants/wallets.ts +++ b/src/constants/wallets.ts @@ -377,7 +377,7 @@ export const DYDX_CHAIN_INFO: Parameters[0] = { export enum DydxChainAsset { USDC = 'USDC', - DYDX = 'DYDX', + DYDX = 'Dv4TNT', } export const DYDX_CHAIN_ASSET_COIN_DENOM: Record = { diff --git a/src/pages/rewards/DYDXBalancePanel.tsx b/src/pages/rewards/DYDXBalancePanel.tsx index 7393217..5ebf66b 100644 --- a/src/pages/rewards/DYDXBalancePanel.tsx +++ b/src/pages/rewards/DYDXBalancePanel.tsx @@ -36,8 +36,8 @@ export const DYDXBalancePanel = () => { slotHeader={ - - DYDX + {/* */} + Dv4TNT {!canAccountTrade ? ( @@ -106,7 +106,7 @@ export const DYDXBalancePanel = () => { { key: 'totalBalance', label: 'Total balance', - value: , + value: , }, ]} /> diff --git a/src/styles/headerMixins.ts b/src/styles/headerMixins.ts index 8efef47..4a8da3d 100644 --- a/src/styles/headerMixins.ts +++ b/src/styles/headerMixins.ts @@ -5,7 +5,7 @@ export const headerMixins = { --trigger-backgroundColor: transparent; --trigger-textColor: var(--color-text-0); - --trigger-hover-backgroundColor: var(--color-layer-4); + --trigger-hover-backgroundColor: var(--color-layer-3); --trigger-hover-textColor: var(--color-text-2); --trigger-open-backgroundColor: var(--color-layer-1); diff --git a/src/styles/popoverMixins.ts b/src/styles/popoverMixins.ts index 3f01d3c..47932cf 100644 --- a/src/styles/popoverMixins.ts +++ b/src/styles/popoverMixins.ts @@ -185,6 +185,7 @@ export const popoverMixins = { --item-checked-backgroundColor: var(--color-layer-2); --item-checked-textColor: currentColor; + --item-highlighted-backgroundColor: var(--color-layer-2); --item-highlighted-textColor: var(--color-text-2); --item-radius: 0px; @@ -218,6 +219,7 @@ export const popoverMixins = { &[data-highlighted] // @radix-ui { filter: brightness(1.1); + background-color: var(--item-highlighted-backgroundColor); color: var(--item-highlighted-textColor, var(--trigger-textColor, inherit)) !important; outline: none; } diff --git a/src/views/dialogs/ReceiveDialog.tsx b/src/views/dialogs/ReceiveDialog.tsx index 957bcb6..0f8db5e 100644 --- a/src/views/dialogs/ReceiveDialog.tsx +++ b/src/views/dialogs/ReceiveDialog.tsx @@ -22,14 +22,15 @@ import { truncateAddress } from '@/lib/wallet'; import { OnboardingTriggerButton } from './OnboardingTriggerButton'; type ElementProps = { + selectedAsset?: DydxChainAsset; setIsOpen: (open: boolean) => void; }; -export const ReceiveDialog = ({ setIsOpen }: ElementProps) => { +export const ReceiveDialog = ({ selectedAsset = DydxChainAsset.DYDX, setIsOpen }: ElementProps) => { const stringGetter = useStringGetter(); const { dydxAddress } = useAccounts(); - const [asset, setAsset] = useState(DydxChainAsset.DYDX); + const [asset, setAsset] = useState(selectedAsset); const [copied, setCopied] = useState(false); const onCopy = () => { @@ -52,7 +53,8 @@ export const ReceiveDialog = ({ setIsOpen }: ElementProps) => { value: DydxChainAsset.DYDX, label: ( - DYDX + {/* */} + Dv4TNT ), }, diff --git a/src/views/dialogs/TransferDialog.tsx b/src/views/dialogs/TransferDialog.tsx index 4af8e48..fd0bb70 100644 --- a/src/views/dialogs/TransferDialog.tsx +++ b/src/views/dialogs/TransferDialog.tsx @@ -1,21 +1,23 @@ import styled, { type AnyStyledComponent } from 'styled-components'; import { STRING_KEYS } from '@/constants/localization'; +import { DydxChainAsset } from '@/constants/wallets'; import { useStringGetter } from '@/hooks'; import { Dialog } from '@/components/Dialog'; import { TransferForm } from '@/views/forms/TransferForm'; type ElementProps = { + selectedAsset?: DydxChainAsset; setIsOpen?: (open: boolean) => void; }; -export const TransferDialog = ({ setIsOpen }: ElementProps) => { +export const TransferDialog = ({ selectedAsset, setIsOpen }: ElementProps) => { const stringGetter = useStringGetter(); return ( - setIsOpen?.(false)} /> + setIsOpen?.(false)} /> ); }; diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index 966bea1..2131411 100644 --- a/src/views/forms/TransferForm.tsx +++ b/src/views/forms/TransferForm.tsx @@ -48,6 +48,7 @@ import { MustBigNumber } from '@/lib/numbers'; import { log } from '@/lib/telemetry'; type TransferFormProps = { + selectedAsset?: DydxChainAsset; onDone?: () => void; className?: string; }; @@ -74,7 +75,11 @@ const debouncedEstimateFee = debounce( { trailing: true } ); -export const TransferForm = ({ onDone, className }: TransferFormProps) => { +export const TransferForm = ({ + selectedAsset = DydxChainAsset.DYDX, + onDone, + className, +}: TransferFormProps) => { const stringGetter = useStringGetter(); const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {}; const { dydxAddress } = useAccounts(); @@ -84,7 +89,7 @@ export const TransferForm = ({ onDone, className }: TransferFormProps) => { const { selectedNetwork } = useSelectedNetwork(); // User Input - const [asset, setAsset] = useState(DydxChainAsset.DYDX); + const [asset, setAsset] = useState(selectedAsset); // Form states const [error, setError] = useState(); @@ -214,7 +219,8 @@ export const TransferForm = ({ onDone, className }: TransferFormProps) => { value: DydxChainAsset.DYDX, label: ( - DYDX + {/* */} + Dv4TNT ), }, diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx index a1dc135..cbbfd62 100644 --- a/src/views/menus/AccountMenu.tsx +++ b/src/views/menus/AccountMenu.tsx @@ -1,11 +1,13 @@ +import { memo } from 'react'; import styled, { AnyStyledComponent } 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 { wallets } from '@/constants/wallets'; +import { DydxChainAsset, wallets } from '@/constants/wallets'; import { useAccounts, useBreakpoints, useStringGetter, useAccountBalance } from '@/hooks'; @@ -103,22 +105,28 @@ export const AccountMenu = () => {
- - {stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'Dv4TNT' } })} - {/* */} - - +
+ + {stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'Dv4TNT' } })} + {/* */} + + +
+
- - {stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'USDC' } })} - - - +
+ + {stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'USDC' } })} + + + +
+
@@ -191,6 +199,29 @@ export const AccountMenu = () => { ); }; +const AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => ( + + {[ + // TODO(@rosepuppy): Add withdraw action for USDC + { + dialogType: DialogTypes.Receive, + iconName: IconName.Qr, + }, + { dialogType: DialogTypes.Transfer, iconName: IconName.Send }, + ].map(({ iconName, dialogType }) => ( + + dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } })) + } + /> + ))} + +)); + const Styled: Record = {}; Styled.AccountInfo = styled.div` @@ -204,6 +235,10 @@ Styled.Column = styled.div` ${layoutMixins.column} `; +Styled.InlineRow = styled.div` + ${layoutMixins.inlineRow} +`; + Styled.AddressRow = styled.div` ${layoutMixins.row} @@ -256,7 +291,7 @@ Styled.Balances = styled.div` gap: 2px; > div { - ${layoutMixins.flexColumn} + ${layoutMixins.spacedRow} gap: 0.5rem; padding: 0.5rem 1rem;