Discovery v2 Improvements (#189)

.github/workflows/integrate.yml

@@ -2,7 +2,7 @@ name: FCL-DISCOVERY Continuous Integration
 
 on:
   pull_request:
-    branches: [master]
+    branches: [master, v2]
 
 jobs:
   test_pull_request:
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 20.x
       - run: npm ci
       - run: npm test
       - run: npm run build

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# Sentry Config File
+.env.sentry-build-plugin

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

components/AboutCard.tsx

@@ -0,0 +1,31 @@
+import { Flex, Image, Text } from '@chakra-ui/react'
+import NextImage, { StaticImageData } from 'next/image'
+
+type AboutCardProps = {
+  image: string | StaticImageData
+  title: string
+  description: string
+}
+
+export default function AboutCard({
+  image,
+  title,
+  description,
+}: AboutCardProps) {
+  return (
+    <Flex gap={4} maxW="22rem" alignItems="center">
+      <Image
+        as={NextImage}
+        src={image as any}
+        alt={title}
+        boxSize="3rem"
+        borderRadius="xl"
+      />
+
+      <Flex direction="column" textAlign="left" gap={1}>
+        <Text textStyle="body2Bold">{title}</Text>
+        <Text textStyle="body2">{description}</Text>
+      </Flex>
+    </Flex>
+  )
+}

components/ActionCard.tsx

@@ -0,0 +1,83 @@
+import {
+  Box,
+  ButtonProps,
+  Flex,
+  Heading,
+  Image,
+  SimpleGrid,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import NextImage from 'next/image'
+import { isDataURL } from '../helpers/urls'
+import HybridButton from './HybridButton'
+
+type ActionCardProps = {
+  icon: string
+  title: string
+  description: string
+  button: {
+    text: string
+  } & (
+    | {
+        href: string
+      }
+    | {
+        onClick: () => void
+      }
+  ) &
+    ButtonProps
+}
+
+export default function ActionCard({
+  icon,
+  title,
+  description,
+  button: { text: buttonText, ...buttonProps },
+}: ActionCardProps) {
+  return (
+    <Flex
+      borderRadius="2xl"
+      flex={1}
+      width="100%"
+      justifyContent="center"
+      alignItems="center"
+      p={6}
+    >
+      <SimpleGrid
+        columns={2}
+        w="xs"
+        gap={4}
+        templateColumns={'auto 1fr'}
+        templateRows={'auto 1fr'}
+        alignItems="center"
+      >
+        <Image
+          as={isDataURL(icon) ? 'img' : NextImage}
+          src={icon}
+          alt={title}
+          boxSize="4.5rem"
+          borderRadius="xl"
+          my="auto"
+        />
+        <Stack pt={1}>
+          <Text textStyle="body1Bold">{title}</Text>
+          <Text textStyle="body2">{description}</Text>
+        </Stack>
+
+        {/* Placeholder for grid */}
+        <Box></Box>
+
+        <HybridButton
+          variant="primary"
+          size="sm"
+          borderRadius="full"
+          mr="auto"
+          {...buttonProps}
+        >
+          {buttonText}
+        </HybridButton>
+      </SimpleGrid>
+    </Flex>
+  )
+}

components/ColorModeSync.tsx

@@ -0,0 +1,19 @@
+import { useColorMode, useColorModePreference } from '@chakra-ui/react'
+import { useEffect } from 'react'
+
+// Used to keep users color mode in sync with their preferred color mode
+// Chakra is supposed to do it, but when the system color mode is changed
+// when the app is closed, Chakra never updates the color mode, so this
+// helps keep it in sync.
+export function ColorModeSync() {
+  const preferredColorMode = useColorModePreference()
+  const { setColorMode, colorMode } = useColorMode()
+
+  useEffect(() => {
+    if (!preferredColorMode) return
+    if (colorMode === preferredColorMode) return
+    setColorMode(preferredColorMode)
+  }, [preferredColorMode])
+
+  return null
+}

components/ConnectCard.tsx

@@ -0,0 +1,78 @@
+import { Wallet } from '../data/wallets'
+import { FCL_SERVICE_METHODS } from '../helpers/constants'
+import { Service } from '../types'
+import ActionCard from './ActionCard'
+import { useDevice } from '../contexts/DeviceContext'
+import { DeviceType } from '../helpers/device'
+import { getBrowserInfo } from '../helpers/browsers'
+import { useRpc } from '../contexts/FclContext'
+
+export type ConnectCardProps = {
+  onConnect: () => void
+  wallet: Wallet
+  serviceIdx: number
+}
+
+export function ConnectCard({
+  onConnect,
+  wallet,
+  serviceIdx,
+}: ConnectCardProps) {
+  const info = useConnectCardInfo(wallet, wallet.services[serviceIdx])
+  if (!info) {
+    return null
+  }
+
+  const { title, description, buttonText, icon } = info
+  return (
+    <ActionCard
+      icon={icon}
+      title={title}
+      description={description}
+      button={{
+        text: buttonText,
+        onClick: onConnect,
+      }}
+    ></ActionCard>
+  )
+}
+
+function useConnectCardInfo(wallet: Wallet, service: Service) {
+  const { deviceInfo } = useDevice()
+  const { rpcEnabled } = useRpc()
+
+  let title: string, description: string, buttonText: string, icon: string
+  switch (service.method) {
+    case FCL_SERVICE_METHODS.WC:
+      title = `${wallet.name} Mobile`
+      description = `Confirm the connection in the mobile app`
+      if (deviceInfo.type === DeviceType.MOBILE) {
+        buttonText = `Open Wallet`
+      } else {
+        // Older FCL clients may skip scanning QR and use existing session
+        buttonText = rpcEnabled ? `Scan QR Code` : `Connect`
+      }
+      icon = wallet.icon
+      break
+    case FCL_SERVICE_METHODS.EXT:
+      title = `${wallet.name} Extension`
+      description = `Confirm the connection in the browser extension`
+      buttonText = `Connect`
+      icon = getBrowserInfo(deviceInfo.browser).icon
+      break
+    case FCL_SERVICE_METHODS.HTTP:
+    case FCL_SERVICE_METHODS.POP:
+    case FCL_SERVICE_METHODS.IFRAME:
+    case FCL_SERVICE_METHODS.TAB:
+      title = `Connect to ${wallet.name}`
+      description = `Confirm the connection in the web app`
+      buttonText = `Connect`
+      icon = getBrowserInfo(deviceInfo.browser).icon
+      break
+    default:
+      title = `Connect to ${wallet.name}`
+      description = `Confirm the connection in your wallet`
+      buttonText = `Connect`
+  }
+  return { title, description, buttonText, icon }
+}

components/CopyButton.tsx

@@ -0,0 +1,48 @@
+import { IconButton } from '@chakra-ui/react'
+import CopyIcon from './icons/CopyIcon'
+import { ComponentProps, useRef, useState } from 'react'
+import { CheckIcon } from '@chakra-ui/icons'
+
+type CopyButtonProps = {
+  text: string
+} & Partial<ComponentProps<typeof IconButton>>
+
+export default function CopyButton({ text, ...props }: CopyButtonProps) {
+  const size = '1.75rem'
+  const checkSize = '1.15rem'
+
+  const [showCheck, setShowCheck] = useState(false)
+  const checkTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const icon = showCheck ? (
+    <CheckIcon boxSize={checkSize} />
+  ) : (
+    <CopyIcon boxSize={size} />
+  )
+
+  function onClick() {
+    navigator.clipboard.writeText(text)
+    setShowCheck(true)
+    if (checkTimeoutRef.current) {
+      clearTimeout(checkTimeoutRef.current)
+    }
+    checkTimeoutRef.current = setTimeout(() => {
+      setShowCheck(false)
+    }, 1000)
+  }
+
+  return (
+    <IconButton
+      variant="ghost"
+      color="foreground.60%"
+      size="sm"
+      borderRadius="full"
+      aria-label="Copy"
+      minW={0}
+      boxSize={size}
+      icon={icon}
+      onClick={onClick}
+      isRound
+      {...props}
+    ></IconButton>
+  )
+}