LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

rename tokens to dv4tnt, fix header dropdown hover state, add entry points to receive/send dialogs in account menu

Browse Source
This commit is contained in:
Aleka Cheung
2023-08-23 18:56:08 -04:00
parent 6e179191d8
commit ed61b3112e
8 changed files with 84 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/constants/routes.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export enum AppRoute {
Profile = '/profile',
Alerts = '/alerts',
Settings = '/settings',
Rewards = '/DYDX',
Rewards = '/DV4TNT',
}
export enum PortfolioRoute {
src/constants/wallets.ts
+1 -1
View File
@@ -377,7 +377,7 @@ export const DYDX_CHAIN_INFO: Parameters<typeof suggestChain>[0] = {
export enum DydxChainAsset {
USDC = 'USDC',
DYDX = 'DYDX',
DYDX = 'Dv4TNT',
}
export const DYDX_CHAIN_ASSET_COIN_DENOM: Record<DydxChainAsset, string> = {
src/pages/rewards/DYDXBalancePanel.tsx
+3 -3
View File
@@ -36,8 +36,8 @@ export const DYDXBalancePanel = () => {
slotHeader={
<Styled.Header>
<Styled.Title>
<AssetIcon symbol="DYDX" />
DYDX
{/* <AssetIcon symbol="DYDX" /> */}
Dv4TNT
</Styled.Title>
<Styled.ReceiveAndTransferButtons>
{!canAccountTrade ? (
@@ -106,7 +106,7 @@ export const DYDXBalancePanel = () => {
{
key: 'totalBalance',
label: 'Total balance',
value: <Output type={OutputType.Asset} value={nativeTokenBalance} tag="DYDX" />,
value: <Output type={OutputType.Asset} value={nativeTokenBalance} tag="Dv4TNT" />,
},
]}
/>
src/styles/popoverMixins.ts
+2
View File
@@ -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;
}
src/views/dialogs/ReceiveDialog.tsx
+5 -3
View File
@@ -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: (
<Styled.InlineRow>
<AssetIcon symbol="DYDX" /> DYDX
{/* <AssetIcon symbol="DYDX" /> */}
Dv4TNT
</Styled.InlineRow>
),
},
src/views/dialogs/TransferDialog.tsx
+4 -2
View File
@@ -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 (
<Styled.Dialog isOpen setIsOpen={setIsOpen} title={stringGetter({ key: STRING_KEYS.TRANSFER })}>
<TransferForm onDone={() => setIsOpen?.(false)} />
<TransferForm selectedAsset={selectedAsset} onDone={() => setIsOpen?.(false)} />
</Styled.Dialog>
);
};
src/views/forms/TransferForm.tsx
+9 -3
View File
@@ -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>(DydxChainAsset.DYDX);
const [asset, setAsset] = useState<DydxChainAsset>(selectedAsset);
// Form states
const [error, setError] = useState<Error | undefined>();
@@ -214,7 +219,8 @@ export const TransferForm = ({ onDone, className }: TransferFormProps) => {
value: DydxChainAsset.DYDX,
label: (
<Styled.InlineRow>
<AssetIcon symbol="DYDX" /> DYDX
{/* <AssetIcon symbol="DYDX" /> */}
Dv4TNT
</Styled.InlineRow>
),
},
src/views/menus/AccountMenu.tsx
+59 -16
View File
@@ -5,7 +5,7 @@ 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 +103,60 @@ export const AccountMenu = () => {
</Styled.AddressRow>
<Styled.Balances>
<div>
<Styled.label>
{stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'Dv4TNT' } })}
{/* <AssetIcon symbol="DYDX" /> */}
</Styled.label>
<Styled.BalanceOutput type={OutputType.Asset} value={nativeTokenBalance} />
<div>
<Styled.label>
{stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'Dv4TNT' } })}
{/* <AssetIcon symbol="DYDX" /> */}
</Styled.label>
<Styled.BalanceOutput type={OutputType.Asset} value={nativeTokenBalance} />
</div>
<IconButton
action={ButtonAction.Base}
iconName={IconName.Send}
onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
shape={ButtonShape.Square}
/>
</div>
<div>
<Styled.label>
{stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'USDC' } })}
<AssetIcon symbol="USDC" />
</Styled.label>
<Styled.BalanceOutput
type={OutputType.Asset}
value={freeCollateral?.current || 0}
fractionDigits={2}
/>
<div>
<Styled.label>
{stringGetter({ key: STRING_KEYS.ASSET_BALANCE, params: { ASSET: 'USDC' } })}
<AssetIcon symbol="USDC" />
</Styled.label>
<Styled.BalanceOutput
type={OutputType.Asset}
value={freeCollateral?.current || 0}
fractionDigits={2}
/>
</div>
<Styled.InlineRow>
<IconButton
action={ButtonAction.Base}
iconName={IconName.Qr}
onClick={() =>
dispatch(
openDialog({
type: DialogTypes.Receive,
dialogProps: { selectedAsset: DydxChainAsset.USDC },
})
)
}
shape={ButtonShape.Square}
/>
<IconButton
action={ButtonAction.Base}
iconName={IconName.Send}
onClick={() =>
dispatch(
openDialog({
type: DialogTypes.Transfer,
dialogProps: { selectedAsset: DydxChainAsset.USDC },
})
)
}
shape={ButtonShape.Square}
/>
</Styled.InlineRow>
</div>
</Styled.Balances>
</Styled.AccountInfo>
@@ -204,6 +242,10 @@ Styled.Column = styled.div`
${layoutMixins.column}
`;
Styled.InlineRow = styled.div`
${layoutMixins.inlineRow}
`;
Styled.AddressRow = styled.div`
${layoutMixins.row}
@@ -256,7 +298,7 @@ Styled.Balances = styled.div`
gap: 2px;
> div {
${layoutMixins.flexColumn}
${layoutMixins.spacedRow}
gap: 0.5rem;
padding: 0.5rem 1rem;
@@ -281,6 +323,7 @@ Styled.DropdownMenu = styled(DropdownMenu)`
--dropdownMenu-item-font-size: 0.875rem;
--popover-padding: 0 0 0.5rem 0;
--trigger-hover-backgroundColor: var(--color-layer-3);
`;
Styled.WarningIcon = styled(Icon)`