testnet banner in minifront and prax (#1013)

apps/extension/src/routes/popup/home/index-header.tsx

@@ -5,6 +5,7 @@ import { Network } from '@penumbra-zone/ui/components/ui/network';
 import { useChainIdQuery } from '../../../hooks/chain-id';
 import { motion } from 'framer-motion';
 import { useStore } from '../../../state';
+import { TestnetBanner } from '@penumbra-zone/ui/components/ui/testnet-banner';
 
 export const IndexHeader = () => {
   const navigate = usePopupNav();
@@ -13,7 +14,7 @@ export const IndexHeader = () => {
 
   return (
     <header className='top-0 z-40 w-full'>
-      <div className='flex items-center justify-between gap-4 pt-4'>
+      <div className='flex items-center justify-between gap-4 py-4'>
         <HamburgerMenuIcon
           onClick={() => navigate(PopupPath.SETTINGS)}
           className='size-6 shrink-0 cursor-pointer hover:opacity-50'
@@ -30,6 +31,7 @@ export const IndexHeader = () => {
           <div className='m-[19px]' />
         )}
       </div>
+      <TestnetBanner chainId={chainId} />
     </header>
   );
 };

apps/minifront/src/components/header/header.tsx

@@ -3,7 +3,7 @@ import { SyncStatusSection } from './sync-status-section';
 
 export const Header = () => {
   return (
-    <header className='w-full bg-gradient-to-t from-transparent to-black to-40% pb-[3em]'>
+    <header className='w-full overflow-hidden bg-gradient-to-t from-transparent to-black to-40% pb-[3em]'>
       <SyncStatusSection />
       <TopRow />
     </header>

apps/minifront/src/components/header/top-row.tsx

@@ -20,23 +20,17 @@ import { LayoutLoaderResult } from '../layout';
 // if there are any problems with this link.
 const WEB_EXT_FEEDBACK_DISCORD_CHANNEL = 'https://discord.gg/XDNcrhKVwV';
 
-const useChainId = (): string | undefined => {
+export const TopRow = () => {
   const { isInstalled, isConnected } = useLoaderData() as LayoutLoaderResult;
   const [chainId, setChainId] = useState<string | undefined>();
 
   useEffect(() => {
     if (isInstalled && isConnected) void getChainId().then(setChainId);
   }, [isInstalled, isConnected]);
 
-  return chainId;
-};
-
-export const TopRow = () => {
-  const chainId = useChainId();
-
   return (
     <div className='flex w-full flex-col items-center justify-between px-6 md:h-[82px] md:flex-row md:gap-12 md:px-12'>
-      <div className='mb-[30px] md:mb-0'>
+      <div className='relative inset-x-0 mb-[30px] md:mb-0'>
         <img
           src='./penumbra-logo.svg'
           alt='Penumbra logo'
@@ -45,7 +39,7 @@ export const TopRow = () => {
         <Link to={PagePath.INDEX}>
           <img
             src='./logo.svg'
-            alt='Penumbra logo'
+            alt='Penumbra logotype'
             className='relative z-10 mt-[20px] h-4 w-[171px] md:mt-0'
           />
         </Link>

apps/minifront/src/components/layout.tsx

@@ -7,6 +7,9 @@ import { ExtensionNotInstalled } from './extension-not-installed';
 import { Footer } from './footer/footer';
 import { isPraxConnected, isPraxConnectedTimeout, isPraxAvailable } from '@penumbra-zone/client';
 import '@penumbra-zone/ui/styles/globals.css';
+import { getChainId } from '../fetchers/chain-id';
+import { useEffect, useState } from 'react';
+import { TestnetBanner } from '@penumbra-zone/ui/components/ui/testnet-banner';
 
 export interface LayoutLoaderResult {
   isInstalled: boolean;
@@ -22,12 +25,18 @@ export const LayoutLoader: LoaderFunction = async (): Promise<LayoutLoaderResult
 
 export const Layout = () => {
   const { isInstalled, isConnected } = useLoaderData() as LayoutLoaderResult;
+  const [chainId, setChainId] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (isInstalled && isConnected) void getChainId().then(id => setChainId(id));
+  }, [isInstalled, isConnected]);
 
   if (!isInstalled) return <ExtensionNotInstalled />;
   if (!isConnected) return <ExtensionNotConnected />;
 
   return (
     <>
+      <TestnetBanner chainId={chainId} />
       <HeadTag />
       <div className='flex min-h-screen w-full flex-col'>
         <Header />

packages/ui/components/ui/testnet-banner.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import { TestnetBanner } from './testnet-banner';
+
+describe('<TestnetBanner />', () => {
+  it('renders banner if chainId is a testnet', () => {
+    const { container } = render(<TestnetBanner chainId='penumbra-testnet-deimos-7' />);
+
+    expect(container).toHaveTextContent('penumbra-testnet-deimos-7');
+    expect(container).toHaveTextContent('Testnet tokens have no monetary value.');
+  });
+
+  it('does not render banner if chainId is not a testnet', () => {
+    const { container } = render(<TestnetBanner chainId='any-other-name' />);
+    expect(container).not.toHaveTextContent('any-other-name');
+    expect(container).not.toHaveTextContent('Testnet tokens have no monetary value.');
+  });
+
+  it('does not render banner if chainId is missing', () => {
+    const { container } = render(<TestnetBanner chainId={undefined} />);
+    expect(container).not.toHaveTextContent('any-other-name');
+    expect(container).not.toHaveTextContent('Testnet tokens have no monetary value.');
+  });
+});

packages/ui/components/ui/testnet-banner.tsx

@@ -0,0 +1,12 @@
+export const TestnetBanner = ({ chainId }: { chainId?: string }) =>
+  chainId?.includes('testnet') && (
+    <div className='w-full bg-yellow-500 text-center font-headline text-black'>
+      <div className='m-auto max-w-prose p-2'>
+        <h1 className='font-bold'>You are using {chainId}.</h1>
+        <p>
+          Testnet tokens are solely to allow testing the Penumbra protocol. Testnet tokens have no
+          monetary value. Testnet activity has no relation to mainnet.
+        </p>
+      </div>
+    </div>
+  );