[Affiliate] Close all affiliate banners after a successful trade

src/custom/components/AffiliateStatusCheck/index.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useActiveWeb3React } from 'hooks/web3'
 import NotificationBanner from 'components/NotificationBanner'
-import { useReferralAddress, useUploadReferralDocAndSetDataHash } from 'state/affiliate/hooks'
+import { useReferralAddress, useResetReferralAddress, useUploadReferralDocAndSetDataHash } from 'state/affiliate/hooks'
 import { useAppDispatch } from 'state/hooks'
 import { hasTrades } from 'utils/trade'
 import { retry, RetryOptions } from 'utils/retry'
@@ -25,6 +25,7 @@ const DEFAULT_RETRY_OPTIONS: RetryOptions = { n: 3, minWait: 1000, maxWait: 3000
 
 export default function AffiliateStatusCheck() {
   const appDispatch = useAppDispatch()
+  const resetReferralAddress = useResetReferralAddress()
   const uploadReferralDocAndSetDataHash = useUploadReferralDocAndSetDataHash()
   const history = useHistory()
   const location = useLocation()
@@ -33,6 +34,7 @@ export default function AffiliateStatusCheck() {
   const referralAddressQueryParam = useParseReferralQueryParam()
   const [affiliateState, setAffiliateState] = useState<AffiliateStatus | null>()
   const [error, setError] = useState('')
+  const isFirstTrade = useRef(false)
 
   const uploadDataDoc = useCallback(async () => {
     if (!chainId || !account || !referralAddress) {
@@ -47,8 +49,13 @@ export default function AffiliateStatusCheck() {
     try {
       // we first validate that the user hasn't already traded
       const userHasTrades = await retry(() => hasTrades(chainId, account), DEFAULT_RETRY_OPTIONS).promise
-
       if (userHasTrades) {
+        if (isFirstTrade.current) {
+          setAffiliateState(null)
+          resetReferralAddress()
+          isFirstTrade.current = false
+          return
+        }
         setAffiliateState('ALREADY_TRADED')
         return
       }
@@ -62,11 +69,12 @@ export default function AffiliateStatusCheck() {
       await retry(() => uploadReferralDocAndSetDataHash(referralAddress.value), DEFAULT_RETRY_OPTIONS).promise
 
       setAffiliateState('ACTIVE')
+      isFirstTrade.current = true
     } catch (error) {
       console.error(error)
       setError('There was an error while uploading the referral document to IPFS. Please try again.')
     }
-  }, [chainId, account, referralAddress, uploadReferralDocAndSetDataHash])
+  }, [chainId, account, referralAddress, resetReferralAddress, uploadReferralDocAndSetDataHash])
 
   useEffect(() => {
     if (!referralAddress) {
@@ -104,6 +112,7 @@ export default function AffiliateStatusCheck() {
     chainId,
     appDispatch,
     uploadDataDoc,
+    resetReferralAddress,
     location.search,
     referralAddressQueryParam,
   ])

src/custom/components/Web3Status/index.tsx

@@ -6,8 +6,8 @@ import { AbstractConnector } from '@web3-react/abstract-connector'
 import { getStatusIcon } from 'components/AccountDetails'
 import useRecentActivity, { TransactionAndOrder } from 'hooks/useRecentActivity'
 import { useWalletInfo } from 'hooks/useWalletInfo'
-import { OrderStatus } from 'state/orders/actions'
 import { ButtonSecondary } from 'components/Button'
+import { OrderStatus } from '@src/custom/state/orders/actions'
 
 const Wrapper = styled.div`
   color: ${({ theme }) => theme.wallet?.color};

src/custom/state/affiliate/hooks.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import { AppState } from 'state'
 import { useAppDispatch } from 'state/hooks'
-import { updateAppDataHash } from 'state/affiliate/actions'
+import { updateAppDataHash, updateReferralAddress } from 'state/affiliate/actions'
 import { generateReferralMetadataDoc, uploadMetadataDocToIpfs } from 'utils/metadata'
 import { APP_DATA_HASH } from 'constants/index'
 
@@ -25,6 +25,12 @@ export function useReferralAddress() {
   })
 }
 
+export function useResetReferralAddress() {
+  const dispatch = useAppDispatch()
+
+  return useCallback(() => dispatch(updateReferralAddress(null)), [dispatch])
+}
+
 export function useUploadReferralDocAndSetDataHash() {
   const dispatch = useAppDispatch()