Merge branch 'jribbink/connect-wallet' into jribbink/scan-qr

onflow · Jul 30, 2024 · 6e7a1b2 · 6e7a1b2
2 parents 0fabc37 + db0cf38
commit 6e7a1b2
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 28 deletions.
diff --git a/components/Discovery.tsx b/components/Discovery.tsx
@@ -3,12 +3,13 @@ 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'
 import { Wallet } from '../data/wallets'
 import * as fcl from '@onflow/fcl'
-import ScanConnect from './views/ScanConnect'
 
 export enum VIEWS {
   WALLET_SELECTION,

diff --git a/components/views/ConnectWallet.tsx b/components/views/ConnectWallet.tsx
@@ -4,22 +4,11 @@ import WalletTypeCard from '../WalletTypeCard'
 import ChromeIcon from '../Icons/chrome.svg'
 import { Wallet } from '../../data/wallets'
 import { FCL_SERVICE_METHODS } from '../../helpers/constants'
-import { toTitleCase } from '../../helpers/strings'
-import { toLower } from 'rambda'
 import * as fcl from '@onflow/fcl'
 import { Fragment, useCallback } from 'react'
 import { Service } from '../../types'
 import { useConfig } from '../../contexts/ConfigContext'
 
-const CANNONICAL_SERVICE_NAMES = {
-  'WC/RPC': 'Mobile App',
-  [FCL_SERVICE_METHODS.EXT]: 'Browser Extension',
-  [FCL_SERVICE_METHODS.HTTP]: 'Web Browser',
-  [FCL_SERVICE_METHODS.TAB]: 'Web Browser',
-  [FCL_SERVICE_METHODS.POP]: 'Web Browser',
-  [FCL_SERVICE_METHODS.IFRAME]: 'Web Browser',
-}
-
 interface GetWalletProps {
   onBack: () => void
   onCloseModal: () => void
@@ -46,6 +35,38 @@ export default function ConnectWallet({
     [walletConnectUri, onConnectQRCode]
   )
 
+  const getServiceInfo = (service: Service) => {
+    let title: string, description: string, buttonText: string, icon: string
+    switch (service.method) {
+      case 'WC/RPC':
+        title = `${wallet.name} Mobile`
+        description = `Confirm the connection in the mobile app`
+        buttonText = `Scan with Phone`
+        icon = wallet.icon
+        break
+      case FCL_SERVICE_METHODS.EXT:
+        title = `${wallet.name} Extension`
+        description = `Confirm the connection in the browser extension`
+        buttonText = `Connect`
+        icon = ChromeIcon
+        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 = ChromeIcon
+        break
+      default:
+        title = `Connect to ${wallet.name}`
+        description = `Confirm the connection in your wallet`
+        buttonText = `Connect`
+    }
+    return { title, description, buttonText, icon }
+  }
+
   return (
     <ViewLayout
       header={{
@@ -56,23 +77,22 @@ export default function ConnectWallet({
     >
       <Stack flexGrow={1} alignItems="center" spacing={4} px={6} pb={6}>
         {wallet.services.map((service, i) => {
-          const cannonicalName = CANNONICAL_SERVICE_NAMES[service.method]
+          const { title, description, buttonText, icon } =
+            getServiceInfo(service)
           return (
             <Fragment key={i}>
               <WalletTypeCard
-                icon={ChromeIcon}
-                title={`${wallet.name} ${toTitleCase(cannonicalName)}`}
-                description={`Confirm the connection in the ${toLower(
-                  cannonicalName
-                )}`}
+                icon={icon}
+                title={title}
+                description={description}
                 button={{
-                  text: `Connect`,
+                  text: buttonText,
                   onClick: () => connectToService(service),
                 }}
                 unstyled
               ></WalletTypeCard>
               {i < wallet.services.length - 1 && (
-                <Divider w="80%" color="gray.300" />
+                <Divider w="90%" borderColor="gray.300" />
               )}
             </Fragment>
           )

diff --git a/helpers/strings.ts b/helpers/strings.ts
@@ -5,11 +5,3 @@ export const truncateString = (str: string, n: number) => {
     return str
   }
 }
-
-export const toTitleCase = (str: string) =>
-  str
-    ?.split(' ')
-    ?.map(c =>
-      c.length > 0 ? c[0].toUpperCase() + c.substring(1).toLowerCase() : c
-    )
-    ?.join(' ')