From 926dc12bcd4a2b8c787061805fba5e4e032a512a Mon Sep 17 00:00:00 2001 From: the letter L <134443988+turbocrime@users.noreply.github.com> Date: Tue, 30 Apr 2024 09:28:25 -0700 Subject: [PATCH] testnet banner in minifront and prax (#1013) --- .../src/routes/popup/home/index-header.tsx | 4 +++- .../src/components/header/header.tsx | 2 +- .../src/components/header/top-row.tsx | 12 +++------- apps/minifront/src/components/layout.tsx | 9 +++++++ .../ui/components/ui/testnet-banner.test.tsx | 24 +++++++++++++++++++ packages/ui/components/ui/testnet-banner.tsx | 12 ++++++++++ 6 files changed, 52 insertions(+), 11 deletions(-) create mode 100644 packages/ui/components/ui/testnet-banner.test.tsx create mode 100644 packages/ui/components/ui/testnet-banner.tsx diff --git a/apps/extension/src/routes/popup/home/index-header.tsx b/apps/extension/src/routes/popup/home/index-header.tsx index ea4a0f95c9..5cb835ddde 100644 --- a/apps/extension/src/routes/popup/home/index-header.tsx +++ b/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 (
-
+
navigate(PopupPath.SETTINGS)} className='size-6 shrink-0 cursor-pointer hover:opacity-50' @@ -30,6 +31,7 @@ export const IndexHeader = () => {
)}
+
); }; diff --git a/apps/minifront/src/components/header/header.tsx b/apps/minifront/src/components/header/header.tsx index be19712af8..b538b99dda 100644 --- a/apps/minifront/src/components/header/header.tsx +++ b/apps/minifront/src/components/header/header.tsx @@ -3,7 +3,7 @@ import { SyncStatusSection } from './sync-status-section'; export const Header = () => { return ( -
+
diff --git a/apps/minifront/src/components/header/top-row.tsx b/apps/minifront/src/components/header/top-row.tsx index 8f102a2153..508c30db59 100644 --- a/apps/minifront/src/components/header/top-row.tsx +++ b/apps/minifront/src/components/header/top-row.tsx @@ -20,7 +20,7 @@ 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(); @@ -28,15 +28,9 @@ const useChainId = (): string | undefined => { if (isInstalled && isConnected) void getChainId().then(setChainId); }, [isInstalled, isConnected]); - return chainId; -}; - -export const TopRow = () => { - const chainId = useChainId(); - return (
-
+
Penumbra logo { Penumbra logo diff --git a/apps/minifront/src/components/layout.tsx b/apps/minifront/src/components/layout.tsx index 53cbc042a7..88f037d6f3 100644 --- a/apps/minifront/src/components/layout.tsx +++ b/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 { const { isInstalled, isConnected } = useLoaderData() as LayoutLoaderResult; + const [chainId, setChainId] = useState(); + + useEffect(() => { + if (isInstalled && isConnected) void getChainId().then(id => setChainId(id)); + }, [isInstalled, isConnected]); if (!isInstalled) return ; if (!isConnected) return ; return ( <> +
diff --git a/packages/ui/components/ui/testnet-banner.test.tsx b/packages/ui/components/ui/testnet-banner.test.tsx new file mode 100644 index 0000000000..5fb8fdccda --- /dev/null +++ b/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('', () => { + it('renders banner if chainId is a testnet', () => { + const { container } = render(); + + 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(); + 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(); + expect(container).not.toHaveTextContent('any-other-name'); + expect(container).not.toHaveTextContent('Testnet tokens have no monetary value.'); + }); +}); diff --git a/packages/ui/components/ui/testnet-banner.tsx b/packages/ui/components/ui/testnet-banner.tsx new file mode 100644 index 0000000000..81c8a42c0d --- /dev/null +++ b/packages/ui/components/ui/testnet-banner.tsx @@ -0,0 +1,12 @@ +export const TestnetBanner = ({ chainId }: { chainId?: string }) => + chainId?.includes('testnet') && ( +
+
+

You are using {chainId}.

+

+ Testnet tokens are solely to allow testing the Penumbra protocol. Testnet tokens have no + monetary value. Testnet activity has no relation to mainnet. +

+
+
+ );