From 3b63bf4c946069670bb7fcd50d610df4ee3c43f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Galley?= <contact@kirkas.ch>
Date: Tue, 12 Nov 2024 11:22:15 -0500
Subject: [PATCH] fix wallet avatar dropdown on mobile (#1247)

---
 apps/web/app/AppProviders.tsx                         |  9 ++++++++-
 .../ConnectWalletButton/ConnectWalletButton.tsx       |  8 +++++---
 .../src/components/ConnectWalletButton/UserAvatar.tsx | 11 +++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/AppProviders.tsx b/apps/web/app/AppProviders.tsx
index 3f48d3ecb4..438252fee3 100644
--- a/apps/web/app/AppProviders.tsx
+++ b/apps/web/app/AppProviders.tsx
@@ -8,7 +8,7 @@ import {
   TrackingCategory,
   TrackingPreference,
 } from '@coinbase/cookie-manager';
-import { OnchainKitProvider } from '@coinbase/onchainkit';
+import { AppConfig, OnchainKitProvider } from '@coinbase/onchainkit';
 import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
 import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import {
@@ -78,6 +78,12 @@ const config = createConfig({
 const queryClient = new QueryClient();
 const sprigEnvironmentId = process.env.NEXT_PUBLIC_SPRIG_ENVIRONMENT_ID;
 
+const onchainKitConfig: AppConfig = {
+  appearance: {
+    mode: 'light',
+  },
+};
+
 type AppProvidersProps = {
   children: React.ReactNode;
 };
@@ -141,6 +147,7 @@ export default function AppProviders({ children }: AppProvidersProps) {
             <OnchainKitProvider
               chain={isDevelopment ? baseSepolia : base}
               apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
+              config={onchainKitConfig}
             >
               <RainbowKitProvider modalSize="compact">
                 <TooltipProvider>
diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
index 6e936441ab..56bc3c50f8 100644
--- a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
+++ b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -23,7 +23,7 @@ import logEvent, {
 import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
 import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
-import { useCopyToClipboard } from 'usehooks-ts';
+import { useCopyToClipboard, useMediaQuery } from 'usehooks-ts';
 import { useAccount, useSwitchChain } from 'wagmi';
 import ChainDropdown from 'apps/web/src/components/ChainDropdown';
 import { useSearchParams } from 'next/navigation';
@@ -93,11 +93,13 @@ export function ConnectWalletButton({
     );
   }, [openConnectModal]);
 
-  const userAddressClasses = classNames('text-lg font-display hidden lg:inline-block', {
+  const userAddressClasses = classNames('text-lg font-display', {
     'text-white': connectWalletButtonVariant === ConnectWalletButtonVariants.BaseOrg,
     'text-black': connectWalletButtonVariant === ConnectWalletButtonVariants.Basename,
   });
 
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
   if (isConnecting || isReconnecting || !isMounted) {
     return <Icon name="spinner" color="currentColor" />;
   }
@@ -141,7 +143,7 @@ export function ConnectWalletButton({
       >
         <div className="flex items-center gap-2">
           <UserAvatar />
-          <Name chain={basenameChain} className={userAddressClasses} />
+          {isDesktop && <Name chain={basenameChain} className={userAddressClasses} />}
           {showChainSwitcher && <ChainDropdown />}
         </div>
       </ConnectWallet>
diff --git a/apps/web/src/components/ConnectWalletButton/UserAvatar.tsx b/apps/web/src/components/ConnectWalletButton/UserAvatar.tsx
index 97158ff3d6..db3b99d70c 100644
--- a/apps/web/src/components/ConnectWalletButton/UserAvatar.tsx
+++ b/apps/web/src/components/ConnectWalletButton/UserAvatar.tsx
@@ -4,6 +4,10 @@ import { mainnet } from 'wagmi/chains';
 import useBaseEnsName from 'apps/web/src/hooks/useBaseEnsName';
 import ImageWithLoading from 'apps/web/src/components/ImageWithLoading';
 import BasenameAvatar from 'apps/web/src/components/Basenames/BasenameAvatar';
+import { Basename } from '@coinbase/onchainkit/identity';
+import { getBasenameImage } from 'apps/web/src/utils/usernames';
+import { StaticImageData } from 'next/image';
+import { GetEnsAvatarReturnType } from 'viem';
 
 export function UserAvatar() {
   const { address } = useAccount();
@@ -31,7 +35,6 @@ export function UserAvatar() {
   });
 
   const isLoading = ensNameIsLoading || ensAvatarIsLoading || baseEnsNameIsLoading;
-  const avatar = ensAvatar;
 
   if (baseEnsName) {
     return (
@@ -44,7 +47,11 @@ export function UserAvatar() {
     );
   }
 
-  if (!avatar) return null;
+  let avatar: GetEnsAvatarReturnType | undefined | StaticImageData = ensAvatar;
+  // Default to basename avatar if none exists
+  if (!avatar) {
+    avatar = getBasenameImage(address as Basename);
+  }
 
   return (
     <ImageWithLoading