Implement Wallet disconnect / swap feature

[meshackyaro]

Description

This issue aims to address the implementation of Implement Wallet disconnect / swap feature.

The core objective is to: Allow users to handle multiple freighter profiles seamlessly.

By completing this feature, we will ensure that the TrustFlow protocol maintains its high standards for security, usability, and decentralized logic. This issue requires careful attention to the Frontend architecture and adherence to the existing project conventions.

When picking up this issue, please ensure you document any new dependencies or architectural decisions made during development.

Component

Frontend

Difficulty

🟡 Medium

Tasks

• Review Next.js App Router structure
• Implement the UI components for: Implement Wallet disconnect / swap feature
• Ensure responsive design using Tailwind CSS or standard modules
• Add caching for npm dependencies in CI
• Run npm run lint and npm run typecheck
• Run npm run build to verify production bundling

Acceptance Criteria

• Feature accurately implements the objective: Allow users to handle multiple freighter profiles seamlessly.
• Any PR that introduces TypeScript/Rust errors is automatically blocked
• CI pipeline runs in under 3 minutes per PR
• Code is properly reviewed and approved by codeowners

Estimated Time

4-8 hours

[meshackyaro]

Integration Points

Once #21 (Freighter integration) is complete, add wallet switching/disconnect here:

Navbar (components/organisms/navbar/index.tsx)

• Add dropdown menu to connected wallet button
• Show current wallet address (truncated)
• "Switch Wallet" button → calls Freighter API to switch accounts
• "Disconnect" button → clear wallet state

Dashboard Sidebar (all pages/dashboard/*.tsx)

• Update the wallet info section at bottom of sidebar
• Show "Switch Account" option
• Handle account change events from Freighter

Implementation:

// In useAccount hook
const switchWallet = async () => {
  await freighter.requestAccess() // Re-trigger selection
  // Update state with new account
}

const disconnect = () => {
  // Clear local storage
  // Reset account state
}

This is a follow-up to #21, so coordinate with whoever picks that up!

[stephanieoghenemega-eng]

Went through the hooks and navbar before commenting. The useAccount.ts file even has a comment saying 'This does not update the return value if the user changes their Freighter settings; they will need to refresh the page' — the address variable is module-level so switching Freighter profiles without refreshing leaves stale state everywhere. That's the core of the problem.

Freighter exposes an event for account changes. I'd rework useAccount to store address in useState instead of a module-level variable and subscribe to that event so a profile swap immediately updates the UI without a reload:

export function useAccount() {
  const [address, setAddress] = useState<string | null>(null);

  useEffect(() => {
    isConnected().then(connected => {
      if (!connected) return;
      getUserInfo().then(user => { if (user?.publicKey) setAddress(user.publicKey) });
    });

    // Freighter fires this when the user switches accounts in the extension
    const unsubscribe = addReconnectListener(() => {
      getUserInfo().then(user => setAddress(user?.publicKey ?? null));
    });
    return () => unsubscribe?.();
  }, []);

  if (!address) return null;
  return {
    address,
    displayName: `${address.slice(0, 4)}...${address.slice(-4)}`,
  };
}

For the disconnect/swap UI, the navbar currently has no wallet indicator. I'd add a WalletButton component that shows the truncated address and a small dropdown:

function WalletButton({ address, onDisconnect, onSwap }: WalletButtonProps) {
  const [open, setOpen] = useState(false);
  return (
    <div className="relative">
      <button
        onClick={() => setOpen(v => !v)}
        className="px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-800"
      >
        {address.slice(0, 4)}...{address.slice(-4)}
      </button>
      {open && (
        <div className="absolute right-0 mt-1 w-44 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg">
          <button onClick={onSwap} className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
            Switch account
          </button>
          <button onClick={onDisconnect} className="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-gray-50 dark:hover:bg-gray-800">
            Disconnect
          </button>
        </div>
      )}
    </div>
  );
}

Disconnect clears local state only (Freighter doesn't have a server-side disconnect) and 'Switch account' prompts the user to change accounts in the extension. Happy to take this.

[grantfox-oss]

🦊 GrantFox — @stephanieoghenemega-eng has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #4)
2. Your PR will be reviewed by the trustflow-protocol maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@stephanieoghenemega-eng's PR #56 was approved and merged by @meshackyaro.

🏆 @stephanieoghenemega-eng: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (226 total points). Track your full progress on GrantFox.

👏 Great work, @stephanieoghenemega-eng! Keep contributing to trustflow-protocol.