diff --git a/src/constants/dialogs.ts b/src/constants/dialogs.ts index 6ed34ec..2336694 100644 --- a/src/constants/dialogs.ts +++ b/src/constants/dialogs.ts @@ -10,6 +10,7 @@ export enum DialogTypes { Help = 'Help', ExternalNavKeplr = 'ExternalNavKeplr', MnemonicExport = 'MnemonicExport', + MobileDownload = 'MobileDownload', MobileSignIn = 'MobileSignIn', Onboarding = 'Onboarding', OrderDetails = 'OrderDetails', diff --git a/src/layout/DialogManager.tsx b/src/layout/DialogManager.tsx index 4c5ec7e..13dfc0e 100644 --- a/src/layout/DialogManager.tsx +++ b/src/layout/DialogManager.tsx @@ -62,6 +62,7 @@ export const DialogManager = () => { [DialogTypes.ExternalLink]: , [DialogTypes.ExternalNavStride]: , [DialogTypes.MnemonicExport]: , + [DialogTypes.MobileDownload]: , [DialogTypes.MobileSignIn]: , [DialogTypes.Onboarding]: , [DialogTypes.OrderDetails]: , diff --git a/src/views/dialogs/MobileDownloadDialog.tsx b/src/views/dialogs/MobileDownloadDialog.tsx new file mode 100644 index 0000000..fa20a43 --- /dev/null +++ b/src/views/dialogs/MobileDownloadDialog.tsx @@ -0,0 +1,134 @@ +import { useMemo, useState } from 'react'; +import styled, { AnyStyledComponent, css } from 'styled-components'; +import { AES } from 'crypto-js'; + +import { AlertType } from '@/constants/alerts'; +import { ButtonSize } from '@/constants/buttons'; +import { STRING_KEYS } from '@/constants/localization'; +import { useAccounts, useStringGetter } from '@/hooks'; +import { layoutMixins } from '@/styles/layoutMixins'; + +import { AlertMessage } from '@/components/AlertMessage'; +import { Dialog } from '@/components/Dialog'; +import { Icon, IconName } from '@/components/Icon'; +import { ToggleButton } from '@/components/ToggleButton'; +import { QrCode } from '@/components/QrCode'; +import { log } from '@/lib/telemetry'; + +type ElementProps = { + setIsOpen: (open: boolean) => void; +}; + + +const MobileQrCode = ({ +}: { +}) => { + const stringGetter = useStringGetter(); + + const appLink = 'https://apps.apple.com/app/id6475599596'; + + return ( + + + {stringGetter({ key: STRING_KEYS.CLICK_TO_SHOW })} + + ); +}; + +export const MobileDownloadDialog = ({ setIsOpen }: ElementProps) => { + const stringGetter = useStringGetter(); + + const content = ( + <> +

+ {stringGetter({ + key: STRING_KEYS.WHILE_ONBOARDING, + params: { + SYNC_WITH_DESKTOP: ( + {stringGetter({ key: STRING_KEYS.SYNC_WITH_DESKTOP })} + ), + }, + })} +

+ + + ); + + return ( + + {content} + + ); +}; + +const Styled: Record = {}; + +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; + `} + } +`; diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx index f40b2b4..5830a8c 100644 --- a/src/views/menus/AccountMenu.tsx +++ b/src/views/menus/AccountMenu.tsx @@ -189,6 +189,17 @@ export const AccountMenu = () => { label: stringGetter({ key: STRING_KEYS.DISPLAY_SETTINGS }), onSelect: () => dispatch(openDialog({ type: DialogTypes.DisplaySettings })), }, + { + value: 'MobileDownload', + icon: + theme === AppTheme.Light ? ( + + ) : ( + + ), + label: "Download Mobile App", + onSelect: () => dispatch(openDialog({ type: DialogTypes.MobileDownload })), + }, ...(onboardingState === OnboardingState.AccountConnected && hdKey ? [ {