diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 5e8c7cf..1c37aac 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -25,6 +25,7 @@ import {
CopyIcon,
CubeIcon,
DiscordIcon,
+ DownloadIcon,
EtherscanIcon,
DepthChartIcon,
ExportKeysIcon,
@@ -66,6 +67,7 @@ import {
TransferIcon,
TriangleIcon,
TryAgainIcon,
+ UploadIcon,
WarningIcon,
WebsiteIcon,
WhitepaperIcon,
@@ -95,6 +97,7 @@ export enum IconName {
Cube = 'Cube',
DepthChart = 'DepthChart',
Discord = 'Discord',
+ Download = 'Download',
Etherscan = 'Etherscan',
ExportKeys = 'ExportKeys',
Feedback = 'Feedback',
@@ -136,6 +139,7 @@ export enum IconName {
Transfer = 'Transfer',
Triangle = 'Triangle',
TryAgain = 'TryAgain',
+ Upload = 'Upload',
Warning = 'Warning',
Website = 'Website',
Whitepaper = 'Whitepaper',
@@ -165,6 +169,7 @@ const icons = {
[IconName.Cube]: CubeIcon,
[IconName.DepthChart]: DepthChartIcon,
[IconName.Discord]: DiscordIcon,
+ [IconName.Download]: DownloadIcon,
[IconName.Etherscan]: EtherscanIcon,
[IconName.ExportKeys]: ExportKeysIcon,
[IconName.Feedback]: FeedbackIcon,
@@ -205,6 +210,7 @@ const icons = {
[IconName.Transfer]: TransferIcon,
[IconName.Triangle]: TriangleIcon,
[IconName.TryAgain]: TryAgainIcon,
+ [IconName.Upload]: UploadIcon,
[IconName.Warning]: WarningIcon,
[IconName.Website]: WebsiteIcon,
[IconName.Whitepaper]: WhitepaperIcon,
diff --git a/src/icons/download.svg b/src/icons/download.svg
new file mode 100644
index 0000000..584c00c
--- /dev/null
+++ b/src/icons/download.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/icons/index.ts b/src/icons/index.ts
index a1c0667..ae49a19 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -21,6 +21,7 @@ export { default as CopyIcon } from './copy.svg';
export { default as CubeIcon } from './cube.svg';
export { default as DepthChartIcon } from './depth-chart.svg';
export { default as DiscordIcon } from './discord.svg';
+export { default as DownloadIcon } from './download.svg';
export { default as ExportKeysIcon } from './export-keys.svg';
export { default as FeedbackIcon } from './feedback.svg';
export { default as FileIcon } from './file.svg';
@@ -58,6 +59,7 @@ export { default as TradeIcon } from './trade.svg';
export { default as TransferIcon } from './transfer.svg';
export { default as TriangleIcon } from './triangle.svg';
export { default as TryAgainIcon } from './try-again.svg';
+export { default as UploadIcon } from './upload.svg';
export { default as WarningIcon } from './warning.svg';
// Wallets
diff --git a/src/icons/upload.svg b/src/icons/upload.svg
new file mode 100644
index 0000000..ea56561
--- /dev/null
+++ b/src/icons/upload.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx
index a91b013..10e7451 100644
--- a/src/views/menus/AccountMenu.tsx
+++ b/src/views/menus/AccountMenu.tsx
@@ -139,7 +139,7 @@ export const AccountMenu = () => {
fractionDigits={2}
/>
-
+
@@ -212,28 +212,51 @@ 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 AssetActions = memo(
+ ({
+ asset,
+ dispatch,
+ withOnboarding,
+ }: {
+ asset: DydxChainAsset;
+ dispatch: Dispatch;
+ withOnboarding?: boolean;
+ }) => (
+
+ {[
+ // TODO(@rosepuppy): Add withdraw action for USDC
+ {
+ dialogType: DialogTypes.Receive,
+ dialogProps: { selectedAsset: asset },
+ iconName: IconName.Qr,
+ },
+ {
+ dialogType: DialogTypes.Transfer,
+ dialogProps: { selectedAsset: asset },
+ iconName: IconName.Send,
+ },
+ withOnboarding && {
+ dialogType: DialogTypes.Withdraw,
+ iconName: IconName.Upload,
+ },
+ withOnboarding && {
+ dialogType: DialogTypes.Deposit,
+ iconName: IconName.Download,
+ },
+ ]
+ .filter(isTruthy)
+ .map(({ iconName, dialogType, dialogProps }) => (
+ dispatch(openDialog({ type: dialogType, dialogProps }))}
+ />
+ ))}
+
+ )
+);
const Styled: Record = {};
@@ -250,6 +273,10 @@ Styled.Column = styled.div`
Styled.InlineRow = styled.div`
${layoutMixins.inlineRow}
+ flex-wrap: wrap;
+
+ width: calc(1.75rem * 2 + 0.5ch);
+ min-width: 0;
`;
Styled.AddressRow = styled.div`