From 677d62ed4cedf04f8bd2c66cfbadd95791f690d5 Mon Sep 17 00:00:00 2001 From: Jordan Ribbink Date: Fri, 26 Jul 2024 14:07:19 -0700 Subject: [PATCH 1/5] Add GetWallet & ScanInstall view --- components/Discovery.tsx | 71 ++++++++++++++++++--- components/GetWalletCard.tsx | 10 ++- components/GetWalletList.tsx | 15 ++++- components/Icons/chrome.svg | 1 + components/ViewHeader.tsx | 6 +- components/ViewLayout.tsx | 2 +- components/WalletTypeCard.tsx | 95 ++++++++++++++++++++++++++++ components/views/ExploreWallets.tsx | 37 +++++++++++ components/views/GetWallet.tsx | 61 ++++++++++++------ components/views/ScanInstall.tsx | 57 +++++++++++++++++ components/views/WalletSelection.tsx | 1 - contexts/NavigationContext.tsx | 41 ++++++++++++ data/wallet.ts | 16 +++++ helpers/browsers.ts | 11 ++++ helpers/urls.ts | 9 +++ package-lock.json | 18 ++++++ package.json | 1 + 17 files changed, 411 insertions(+), 41 deletions(-) create mode 100644 components/Icons/chrome.svg create mode 100644 components/WalletTypeCard.tsx create mode 100644 components/views/ExploreWallets.tsx create mode 100644 components/views/ScanInstall.tsx create mode 100644 contexts/NavigationContext.tsx create mode 100644 data/wallet.ts create mode 100644 helpers/browsers.ts diff --git a/components/Discovery.tsx b/components/Discovery.tsx index ab07987d..f46206c4 100644 --- a/components/Discovery.tsx +++ b/components/Discovery.tsx @@ -1,27 +1,80 @@ import { Flex, useModalContext } from '@chakra-ui/react' import { useState } from 'react' import { useWallets } from '../hooks/useWallets' -import GetWallet from './views/GetWallet' + import WalletSelection from './views/WalletSelection' +import ExploreWallets from './views/ExploreWallets' +import GetWallet from './views/GetWallet' +import ScanInstall from './views/ScanInstall' +import { Wallet } from '../data/wallets' + +export enum VIEWS { + WALLET_SELECTION, + EXPLORE_WALLETS, + GET_WALLET, + SCAN_INSTALL, + SCAN_CONNECT, +} export default function Discovery() { const { wallets, error } = useWallets() - const [learnMoreOpen, setLearnMoreOpen] = useState(false) + const [currentView, setCurrentView] = useState(VIEWS.WALLET_SELECTION) + const [selectedWallet, setSelectedWallet] = useState(null) const modal = useModalContext() if (!wallets) return
if (error) return
Error Loading Data
- return ( - - {learnMoreOpen ? ( + let viewContent =
+ switch (currentView) { + case VIEWS.WALLET_SELECTION: + viewContent = ( + setCurrentView(VIEWS.EXPLORE_WALLETS)} + /> + ) + break + case VIEWS.EXPLORE_WALLETS: + viewContent = ( + setCurrentView(VIEWS.WALLET_SELECTION)} + onCloseModal={modal.onClose} + onGetWallet={wallet => { + setSelectedWallet(wallet) + setCurrentView(VIEWS.GET_WALLET) + }} + /> + ) + break + case VIEWS.GET_WALLET: + viewContent = ( setLearnMoreOpen(false)} + onBack={() => setCurrentView(VIEWS.EXPLORE_WALLETS)} + onCloseModal={modal.onClose} + wallet={selectedWallet} + onGetQRCode={wallet => { + setSelectedWallet(wallet) + setCurrentView(VIEWS.SCAN_INSTALL) + }} + /> + ) + break + case VIEWS.SCAN_INSTALL: + viewContent = ( + setCurrentView(VIEWS.WALLET_SELECTION)} onCloseModal={modal.onClose} + /* TODO: This should link to the CONNECT_WALLET view once added */ + onContinue={() => setCurrentView(VIEWS.WALLET_SELECTION)} + wallet={selectedWallet} /> - ) : ( - setLearnMoreOpen(true)} /> - )} + ) + break + } + + return ( + + {viewContent} ) } diff --git a/components/GetWalletCard.tsx b/components/GetWalletCard.tsx index 0535b74d..3540e96d 100644 --- a/components/GetWalletCard.tsx +++ b/components/GetWalletCard.tsx @@ -9,14 +9,14 @@ import { Stack, Text, } from '@chakra-ui/react' -import NextLink from 'next/link' import { Wallet } from '../data/wallets' type Props = { wallet: Wallet + onButtonClick: () => void } -export default function GetWalletCard({ wallet }: Props) { +export default function GetWalletCard({ wallet, onButtonClick }: Props) { const extensionService = wallet.services.find(isExtension) const isExtensionService = !!extensionService const isExtensionServiceInstalled = extensionService?.provider?.is_installed @@ -26,7 +26,7 @@ export default function GetWalletCard({ wallet }: Props) { - + {wallet.name} Get diff --git a/components/GetWalletList.tsx b/components/GetWalletList.tsx index 33d6fd50..740addb3 100644 --- a/components/GetWalletList.tsx +++ b/components/GetWalletList.tsx @@ -1,14 +1,25 @@ import { Stack } from '@chakra-ui/react' import { useWallets } from '../hooks/useWallets' import GetWalletCard from './GetWalletCard' +import { Wallet } from '../data/wallets' -export default function GetWalletList() { +interface GetWalletListProps { + onGetWallet: (wallet: Wallet) => void +} + +export default function GetWalletList({ onGetWallet }: GetWalletListProps) { const { wallets } = useWallets() return ( {wallets.map(wallet => { - return + return ( + onGetWallet(wallet)} + /> + ) })} ) diff --git a/components/Icons/chrome.svg b/components/Icons/chrome.svg new file mode 100644 index 00000000..dcc3b110 --- /dev/null +++ b/components/Icons/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/ViewHeader.tsx b/components/ViewHeader.tsx index 42eaeaa6..a1e32378 100644 --- a/components/ViewHeader.tsx +++ b/components/ViewHeader.tsx @@ -13,11 +13,11 @@ export default function ViewHeader({ title, onClose, onBack }: HeaderProps) { {title} diff --git a/components/ViewLayout.tsx b/components/ViewLayout.tsx index b3a9d950..90ce3046 100644 --- a/components/ViewLayout.tsx +++ b/components/ViewLayout.tsx @@ -9,7 +9,7 @@ type ViewLayoutProps = { export default function ViewLayout({ children, header }: ViewLayoutProps) { return ( - + {header && } {children} diff --git a/components/WalletTypeCard.tsx b/components/WalletTypeCard.tsx new file mode 100644 index 00000000..b821ad37 --- /dev/null +++ b/components/WalletTypeCard.tsx @@ -0,0 +1,95 @@ +import { Button, HStack, Heading, Image, Stack, Text } from '@chakra-ui/react' +import NextImage from 'next/image' +import Link from 'next/link' +import { ComponentProps } from 'react' +import { isDataURL } from '../helpers/urls' + +type WalletTypeCardBaseProps = { + icon: string + title: string + description: string + buttonText: string +} + +type LinkVariantProps = { + variant: 'link' + href: string +} & WalletTypeCardBaseProps + +type ButtonVariantProps = { + variant: 'button' + onButtonClick: () => void +} & WalletTypeCardBaseProps + +type WalletTypeCardProps = LinkVariantProps | ButtonVariantProps + +export function WalletTypeCard(props: LinkVariantProps) +export function WalletTypeCard(props: ButtonVariantProps) +export default function WalletTypeCard({ + variant, + icon, + title, + description, + buttonText, + ...otherProps +}: WalletTypeCardProps) { + let buttonProps: ComponentProps + switch (variant) { + case 'link': { + const { href } = otherProps as LinkVariantProps + buttonProps = { + as: Link, + href, + target: '_blank', + } + break + } + case 'button': { + const { onButtonClick } = otherProps as ButtonVariantProps + buttonProps = { + onClick: onButtonClick, + } + break + } + default: + break + } + + return ( + + + {title} + + {title} + {description} + + + + + ) +} diff --git a/components/views/ExploreWallets.tsx b/components/views/ExploreWallets.tsx new file mode 100644 index 00000000..8e1da492 --- /dev/null +++ b/components/views/ExploreWallets.tsx @@ -0,0 +1,37 @@ +import { Container, Stack, Text } from '@chakra-ui/react' +import ViewLayout from '../ViewLayout' +import GetWalletList from '../GetWalletList' +import { Wallet } from '../../data/wallets' + +interface ExploreWalletsProps { + onBack?: () => void + onCloseModal?: () => void + onGetWallet: (wallet: Wallet) => void +} + +export default function ExploreWallets({ + onBack, + onCloseModal, + onGetWallet, +}: ExploreWalletsProps) { + return ( + + + + + + + + Not what you're looking for? + + + Select a wallet on the left to get started with a different wallet + provider. + + + + + ) +} diff --git a/components/views/GetWallet.tsx b/components/views/GetWallet.tsx index 12a49d1d..e257e21e 100644 --- a/components/views/GetWallet.tsx +++ b/components/views/GetWallet.tsx @@ -1,30 +1,53 @@ -import { Container, Stack, Text, VStack } from '@chakra-ui/react' +import { Stack } from '@chakra-ui/react' import ViewLayout from '../ViewLayout' -import GetWalletList from '../GetWalletList' +import WalletTypeCard from '../WalletTypeCard' +import ChromeIcon from '../Icons/chrome.svg' +import { Wallet } from '../../data/wallets' interface GetWalletProps { - onBack?: () => void - onCloseModal?: () => void + onBack: () => void + onCloseModal: () => void + onGetQRCode: (wallet: Wallet) => void + wallet: Wallet } -export default function GetWallet({ onBack, onCloseModal }: GetWalletProps) { +export default function GetWallet({ + onBack, + onCloseModal, + wallet, + onGetQRCode, +}: GetWalletProps) { return ( - - - - - - - Not what you're looking for? - - - Select a wallet on the left to get started with a different wallet - provider. - - + + {wallet.installLink?.browser && ( + + )} + {wallet.installLink?.mobile && ( + onGetQRCode?.(wallet)} + > + )} ) diff --git a/components/views/ScanInstall.tsx b/components/views/ScanInstall.tsx new file mode 100644 index 00000000..1bd01067 --- /dev/null +++ b/components/views/ScanInstall.tsx @@ -0,0 +1,57 @@ +import { Box, Button, Stack, Text } from '@chakra-ui/react' +import ViewLayout from '../ViewLayout' +import QRCode from 'react-qr-code' +import { Wallet } from '../../data/wallets' + +interface ScanInstallProps { + onBack: () => void + onCloseModal: () => void + onContinue: () => void + wallet: Wallet +} + +export default function ScanInstall({ + onBack, + onCloseModal, + onContinue, + wallet, +}: ScanInstallProps) { + return ( + + + + Scan with your phone to install on iOS or Android + + + + + + + + + + ) +} diff --git a/components/views/WalletSelection.tsx b/components/views/WalletSelection.tsx index 82650742..c96e8188 100644 --- a/components/views/WalletSelection.tsx +++ b/components/views/WalletSelection.tsx @@ -1,7 +1,6 @@ import { Button, Divider, - Flex, HStack, Stack, Text, diff --git a/contexts/NavigationContext.tsx b/contexts/NavigationContext.tsx new file mode 100644 index 00000000..9653cc7d --- /dev/null +++ b/contexts/NavigationContext.tsx @@ -0,0 +1,41 @@ +import { createContext, useContext, useState } from 'react' + +export const NavigationContext = createContext({ + navigate: (route: string) => { + console.log('Navigate to', route) + }, + goBack: () => { + console.log('Go back') + }, + history: [], + currentRoute: '', +}) + +export function Navigator({ children }) { + const [history, setHistory] = useState([]) + const [currentRoute, setCurrentRoute] = useState('') + + const navigate = route => { + setHistory([...history, currentRoute]) + setCurrentRoute(route) + } + + const goBack = () => { + const previousRoute = history.pop() + setCurrentRoute(previousRoute) + } + + return ( + + ) +} + +export function Route({ component }) { + return component +} + +export function useNavigation() { + return useContext(NavigationContext) +} diff --git a/data/wallet.ts b/data/wallet.ts new file mode 100644 index 00000000..ae92bd07 --- /dev/null +++ b/data/wallet.ts @@ -0,0 +1,16 @@ +import { Provider, Service } from '../types' + +export enum WalletPlatform { + DESKTOP = 'desktop', + MOBILE = 'mobile', +} + +export interface Wallet { + provider: Provider + services: { + [key in WalletPlatform]: Omit + } + installLink: { + [key in WalletPlatform]: string + } +} diff --git a/helpers/browsers.ts b/helpers/browsers.ts new file mode 100644 index 00000000..76ab9ffa --- /dev/null +++ b/helpers/browsers.ts @@ -0,0 +1,11 @@ +export enum BrowserType { + CHROME = 'chrome', +} + +export function getBrowserType(userAgent: string): BrowserType { + if (userAgent.includes('Chrome')) { + return BrowserType.CHROME + } + + throw new Error('Unsupported browser') +} diff --git a/helpers/urls.ts b/helpers/urls.ts index 46d28d20..23861dd9 100644 --- a/helpers/urls.ts +++ b/helpers/urls.ts @@ -3,3 +3,12 @@ export function replacePort(currentUrl: string, portOverride: string): string { url.port = portOverride return url.toString() } + +export function isDataURL(url: string) { + try { + const parsedURL = new URL(url) + return parsedURL.protocol === 'data:' + } catch (e) { + return false + } +} diff --git a/package-lock.json b/package-lock.json index 5f768a54..994bcc5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^4.7.1", + "react-qr-code": "^2.0.15", "swr": "^1.3.0" }, "devDependencies": { @@ -10665,6 +10666,11 @@ "node": ">=6" } }, + "node_modules/qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" + }, "node_modules/queue-microtask": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.1.2.tgz", @@ -10759,6 +10765,18 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "dev": true }, + "node_modules/react-qr-code": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz", + "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==", + "dependencies": { + "prop-types": "^15.8.1", + "qr.js": "0.0.0" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-remove-scroll": { "version": "2.5.6", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz", diff --git a/package.json b/package.json index b38749aa..08ff57b5 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^4.7.1", + "react-qr-code": "^2.0.15", "swr": "^1.3.0" }, "devDependencies": { From 0164ecd11a315137b28ca17c15a7d8ada381fb89 Mon Sep 17 00:00:00 2001 From: Jordan Ribbink Date: Mon, 29 Jul 2024 14:55:56 -0700 Subject: [PATCH 2/5] Fixup with HybridButton --- components/Discovery.tsx | 2 +- components/GetWalletCard.tsx | 12 ++++--- components/HybridButton.tsx | 26 ++++++++++++++ components/WalletTypeCard.tsx | 62 +++++++++------------------------- components/views/GetWallet.tsx | 14 ++++---- data/wallet.ts | 16 --------- 6 files changed, 59 insertions(+), 73 deletions(-) create mode 100644 components/HybridButton.tsx delete mode 100644 data/wallet.ts diff --git a/components/Discovery.tsx b/components/Discovery.tsx index f46206c4..e88b9d04 100644 --- a/components/Discovery.tsx +++ b/components/Discovery.tsx @@ -1,12 +1,12 @@ import { Flex, useModalContext } from '@chakra-ui/react' import { useState } from 'react' import { useWallets } from '../hooks/useWallets' +import { Wallet } from '../data/wallets' import WalletSelection from './views/WalletSelection' import ExploreWallets from './views/ExploreWallets' import GetWallet from './views/GetWallet' import ScanInstall from './views/ScanInstall' -import { Wallet } from '../data/wallets' export enum VIEWS { WALLET_SELECTION, diff --git a/components/GetWalletCard.tsx b/components/GetWalletCard.tsx index 3540e96d..51c47fa6 100644 --- a/components/GetWalletCard.tsx +++ b/components/GetWalletCard.tsx @@ -10,6 +10,7 @@ import { Text, } from '@chakra-ui/react' import { Wallet } from '../data/wallets' +import HybridButton from './HybridButton' type Props = { wallet: Wallet @@ -53,18 +54,21 @@ export default function GetWalletCard({ wallet, onButtonClick }: Props) { - {/* TODO: Needs to link to install page, will be addressed in future PR */} - + ) diff --git a/components/HybridButton.tsx b/components/HybridButton.tsx new file mode 100644 index 00000000..a68e7556 --- /dev/null +++ b/components/HybridButton.tsx @@ -0,0 +1,26 @@ +import { Button, ButtonProps, RightJoinProps } from '@chakra-ui/react' +import NextLink, { LinkProps } from 'next/link' + +type BaseProps = { + children: React.ReactNode +} + +type LinkButtonProps = RightJoinProps & BaseProps + +type StandardButtonProps = ButtonProps & BaseProps + +type HybridButtonProps = LinkButtonProps | StandardButtonProps + +function HybridButton({ children, ...props }: HybridButtonProps) { + if ('href' in props) { + return ( + + ) + } else { + return + } +} + +export default HybridButton diff --git a/components/WalletTypeCard.tsx b/components/WalletTypeCard.tsx index b821ad37..4930d89d 100644 --- a/components/WalletTypeCard.tsx +++ b/components/WalletTypeCard.tsx @@ -1,60 +1,30 @@ -import { Button, HStack, Heading, Image, Stack, Text } from '@chakra-ui/react' +import { HStack, Heading, Image, Stack, Text } from '@chakra-ui/react' import NextImage from 'next/image' -import Link from 'next/link' -import { ComponentProps } from 'react' import { isDataURL } from '../helpers/urls' +import HybridButton from './HybridButton' -type WalletTypeCardBaseProps = { +type WalletTypeCardProps = { icon: string title: string description: string - buttonText: string + button: { + text: string + } & ( + | { + href: string + } + | { + onClick: () => void + } + ) } -type LinkVariantProps = { - variant: 'link' - href: string -} & WalletTypeCardBaseProps - -type ButtonVariantProps = { - variant: 'button' - onButtonClick: () => void -} & WalletTypeCardBaseProps - -type WalletTypeCardProps = LinkVariantProps | ButtonVariantProps - -export function WalletTypeCard(props: LinkVariantProps) -export function WalletTypeCard(props: ButtonVariantProps) export default function WalletTypeCard({ - variant, icon, title, description, - buttonText, - ...otherProps + button: { text: buttonText, ...buttonProps }, }: WalletTypeCardProps) { - let buttonProps: ComponentProps - switch (variant) { - case 'link': { - const { href } = otherProps as LinkVariantProps - buttonProps = { - as: Link, - href, - target: '_blank', - } - break - } - case 'button': { - const { onButtonClick } = otherProps as ButtonVariantProps - buttonProps = { - onClick: onButtonClick, - } - break - } - default: - break - } - return ( {title} {description} - + diff --git a/components/views/GetWallet.tsx b/components/views/GetWallet.tsx index e257e21e..1b5cf80c 100644 --- a/components/views/GetWallet.tsx +++ b/components/views/GetWallet.tsx @@ -28,24 +28,26 @@ export default function GetWallet({ {wallet.installLink?.browser && ( )} {wallet.installLink?.mobile && ( onGetQRCode?.(wallet)} + button={{ + text: 'Scan with Phone', + onClick: () => onGetQRCode?.(wallet), + }} > )} diff --git a/data/wallet.ts b/data/wallet.ts deleted file mode 100644 index ae92bd07..00000000 --- a/data/wallet.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Provider, Service } from '../types' - -export enum WalletPlatform { - DESKTOP = 'desktop', - MOBILE = 'mobile', -} - -export interface Wallet { - provider: Provider - services: { - [key in WalletPlatform]: Omit - } - installLink: { - [key in WalletPlatform]: string - } -} From 07ed128bfa0a307b8bc6da2b90138766bcb9ede0 Mon Sep 17 00:00:00 2001 From: Jordan Ribbink Date: Mon, 29 Jul 2024 15:05:53 -0700 Subject: [PATCH 3/5] Cleanup --- contexts/NavigationContext.tsx | 41 ---------------------------------- helpers/browsers.ts | 4 ++-- 2 files changed, 2 insertions(+), 43 deletions(-) delete mode 100644 contexts/NavigationContext.tsx diff --git a/contexts/NavigationContext.tsx b/contexts/NavigationContext.tsx deleted file mode 100644 index 9653cc7d..00000000 --- a/contexts/NavigationContext.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { createContext, useContext, useState } from 'react' - -export const NavigationContext = createContext({ - navigate: (route: string) => { - console.log('Navigate to', route) - }, - goBack: () => { - console.log('Go back') - }, - history: [], - currentRoute: '', -}) - -export function Navigator({ children }) { - const [history, setHistory] = useState([]) - const [currentRoute, setCurrentRoute] = useState('') - - const navigate = route => { - setHistory([...history, currentRoute]) - setCurrentRoute(route) - } - - const goBack = () => { - const previousRoute = history.pop() - setCurrentRoute(previousRoute) - } - - return ( - - ) -} - -export function Route({ component }) { - return component -} - -export function useNavigation() { - return useContext(NavigationContext) -} diff --git a/helpers/browsers.ts b/helpers/browsers.ts index 76ab9ffa..ea3a75eb 100644 --- a/helpers/browsers.ts +++ b/helpers/browsers.ts @@ -2,10 +2,10 @@ export enum BrowserType { CHROME = 'chrome', } -export function getBrowserType(userAgent: string): BrowserType { +export function getBrowserType(userAgent: string): BrowserType | null { if (userAgent.includes('Chrome')) { return BrowserType.CHROME } - throw new Error('Unsupported browser') + return null } From b122efab7458e8dca077586b55e5de487bfd57c8 Mon Sep 17 00:00:00 2001 From: Jordan Ribbink Date: Mon, 29 Jul 2024 15:10:56 -0700 Subject: [PATCH 4/5] dynamic browser --- components/views/GetWallet.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/components/views/GetWallet.tsx b/components/views/GetWallet.tsx index 1b5cf80c..a426c3c5 100644 --- a/components/views/GetWallet.tsx +++ b/components/views/GetWallet.tsx @@ -3,6 +3,7 @@ import ViewLayout from '../ViewLayout' import WalletTypeCard from '../WalletTypeCard' import ChromeIcon from '../Icons/chrome.svg' import { Wallet } from '../../data/wallets' +import { getBrowserFromUserAgent, getUserAgent } from '../../helpers/platform' interface GetWalletProps { onBack: () => void @@ -17,6 +18,13 @@ export default function GetWallet({ wallet, onGetQRCode, }: GetWalletProps) { + const browser = getBrowserFromUserAgent(getUserAgent()) + const browserInstallLink = + wallet.installLink?.[browser] || wallet.installLink?.browser + const browserName = wallet.installLink?.[browser] + ? browser.charAt(0).toUpperCase() + browser.slice(1) + : 'Browser' + return ( )} From 53f89d0b48e497ea9e79a6f64dbbf0e09ae13359 Mon Sep 17 00:00:00 2001 From: Jordan Ribbink Date: Mon, 29 Jul 2024 15:28:40 -0700 Subject: [PATCH 5/5] Add browsers const --- components/views/GetWallet.tsx | 14 ++++++-------- helpers/browsers.ts | 12 ++++++------ helpers/constants.ts | 14 ++++++++++++++ 3 files changed, 26 insertions(+), 14 deletions(-) diff --git a/components/views/GetWallet.tsx b/components/views/GetWallet.tsx index a426c3c5..00c808c5 100644 --- a/components/views/GetWallet.tsx +++ b/components/views/GetWallet.tsx @@ -4,6 +4,7 @@ import WalletTypeCard from '../WalletTypeCard' import ChromeIcon from '../Icons/chrome.svg' import { Wallet } from '../../data/wallets' import { getBrowserFromUserAgent, getUserAgent } from '../../helpers/platform' +import { getBrowserInfo } from '../../helpers/browsers' interface GetWalletProps { onBack: () => void @@ -18,12 +19,9 @@ export default function GetWallet({ wallet, onGetQRCode, }: GetWalletProps) { - const browser = getBrowserFromUserAgent(getUserAgent()) + const browserInfo = getBrowserInfo(getUserAgent()) const browserInstallLink = - wallet.installLink?.[browser] || wallet.installLink?.browser - const browserName = wallet.installLink?.[browser] - ? browser.charAt(0).toUpperCase() + browser.slice(1) - : 'Browser' + wallet.installLink?.[browserInfo.id] || wallet.installLink?.browser return ( {wallet.installLink?.browser && ( diff --git a/helpers/browsers.ts b/helpers/browsers.ts index ea3a75eb..a36c5f95 100644 --- a/helpers/browsers.ts +++ b/helpers/browsers.ts @@ -1,11 +1,11 @@ -export enum BrowserType { - CHROME = 'chrome', -} +import { BROWSERS } from './constants' -export function getBrowserType(userAgent: string): BrowserType | null { +export function getBrowserInfo( + userAgent: string +): typeof BROWSERS[keyof typeof BROWSERS] { if (userAgent.includes('Chrome')) { - return BrowserType.CHROME + return BROWSERS.CHROME } - return null + return BROWSERS.BROWSER } diff --git a/helpers/constants.ts b/helpers/constants.ts index 47e5ebc9..32c6e46e 100644 --- a/helpers/constants.ts +++ b/helpers/constants.ts @@ -1,4 +1,5 @@ import Enum from 'enum-xyz' +import ChromeIcon from '../assets/images/chrome-icon.svg' const { AUTHN, CANARYNET, TESTNET, PREVIEWNET, MAINNET, LOCAL, EMULATOR } = Enum.String({ casing: 'lowercase' }) @@ -91,3 +92,16 @@ export const AVAILABLE_FEATURES = [ description: 'This wallet supports the Ethereum Virtual Machine.', }, ] as const + +export const BROWSERS = { + CHROME: { + id: 'chrome', + name: 'Chrome', + icon: ChromeIcon, + }, + BROWSER: { + id: 'browser', + name: 'Browser', + icon: ChromeIcon, + }, +} as const