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

Merge pull request #1 from dydxprotocol/receive-transfer-entry-in-account-menu

Browse Source 
Add receive/transfer dialog entry points in AccountMenu + dv4tnt renames
This commit is contained in:
aleka
2023-08-23 18:57:32 -04:00
committed by GitHub
parent 42f4142307 76819e0839
commit 0dd2ecb6d2
9 changed files with 77 additions and 30 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/headerMixins.ts
+1 -1
View File
@@ -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);
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
+51 -16
View File
@@ -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 = () => {
</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>
<AssetActions asset={DydxChainAsset.DYDX} dispatch={dispatch} />
</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>
<AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} />
</div>
</Styled.Balances>
</Styled.AccountInfo>
@@ -191,6 +199,29 @@ export const AccountMenu = () => {
);
};
const AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => (
<Styled.InlineRow>
{[
// TODO(@rosepuppy): Add withdraw action for USDC
{
dialogType: DialogTypes.Receive,
iconName: IconName.Qr,
},
{ dialogType: DialogTypes.Transfer, iconName: IconName.Send },
].map(({ iconName, dialogType }) => (
<IconButton
key={dialogType}
action={ButtonAction.Base}
shape={ButtonShape.Square}
iconName={iconName}
onClick={() =>
dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } }))
}
/>
))}
</Styled.InlineRow>
));
const Styled: Record<string, AnyStyledComponent> = {};
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;