[Affiliate] Close all affiliate banners after a successful trade

src/custom/components/AffiliateStatusCheck/index.tsx

@@ -1,13 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useActiveWeb3React } from 'hooks/web3'
+import useRecentActivity from 'hooks/useRecentActivity'
 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'
 import { SupportedChainId } from 'constants/chains'
 import useParseReferralQueryParam from 'hooks/useParseReferralQueryParam'
+import { OrderStatus } from '@src/custom/state/orders/actions'
 
 type AffiliateStatus = 'NOT_CONNECTED' | 'OWN_LINK' | 'ALREADY_TRADED' | 'ACTIVE' | 'UNSUPPORTED_NETWORK'
 
@@ -25,14 +27,25 @@ 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()
   const { account, chainId } = useActiveWeb3React()
+  const allRecentActivity = useRecentActivity()
   const referralAddress = useReferralAddress()
   const referralAddressQueryParam = useParseReferralQueryParam()
   const [affiliateState, setAffiliateState] = useState<AffiliateStatus | null>()
   const [error, setError] = useState('')
+  const isFirstTrade = useRef(false)
+
+  const { fulfilledOrders } = useMemo(() => {
+    const fulfilledOrders = allRecentActivity.filter((data) => data.status === OrderStatus.FULFILLED)
+
+    return {
+      fulfilledOrders,
+    }
+  }, [allRecentActivity])
 
   const uploadDataDoc = useCallback(async () => {
     if (!chainId || !account || !referralAddress) {
@@ -47,7 +60,6 @@ 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) {
         setAffiliateState('ALREADY_TRADED')
         return
@@ -62,6 +74,7 @@ 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.')
@@ -96,6 +109,15 @@ export default function AffiliateStatusCheck() {
       return
     }
 
+    const hasJustTraded = fulfilledOrders.length >= 1
+
+    if (hasJustTraded && isFirstTrade.current) {
+      setAffiliateState(null)
+      resetReferralAddress()
+      isFirstTrade.current = false
+      return
+    }
+
     uploadDataDoc()
   }, [
     referralAddress,
@@ -104,8 +126,10 @@ export default function AffiliateStatusCheck() {
     chainId,
     appDispatch,
     uploadDataDoc,
+    resetReferralAddress,
     location.search,
     referralAddressQueryParam,
+    fulfilledOrders,
   ])
 
   if (error) {

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