Merge branch 'master' into feat/add-token-generator

base-org · Nov 14, 2024 · 2a31b97 · 2a31b97
2 parents 1c0d02c + 0c7febf
commit 2a31b97
Show file tree

Hide file tree

Showing 18 changed files with 246 additions and 102 deletions.
diff --git a/apps/web/app/(base-org)/builder-anniversary-nft/page.tsx b/apps/web/app/(base-org)/builder-anniversary-nft/page.tsx
@@ -1,3 +1,4 @@
+import CryptoProviders from 'apps/web/app/CryptoProviders';
 import { BuilderNftHero } from 'apps/web/src/components/BuilderNft/BuilderNftHero';
 import type { Metadata } from 'next';
 
@@ -13,7 +14,9 @@ export const metadata: Metadata = {
 export default async function About() {
   return (
     <main className="flex w-full flex-col items-center bg-black">
-      <BuilderNftHero />
+      <CryptoProviders>
+        <BuilderNftHero />
+      </CryptoProviders>
     </main>
   );
 }
diff --git a/apps/web/app/(basenames)/layout.tsx b/apps/web/app/(basenames)/layout.tsx
@@ -1,3 +1,4 @@
+import CryptoProviders from 'apps/web/app/CryptoProviders';
 import ErrorsProvider from 'apps/web/contexts/Errors';
 import UsernameNav from 'apps/web/src/components/Layout/UsernameNav';
 
@@ -27,10 +28,12 @@ export default async function BasenameLayout({
 }) {
   return (
     <ErrorsProvider context="basenames">
-      <div className="max-w-screen flex min-h-screen flex-col">
-        <UsernameNav />
-        {children}
-      </div>
+      <CryptoProviders>
+        <div className="max-w-screen flex min-h-screen flex-col">
+          <UsernameNav />
+          {children}
+        </div>
+      </CryptoProviders>
     </ErrorsProvider>
   );
 }
diff --git a/apps/web/app/AppProviders.tsx b/apps/web/app/AppProviders.tsx
@@ -1,35 +1,19 @@
 'use client';
-import '@rainbow-me/rainbowkit/styles.css';
-import '@coinbase/onchainkit/styles.css';
 
 import {
   Provider as CookieManagerProvider,
   Region,
   TrackingCategory,
   TrackingPreference,
 } from '@coinbase/cookie-manager';
-import { OnchainKitProvider } from '@coinbase/onchainkit';
 import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
-import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import {
-  coinbaseWallet,
-  metaMaskWallet,
-  phantomWallet,
-  rainbowWallet,
-  uniswapWallet,
-  walletConnectWallet,
-} from '@rainbow-me/rainbowkit/wallets';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import ExperimentsProvider from 'base-ui/contexts/Experiments';
 import useSprig from 'base-ui/hooks/useSprig';
 import { useCallback, useRef } from 'react';
-import { createConfig, http, WagmiProvider } from 'wagmi';
-import { base, baseSepolia, mainnet } from 'wagmi/chains';
 import { cookieManagerConfig } from '../src/utils/cookieManagerConfig';
 import ClientAnalyticsScript from 'apps/web/src/components/ClientAnalyticsScript/ClientAnalyticsScript';
 import dynamic from 'next/dynamic';
 import ErrorsProvider from 'apps/web/contexts/Errors';
-import { isDevelopment } from 'apps/web/src/constants';
 import { logger } from 'apps/web/src/utils/logger';
 
 const DynamicCookieBannerWrapper = dynamic(
@@ -39,43 +23,6 @@ const DynamicCookieBannerWrapper = dynamic(
   },
 );
 
-coinbaseWallet.preference = 'all';
-
-const connectors = connectorsForWallets(
-  [
-    {
-      groupName: 'Recommended',
-      wallets: [
-        coinbaseWallet,
-        metaMaskWallet,
-        uniswapWallet,
-        rainbowWallet,
-        phantomWallet,
-        walletConnectWallet,
-      ],
-    },
-  ],
-  {
-    projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID ?? 'dummy-id',
-    walletConnectParameters: {},
-    appName: 'Base.org',
-    appDescription: '',
-    appUrl: 'https://www.base.org/',
-    appIcon: '',
-  },
-);
-
-const config = createConfig({
-  connectors,
-  chains: [base, baseSepolia, mainnet],
-  transports: {
-    [base.id]: http(),
-    [baseSepolia.id]: http(),
-    [mainnet.id]: http(),
-  },
-  ssr: true,
-});
-const queryClient = new QueryClient();
 const sprigEnvironmentId = process.env.NEXT_PUBLIC_SPRIG_ENVIRONMENT_ID;
 
 type AppProvidersProps = {
@@ -136,25 +83,14 @@ export default function AppProviders({ children }: AppProvidersProps) {
         config={cookieManagerConfig}
       >
         <ClientAnalyticsScript />
-        <WagmiProvider config={config}>
-          <QueryClientProvider client={queryClient}>
-            <OnchainKitProvider
-              chain={isDevelopment ? baseSepolia : base}
-              apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
-            >
-              <RainbowKitProvider modalSize="compact">
-                <TooltipProvider>
-                  <ExperimentsProvider>
-                    <>
-                      {children}
-                      <DynamicCookieBannerWrapper />
-                    </>
-                  </ExperimentsProvider>
-                </TooltipProvider>
-              </RainbowKitProvider>
-            </OnchainKitProvider>
-          </QueryClientProvider>
-        </WagmiProvider>
+        <TooltipProvider>
+          <ExperimentsProvider>
+            <>
+              {children}
+              <DynamicCookieBannerWrapper />
+            </>
+          </ExperimentsProvider>
+        </TooltipProvider>
       </CookieManagerProvider>
     </ErrorsProvider>
   );

diff --git a/apps/web/app/CryptoProviders.dynamic.tsx b/apps/web/app/CryptoProviders.dynamic.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useErrors } from 'apps/web/contexts/Errors';
+
+export function DynamicCryptoProviders({ children }: { children: React.ReactNode }) {
+  const [CryptoProvidersDynamic, setCryptoProvidersDynamic] =
+    useState<React.ComponentType<{ children: React.ReactNode }>>();
+  const { logError } = useErrors();
+
+  useEffect(() => {
+    import('apps/web/app/CryptoProviders')
+      .then((mod) => {
+        setCryptoProvidersDynamic(() => mod.default);
+      })
+      .catch((error) => logError(error, 'Failed to load CryptoProviders'));
+  }, [logError]);
+
+  if (!CryptoProvidersDynamic) return null;
+
+  return <CryptoProvidersDynamic>{children}</CryptoProvidersDynamic>;
+}
diff --git a/apps/web/app/CryptoProviders.tsx b/apps/web/app/CryptoProviders.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { AppConfig, OnchainKitProvider } from '@coinbase/onchainkit';
+import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { isDevelopment } from 'apps/web/src/constants';
+import { createConfig, http, WagmiProvider } from 'wagmi';
+import { base, baseSepolia, mainnet } from 'wagmi/chains';
+import {
+  coinbaseWallet,
+  metaMaskWallet,
+  phantomWallet,
+  rainbowWallet,
+  uniswapWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
+
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: 'Recommended',
+      wallets: [
+        coinbaseWallet,
+        metaMaskWallet,
+        uniswapWallet,
+        rainbowWallet,
+        phantomWallet,
+        walletConnectWallet,
+      ],
+    },
+  ],
+  {
+    projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID ?? 'dummy-id',
+    walletConnectParameters: {},
+    appName: 'Base.org',
+    appDescription: '',
+    appUrl: 'https://www.base.org/',
+    appIcon: '',
+  },
+);
+
+const config = createConfig({
+  connectors,
+  chains: [base, baseSepolia, mainnet],
+  transports: {
+    [base.id]: http(),
+    [baseSepolia.id]: http(),
+    [mainnet.id]: http(),
+  },
+  ssr: true,
+});
+const queryClient = new QueryClient();
+
+type CryptoProvidersProps = {
+  children: React.ReactNode;
+};
+
+const onchainKitConfig: AppConfig = {
+  appearance: {
+    mode: 'light',
+  },
+};
+
+export default function CryptoProviders({ children }: CryptoProvidersProps) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <OnchainKitProvider
+          chain={isDevelopment ? baseSepolia : base}
+          apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
+          config={onchainKitConfig}
+        >
+          <RainbowKitProvider modalSize="compact">{children}</RainbowKitProvider>
+        </OnchainKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
diff --git a/apps/web/app/global.css b/apps/web/app/global.css
@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '@rainbow-me/rainbowkit/styles.css';
+@import '@coinbase/onchainkit/styles.css';
+
 /* For Webkit-based browsers (Chrome, Safari and Opera) */
 :not(.scrollbar)::-webkit-scrollbar {
   display: none;

diff --git a/apps/web/src/addresses/usernames.ts b/apps/web/src/addresses/usernames.ts
@@ -101,3 +101,8 @@ export const BASE_WORLD_DISCOUNT_VALIDATORS: AddressMap = {
   [baseSepolia.id]: '0xFa69f6167F40247fe3EFF2d8375B25C5d7834c48',
   [base.id]: '0xfEb00a4EfF372a307fDc556Cf4359f7D679E4d11',
 };
+
+export const DEVCON_DISCOUNT_VALIDATORS: AddressMap = {
+  [baseSepolia.id]: '0x5c81c392C22Cba477a70D809DE6d6Cd362A1c3DE',
+  [base.id]: '0xFca2EB54EaB56085e25a32BfF30fe8C452216c5F',
+};
diff --git a/apps/web/src/components/Basenames/RegistrationFlow.tsx b/apps/web/src/components/Basenames/RegistrationFlow.tsx
@@ -105,7 +105,8 @@ export function RegistrationFlow() {
 
   const onBackArrowClick = useCallback(() => {
     setRegistrationStep(RegistrationSteps.Search);
-  }, [setRegistrationStep]);
+    setSelectedName('');
+  }, [setRegistrationStep, setSelectedName]);
 
   useEffect(() => {
     const claimQuery = searchParams?.get(claimQueryKey);

diff --git a/apps/web/src/components/Basenames/RegistrationLearnMoreModal/images/devcon.png b/apps/web/src/components/Basenames/RegistrationLearnMoreModal/images/devcon.png
diff --git a/apps/web/src/components/Basenames/RegistrationLearnMoreModal/index.tsx b/apps/web/src/components/Basenames/RegistrationLearnMoreModal/index.tsx
@@ -10,6 +10,7 @@ import summerPassLvl3 from './images/summer-pass-lvl-3.svg';
 import cbidVerification from './images/cbid-verification.svg';
 import BNSOwnership from './images/bns.jpg';
 import BaseNFT from './images/base-nft.svg';
+import DevconPNG from './images/devcon.png';
 import TalentProtocolIcon from './images/TalentProtocol.svg';
 import coinbaseOneVerification from './images/coinbase-one-verification.svg';
 import coinbaseVerification from './images/coinbase-verification.svg';
@@ -95,6 +96,13 @@ const DISCOUNT_ITEMS: DiscountItem[] = [
     label: 'Base around the world NFT',
     tooltipContent: 'Available for anyone holding one of the Base around the world NFTs',
   },
+  {
+    discount: Discount.DEVCON,
+    icon: DevconPNG,
+    alt: 'icon of Devcon',
+    label: 'Devcon attendance NFT',
+    tooltipContent: 'Available for anyone holding one of the Base Devcon NFTs',
+  },
 ];
 
 export default function RegistrationLearnMoreModal({

diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -23,10 +23,11 @@ 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';
+import { DynamicCryptoProviders } from 'apps/web/app/CryptoProviders.dynamic';
 
 export enum ConnectWalletButtonVariants {
   BaseOrg,
@@ -37,6 +38,16 @@ type ConnectWalletButtonProps = {
   connectWalletButtonVariant: ConnectWalletButtonVariants;
 };
 
+export function DynamicWrappedConnectWalletButton({
+  connectWalletButtonVariant = ConnectWalletButtonVariants.BaseOrg,
+}: ConnectWalletButtonProps) {
+  return (
+    <DynamicCryptoProviders>
+      <ConnectWalletButton connectWalletButtonVariant={connectWalletButtonVariant} />
+    </DynamicCryptoProviders>
+  )
+}
+
 export function ConnectWalletButton({
   connectWalletButtonVariant = ConnectWalletButtonVariants.BaseOrg,
 }: ConnectWalletButtonProps) {
@@ -93,11 +104,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,12 +154,12 @@ 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>
 
-      <WalletDropdown className="rounded-xl bg-white font-sans shadow-md">
+      <WalletDropdown className="z-50 rounded-xl bg-white font-sans shadow-md">
         <Identity className="px-4 pb-2 pt-3 font-display">
           <UserAvatar />
           <Name

diff --git 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