diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 5e8c7cf..e90094a 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -24,9 +24,10 @@ import { CommentIcon, CopyIcon, CubeIcon, + DepositIcon, + DepthChartIcon, DiscordIcon, EtherscanIcon, - DepthChartIcon, ExportKeysIcon, FeedbackIcon, FileIcon, @@ -69,6 +70,7 @@ import { WarningIcon, WebsiteIcon, WhitepaperIcon, + WithdrawIcon, } from '@/icons'; export enum IconName { @@ -93,6 +95,7 @@ export enum IconName { Comment = 'Comment', Copy = 'Copy', Cube = 'Cube', + Deposit = 'Deposit', DepthChart = 'DepthChart', Discord = 'Discord', Etherscan = 'Etherscan', @@ -139,6 +142,7 @@ export enum IconName { Warning = 'Warning', Website = 'Website', Whitepaper = 'Whitepaper', + Withdraw = 'Withdraw', } const icons = { @@ -163,6 +167,7 @@ const icons = { [IconName.Comment]: CommentIcon, [IconName.Copy]: CopyIcon, [IconName.Cube]: CubeIcon, + [IconName.Deposit]: DepositIcon, [IconName.DepthChart]: DepthChartIcon, [IconName.Discord]: DiscordIcon, [IconName.Etherscan]: EtherscanIcon, @@ -208,6 +213,7 @@ const icons = { [IconName.Warning]: WarningIcon, [IconName.Website]: WebsiteIcon, [IconName.Whitepaper]: WhitepaperIcon, + [IconName.Withdraw]: WithdrawIcon, } as Record; type ElementProps = { diff --git a/src/icons/deposit.svg b/src/icons/deposit.svg new file mode 100644 index 0000000..4d42be9 --- /dev/null +++ b/src/icons/deposit.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/index.ts b/src/icons/index.ts index a1c0667..661156b 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -19,6 +19,7 @@ export { default as CoinsIcon } from './coins.svg'; export { default as CommentIcon } from './comment.svg'; export { default as CopyIcon } from './copy.svg'; export { default as CubeIcon } from './cube.svg'; +export { default as DepositIcon } from './deposit.svg'; export { default as DepthChartIcon } from './depth-chart.svg'; export { default as DiscordIcon } from './discord.svg'; export { default as ExportKeysIcon } from './export-keys.svg'; @@ -59,6 +60,7 @@ 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 WarningIcon } from './warning.svg'; +export { default as WithdrawIcon } from './withdraw.svg'; // Wallets export { default as BitkeepIcon } from './wallets/bitkeep.svg'; diff --git a/src/icons/withdraw.svg b/src/icons/withdraw.svg new file mode 100644 index 0000000..9e99e29 --- /dev/null +++ b/src/icons/withdraw.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx index 2377f3b..f08c571 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,45 @@ 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; + }) => ( + + {[ + withOnboarding && { + dialogType: DialogTypes.Withdraw, + iconName: IconName.Withdraw, + }, + withOnboarding && { + dialogType: DialogTypes.Deposit, + iconName: IconName.Deposit, + }, + { + dialogType: DialogTypes.Transfer, + dialogProps: { selectedAsset: asset }, + iconName: IconName.Send, + }, + ] + .filter(isTruthy) + .map(({ iconName, dialogType, dialogProps }) => ( + dispatch(openDialog({ type: dialogType, dialogProps }))} + /> + ))} + + ) +); const Styled: Record = {}; @@ -351,3 +368,7 @@ Styled.ConnectToChain = styled(Styled.Column)` font: var(--font-small-book); } `; + +Styled.IconButton = styled(IconButton)` + --button-padding: 0 0.25rem; +`;