diff --git a/components/Discovery.tsx b/components/Discovery.tsx index e84ab0cd..ce74f786 100644 --- a/components/Discovery.tsx +++ b/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() { setCurrentView(VIEWS.WALLET_SELECTION)} onCloseModal={modal.onClose} + onConnectQRCode={() => setCurrentView(VIEWS.SCAN_CONNECT)} wallet={selectedWallet} /> ) break + case VIEWS.SCAN_CONNECT: + viewContent = ( + setCurrentView(VIEWS.WALLET_SELECTION)} + onCloseModal={modal.onClose} + /> + ) } return ( diff --git a/components/views/ConnectWallet.tsx b/components/views/ConnectWallet.tsx index a1e8ad33..c10f4664 100644 --- a/components/views/ConnectWallet.tsx +++ b/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 > diff --git a/components/views/ScanConnect.tsx b/components/views/ScanConnect.tsx new file mode 100644 index 00000000..fb034a68 --- /dev/null +++ b/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 ( + + + + Scan in the {wallet.name} app to connect + + + + + + + + ) +} diff --git a/hooks/useFcl.tsx b/hooks/useFcl.tsx index 5c638329..d366b2d1 100644 --- a/hooks/useFcl.tsx +++ b/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)