style: Add qr sign in to top header (#1944)

Author: Sam-dYdX

src/constants/dialogs.ts

@@ -53,7 +53,7 @@ export type ExternalNavKeplrDialogProps = {};
 export type ManageAccountDialogProps = {};
 export type MnemonicExportDialogProps = {};
 export type MobileDownloadDialogProps = { mobileAppUrl: string };
-export type MobileSignInDialogProps = {};
+export type MobileSignInDialogProps = { skipWaiting?: boolean };
 export type OnboardingDialogProps = {};
 export type OrderDetailsDialogProps = { orderId: string };
 export type PredictionMarketIntroDialogProps = {};

src/layout/Header/HeaderDesktop.tsx

@@ -193,37 +193,39 @@ export const HeaderDesktop = () => {
       <$NavAfter>
         {onboardingState === OnboardingState.AccountConnected &&
           complianceState === ComplianceStates.FULL_ACCESS && (
-            <>
-              <Button
-                tw="mr-[0.5em]"
-                shape={ButtonShape.Pill}
-                size={ButtonSize.XSmall}
-                action={
-                  !availableBalance || availableBalance > 0
-                    ? ButtonAction.Secondary
-                    : ButtonAction.Primary
-                }
-                onClick={() => {
-                  dispatch(openDialog(DialogTypes.Deposit2({})));
-                }}
-                state={{ isDisabled: !dydxAccounts }}
-              >
-                {stringGetter({ key: STRING_KEYS.DEPOSIT })}
-              </Button>
-              <VerticalSeparator />
-            </>
+            <Button
+              shape={ButtonShape.Pill}
+              size={ButtonSize.XSmall}
+              action={
+                !availableBalance || availableBalance > 0
+                  ? ButtonAction.Secondary
+                  : ButtonAction.Primary
+              }
+              onClick={() => {
+                dispatch(openDialog(DialogTypes.Deposit2({})));
+              }}
+              state={{ isDisabled: !dydxAccounts }}
+            >
+              {stringGetter({ key: STRING_KEYS.DEPOSIT })}
+            </Button>
           )}
 
-        <MobileDownloadLinks />
+        {onboardingState === OnboardingState.AccountConnected ? (
+          <$IconButton
+            shape={ButtonShape.Rectangle}
+            iconName={IconName.Mobile}
+            onClick={() => dispatch(openDialog(DialogTypes.MobileSignIn({ skipWaiting: true })))}
+          />
+        ) : (
+          <MobileDownloadLinks />
+        )}
 
         <$IconButton
           shape={ButtonShape.Rectangle}
           iconName={IconName.HelpCircle}
           onClick={() => dispatch(openDialog(DialogTypes.Help()))}
         />
 
-        <VerticalSeparator />
-
         <NotificationsMenu
           slotTrigger={
             <$IconButton
@@ -233,8 +235,6 @@ export const HeaderDesktop = () => {
           }
         />
 
-        <VerticalSeparator />
-
         <AccountMenu />
       </$NavAfter>
     </$Header>
@@ -316,7 +316,7 @@ const $NavAfter = styled.div`
   justify-self: end;
   padding: 0 0.75rem;
 
-  gap: 0.5rem;
+  gap: 1rem;
 
   a {
     color: var(--color-text-1);

src/views/MobileDownloadLinks.tsx

@@ -14,7 +14,6 @@ import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Link } from '@/components/Link';
 import { Popover, TriggerType } from '@/components/Popover';
-import { VerticalSeparator } from '@/components/Separator';
 
 export const MobileDownloadLinks = ({ withBadges }: { withBadges?: boolean }) => {
   const stringGetter = useStringGetter();
@@ -41,31 +40,28 @@ export const MobileDownloadLinks = ({ withBadges }: { withBadges?: boolean }) =>
   }
 
   return (
-    <>
-      <Popover
-        triggerType={TriggerType.MobileDownloadTrigger}
-        align="center"
-        slotTrigger={<$IconButton iconName={IconName.Mobile} shape={ButtonShape.Square} />}
-        sideOffset={8}
-      >
-        <$DownloadLinksInPopover>
-          <div>{stringGetter({ key: STRING_KEYS.GET_DYDX_ON_PHONE })}</div>
-          <div tw="row gap-0.5">
-            {googlePlayStoreUrl && (
-              <Link href={googlePlayStoreUrl}>
-                <img tw="w-10" src="/play-store.png" alt="google-play" />
-              </Link>
-            )}
-            {appleAppStoreUrl && (
-              <Link href={appleAppStoreUrl}>
-                <img tw="w-10" src="/app-store.png" alt="app-store" />
-              </Link>
-            )}
-          </div>
-        </$DownloadLinksInPopover>
-      </Popover>
-      <VerticalSeparator />
-    </>
+    <Popover
+      triggerType={TriggerType.MobileDownloadTrigger}
+      align="center"
+      slotTrigger={<$IconButton iconName={IconName.Mobile} shape={ButtonShape.Square} />}
+      sideOffset={8}
+    >
+      <$DownloadLinksInPopover>
+        <div>{stringGetter({ key: STRING_KEYS.GET_DYDX_ON_PHONE })}</div>
+        <div tw="row gap-0.5">
+          {googlePlayStoreUrl && (
+            <Link href={googlePlayStoreUrl}>
+              <img tw="w-10" src="/play-store.png" alt="google-play" />
+            </Link>
+          )}
+          {appleAppStoreUrl && (
+            <Link href={appleAppStoreUrl}>
+              <img tw="w-10" src="/app-store.png" alt="app-store" />
+            </Link>
+          )}
+        </div>
+      </$DownloadLinksInPopover>
+    </Popover>
   );
 };
 

src/views/dialogs/MobileSignInDialog.tsx

@@ -69,8 +69,13 @@ const MobileQrCode = ({
   );
 };
 
-export const MobileSignInDialog = ({ setIsOpen }: DialogProps<MobileSignInDialogProps>) => {
-  const [currentState, setCurrentState] = useState(MobileSignInState.Waiting);
+export const MobileSignInDialog = ({
+  setIsOpen,
+  skipWaiting = false,
+}: DialogProps<MobileSignInDialogProps>) => {
+  const [currentState, setCurrentState] = useState(
+    skipWaiting ? MobileSignInState.Scanning : MobileSignInState.Waiting
+  );
   const [isScanning, setIsScanning] = useState(false);
   const stringGetter = useStringGetter();
 

src/views/menus/AccountMenu/AccountMenu.tsx

@@ -413,7 +413,7 @@ export const AccountMenu = () => {
             value: 'MobileQrSignIn',
             icon: <Icon iconName={IconName.Qr} />,
             label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),
-            onSelect: () => dispatch(openDialog(DialogTypes.MobileSignIn())),
+            onSelect: () => dispatch(openDialog(DialogTypes.MobileSignIn({}))),
           },
         onboardingState === OnboardingState.AccountConnected &&
           hdKey &&