feat(bridge-ui): add testnet name to header (#16619)

taikoxyz · Apr 3, 2024 · 294bb01 · 294bb01
1 parent 761a066
commit 294bb01
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/packages/bridge-ui/.env.example b/packages/bridge-ui/.env.example
@@ -7,6 +7,9 @@ export PUBLIC_DEFAULT_SWAP_URL=https://
 # Use the bridge guide Urls
 export PUBLIC_GUIDE_URL=https://
 
+# If it's a testnet, set a name here to show in the UI
+export PUBLIC_TESTNET_NAME=""
+
 # WalletConnect Project ID
 export PUBLIC_WALLETCONNECT_PROJECT_ID=""
 

diff --git a/packages/bridge-ui/src/components/Header/Header.svelte b/packages/bridge-ui/src/components/Header/Header.svelte
@@ -3,7 +3,6 @@
   import BridgeTabs from '$components/Bridge/BridgeTabs.svelte';
   import { ConnectButton } from '$components/ConnectButton';
   import { Icon } from '$components/Icon';
-  import { LogoWithText } from '$components/Logo';
   import { drawerToggleId } from '$components/SideNavigation';
   import { ThemeButton } from '$components/ThemeButton';
   import { account } from '$stores/account';
@@ -29,8 +28,6 @@
     md:px-10
     md:py-7
  ">
-  <LogoWithText width={77} height={21} class="md:hidden" textFillClass={'fill-primary-content'} />
-
   <div class="flex justify-end w-full">
     {#if isBridgePage || isTransactionsPage}
       <BridgeTabs class="hidden md:flex md:flex-1" />

diff --git a/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte
@@ -12,9 +12,15 @@
   import { LinkButton } from '$components/LinkButton';
   import { LogoWithText } from '$components/Logo';
   import { ThemeButton } from '$components/ThemeButton';
-  import { PUBLIC_DEFAULT_EXPLORER, PUBLIC_DEFAULT_SWAP_URL, PUBLIC_GUIDE_URL } from '$env/static/public';
+  import {
+    PUBLIC_DEFAULT_EXPLORER,
+    PUBLIC_DEFAULT_SWAP_URL,
+    PUBLIC_GUIDE_URL,
+    PUBLIC_TESTNET_NAME,
+  } from '$env/static/public';
   import { connectedSourceChain } from '$stores/network';
 
+  let testnetName = PUBLIC_TESTNET_NAME || '';
   let drawerToggleElem: HTMLInputElement;
 
   function closeDrawer() {
@@ -34,6 +40,8 @@
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
   $: isFaucetPage = $page.route.id === '/faucet';
   $: isTransactionsPage = $page.route.id === '/transactions';
+
+  $: hasTestnetName = testnetName !== '';
 </script>
 
 <div class="drawer md:drawer-open">
@@ -53,9 +61,14 @@
     -->
     <div class="w-h-full !duration-100">
       <header class="flex justify-between py-[20px] px-[16px] h-[76px] md:hidden border-b border-b-divider-border">
-        <a href="/" class="inline-block">
-          <LogoWithText textFillClass="fill-primary-content" width={77} />
-        </a>
+        <div class="inline-block">
+          <a href="/" class="f-row gap-2">
+            <LogoWithText textFillClass="fill-primary-content" width={77} />
+            {#if hasTestnetName}
+              <span class="text-xs">{testnetName}</span>
+            {/if}
+          </a>
+        </div>
         <button on:click={closeDrawer} class="h-9">
           <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
         </button>
@@ -70,9 +83,15 @@
         md:py-8
         md:w-[226px]
       ">
-        <a href="/" class="hidden md:inline-block">
-          <LogoWithText textFillClass="fill-primary-content" />
-        </a>
+        <div class="hidden md:inline-block">
+          <a href="/" class="f-row gap-2">
+            <LogoWithText textFillClass="fill-primary-content" />
+            {#if hasTestnetName}
+              <span class="text-sm">{testnetName}</span>
+            {/if}
+          </a>
+        </div>
+
         <div role="button" tabindex="0" on:click={closeDrawer} on:keypress={closeDrawer}>
           <BridgeTabs class="md:hidden flex flex-1 mb-[40px] mt-[20px]" on:click={closeDrawer} />
         </div>