Bugfix/profile creation mint (pancakeswap#468)

* fix(profile): Unmount React error

* fix(profile): Check minimum CAKE balance

src/hooks/useHasCakeBalance.ts

@@ -1,10 +1,11 @@
+import BigNumber from 'bignumber.js'
 import { getCakeAddress } from 'utils/addressHelpers'
 import useTokenBalance from './useTokenBalance'
 
 /**
  * A hook to check if a wallet's CAKE balance is at least the amount passed in
  */
-const useHasCakeBalance = (minimumBalance) => {
+const useHasCakeBalance = (minimumBalance: BigNumber) => {
   const cakeBalance = useTokenBalance(getCakeAddress())
   return cakeBalance.gte(minimumBalance)
 }

src/views/Profile/ProfileCreation/Mint.tsx

@@ -14,16 +14,18 @@ import useProfileCreation from './contexts/hook'
 
 const starterBunnyIds = [5, 6, 7, 8, 9]
 const nfts = nftList.filter((nft) => starterBunnyIds.includes(nft.bunnyId))
-const minimumCakeBalance = 4
+const cakeCostToMint = 4
+const minimumCakeBalanceToMint = new BigNumber(cakeCostToMint).multipliedBy(new BigNumber(10).pow(18))
 
 const Mint: React.FC = () => {
   const [bunnyId, setBunnyId] = useState(null)
   const { actions, minimumCakeRequired, allowance } = useProfileCreation()
+
   const { account } = useWallet()
   const cakeContract = useCake()
   const bunnyFactoryContract = useBunnyFactory()
   const TranslateString = useI18n()
-  const hasMinimumCakeRequired = useHasCakeBalance(minimumCakeBalance)
+  const hasMinimumCakeRequired = useHasCakeBalance(minimumCakeBalanceToMint)
   const {
     isApproving,
     isApproved,
@@ -94,19 +96,19 @@ const Mint: React.FC = () => {
               </SelectionCard>
             )
           })}
+          {!hasMinimumCakeRequired && (
+            <Text color="failure" mb="16px">
+              {TranslateString(1098, `A minimum of ${cakeCostToMint} CAKE is required`)}
+            </Text>
+          )}
           <ApproveConfirmButtons
             isApproveDisabled={bunnyId === null || isConfirmed || isConfirming || isApproved}
             isApproving={isApproving}
-            isConfirmDisabled={!isApproved || isConfirmed}
+            isConfirmDisabled={!isApproved || isConfirmed || !hasMinimumCakeRequired}
             isConfirming={isConfirming}
             onApprove={handleApprove}
             onConfirm={handleConfirm}
           />
-          {!hasMinimumCakeRequired && (
-            <Text color="failure" mt="16px">
-              {TranslateString(1098, `A minimum of ${minimumCakeBalance} CAKE is required`)}
-            </Text>
-          )}
         </CardBody>
       </Card>
       <NextStepButton onClick={actions.nextStep} disabled={!isConfirmed}>

src/views/Profile/ProfileCreation/UserName.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import styled from 'styled-components'
+import BigNumber from 'bignumber.js'
 import {
   Card,
   CardBody,
@@ -34,7 +35,8 @@ enum ExistingUserState {
 const MIN_LENGTH = 3
 const MAX_LENGTH = 15
 const profileApiUrl = process.env.REACT_APP_API_PROFILE
-const minimumCakeBalance = 1
+const cakeCostToRegister = 1
+const minimumCakeToRegister = new BigNumber(cakeCostToRegister).multipliedBy(new BigNumber(10).pow(18))
 
 const InputWrap = styled.div`
   position: relative;
@@ -67,7 +69,7 @@ const UserName: React.FC = () => {
   const [isValid, setIsValid] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [message, setMessage] = useState('')
-  const hasMinimumCakeRequired = useHasCakeBalance(minimumCakeBalance)
+  const hasMinimumCakeRequired = useHasCakeBalance(minimumCakeToRegister)
   const [onPresentConfirmProfileCreation] = useModal(
     <ConfirmProfileCreationModal
       userName={userName}
@@ -243,7 +245,7 @@ const UserName: React.FC = () => {
       </Button>
       {!hasMinimumCakeRequired && (
         <Text color="failure" mt="16px">
-          {TranslateString(1098, `A minimum of ${minimumCakeBalance} CAKE is required`)}
+          {TranslateString(1098, `A minimum of ${cakeCostToRegister} CAKE is required`)}
         </Text>
       )}
     </>

src/views/Profile/ProfileCreation/contexts/ProfileCreationProvider.tsx

@@ -55,15 +55,26 @@ const ProfileCreationProvider: React.FC = ({ children }) => {
 
   // Initial checks
   useEffect(() => {
+    let isSubscribed = true
+
     const fetchData = async () => {
       const bunnyFactoryContract = getBunnyFactoryContract()
       const canMint = await bunnyFactoryContract.methods.canMint(account).call()
       dispatch({ type: 'initialize', step: canMint ? 0 : 1 })
+
+      // When changing wallets quickly unmounting before the hasClaim finished causes a React error
+      if (isSubscribed) {
+        dispatch({ type: 'initialize', step: canMint ? 0 : 1 })
+      }
     }
 
     if (account) {
       fetchData()
     }
+
+    return () => {
+      isSubscribed = false
+    }
   }, [account, dispatch])
 
   const actions: ContextType['actions'] = useMemo(