Merge branch 'jribbink/get-wallet-platform' into jribbink/connect-wallet

components/Discovery.tsx

@@ -15,6 +15,7 @@ export enum VIEWS {
   GET_WALLET,
   SCAN_INSTALL,
   CONNECT_WALLET,
+  SCAN_CONNECT,
 }
 
 export default function Discovery() {

components/GetWalletCard.tsx

@@ -12,6 +12,7 @@ import {
 import { Wallet } from '../data/wallets'
 import { ComponentProps } from 'react'
 import Link from 'next/link'
+import HybridButton from './HybridButton'
 
 type Props = {
   wallet: Wallet
@@ -23,16 +24,6 @@ export default function GetWalletCard({ wallet, onGetWallet }: Props) {
   const isExtensionService = !!extensionService
   const isExtensionServiceInstalled = extensionService?.provider?.is_installed
 
-  const buttonProps: ComponentProps<typeof Button> = wallet.installLink
-    ? {
-        onClick: onGetWallet,
-      }
-    : {
-        as: Link,
-        target: '_blank',
-        href: wallet.website,
-      }
-
   return (
     <Card size="md" variant="unstyled">
       <CardBody width="100%" display="flex">
@@ -65,18 +56,21 @@ export default function GetWalletCard({ wallet, onGetWallet }: Props) {
           </Flex>
         </Stack>
 
-        {/* TODO: Needs to link to install page, will be addressed in future PR */}
-        <Button
+        <HybridButton
           variant="outline"
           size="sm"
           colorScheme="blue"
           ml="auto"
           alignSelf="center"
           borderRadius="full"
-          {...buttonProps}
+          {...(!wallet.installLink
+            ? { href: wallet.website }
+            : {
+                onClick: onGetWallet,
+              })}
         >
           Get
-        </Button>
+        </HybridButton>
       </CardBody>
     </Card>
   )

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<LinkProps, ButtonProps> & BaseProps
+
+type StandardButtonProps = ButtonProps & BaseProps
+
+type HybridButtonProps = LinkButtonProps | StandardButtonProps
+
+function HybridButton({ children, ...props }: HybridButtonProps) {
+  if ('href' in props) {
+    return (
+      <Button as={NextLink} target="_blank" {...props}>
+        {children}
+      </Button>
+    )
+  } else {
+    return <Button {...props}>{children}</Button>
+  }
+}
+
+export default HybridButton

components/WalletTypeCard.tsx

@@ -1,72 +1,35 @@
-import {
-  Button,
-  Card,
-  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
   unstyled?: boolean
+  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,
   unstyled,
-  ...otherProps
+  button: { text: buttonText, ...buttonProps },
 }: WalletTypeCardProps) {
-  let buttonProps: ComponentProps<typeof Button>
-  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 (
     <Stack
+      borderWidth="1px"
       borderRadius="2xl"
       flex={1}
       width="100%"
@@ -90,7 +53,7 @@ export default function WalletTypeCard({
         <Stack pt={1}>
           <Heading size="sm">{title}</Heading>
           <Text color="gray.500">{description}</Text>
-          <Button
+          <HybridButton
             size="sm"
             colorScheme="blue"
             alignSelf="flex-start"
@@ -101,7 +64,7 @@ export default function WalletTypeCard({
             {...buttonProps}
           >
             {buttonText}
-          </Button>
+          </HybridButton>
         </Stack>
       </HStack>
     </Stack>

components/views/GetWallet.tsx

@@ -3,6 +3,8 @@ 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'
+import { getBrowserInfo } from '../../helpers/browsers'
 
 interface GetWalletProps {
   onBack: () => void
@@ -17,6 +19,10 @@ export default function GetWallet({
   wallet,
   onGetQRCode,
 }: GetWalletProps) {
+  const browserInfo = getBrowserInfo(getUserAgent())
+  const browserInstallLink =
+    wallet.installLink?.[browserInfo.id] || wallet.installLink?.browser
+
   return (
     <ViewLayout
       header={{
@@ -28,24 +34,26 @@ export default function GetWallet({
       <Stack flexGrow={1} alignItems="center" spacing={4} px={6} pb={6}>
         {wallet.installLink?.browser && (
           <WalletTypeCard
-            variant="link"
-            icon={ChromeIcon}
-            title={`${wallet.name} for Chrome`}
+            icon={browserInfo.icon}
+            title={`${wallet.name} for ${browserInfo.name}}`}
             description={
               'Access your wallet directly from your preferred web browser.'
             }
-            buttonText="Add to Chrome"
-            href={wallet.installLink.browser}
+            button={{
+              text: `Add to ${browserInfo.name}`,
+              href: browserInstallLink,
+            }}
           ></WalletTypeCard>
         )}
         {wallet.installLink?.mobile && (
           <WalletTypeCard
-            variant="button"
             icon={wallet.icon}
             title={`${wallet.name} for Mobile`}
             description={`Explore the Flow Blockchain using your mobile device.`}
-            buttonText="Get the App"
-            onButtonClick={() => onGetQRCode?.(wallet)}
+            button={{
+              text: 'Scan with Phone',
+              onClick: () => onGetQRCode?.(wallet),
+            }}
           ></WalletTypeCard>
         )}
       </Stack>

helpers/browsers.ts

@@ -1,11 +1,11 @@
-export enum BrowserType {
-  CHROME = 'chrome',
-}
+import { BROWSERS } from './constants'
 
-export function getBrowserType(userAgent: string): BrowserType {
+export function getBrowserInfo(
+  userAgent: string
+): typeof BROWSERS[keyof typeof BROWSERS] {
   if (userAgent.includes('Chrome')) {
-    return BrowserType.CHROME
+    return BROWSERS.CHROME
   }
 
-  throw new Error('Unsupported browser')
+  return BROWSERS.BROWSER
 }

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