Add integrated WalletConnect QR when available

components/Discovery.tsx

@@ -3,6 +3,8 @@ import ExploreWallets from './views/ExploreWallets'
 import GetWallet from './views/GetWallet'
 import ScanInstall from './views/ScanInstall'
 import ConnectWallet from './views/ConnectWallet'
+import ScanConnect from './views/ScanConnect'
+
 import { Flex, useModalContext } from '@chakra-ui/react'
 import { useState } from 'react'
 import { useWallets } from '../hooks/useWallets'
@@ -87,10 +89,19 @@ export default function Discovery() {
         <ConnectWallet
           onBack={() => setCurrentView(VIEWS.WALLET_SELECTION)}
           onCloseModal={modal.onClose}
+          onConnectQRCode={() => setCurrentView(VIEWS.SCAN_CONNECT)}
           wallet={selectedWallet}
         />
       )
       break
+    case VIEWS.SCAN_CONNECT:
+      viewContent = (
+        <ScanConnect
+          wallet={selectedWallet}
+          onBack={() => setCurrentView(VIEWS.WALLET_SELECTION)}
+          onCloseModal={modal.onClose}
+        />
+      )
   }
 
   return (

components/views/ConnectWallet.tsx

@@ -5,21 +5,37 @@ import ChromeIcon from '../Icons/chrome.svg'
 import { Wallet } from '../../data/wallets'
 import { FCL_SERVICE_METHODS } from '../../helpers/constants'
 import * as fcl from '@onflow/fcl'
-import { Fragment } from 'react'
+import { Fragment, useCallback } from 'react'
 import { Service } from '../../types'
+import { useConfig } from '../../contexts/ConfigContext'
 import { toTitleCase } from '../../helpers/strings'
 
 interface GetWalletProps {
   onBack: () => void
   onCloseModal: () => void
+  onConnectQRCode: () => void
   wallet: Wallet
 }
 
 export default function ConnectWallet({
   onBack,
   onCloseModal,
+  onConnectQRCode,
   wallet,
 }: GetWalletProps) {
+  const { walletConnectUri } = useConfig()
+  const connectToService = useCallback(
+    async (service: Service) => {
+      // WC/RPC is a special case where we need to show a QR code within Discovery
+      if (service.method === FCL_SERVICE_METHODS.WC && walletConnectUri) {
+        onConnectQRCode()
+      } else {
+        fcl.WalletUtils.redirect(service)
+      }
+    },
+    [walletConnectUri, onConnectQRCode]
+  )
+
   const getServiceInfo = (service: Service) => {
     const titleCasedName = toTitleCase(wallet.name)
     let title: string, description: string, buttonText: string, icon: string
@@ -73,7 +89,7 @@ export default function ConnectWallet({
                 description={description}
                 button={{
                   text: buttonText,
-                  onClick: () => fcl.WalletUtils.redirect(service),
+                  onClick: () => connectToService(service),
                 }}
                 unstyled
               ></WalletTypeCard>

components/views/ScanConnect.tsx

@@ -0,0 +1,45 @@
+import { Box, Stack, Text } from '@chakra-ui/react'
+import ViewLayout from '../ViewLayout'
+import QRCode from 'react-qr-code'
+import { Wallet } from '../../data/wallets'
+import { useConfig } from '../../contexts/ConfigContext'
+
+interface ScanConnectProps {
+  onBack: () => void
+  onCloseModal: () => void
+  wallet: Wallet
+}
+
+export default function ScanConnect({
+  onBack,
+  onCloseModal,
+  wallet,
+}: ScanConnectProps) {
+  const { walletConnectUri } = useConfig()
+  return (
+    <ViewLayout
+      header={{
+        title: `Connect to ${wallet.name}`,
+        onBack,
+        onClose: onCloseModal,
+      }}
+    >
+      <Stack flexGrow={1} alignItems="center" spacing={8} padding={4}>
+        <Text color="gray" fontWeight="bold" maxW="2xs" textAlign="center">
+          Scan in the {wallet.name} app to connect
+        </Text>
+
+        <Box
+          padding={4}
+          bg="white"
+          borderRadius="xl"
+          shadow="md"
+          border="1px"
+          borderColor="gray.200"
+        >
+          <QRCode level="M" value={walletConnectUri} size={300} />
+        </Box>
+      </Stack>
+    </ViewLayout>
+  )
+}

hooks/useFcl.tsx

@@ -15,6 +15,7 @@ export interface FclConfig {
   walletInclude: string[]
   clientServices: Service[]
   supportedStrategies: Strategy[]
+  walletConnectUri: string | null
 }
 
 export function useFcl() {
@@ -41,6 +42,7 @@ export function useFcl() {
             body.extensions ||
             [],
           supportedStrategies: config.client?.supportedStrategies || [],
+          walletConnectUri: config.client?.walletConnectUri || null,
         } as FclConfig
 
         setConfig(state)