getOS and get meta from header

src/constants/dialogs.ts

@@ -11,6 +11,7 @@ export enum DialogTypes {
   ExternalNavKeplr = 'ExternalNavKeplr',
   MnemonicExport = 'MnemonicExport',
   MobileSignIn = 'MobileSignIn',
+  MobileDownload = 'MobileDownload',
   Onboarding = 'Onboarding',
   OrderDetails = 'OrderDetails',
   Preferences = 'Preferences',

src/layout/DialogManager.tsx

@@ -31,6 +31,7 @@ import { FillDetailsDialog } from '@/views/dialogs/DetailsDialog/FillDetailsDial
 import { NewMarketMessageDetailsDialog } from '@/views/dialogs/NewMarketMessageDetailsDialog';
 import { NewMarketAgreementDialog } from '@/views/dialogs/NewMarketAgreementDialog';
 import { ExternalNavStrideDialog } from '@/views/dialogs/ExternalNavStrideDialog';
+import { MobileDownloadDialog } from '@/views/dialogs/MobileDownloadDialog';
 
 export const DialogManager = () => {
   const dispatch = useDispatch();
@@ -63,6 +64,7 @@ export const DialogManager = () => {
     [DialogTypes.ExternalNavStride]: <ExternalNavStrideDialog {...modalProps} />,
     [DialogTypes.MnemonicExport]: <MnemonicExportDialog {...modalProps} />,
     [DialogTypes.MobileSignIn]: <MobileSignInDialog {...modalProps} />,
+    [DialogTypes.MobileDownload]: <MobileDownloadDialog {...modalProps} />,
     [DialogTypes.Onboarding]: <OnboardingDialog {...modalProps} />,
     [DialogTypes.OrderDetails]: <OrderDetailsDialog {...modalProps} />,
     [DialogTypes.Preferences]: <PreferencesDialog {...modalProps} />,

src/views/dialogs/MobileDownloadDialog.tsx

@@ -0,0 +1,112 @@
+import styled, { AnyStyledComponent, css } from 'styled-components';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { Dialog } from '@/components/Dialog';
+import { QrCode } from '@/components/QrCode';
+
+type ElementProps = {
+  setIsOpen: (open: boolean) => void;
+};
+
+
+const MobileQrCode = ({
+  url,
+}: {
+  url: string;
+}) => {
+  return (
+    <Styled.QrCodeContainer isShowing={true}>
+      <QrCode hasLogo size={432} value={url} />
+    </Styled.QrCodeContainer>
+  );
+};
+
+export const MobileDownloadDialog = ({ setIsOpen }: ElementProps) => {
+  const encryptionKey = "hello world!";
+
+  const content = (
+      <>
+        <MobileQrCode
+          url={encryptionKey}
+        />
+      </>
+  );
+
+  return (
+    <Dialog isOpen setIsOpen={setIsOpen} title="Scan and Download">
+      <Styled.Content>{content}</Styled.Content>
+    </Dialog>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Content = styled.div`
+  ${layoutMixins.column}
+  gap: 1rem;
+
+  strong {
+    font-weight: 900;
+    color: var(--color-text-2);
+  }
+
+  footer {
+    ${layoutMixins.row}
+    justify-content: space-between;
+
+    svg {
+      width: auto;
+    }
+  }
+`;
+
+Styled.WaitingSpan = styled.span`
+  strong {
+    color: var(--color-warning);
+  }
+`;
+
+Styled.QrCodeContainer = styled.figure<{ isShowing: boolean }>`
+  ${layoutMixins.stack}
+
+  overflow: hidden;
+  border-radius: 0.75em;
+
+  cursor: pointer;
+
+  transition: 0.2s;
+
+  &:hover {
+    filter: brightness(var(--hover-filter-base));
+  }
+
+  > * {
+    position: relative;
+    transition: 0.16s;
+  }
+
+  > :first-child {
+    pointer-events: none;
+
+    ${({ isShowing }) =>
+      !isShowing &&
+      css`
+        filter: blur(1rem) brightness(1.4);
+        will-change: filter;
+      `}
+  }
+
+  > span {
+    place-self: center;
+
+    font-size: 1.4em;
+    color: var(--color-text-2);
+
+    ${({ isShowing }) =>
+      isShowing &&
+      css`
+        opacity: 0;
+      `}
+  }
+`;

src/views/menus/AccountMenu.tsx

@@ -41,6 +41,14 @@ import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
 import { MustBigNumber } from '@/lib/numbers';
 
+function getOS() {
+  var uA = navigator.userAgent;
+  if ((/iPad|iPhone|iPod/.test(uA)) || (uA.includes('Mac') && 'ontouchend' in document)) return 'iOS';
+
+  var i, os = ['Windows', 'Android', 'Unix', 'Mac', 'Linux', 'BlackBerry'];
+  for (i = 0; i < os.length; i++) if (new RegExp(os[i],'i').test(uA)) return os[i];
+}
+
 export const AccountMenu = () => {
   const stringGetter = useStringGetter();
   const { mintscanBase } = useURLConfigs();
@@ -60,6 +68,13 @@ export const AccountMenu = () => {
     dispatch(openDialog({ type: DialogTypes.Onboarding }));
   };
 
+  // const appStoreUrl = document.querySelector('meta[name="app-store-url"]')?.getAttribute('content');
+  // const googlePlayUrl = document.querySelector('meta[name="google-play-url"]')?.getAttribute('content');
+  const appStoreUrl = "http://example.com";
+  const googlePlayUrl = "http://example.com";
+  const os = getOS();
+  
+
   return onboardingState === OnboardingState.Disconnected ? (
     <OnboardingTriggerButton size={ButtonSize.XSmall} />
   ) : (
@@ -189,6 +204,29 @@ export const AccountMenu = () => {
           label: stringGetter({ key: STRING_KEYS.DISPLAY_SETTINGS }),
           onSelect: () => dispatch(openDialog({ type: DialogTypes.DisplaySettings })),
         },
+        ...((appStoreUrl && os != 'Android') || (googlePlayUrl && os != 'iOS')
+          ? [
+              {
+                value: 'MobileDownload',
+                icon: <Icon iconName={IconName.Qr} />,
+                label: "Download Mobile App",
+                onSelect: () => {
+                  switch (os) {
+                    case 'iOS':
+                      window.open(appStoreUrl, '_blank');
+                      break;
+
+                    case 'Android':
+                      window.open(googlePlayUrl, '_blank');
+                      
+                    default:
+                      dispatch(openDialog({ type: DialogTypes.MobileDownload }));
+                      break;
+                  }
+                },
+              },
+            ]
+          : []),
         ...(onboardingState === OnboardingState.AccountConnected && hdKey
           ? [
               {