From 0c7febfbaab2953ff9d556203d35e6134d3e6781 Mon Sep 17 00:00:00 2001 From: Brendan from DeFi Date: Wed, 13 Nov 2024 11:10:57 -0800 Subject: [PATCH] fix: dynamic crypto providers (#1248) * dynamic crypto providers * fixed typo --- .../builder-anniversary-nft/page.tsx | 5 +- apps/web/app/(basenames)/layout.tsx | 11 ++- apps/web/app/AppProviders.tsx | 87 ++----------------- apps/web/app/CryptoProviders.dynamic.tsx | 22 +++++ apps/web/app/CryptoProviders.tsx | 78 +++++++++++++++++ apps/web/app/global.css | 3 + .../ConnectWalletButton.tsx | 11 +++ .../shared/TopNavigation/GasPriceDropdown.tsx | 13 ++- .../base-org/shared/TopNavigation/index.tsx | 35 +++++--- 9 files changed, 165 insertions(+), 100 deletions(-) create mode 100644 apps/web/app/CryptoProviders.dynamic.tsx create mode 100644 apps/web/app/CryptoProviders.tsx diff --git a/apps/web/app/(base-org)/builder-anniversary-nft/page.tsx b/apps/web/app/(base-org)/builder-anniversary-nft/page.tsx index 80efceb319..355dfc619e 100644 --- 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 (
- + + +
); } diff --git a/apps/web/app/(basenames)/layout.tsx b/apps/web/app/(basenames)/layout.tsx index 493d746931..87db756f35 100644 --- 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 ( -
- - {children} -
+ +
+ + {children} +
+ ); } diff --git a/apps/web/app/AppProviders.tsx b/apps/web/app/AppProviders.tsx index 438252fee3..b720ff7c13 100644 --- a/apps/web/app/AppProviders.tsx +++ b/apps/web/app/AppProviders.tsx @@ -1,6 +1,4 @@ 'use client'; -import '@rainbow-me/rainbowkit/styles.css'; -import '@coinbase/onchainkit/styles.css'; import { Provider as CookieManagerProvider, @@ -8,28 +6,14 @@ import { TrackingCategory, TrackingPreference, } from '@coinbase/cookie-manager'; -import { AppConfig, 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,51 +23,8 @@ 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; -const onchainKitConfig: AppConfig = { - appearance: { - mode: 'light', - }, -}; - type AppProvidersProps = { children: React.ReactNode; }; @@ -142,26 +83,14 @@ export default function AppProviders({ children }: AppProvidersProps) { config={cookieManagerConfig} > - - - - - - - <> - {children} - - - - - - - - + + + <> + {children} + + + + ); diff --git a/apps/web/app/CryptoProviders.dynamic.tsx b/apps/web/app/CryptoProviders.dynamic.tsx new file mode 100644 index 0000000000..f0049a96fe --- /dev/null +++ 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>(); + 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 {children}; +} diff --git a/apps/web/app/CryptoProviders.tsx b/apps/web/app/CryptoProviders.tsx new file mode 100644 index 0000000000..f25e43e6ec --- /dev/null +++ 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 ( + + + + {children} + + + + ); +} diff --git a/apps/web/app/global.css b/apps/web/app/global.css index 4a2dc90d14..ddfedc28f4 100644 --- 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/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx index 5c9996f05a..ff7db6a95c 100644 --- a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx +++ b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx @@ -27,6 +27,7 @@ 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 ( + + + + ) +} + 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 index 27543de352..042c810a4c 100644 --- a/apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown.tsx +++ b/apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown.tsx @@ -2,6 +2,7 @@ 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'; import { useGasPrice } from 'wagmi'; +import { DynamicCryptoProviders } from 'apps/web/app/CryptoProviders.dynamic'; const convertWeiToMwei = (weiValue: bigint): number => { // 1 mwei = 10^6 wei @@ -9,7 +10,15 @@ const convertWeiToMwei = (weiValue: bigint): number => { return Number(mweiValue.toFixed(2)); // Round to 2 decimal places }; -export default function GasPriceDropdown() { +export function DynamicWrappedGasPriceDropdown() { + return ( + + + + ); +} + +export function GasPriceDropdown() { const { data: baseGasPriceInWei } = useGasPrice({ chainId: base.id, query: { @@ -26,7 +35,7 @@ export default function GasPriceDropdown() { return (
-
+
diff --git a/apps/web/src/components/base-org/shared/TopNavigation/index.tsx b/apps/web/src/components/base-org/shared/TopNavigation/index.tsx index b7160b2cb8..795c703805 100644 --- a/apps/web/src/components/base-org/shared/TopNavigation/index.tsx +++ b/apps/web/src/components/base-org/shared/TopNavigation/index.tsx @@ -1,17 +1,18 @@ 'use client'; -import AnalyticsProvider from 'apps/web/contexts/Analytics'; -import Link from 'next/link'; -import logo from './assets/logo.svg'; +import { Suspense } from 'react'; import Image, { StaticImageData } from 'next/image'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import AnalyticsProvider from 'apps/web/contexts/Analytics'; +import logo from 'apps/web/src/components/base-org/shared/TopNavigation/assets/logo.svg'; +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 { DynamicWrappedGasPriceDropdown } from 'apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown'; import { - ConnectWalletButton, ConnectWalletButtonVariants, + DynamicWrappedConnectWalletButton, } 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 GasPriceDropdown from 'apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown'; -import { Suspense } from 'react'; export type SubItem = { name: string; @@ -91,7 +92,11 @@ const links: TopNavigationLink[] = [ }, ]; +const cryptoExcludedPaths = ['/jobs', '/about', '/ecosystem', '/getstarted']; + export default function TopNavigation() { + const pathname = usePathname(); + const showGasDropdownAndConnectWallet = !cryptoExcludedPaths.includes(pathname ?? ''); return (
@@ -114,11 +119,13 @@ export default function TopNavigation() { {/* Connect Wallet button */}
- - - + {showGasDropdownAndConnectWallet && ( + + + + )}