feat: fix deployment status display states (#1080)

* feat: fix connection deployed state display state * fix: fix deployment status not updating on first time deploys * feat: add descriptive comments
alchemyplatform · Oct 16, 2024 · 4603afa · 4603afa
1 parent 86f9d0c
commit 4603afa
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 27 deletions.
diff --git a/examples/ui-demo/src/components/shared/user-connection-avatar/RenderUserConnectionAvatar.tsx b/examples/ui-demo/src/components/shared/user-connection-avatar/RenderUserConnectionAvatar.tsx
@@ -2,44 +2,78 @@ import PopoverMenu from "@/components/shared/user-connection-avatar/UserConnecti
 import DialogMenu from "@/components/shared/user-connection-avatar/UserConnectionMenuDialog";
 import { UserConnectionAvatar } from "./UserConnectionAvatar";
 import { UserConnectionDetails } from "./UserConnectionDetails";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useAccount } from "@account-kit/react";
+import { useQuery } from "@tanstack/react-query";
+import { useConfigStore } from "@/state";
 
+type RenderAvatarMenuProps = {
+  deploymentStatus: boolean;
+};
 export const RenderUserConnectionAvatar = (
   props: React.HTMLAttributes<HTMLDivElement>
 ) => {
+  const { account } = useAccount({
+    type: "LightAccount",
+  });
+
+  const { nftTransferred } = useConfigStore(({ nftTransferred }) => ({
+    nftTransferred,
+  }));
+
+  const { data: deploymentStatus = false, refetch } = useQuery({
+    queryKey: ["deploymentStatus"],
+    queryFn: async () => {
+      const initCode = await account?.getInitCode();
+      return initCode && initCode === "0x";
+    },
+    enabled: !!account,
+  });
+
+  useEffect(() => {
+    // Refetch the deployment status if the NFT transferred state changes.
+    // Only refetch if this is a user's first NFT Transfer...
+    if (nftTransferred && !deploymentStatus) {
+      refetch();
+    }
+  }, [nftTransferred, deploymentStatus, refetch]);
+
   return (
     <div
       className="border-b border-border overflow-hidden pb-6 sm:border-none sm:pb-0"
       {...props}
     >
       {/* Popover - Visible on desktop screens */}
       <div className="hidden md:block overflow-hidden">
-        <RenderPopoverMenu />
+        <RenderPopoverMenu deploymentStatus={deploymentStatus} />
       </div>
       {/* Dialog - Visible on mobile screens */}
       <div className="block md:hidden">
-        <RenderDialogMenu />
+        <RenderDialogMenu deploymentStatus={deploymentStatus} />
       </div>
     </div>
   );
 };
 
-const RenderPopoverMenu = () => {
+const RenderPopoverMenu = ({ deploymentStatus }: RenderAvatarMenuProps) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
 
   return (
     <PopoverMenu onOpenStateChange={(state) => setPopoverOpen(state)}>
       <PopoverMenu.Trigger className="max-w-full">
-        <UserConnectionAvatar isFocused={popoverOpen} />
+        <UserConnectionAvatar
+          isFocused={popoverOpen}
+          deploymentStatus={deploymentStatus}
+        />
       </PopoverMenu.Trigger>
       <PopoverMenu.Content>
-        <UserConnectionDetails />
+        <UserConnectionDetails deploymentStatus={deploymentStatus} />
       </PopoverMenu.Content>
     </PopoverMenu>
   );
 };
 
-const RenderDialogMenu = () => {
+const RenderDialogMenu = ({ deploymentStatus }: RenderAvatarMenuProps) => {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   return (
@@ -48,12 +82,15 @@ const RenderDialogMenu = () => {
         toggleOpenState={() => setDialogOpen(!dialogOpen)}
         className="max-w-full"
       >
-        <UserConnectionAvatar isFocused={dialogOpen} />
+        <UserConnectionAvatar
+          isFocused={dialogOpen}
+          deploymentStatus={deploymentStatus}
+        />
       </DialogMenu.Trigger>
       <DialogMenu isOpen={dialogOpen} onClose={() => setDialogOpen(false)}>
         <DialogMenu.Content>
           <p className="text-lg font-semibold text-fg-primary mb-5">Profile</p>
-          <UserConnectionDetails />
+          <UserConnectionDetails deploymentStatus={deploymentStatus} />
         </DialogMenu.Content>
       </DialogMenu>
     </div>

diff --git a/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionAvatar.tsx b/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionAvatar.tsx
@@ -7,15 +7,16 @@ import { useAccount, useUser } from "@account-kit/react";
 
 import { DeploymentStatusIndicator } from "@/components/shared/DeploymentStatusIndicator";
 import { useConfigStore } from "@/state";
-import { useQuery } from "@tanstack/react-query";
 
 interface UserConnectionAvatarProps {
   isFocused?: boolean;
   showDeploymentStatus?: boolean;
+  deploymentStatus: boolean;
 }
 const UserConnectionAvatar = ({
   isFocused,
   showDeploymentStatus = true,
+  deploymentStatus,
 }: UserConnectionAvatarProps) => {
   const { theme, primaryColor } = useConfigStore(
     ({ ui: { theme, primaryColor } }) => ({
@@ -24,18 +25,10 @@ const UserConnectionAvatar = ({
     })
   );
   const user = useUser();
-  const { address: SCAUserAddress, account } = useAccount({
+  const { address: SCAUserAddress } = useAccount({
     type: "LightAccount",
   });
 
-  const { data: deploymentStatus } = useQuery({
-    queryKey: ["deploymentStatus"],
-    queryFn: async () => {
-      const initCode = await account?.getInitCode();
-      return initCode != null && initCode === "0x";
-    },
-  });
-
   const isEOAUser = user?.type === "eoa";
 
   if (!user) {

diff --git a/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionDetails.tsx b/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionDetails.tsx
@@ -6,21 +6,19 @@ import { useConfigStore } from "@/state";
 import { useAccount, useLogout, useSigner, useUser } from "@account-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
-export function UserConnectionDetails() {
+type UserConnectionDetailsProps = {
+  deploymentStatus: boolean;
+};
+export function UserConnectionDetails({
+  deploymentStatus,
+}: UserConnectionDetailsProps) {
   const user = useUser();
   const signer = useSigner();
   const { logout } = useLogout();
   const { theme, primaryColor } = useConfigStore(
     ({ ui: { theme, primaryColor } }) => ({ theme, primaryColor })
   );
   const scaAccount = useAccount({ type: "LightAccount" });
-  const { data: deploymentStatus } = useQuery({
-    queryKey: ["deploymentStatus"],
-    queryFn: async () => {
-      const initCode = await scaAccount?.account?.getInitCode();
-      return initCode != null && initCode === "0x";
-    },
-  });
 
   const isEOAUser = user?.type === "eoa";