From 8ba7539b6088c0aeec3b2cec51f5e3e4e8bb1703 Mon Sep 17 00:00:00 2001
From: Matthew Bunday <matthew.bunday@coinbase.com>
Date: Tue, 20 Aug 2024 14:44:31 -0400
Subject: [PATCH] Fix banner and connect wallet (#880)

---
 .../components/ConnectWalletButton/ConnectWalletButton.tsx  | 6 ++++--
 apps/web/src/components/Layout/UsernameNav/index.tsx        | 5 ++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
index 1599b54..8c13242 100644
--- a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
+++ b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -8,6 +8,7 @@ import {
   WalletDropdownLink,
 } from '@coinbase/onchainkit/wallet';
 import { base } from 'viem/chains';
+import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { Button, ButtonSizes, ButtonVariants } from 'apps/web/src/components/Button/Button';
 import { UserAvatar } from 'apps/web/src/components/ConnectWalletButton/UserAvatar';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
@@ -47,6 +48,7 @@ export function ConnectWalletButton({
   connectWalletButtonVariant = ConnectWalletButtonVariants.Shiny,
 }: ConnectWalletButtonProps) {
   // Rainbow kit
+  const { openConnectModal } = useConnectModal();
   const { switchChain } = useSwitchChain();
   const switchToIntendedNetwork = useCallback(
     () => switchChain({ chainId: base.id }),
@@ -84,7 +86,7 @@ export function ConnectWalletButton({
   }, [address, connector]);
 
   const clickConnect = useCallback(() => {
-    switchToIntendedNetwork?.();
+    openConnectModal?.();
     logEvent(
       'connect_wallet',
       {
@@ -94,7 +96,7 @@ export function ConnectWalletButton({
       },
       AnalyticsEventImportance.low,
     );
-  }, [switchToIntendedNetwork]);
+  }, [openConnectModal]);
 
   const userAddressClasses = classNames('text-lg font-display', {
     'text-white': color === 'white',
diff --git a/apps/web/src/components/Layout/UsernameNav/index.tsx b/apps/web/src/components/Layout/UsernameNav/index.tsx
index 11ac495..1ad2602 100644
--- a/apps/web/src/components/Layout/UsernameNav/index.tsx
+++ b/apps/web/src/components/Layout/UsernameNav/index.tsx
@@ -17,15 +17,14 @@ import { isDevelopment } from 'apps/web/src/constants';
 import ImageAdaptive from 'apps/web/src/components/ImageAdaptive';
 
 export default function UsernameNav() {
-  const { isConnected } = useAccount();
   const { basenameChain } = useBasenameChain();
   const { switchChain } = useSwitchChain();
-  const { chain: connectedChain } = useAccount();
+  const { chain: connectedChain, isConnected } = useAccount();
 
   const showDevelopmentWarning = isDevelopment && basenameChain.id === base.id;
   const showProductionWarning = !isDevelopment && basenameChain.id === baseSepolia.id;
   const showWrongChainWarning =
-    connectedChain?.id !== basenameChain.id && connectedChain?.id !== baseSepolia.id;
+    connectedChain?.id !== basenameChain.id && connectedChain?.id !== baseSepolia.id && isConnected;
 
   const switchToMainnet = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {