feat(profile): automatically switch to selected account

Without this patch, selecting any other account other than your
connected EOA using the account selector doesn't do anything on your
profile page. However, we want people to be able to cycle through their
accounts, so whenever another account is selected via the account
selector, we want the profile page to redirect to that account.

On the other hand we don't want the profile to automatically switch when
the user is on a profile page that is not his connected EOA or one of
the multisig they're a signer on. In these cases the selector will do
nothing when the account selector is used.

Author: pheuberger

app/profile/[address]/page.tsx

@@ -8,8 +8,9 @@ import { HypercertsTabContent } from "@/app/profile/[address]/hypercerts-tab-con
 import { CollectionsTabContent } from "@/app/profile/[address]/collections-tab-content";
 import { MarketplaceTabContent } from "@/app/profile/[address]/marketplace-tab-content";
 import { BlueprintsTabContent } from "@/app/profile/[address]/blueprint-tab-content";
-
 import { ContractAccountBanner } from "@/components/profile/contract-accounts-banner";
+import { ProfileAccountSwitcher } from "@/components/profile/account-switcher";
+
 export default function ProfilePage({
   params,
   searchParams,
@@ -24,6 +25,7 @@ export default function ProfilePage({
   return (
     <section className="flex flex-col gap-2">
       <ContractAccountBanner address={address} />
+      <ProfileAccountSwitcher address={address} />
       <section className="flex flex-wrap gap-2 items-center">
         <h1 className="font-serif text-3xl lg:text-5xl tracking-tight">
           Profile

components/profile/account-switcher.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useAccount } from "wagmi";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { useAccountStore } from "@/lib/account-store";
+import { useSafeAccounts } from "@/hooks/useSafeAccounts";
+
+export function ProfileAccountSwitcher({ address }: { address: string }) {
+  const { address: connectedAddress } = useAccount();
+  const { safeAccounts } = useSafeAccounts();
+  const router = useRouter();
+  const selectedAccount = useAccountStore((state) => state.selectedAccount);
+
+  useEffect(() => {
+    if (!selectedAccount || !connectedAddress) return;
+
+    const currentAddress = address.toLowerCase();
+    const accounts = [
+      { type: "eoa", address: connectedAddress },
+      ...safeAccounts,
+    ];
+
+    // Find current account index
+    const currentIndex = accounts.findIndex(
+      (account) => account.address.toLowerCase() === currentAddress,
+    );
+
+    // If current address matches the connected address or a safe address the user is a signer on,
+    // and it's not the selected account, redirect to the selected account
+    if (
+      currentIndex !== -1 &&
+      currentAddress !== selectedAccount.address.toLowerCase()
+    ) {
+      router.push(`/profile/${selectedAccount.address}`);
+    }
+  }, [selectedAccount, address, connectedAddress, safeAccounts, router]);
+
+  return null;
+}