[Affiliate] Close all affiliate banners after a successful trade

src/custom/components/AffiliateStatusCheck/index.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useEffect, useState } 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 { hasTrades, isConfirmed } from 'utils/trade'
 import { retry, RetryOptions } from 'utils/retry'
 import { SupportedChainId } from 'constants/chains'
 import useParseReferralQueryParam from 'hooks/useParseReferralQueryParam'
@@ -23,12 +24,17 @@ const STATUS_TO_MESSAGE_MAPPING: Record<AffiliateStatus, string> = {
 
 const DEFAULT_RETRY_OPTIONS: RetryOptions = { n: 3, minWait: 1000, maxWait: 3000 }
 
+// One minute in MS (milliseconds not Microsoft)
+const MINUTE_MS = 60_0000
+
 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>()
@@ -97,6 +103,17 @@ export default function AffiliateStatusCheck() {
       return
     }
 
+    const hasJustTraded =
+      allRecentActivity
+        .filter(isConfirmed)
+        .filter((tx: any) => tx.Date.now() - Date.parse(tx.confirmedTime) < MINUTE_MS).length >= 1
+
+    if (hasJustTraded) {
+      setAffiliateState(null)
+      resetReferralAddress()
+      return
+    }
+
     uploadDataDoc()
   }, [
     referralAddress,
@@ -105,6 +122,8 @@ export default function AffiliateStatusCheck() {
     chainId,
     appDispatch,
     uploadDataDoc,
+    allRecentActivity,
+    resetReferralAddress,
     location.search,
     referralAddressQueryParam,
   ])

src/custom/components/Web3Status/index.tsx

@@ -4,9 +4,9 @@ import WalletModal from 'components/WalletModal'
 import { Web3StatusInner, Web3StatusConnected, Text } from './Web3StatusMod'
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { getStatusIcon } from 'components/AccountDetails'
-import useRecentActivity, { TransactionAndOrder } from 'hooks/useRecentActivity'
+import useRecentActivity from 'hooks/useRecentActivity'
+import { isPending, isConfirmed } from 'utils/trade'
 import { useWalletInfo } from 'hooks/useWalletInfo'
-import { OrderStatus } from 'state/orders/actions'
 import { ButtonSecondary } from 'components/Button'
 
 const Wrapper = styled.div`
@@ -50,10 +50,6 @@ const Wrapper = styled.div`
   }
 `
 
-const isPending = (data: TransactionAndOrder) => data.status === OrderStatus.PENDING
-const isConfirmed = (data: TransactionAndOrder) =>
-  data.status === OrderStatus.FULFILLED || data.status === OrderStatus.EXPIRED || data.status === OrderStatus.CANCELLED
-
 function StatusIcon({ connector }: { connector: AbstractConnector }): JSX.Element | null {
   const walletInfo = useWalletInfo()
   return getStatusIcon(connector, walletInfo)

src/custom/utils/trade.ts

@@ -10,6 +10,7 @@ import { RADIX_DECIMAL, AMOUNT_PRECISION } from 'constants/index'
 import { SupportedChainId as ChainId } from 'constants/chains'
 import { formatSmart } from 'utils/format'
 import { getTrades } from 'api/gnosisProtocol/api'
+import { TransactionAndOrder } from '../hooks/useRecentActivity'
 
 export interface PostOrderParams {
   account: string
@@ -156,3 +157,7 @@ export async function hasTrades(chainId: ChainId, address: string): Promise<bool
 
   return trades.length > 0
 }
+
+export const isPending = (data: TransactionAndOrder) => data.status === OrderStatus.PENDING
+export const isConfirmed = (data: TransactionAndOrder) =>
+  data.status === OrderStatus.FULFILLED || data.status === OrderStatus.EXPIRED || data.status === OrderStatus.CANCELLED