Revert "chore: limit usage of gas estimator and connect wallet (#1232)"

This reverts commit 362dac5.
base-org · Nov 10, 2024 · b709103 · b709103
1 parent 362dac5
commit b709103
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 132 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,4 +1,3 @@
-import CryptoProviders from 'apps/web/app/CryptoProviders';
 import { BuilderNftHero } from 'apps/web/src/components/BuilderNft/BuilderNftHero';
 import type { Metadata } from 'next';
 
@@ -14,9 +13,7 @@ export const metadata: Metadata = {
 export default async function About() {
   return (
     <main className="flex w-full flex-col items-center bg-black">
-      <CryptoProviders>
-        <BuilderNftHero />
-      </CryptoProviders>
+      <BuilderNftHero />
     </main>
   );
 }
diff --git a/apps/web/app/(basenames)/layout.tsx b/apps/web/app/(basenames)/layout.tsx
@@ -1,4 +1,3 @@
-import CryptoProviders from 'apps/web/app/CryptoProviders';
 import ErrorsProvider from 'apps/web/contexts/Errors';
 import UsernameNav from 'apps/web/src/components/Layout/UsernameNav';
 
@@ -28,12 +27,10 @@ export default async function BasenameLayout({
 }) {
   return (
     <ErrorsProvider context="basenames">
-      <CryptoProviders>
-        <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>
     </ErrorsProvider>
   );
 }
diff --git a/apps/web/app/AppProviders.tsx b/apps/web/app/AppProviders.tsx
@@ -1,19 +1,35 @@
 '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(
@@ -23,6 +39,43 @@ 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 = {
@@ -83,14 +136,25 @@ export default function AppProviders({ children }: AppProvidersProps) {
         config={cookieManagerConfig}
       >
         <ClientAnalyticsScript />
-        <TooltipProvider>
-          <ExperimentsProvider>
-            <>
-              {children}
-              <DynamicCookieBannerWrapper />
-            </>
-          </ExperimentsProvider>
-        </TooltipProvider>
+        <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>
       </CookieManagerProvider>
     </ErrorsProvider>
   );

diff --git a/apps/web/app/CryptoProviders.tsx b/apps/web/app/CryptoProviders.tsx
diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -27,7 +27,6 @@ import { useCopyToClipboard } from 'usehooks-ts';
 import { useAccount, useSwitchChain } from 'wagmi';
 import ChainDropdown from 'apps/web/src/components/ChainDropdown';
 import { useSearchParams } from 'next/navigation';
-import CryptoProviders from 'apps/web/app/CryptoProviders';
 
 export enum ConnectWalletButtonVariants {
   BaseOrg,
@@ -38,16 +37,6 @@ type ConnectWalletButtonProps = {
   connectWalletButtonVariant: ConnectWalletButtonVariants;
 };
 
-export function WrappedConnectWalletButton({
-  connectWalletButtonVariant = ConnectWalletButtonVariants.BaseOrg,
-}: ConnectWalletButtonProps) {
-  return (
-    <CryptoProviders>
-      <ConnectWalletButton connectWalletButtonVariant={connectWalletButtonVariant} />
-    </CryptoProviders>
-  )
-}
-
 export function ConnectWalletButton({
   connectWalletButtonVariant = ConnectWalletButtonVariants.BaseOrg,
 }: ConnectWalletButtonProps) {

diff --git a/apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown.tsx b/apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown.tsx
@@ -1,4 +1,3 @@
-import CryptoProviders from 'apps/web/app/CryptoProviders';
 import Card from 'apps/web/src/components/base-org/Card';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
 import { base, mainnet } from 'viem/chains';
@@ -10,15 +9,7 @@ const convertWeiToMwei = (weiValue: bigint): number => {
   return Number(mweiValue.toFixed(2)); // Round to 2 decimal places
 };
 
-export function WrappedGasPriceDropdown() {
-  return (
-    <CryptoProviders>
-      <GasPriceDropdown />
-    </CryptoProviders>
-  );
-}
-
-function GasPriceDropdown() {
+export default function GasPriceDropdown() {
   const { data: baseGasPriceInWei } = useGasPrice({
     chainId: base.id,
     query: {

diff --git a/apps/web/src/components/base-org/shared/TopNavigation/index.tsx b/apps/web/src/components/base-org/shared/TopNavigation/index.tsx
@@ -5,14 +5,13 @@ import Link from 'next/link';
 import logo from './assets/logo.svg';
 import Image, { StaticImageData } from 'next/image';
 import {
-  WrappedConnectWalletButton,
+  ConnectWalletButton,
   ConnectWalletButtonVariants,
 } from 'apps/web/src/components/ConnectWalletButton/ConnectWalletButton';
 import MenuDesktop from 'apps/web/src/components/base-org/shared/TopNavigation/MenuDesktop';
 import MenuMobile from 'apps/web/src/components/base-org/shared/TopNavigation/MenuMobile';
-import { WrappedGasPriceDropdown } from 'apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown';
+import GasPriceDropdown from 'apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown';
 import { Suspense } from 'react';
-import { usePathname } from 'next/navigation';
 
 export type SubItem = {
   name: string;
@@ -93,13 +92,6 @@ const links: TopNavigationLink[] = [
 ];
 
 export default function TopNavigation() {
-  const pathname = usePathname();
-  const showGasDropdownAndConnectWallet = ![
-    '/jobs',
-    '/about',
-    '/ecosystem',
-    '/getstarted',
-  ].includes(pathname ?? '');
   return (
     <AnalyticsProvider context="navbar">
       <nav className="fixed top-0 z-50 w-full shrink-0 px-[1rem] py-4 md:px-[1.5rem] lg:px-[2rem]">
@@ -109,7 +101,7 @@ export default function TopNavigation() {
             <Link href="/" className="flex min-h-[3rem] min-w-[3rem]">
               <Image src={logo as StaticImageData} alt="Base Logo" />
             </Link>
-            {showGasDropdownAndConnectWallet && <WrappedGasPriceDropdown />}
+            <GasPriceDropdown />
           </div>
 
           <div className="hidden md:inline-block">
@@ -122,13 +114,11 @@ export default function TopNavigation() {
 
           {/* Connect Wallet button */}
           <div className="flex items-end justify-end md:min-w-[16rem]">
-            {showGasDropdownAndConnectWallet && (
-              <Suspense>
-                <WrappedConnectWalletButton
-                  connectWalletButtonVariant={ConnectWalletButtonVariants.BaseOrg}
-                />
-              </Suspense>
-            )}
+            <Suspense>
+              <ConnectWalletButton
+                connectWalletButtonVariant={ConnectWalletButtonVariants.BaseOrg}
+              />
+            </Suspense>
           </div>
         </div>
       </nav>