fix: showing onboarding modal on collecting

packages/app/components/checkout/checkout-return-for-paid-nft.tsx

@@ -9,14 +9,17 @@ import { View } from "@showtime-xyz/universal.view";
 
 import { useJoinChannel } from "app/components/creator-channels/hooks/use-join-channel";
 import { ClaimContext } from "app/context/claim-context";
+import { useMyInfo } from "app/hooks/api-hooks";
 import { useConfirmPayment } from "app/hooks/api/use-confirm-payment";
 import { usePaymentsManage } from "app/hooks/api/use-payments-manage";
 import { useClaimNFT } from "app/hooks/use-claim-nft";
 import {
   CreatorEditionResponse,
   useCreatorCollectionDetail,
 } from "app/hooks/use-creator-collection-detail";
+import { useNFTDetailByTokenId } from "app/hooks/use-nft-detail-by-token-id";
 import { createParam } from "app/navigation/use-param";
+import { NFT } from "app/types";
 
 import { stripePromise } from "../checkout/stripe";
 
@@ -29,19 +32,27 @@ const { useParam } = createParam<{
 export const CheckoutReturnForPaidNFT = () => {
   const [contractAddress] = useParam("contractAddress");
   const { data: edition } = useCreatorCollectionDetail(contractAddress);
-  if (!edition)
+  const { data: nft } = useNFTDetailByTokenId({
+    chainName: edition?.chain_name,
+    tokenId: "0",
+    contractAddress: edition?.creator_airdrop_edition.contract_address,
+  });
+
+  if (!edition || !nft)
     return (
       <View tw="min-h-[200px] flex-1 items-center justify-center">
         <Spinner />
       </View>
     );
-  return <CheckoutReturn edition={edition} />;
+  return <CheckoutReturn edition={edition} nft={nft.data.item} />;
 };
 
 const CheckoutReturn = memo(function CheckoutReturn({
   edition,
+  nft,
 }: {
   edition: CreatorEditionResponse;
+  nft: NFT;
 }) {
   const joinChannel = useJoinChannel();
   const [paymentIntentIdParam] = useParam("paymentIntentId");
@@ -51,6 +62,7 @@ const CheckoutReturn = memo(function CheckoutReturn({
   const router = useRouter();
   const { claimNFT } = useClaimNFT(edition?.creator_airdrop_edition);
   const { paymentStatus, message, confirmPaymentStatus } = useConfirmPayment();
+  const myInfo = useMyInfo();
 
   const removeQueryParam = useCallback(() => {
     router.replace({ pathname: router.pathname }, undefined, {
@@ -59,6 +71,11 @@ const CheckoutReturn = memo(function CheckoutReturn({
   }, [router]);
   const closeModal = useCallback(
     async (channelId?: number) => {
+      await myInfo.mutateLastCollectedStarDropCache({
+        contractAddress: edition.creator_airdrop_edition.contract_address,
+        username: nft.creator_username ?? nft.creator_address,
+        slug: nft.slug ?? nft.creator_address,
+      });
       await joinChannel.trigger({ channelId: channelId });
       const { asPath, pathname } = router;
 
@@ -79,7 +96,15 @@ const CheckoutReturn = memo(function CheckoutReturn({
         }
       );
     },
-    [edition?.creator_airdrop_edition.contract_address, joinChannel, router]
+    [
+      edition.creator_airdrop_edition.contract_address,
+      joinChannel,
+      myInfo,
+      nft.creator_address,
+      nft.creator_username,
+      nft.slug,
+      router,
+    ]
   );
   const { setPaymentByDefault } = usePaymentsManage();
 

packages/app/hooks/api-hooks.ts

@@ -345,6 +345,34 @@ export const useMyInfo = () => {
     [data, mutate, loginPromise]
   );
 
+  const mutateLastCollectedStarDropCache = useCallback(
+    async (params: {
+      contractAddress: string;
+      username: string;
+      slug: string;
+    }) => {
+      if (data) {
+        await mutate(
+          {
+            data: {
+              ...data.data,
+              profile: {
+                ...data.data.profile,
+                latest_star_drop_collected: {
+                  contract_address: params.contractAddress,
+                  username: params.username,
+                  slug: params.slug,
+                },
+              },
+            },
+          },
+          { revalidate: false }
+        );
+      }
+    },
+    [data, mutate]
+  );
+
   const unfollow = useCallback(
     async (profileId?: number) => {
       if (data) {
@@ -475,6 +503,7 @@ export const useMyInfo = () => {
     unlike,
     isLiked,
     refetchMyInfo,
+    mutateLastCollectedStarDropCache,
     mutate,
   };
 };

packages/app/providers/user-provider.tsx

@@ -18,7 +18,7 @@
 export function UserProvider({ children }: UserProviderProps) {
   //#region hooks
   const { authenticationStatus, accessToken } = useAuth();
   const router = useRouter();
 
   const { data, error, mutate } = useMyInfo();
   //#endregion
@@ -58,7 +58,7 @@
     if (authenticationStatus === "UNAUTHENTICATED") {
       isFirstLoad.current = true;
     }
-  }, [authenticationStatus, mutate, router]);
+  }, [authenticationStatus, mutate]);
 
   useEffect(() => {
     const identifyAndRegisterPushNotification = async () => {

packages/app/utilities.ts

@@ -754,12 +754,13 @@ export const OAUTH_REDIRECT_URI = Platform.select({
 export const isProfileIncomplete = (profile?: Profile) => {
   // FYI: has_social_login is true if user has logged in with google, apple, spotify, twitter, instagram
   // the value is false if user has logged in with email or phone number
-  return profile
+  const isIncomplete = profile
     ? !profile.username ||
-        (!profile.has_social_login &&
-          !profile.captcha_completed_at &&
-          !profile.latest_star_drop_collected)
+      (!profile.has_social_login &&
+        !profile.captcha_completed_at &&
+        !profile.latest_star_drop_collected)
     : undefined;
+  return isIncomplete;
 };
 
 export function getFullSizeCover(url: string | undefined) {