Add connect wallet button (#2328)

* Show add to wallet button

* Change message for unsupported network

* PR updates

* Small PR change

* PR update

src/custom/pages/Claim/ClaimAddress.tsx

@@ -8,12 +8,14 @@ import { ClaimCommonTypes } from './types'
 import useENS from 'hooks/useENS'
 import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
+import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 
 export type ClaimAddressProps = Pick<ClaimCommonTypes, 'account'> & {
   toggleWalletModal: () => void
 }
 
 export default function ClaimAddress({ account, toggleWalletModal }: ClaimAddressProps) {
+  const { error } = useWeb3React()
   const { activeClaimAccount, claimStatus, inputAddress } = useClaimState()
   const { setInputAddress } = useClaimDispatchers()
 
@@ -32,18 +34,16 @@ export default function ClaimAddress({ account, toggleWalletModal }: ClaimAddres
     setInputAddress(withoutSpaces)
   }
 
+  const buttonLabel =
+    error instanceof UnsupportedChainIdError ? 'or connect a wallet in a supported network' : 'or connect a wallet'
+
   if (activeClaimAccount || claimStatus === ClaimStatus.CONFIRMED) return null
 
   return (
     <CheckAddress>
       <p>
         Enter an address to check for any eligible vCOW claims. <br />
         <i>Note: It is possible to claim for an account, using any wallet/account.</i>
-        {!account && (
-          <ButtonSecondary onClick={toggleWalletModal}>
-            <Trans>or connect a wallet</Trans>
-          </ButtonSecondary>
-        )}
       </p>
 
       <InputField>
@@ -54,6 +54,12 @@ export default function ClaimAddress({ account, toggleWalletModal }: ClaimAddres
         <input placeholder="Address or ENS name" value={inputAddress} onChange={handleInputChange} />
       </InputField>
 
+      {!account && (
+        <ButtonSecondary onClick={toggleWalletModal}>
+          <Trans>{buttonLabel}</Trans>
+        </ButtonSecondary>
+      )}
+
       {showInputError && (
         <InputErrorText>
           <TYPE.error error={true}>

src/custom/pages/Claim/FooterNavButtons.tsx

@@ -12,7 +12,8 @@ import { FooterNavButtons as FooterNavButtonsWrapper } from './styled'
 import { useActiveWeb3React } from 'hooks/web3'
 import { ClaimsTableProps } from './ClaimsTable'
 import { ClaimAddressProps } from './ClaimAddress'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useRef } from 'react'
+import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 
 type FooterNavButtonsProps = Pick<ClaimsTableProps, 'hasClaims' | 'isAirdropOnly'> &
   Pick<ClaimAddressProps, 'toggleWalletModal'> & {
@@ -53,28 +54,44 @@ export default function FooterNavButtons({
   const hasError = useHasClaimInvestmentFlowError()
   const hasZeroInvested = useHasZeroInvested()
 
+  const { error } = useWeb3React()
+
   const isInputAddressValid = isAddress(resolvedAddress || '')
 
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
   // User is connected and has some unclaimed claims
   const isConnectedAndHasClaims = account && activeClaimAccount && hasClaims && claimStatus === ClaimStatus.DEFAULT
   const noPaidClaimsSelected = !selected.length
 
+  useEffect(() => {
+    buttonRef?.current?.blur()
+  }, [activeClaimAccount])
+
   let buttonContent: ReactNode = null
   // Disconnected, show wallet connect
-  if (!account) {
+  if (!account && activeClaimAccount) {
     buttonContent = (
-      <ButtonPrimary onClick={toggleWalletModal}>
+      <ButtonPrimary ref={buttonRef} onClick={toggleWalletModal}>
         <Trans>Connect a wallet</Trans>
       </ButtonPrimary>
     )
   }
-
   // User has no set active claim account and/or has claims, show claim account search
-  if ((!activeClaimAccount || !hasClaims) && claimStatus === ClaimStatus.DEFAULT) {
+  else if (!hasClaims && claimStatus === ClaimStatus.DEFAULT) {
     buttonContent = (
       <>
-        <ButtonPrimary disabled={!isInputAddressValid} type="text" onClick={handleCheckClaim}>
-          <Trans>Check claimable vCOW</Trans>
+        <ButtonPrimary
+          ref={buttonRef}
+          disabled={!isInputAddressValid || error instanceof UnsupportedChainIdError}
+          type="text"
+          onClick={handleCheckClaim}
+        >
+          {error instanceof UnsupportedChainIdError ? (
+            <Trans>Wrong Network</Trans>
+          ) : (
+            <Trans>Check claimable vCOW</Trans>
+          )}
         </ButtonPrimary>
       </>
     )

src/custom/pages/Claim/index.tsx

@@ -26,6 +26,7 @@ import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationMod
 import { useErrorModal } from 'hooks/useErrorMessageAndModal'
 import FooterNavButtons from './FooterNavButtons'
 import ClaimsOnOtherChainsBanner from './ClaimsOnOtherChainsBanner'
+import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 
 /* TODO: Replace URLs with the actual final URL destinations */
 export const COW_LINKS = {
@@ -35,6 +36,7 @@ export const COW_LINKS = {
 
 export default function Claim() {
   const { account, chainId } = useActiveWeb3React()
+  const { error } = useWeb3React()
 
   const {
     // address/ENS address
@@ -93,11 +95,16 @@ export default function Claim() {
   // claim callback
   const { claimCallback, estimateGasCallback } = useClaimCallback(activeClaimAccount)
 
-  // handle change account
-  const handleChangeAccount = () => {
+  // reset claim state
+  const resetClaimState = useCallback(() => {
+    setClaimStatus(ClaimStatus.DEFAULT)
     setActiveClaimAccount('')
     setSelected([])
-    setClaimStatus(ClaimStatus.DEFAULT)
+  }, [setActiveClaimAccount, setClaimStatus, setSelected])
+
+  // handle change account
+  const handleChangeAccount = () => {
+    resetClaimState()
     setIsSearchUsed(true)
   }
 
@@ -173,10 +180,25 @@ export default function Claim() {
       setActiveClaimAccount(account)
     }
 
+    // handle unsupported network
+    if (error instanceof UnsupportedChainIdError) {
+      resetClaimState()
+    }
+
     // properly reset the user to the claims table and initial investment flow
     resetClaimUi()
     // Depending on chainId even though it's not used because we want to reset the state on network change
-  }, [account, activeClaimAccount, chainId, resolvedAddress, isSearchUsed, setActiveClaimAccount, resetClaimUi])
+  }, [
+    account,
+    activeClaimAccount,
+    chainId,
+    resolvedAddress,
+    isSearchUsed,
+    setActiveClaimAccount,
+    resetClaimUi,
+    error,
+    resetClaimState,
+  ])
 
   // Transaction confirmation modal
   const { TransactionConfirmationModal, openModal, closeModal } = useTransactionConfirmationModal(

src/custom/pages/Claim/styled.ts

@@ -737,7 +737,7 @@ export const InputField = styled.div`
   flex-flow: row wrap;
   background: ${({ theme }) => theme.currencyInput?.background};
   width: 100%;
-  margin: 0 0 24px;
+  margin: 0 0 15px;
 
   > input {
     background: transparent;