Account dropdown onboarding entrypoints

2023-10-30 22:21:44 -07:00 · 2023-10-30 22:21:44 -07:00 · 846c6ca608
commit 846c6ca608
parent e7da21962a
5 changed files with 67 additions and 23 deletions
--- 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,
--- a/src/icons/download.svg
+++ b/src/icons/download.svg
@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M1.75 9.18753C1.86603 9.18753 1.97731 9.23362 2.05936 9.31567C2.14141 9.39772 2.1875 9.509 2.1875 9.62503V10.9375C2.1875 11.1696 2.27969 11.3922 2.44378 11.5562C2.60788 11.7203 2.83044 11.8125 3.0625 11.8125H10.9375C11.1696 11.8125 11.3921 11.7203 11.5562 11.5562C11.7203 11.3922 11.8125 11.1696 11.8125 10.9375V9.62503C11.8125 9.509 11.8586 9.39772 11.9406 9.31567C12.0227 9.23362 12.134 9.18753 12.25 9.18753C12.366 9.18753 12.4773 9.23362 12.5594 9.31567C12.6414 9.39772 12.6875 9.509 12.6875 9.62503V10.9375C12.6875 11.4017 12.5031 11.8468 12.1749 12.175C11.8467 12.5032 11.4016 12.6875 10.9375 12.6875H3.0625C2.59837 12.6875 2.15325 12.5032 1.82506 12.175C1.49687 11.8468 1.3125 11.4017 1.3125 10.9375V9.62503C1.3125 9.509 1.35859 9.39772 1.44064 9.31567C1.52269 9.23362 1.63397 9.18753 1.75 9.18753Z" fill="#C8C7D8"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M6.69078 9.93458C6.77282 10.0165 6.88401 10.0625 6.99995 10.0625C7.11589 10.0625 7.22709 10.0165 7.30912 9.93458L9.93412 7.30958C10.0114 7.22665 10.0535 7.11695 10.0515 7.00361C10.0495 6.89027 10.0036 6.78213 9.9234 6.70197C9.84324 6.62181 9.7351 6.5759 9.62176 6.5739C9.50841 6.5719 9.39872 6.61397 9.31578 6.69125L7.43745 8.56958V1.75041C7.43745 1.63438 7.39136 1.5231 7.30931 1.44106C7.22726 1.35901 7.11598 1.31291 6.99995 1.31291C6.88392 1.31291 6.77264 1.35901 6.69059 1.44106C6.60855 1.5231 6.56245 1.63438 6.56245 1.75041V8.56958L4.68412 6.69125C4.60118 6.61397 4.49149 6.5719 4.37815 6.5739C4.2648 6.5759 4.15666 6.62181 4.07651 6.70197C3.99635 6.78213 3.95043 6.89027 3.94843 7.00361C3.94643 7.11695 3.9885 7.22665 4.06578 7.30958L6.69078 9.93458Z" fill="#C8C7D8"/>
+</g>
+</svg>
--- 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
--- a/src/icons/upload.svg
+++ b/src/icons/upload.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.69083 1.44088C6.77286 1.35895 6.88406 1.31293 7 1.31293C7.11594 1.31293 7.22713 1.35895 7.30917 1.44088L9.93417 4.06588C10.0114 4.14881 10.0535 4.25851 10.0515 4.37185C10.0495 4.48519 10.0036 4.59333 9.92345 4.67349C9.84329 4.75365 9.73515 4.79956 9.6218 4.80156C9.50846 4.80356 9.39877 4.76149 9.31583 4.68421L7.4375 2.80588V9.62504C7.4375 9.74108 7.39141 9.85236 7.30936 9.9344C7.22731 10.0164 7.11603 10.0625 7 10.0625C6.88397 10.0625 6.77269 10.0164 6.69064 9.9344C6.60859 9.85236 6.5625 9.74108 6.5625 9.62504V2.80588L4.68417 4.68421C4.60123 4.76149 4.49154 4.80356 4.3782 4.80156C4.26485 4.79956 4.15671 4.75365 4.07655 4.67349C3.9964 4.59333 3.95048 4.48519 3.94848 4.37185C3.94648 4.25851 3.98855 4.14881 4.06583 4.06588L6.69083 1.44088ZM1.75 9.18754C1.86603 9.18754 1.97731 9.23364 2.05936 9.31568C2.14141 9.39773 2.1875 9.50901 2.1875 9.62504V10.9375C2.1875 11.1696 2.27969 11.3922 2.44378 11.5563C2.60788 11.7204 2.83044 11.8125 3.0625 11.8125H10.9375C11.1696 11.8125 11.3921 11.7204 11.5562 11.5563C11.7203 11.3922 11.8125 11.1696 11.8125 10.9375V9.62504C11.8125 9.50901 11.8586 9.39773 11.9406 9.31568C12.0227 9.23364 12.134 9.18754 12.25 9.18754C12.366 9.18754 12.4773 9.23364 12.5594 9.31568C12.6414 9.39773 12.6875 9.50901 12.6875 9.62504V10.9375C12.6875 11.4017 12.5031 11.8468 12.1749 12.175C11.8467 12.5032 11.4016 12.6875 10.9375 12.6875H3.0625C2.59837 12.6875 2.15325 12.5032 1.82506 12.175C1.49687 11.8468 1.3125 11.4017 1.3125 10.9375V9.62504C1.3125 9.50901 1.35859 9.39773 1.44064 9.31568C1.52269 9.23364 1.63397 9.18754 1.75 9.18754Z" fill="#C8C7D8"/>
+</svg>
--- a/src/views/menus/AccountMenu.tsx
+++ b/src/views/menus/AccountMenu.tsx
@ -139,7 +139,7 @@ export const AccountMenu = () => {
                    fractionDigits={2}
                  />
                </div>
-                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} />
+                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} withOnboarding />
              </div>
            </Styled.Balances>
          </Styled.AccountInfo>
@ -212,28 +212,51 @@ 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 AssetActions = memo(
+  ({
+    asset,
+    dispatch,
+    withOnboarding,
+  }: {
+    asset: DydxChainAsset;
+    dispatch: Dispatch;
+    withOnboarding?: boolean;
+  }) => (
+    <Styled.InlineRow>
+      {[
+        // 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 }) => (
+          <IconButton
+            key={dialogType}
+            action={ButtonAction.Base}
+            shape={ButtonShape.Square}
+            iconName={iconName}
+            onClick={() => dispatch(openDialog({ type: dialogType, dialogProps }))}
+          />
+        ))}
+    </Styled.InlineRow>
+  )
+);

 const Styled: Record<string, AnyStyledComponent> = {};

@ -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`