From 846c6ca6089cf188e2044002fe1db2b11eece4bd Mon Sep 17 00:00:00 2001 From: Bill He Date: Mon, 30 Oct 2023 22:21:44 -0700 Subject: [PATCH] Account dropdown onboarding entrypoints --- src/components/Icon.tsx | 6 +++ src/icons/download.svg | 6 +++ src/icons/index.ts | 2 + src/icons/upload.svg | 3 ++ src/views/menus/AccountMenu.tsx | 73 ++++++++++++++++++++++----------- 5 files changed, 67 insertions(+), 23 deletions(-) create mode 100644 src/icons/download.svg create mode 100644 src/icons/upload.svg 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`