[PAY-531] Fix become first supporter bug

packages/mobile/src/screens/tip-artist-screen/SendTipScreen.tsx

@@ -10,7 +10,8 @@ import {
 } from 'audius-client/src/common/store/tipping/selectors'
 import {
   sendTip,
-  fetchUserSupporter
+  fetchUserSupporter,
+  refreshSupport
 } from 'audius-client/src/common/store/tipping/slice'
 import { getAccountBalance } from 'audius-client/src/common/store/wallet/selectors'
 import { getBalance } from 'audius-client/src/common/store/wallet/slice'
@@ -66,6 +67,7 @@ export const SendTipScreen = () => {
   const {
     amountToTipToBecomeTopSupporter,
     shouldFetchUserSupporter,
+    shouldFetchSupportersForReceiver,
     isFirstSupporter,
     tipAmountWei,
     hasInsufficientBalance
@@ -90,6 +92,17 @@ export const SendTipScreen = () => {
     }
   }, [shouldFetchUserSupporter, account, receiver, dispatchWeb])
 
+  useEffect(() => {
+    if (shouldFetchSupportersForReceiver && account && receiver) {
+      dispatchWeb(
+        refreshSupport({
+          senderUserId: account.user_id,
+          receiverUserId: receiver.user_id
+        })
+      )
+    }
+  }, [shouldFetchSupportersForReceiver, account, receiver, dispatchWeb])
+
   const handleBack = useCallback(() => {
     navigation.goBack()
   }, [navigation])

packages/web/src/common/store/tipping/selectors.ts

@@ -53,7 +53,7 @@ const mergeMaps = <
       // in the overrides but not in the default,
       // OR
       // if the existing value in the default map has a smaller amount
-      // than that in the override, the update default value with the
+      // than that in the override, then update default value with the
       // override value
       const supportIds = Object.keys(mapOverrides[userId]) as unknown as ID[]
       for (const supportId of supportIds) {

packages/web/src/hooks/useGetFirstOrTopSupporter.ts

@@ -44,6 +44,10 @@ export const useGetFirstOrTopSupporter = ({
     useState<Nullable<StringWei>>(null)
   const [shouldFetchUserSupporter, setShouldFetchUserSupporter] =
     useState(false)
+  const [
+    shouldFetchSupportersForReceiver,
+    setShouldFetchSupportersForReceiver
+  ] = useState(false)
   const [topSupporter, setTopSupporter] = useState<Nullable<Supporter>>(null)
   const [isFirstSupporter, setIsFirstSupporter] = useState(false)
   const tipAmountWei = parseToBNWei(tipAmount)
@@ -75,7 +79,18 @@ export const useGetFirstOrTopSupporter = ({
   useEffect(() => {
     if (!receiver) return
 
-    const supportersForReceiver = supportersMap[receiver.user_id] ?? {}
+    const supportersForReceiver = supportersMap[receiver.user_id]
+
+    // It's possible that the receiver's supporters have not yet
+    // been fetched, in this case we prompt to fetch that data.
+    // E.g. for a user whose top supporter changed, clicking on
+    // the dethroned notification will go to the send tip modal/drawer
+    // but that user's supporters may not have been fetched yet.
+    if (!supportersForReceiver) {
+      setShouldFetchSupportersForReceiver(true)
+      return
+    }
+
     const rankedSupportersList = (
       Object.keys(supportersForReceiver) as unknown as ID[]
     )
@@ -131,6 +146,7 @@ export const useGetFirstOrTopSupporter = ({
   return {
     amountToTipToBecomeTopSupporter,
     shouldFetchUserSupporter,
+    shouldFetchSupportersForReceiver,
     isFirstSupporter,
     tipAmountWei,
     hasInsufficientBalance