[Affiliate] Close all affiliate banners after a successful trade (#1748)

Fixes #1707

Remove info banner when order is recently fulfilled.

1. Navigate through a referral link with a new account.
- You will see `Valid Affiliate code: You can now do your first trade to join the program` banner message
2. Under the new account do the 1st trade in the mainnet.
- Information banner will disappear

src/custom/components/AffiliateStatusCheck/index.tsx

@@ -1,13 +1,15 @@
-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'
 import { SupportedChainId } from 'constants/chains'
 import useParseReferralQueryParam from 'hooks/useParseReferralQueryParam'
+import useRecentActivity from 'hooks/useRecentActivity'
+import { OrderStatus } from 'state/orders/actions'
 
 type AffiliateStatus = 'NOT_CONNECTED' | 'OWN_LINK' | 'ALREADY_TRADED' | 'ACTIVE' | 'UNSUPPORTED_NETWORK'
 
@@ -25,14 +27,18 @@ 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 referralAddress = useReferralAddress()
   const referralAddressQueryParam = useParseReferralQueryParam()
+  const allRecentActivity = useRecentActivity()
   const [affiliateState, setAffiliateState] = useState<AffiliateStatus | null>()
   const [error, setError] = useState('')
+  const isFirstTrade = useRef(false)
+  const fulfilledActivity = allRecentActivity.filter((data) => data.status === OrderStatus.FULFILLED)
 
   const uploadDataDoc = useCallback(async () => {
     if (!chainId || !account || !referralAddress) {
@@ -44,10 +50,17 @@ export default function AffiliateStatusCheck() {
       return
     }
 
+    if (fulfilledActivity.length >= 1 && isFirstTrade.current) {
+      console.log('Entro')
+      setAffiliateState(null)
+      resetReferralAddress()
+      isFirstTrade.current = false
+      return
+    }
+
     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,11 +75,19 @@ 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,
+    fulfilledActivity.length,
+  ])
 
   useEffect(() => {
     if (!referralAddress) {
@@ -104,6 +125,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, IS_NOTIFICATION_CLOSED } from 'constants/index'
 
@@ -25,6 +25,12 @@ export function useReferralAddress() {
   })
 }
 
+export function useResetReferralAddress() {
+  const dispatch = useAppDispatch()
+
+  return useCallback(() => dispatch(updateReferralAddress(null)), [dispatch])
+}
+
 export function useDismissNotification() {
   return useSelector<AppState, boolean>((state) => {
     return state.affiliate.isNotificationClosed || IS_NOTIFICATION_CLOSED