Fix banner and connect wallet (#880)

This commit is contained in:
Matthew Bunday
2024-08-20 14:44:31 -04:00
committed by GitHub
parent 831ccba7f0
commit 8ba7539b60
2 changed files with 6 additions and 5 deletions

View File

@@ -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',

View File

@@ -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>) => {