hide faucet dropdown on non spn testnet networks

fluidity-money · Sep 26, 2024 · e3c9e2c · e3c9e2c
1 parent 788e664
commit e3c9e2c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/web/src/app/_layout/FaucetDropdown.tsx b/web/src/app/_layout/FaucetDropdown.tsx
@@ -5,12 +5,19 @@ import { Badge } from "@/components/ui/badge";
 import { FaFaucet } from "react-icons/fa";
 import ArrowDown from "@/assets/icons/arrow-down.svg";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
+import { useChainId } from "wagmi";
+import { Chain } from "viem";
 
 /**
  * Shows a dropdown menu with links to the faucets.
  */
-export const FaucetDropdown = () => {
+export const FaucetDropdown = ({allowedChains}: {allowedChains: Chain[]}) => {
+  // this can't be conditionally rendered in the top level as the provider 
+  // isn't initialised, so we have to do it in the component
+  const chainId = useChainId();
+  if (!allowedChains.some(c => c.id === chainId))
+    return <></>
+
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger className="group">

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -14,6 +14,10 @@ import { FeatureFlagConfig } from "@/app/_layout/FeatureFlagConfig";
 import PopulateQueryCache from "@/app/PopulateQueryCache";
 import BottomBanner from "@/components/Banners/BottomBanner";
 import ErrorReportingDialog from "@/components/ErrorReportingDialog";
+import { useChainId } from "wagmi";
+import wagmiConfig from "@/config/wagmi";
+import { superpositionTestnet } from "@/config/chains";
+
 const title = "Longtail";
 
 const description = "Longtail is Arbitrum's cheapest and most rewarding AMM.";
@@ -69,6 +73,8 @@ export default async function RootLayout({
   );
   const featuresData = await featuresDataRequest.json();
 
+  const faucetChains = [superpositionTestnet];
+
   return (
     <html lang="en">
       <body
@@ -90,7 +96,7 @@ export default async function RootLayout({
                   <DemoData />
                 </div>
                 <div className="flex flex-row items-center gap-4">
-                  <FaucetDropdown />
+                  <FaucetDropdown allowedChains={faucetChains} />
                   <NetworkSelection />
                   <ConnectWalletButton />
                 </div>