cleanup

onflow · Jul 31, 2024 · e5c3956 · e5c3956
1 parent 86b3111
commit e5c3956
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 71 deletions.
diff --git a/components/Discovery.tsx b/components/Discovery.tsx
@@ -7,7 +7,7 @@ import ScanConnect from './views/ScanConnect'
 import AboutWallets from './views/AboutWallets'
 
 import { useModalContext } from '@chakra-ui/react'
-import { ComponentProps, useEffect, useRef, useState } from 'react'
+import { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'
 import { useWallets } from '../hooks/useWallets'
 import { Wallet } from '../data/wallets'
 import * as fcl from '@onflow/fcl'
@@ -46,6 +46,20 @@ export default function Discovery() {
     })
   }, [isCollapsed])
 
+  const onSelectWallet = useCallback(wallet => {
+    setSelectedWallet(wallet)
+    if (wallet.services.length === 1) {
+      const service = wallet.services[0]
+      if (service.method !== FCL_SERVICE_METHODS.WC) {
+        setCurrentView(VIEWS.SCAN_CONNECT)
+      } else {
+        fcl.WalletUtils.redirect(service)
+      }
+    } else {
+      setCurrentView(VIEWS.CONNECT_WALLET)
+    }
+  }, [])
+
   if (!wallets) return <div />
   if (error) return <div>Error Loading Data</div>
 
@@ -56,19 +70,7 @@ export default function Discovery() {
       viewContent = (
         <WalletSelection
           onSwitchToLearnMore={() => setCurrentView(VIEWS.ABOUT_WALLETS)}
-          onClickWallet={wallet => {
-            setSelectedWallet(wallet)
-            if (wallet.services.length === 1) {
-              const service = wallet.services[0]
-              if (service.method !== FCL_SERVICE_METHODS.WC) {
-                setCurrentView(VIEWS.SCAN_CONNECT)
-              } else {
-                fcl.WalletUtils.redirect(service)
-              }
-            } else {
-              setCurrentView(VIEWS.CONNECT_WALLET)
-            }
-          }}
+          onSelectWallet={onSelectWallet}
         />
       )
       headerProps = { title: 'Select a Wallet' }
@@ -162,21 +164,17 @@ export default function Discovery() {
   return (
     <ViewLayout
       header={<ViewHeader {...{ onClose: modal.onClose, ...headerProps }} />}
-      sidebarHeader={<ViewHeader title="Connect a Wallet" alignment="left" />}
+      sidebarHeader={
+        <ViewHeader
+          title="Connect a Wallet"
+          titleProps={{ textAlign: 'left' }}
+          titleOnly
+        />
+      }
       sidebar={
         <WalletSelection
           selectedWallet={selectedWallet}
-          onSwitchToLearnMore={() => setCurrentView(VIEWS.EXPLORE_WALLETS)}
-          onClickWallet={wallet => {
-            setSelectedWallet(wallet)
-            if (wallet.services.length === 1) {
-              // TODO: make sure WC/RPC behaviour is handled once integrated into Discovery
-              // (future PR)
-              fcl.WalletUtils.redirect(wallet.services[0])
-            } else {
-              setCurrentView(VIEWS.CONNECT_WALLET)
-            }
-          }}
+          onSelectWallet={onSelectWallet}
         />
       }
     >

diff --git a/components/ServiceGroup.tsx b/components/ServiceGroup.tsx
@@ -7,7 +7,7 @@ interface ServiceGroupProps {
   wallets: Wallet[]
   titleProps?: React.ComponentProps<typeof Text>
   cardProps?: React.ComponentProps<typeof ServiceCard>
-  onClickWallet: (wallet: Wallet) => void
+  onSelectWallet: (wallet: Wallet) => void
   selectedWallet?: Wallet | null
 }
 
@@ -16,7 +16,7 @@ export default function ServiceGroup({
   wallets,
   titleProps,
   cardProps,
-  onClickWallet,
+  onSelectWallet,
   selectedWallet,
 }: ServiceGroupProps) {
   return (
@@ -30,7 +30,7 @@ export default function ServiceGroup({
             <ServiceCard
               key={wallet.uid}
               wallet={wallet}
-              onClick={() => onClickWallet(wallet)}
+              onClick={() => onSelectWallet(wallet)}
               isSelected={selectedWallet?.uid === wallet.uid}
               {...cardProps}
             />

diff --git a/components/ServiceList.tsx b/components/ServiceList.tsx
@@ -8,13 +8,13 @@ import { useWalletHistory } from '../hooks/useWalletHistory'
 interface ServiceListProps {
   wallets: Wallet[]
   selectedWallet?: Wallet | null
-  onClickWallet: (wallet: Wallet) => void
+  onSelectWallet: (wallet: Wallet) => void
 }
 
 export default function ServiceList({
   wallets,
   selectedWallet,
-  onClickWallet,
+  onSelectWallet,
 }: ServiceListProps) {
   const { isLastUsed } = useWalletHistory()
 
@@ -52,7 +52,7 @@ export default function ServiceList({
           titleProps={{
             color: 'blue.400',
           }}
-          onClickWallet={onClickWallet}
+          onSelectWallet={onSelectWallet}
           selectedWallet={selectedWallet}
         />
       )}
@@ -61,7 +61,7 @@ export default function ServiceList({
         <ServiceGroup
           title="Installed"
           wallets={installedWallets}
-          onClickWallet={onClickWallet}
+          onSelectWallet={onSelectWallet}
           selectedWallet={selectedWallet}
         />
       )}
@@ -70,7 +70,7 @@ export default function ServiceList({
         <ServiceGroup
           title="Recommended"
           wallets={recommendedWallets}
-          onClickWallet={onClickWallet}
+          onSelectWallet={onSelectWallet}
           selectedWallet={selectedWallet}
         />
       )}

diff --git a/components/ViewHeader.tsx b/components/ViewHeader.tsx
@@ -1,59 +1,72 @@
 import { CloseIcon } from '@chakra-ui/icons'
 import { Flex, IconButton, Text } from '@chakra-ui/react'
+import { ComponentProps } from 'react'
 import { IoChevronBack } from 'react-icons/io5'
 
 type HeaderProps = {
   title?: string
-  alignment?: 'center' | 'left' | 'right'
+  titleOnly?: boolean
+  titleProps?: ComponentProps<typeof Text>
   onClose?: () => void
   onBack?: () => void
 }
 
 export default function ViewHeader({
   title,
+  titleOnly,
+  titleProps,
   onClose,
   onBack,
-  alignment,
 }: HeaderProps) {
   return (
-    <Flex alignItems="center" position="relative" p="4" h="65px">
+    <Flex
+      alignItems="center"
+      justifyContent="space-between"
+      px={6}
+      pt={4}
+      pb={6}
+    >
+      {!titleOnly && (
+        <Flex flexGrow={1} flexBasis={0} justifyContent="flex-start">
+          {onBack && (
+            <IconButton
+              onClick={onBack}
+              icon={<IoChevronBack />}
+              aria-label="Close Modal"
+              borderRadius="full"
+              variant="ghost"
+              size="sm"
+              color="blue.500"
+              fontWeight="bold"
+              fontSize="1.5rem"
+            ></IconButton>
+          )}
+        </Flex>
+      )}
+
       <Text
-        position="absolute"
-        left="0"
-        right="0"
         fontSize="xl"
         fontWeight="bold"
-        textAlign={alignment || 'center'}
-        px="8"
+        textAlign={'center'}
+        {...titleProps}
       >
         {title}
       </Text>
 
-      {onBack && (
-        <IconButton
-          onClick={onBack}
-          icon={<IoChevronBack />}
-          aria-label="Close Modal"
-          borderRadius="full"
-          variant="ghost"
-          size="sm"
-          color="blue.500"
-          fontWeight="bold"
-          fontSize="1.5rem"
-        ></IconButton>
-      )}
-
-      {onClose && (
-        <IconButton
-          onClick={onClose}
-          icon={<CloseIcon />}
-          aria-label="Close Modal"
-          borderRadius="full"
-          bg="gray.100"
-          color="black"
-          ml="auto"
-          size="sm"
-        ></IconButton>
+      {!titleOnly && (
+        <Flex flexGrow={1} flexBasis={0} justifyContent="flex-end">
+          {onClose && (
+            <IconButton
+              onClick={onClose}
+              icon={<CloseIcon />}
+              aria-label="Close Modal"
+              borderRadius="full"
+              bg="gray.100"
+              color="black"
+              size="sm"
+            ></IconButton>
+          )}
+        </Flex>
       )}
     </Flex>
   )

diff --git a/components/views/WalletSelection.tsx b/components/views/WalletSelection.tsx
@@ -8,14 +8,14 @@ import { Wallet } from '../../data/wallets'
 import { useIsCollapsed } from '../../hooks/useIsCollapsed'
 
 type Props = {
-  onClickWallet: (wallet: Wallet) => void
-  onSwitchToLearnMore: () => void
+  onSelectWallet: (wallet: Wallet) => void
+  onSwitchToLearnMore?: () => void
   selectedWallet?: Wallet | null
 }
 
 export default function WalletSelection({
   onSwitchToLearnMore,
-  onClickWallet,
+  onSelectWallet,
   selectedWallet,
 }: Props) {
   const { wallets } = useWallets()
@@ -33,7 +33,7 @@ export default function WalletSelection({
         {/* TODO: replace this in future PR with Filter Bar */}
         {/*isFeaturesSupported && <Features />*/}
         <ServiceList
-          onClickWallet={onClickWallet}
+          onSelectWallet={onSelectWallet}
           wallets={wallets}
           selectedWallet={selectedWallet}
         />