Update appearance

components/views/ConnectWallet.tsx

@@ -4,9 +4,9 @@ import WalletTypeCard from '../WalletTypeCard'
 import ChromeIcon from '../Icons/chrome.svg'
 import { Wallet } from '../../data/wallets'
 import { FCL_SERVICE_METHODS } from '../../helpers/constants'
-import { toLower } from 'rambda'
 import * as fcl from '@onflow/fcl'
 import { Fragment } from 'react'
+import { Service } from '../../types'
 
 interface GetWalletProps {
   onBack: () => void
@@ -19,18 +19,20 @@ export default function ConnectWallet({
   onCloseModal,
   wallet,
 }: GetWalletProps) {
-  const getServiceInfo = service => {
-    let title: string, description: string, buttonText: string
-    switch (wallet.services[0].method) {
+  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:
@@ -39,13 +41,14 @@ export default function ConnectWallet({
         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 }
+    return { title, description, buttonText, icon }
   }
 
   return (
@@ -58,11 +61,12 @@ export default function ConnectWallet({
     >
       <Stack flexGrow={1} alignItems="center" spacing={4} px={6} pb={6}>
         {wallet.services.map((service, i) => {
-          const { title, description, buttonText } = getServiceInfo(service)
+          const { title, description, buttonText, icon } =
+            getServiceInfo(service)
           return (
             <Fragment key={i}>
               <WalletTypeCard
-                icon={ChromeIcon}
+                icon={icon}
                 title={title}
                 description={description}
                 button={{
@@ -72,7 +76,7 @@ export default function ConnectWallet({
                 unstyled
               ></WalletTypeCard>
               {i < wallet.services.length - 1 && (
-                <Divider w="80%" color="gray.300" />
+                <Divider w="90%" borderColor="gray.300" />
               )}
             </Fragment>
           )

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(' ')