feat: add hooks testnet support (#754)

## High Level Overview of Change Title says it all. The Network page won't work until ripple/validator-history-service#94 is merged and deployed. ### Context of Change Better network support ### Type of Change - [x] New feature (non-breaking change which adds functionality) ### TypeScript/Hooks Update N/A Technically adding hooks support 😜 ## Test Plan Works locally.
ripple · Jun 21, 2023 · 8ba133a · 8ba133a
1 parent c895754
commit 8ba133a
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 2 deletions.
diff --git a/.env.example b/.env.example
@@ -12,10 +12,11 @@ VITE_MAINNET_LINK=
 VITE_TESTNET_LINK=
 VITE_DEVNET_LINK=
 VITE_AMM_LINK=
+VITE_HOOKS_TESTNET_LINK=
 VITE_CUSTOMNETWORK_LINK=
 VITE_VALIDATOR=vl.ripple.com
 
-#XRPL Environment: mainnet, testnet, devnet, amm, custom
+#XRPL Environment: mainnet, testnet, devnet, amm, hooks_testnet, custom
 VITE_ENVIRONMENT=mainnet
 
 #VHS endpoint url

diff --git a/public/locales/en-US/translations.json b/public/locales/en-US/translations.json
@@ -11,6 +11,7 @@
   "network_name_mainnet": "Mainnet",
   "network_name_devnet": "Devnet",
   "network_name_amm": "AMM-Devnet",
+  "network_name_hooks_testnet": "Hooks-Testnet",
   "network_name_custom": "Custom",
   "app.meta.description": "XRPL Network Explorer",
   "app.meta.author": "Ripple",

diff --git a/src/containers/Header/NetworkPicker/NetworkPicker.scss b/src/containers/Header/NetworkPicker/NetworkPicker.scss
@@ -54,6 +54,11 @@
     @include dropdown-network-item($amm, $blue-60);
   }
 
+  /* stylelint-disable-next-line selector-class-pattern -- needed here for variables */
+  &.network-hooks_testnet {
+    @include dropdown-network-item($hooks-testnet, $red-purple-60);
+  }
+
   &.network-custom {
     @include dropdown-network-item($custom, $yellow-60);
   }

diff --git a/src/containers/Header/NetworkPicker/NetworkPicker.tsx b/src/containers/Header/NetworkPicker/NetworkPicker.tsx
@@ -18,6 +18,7 @@ const STATIC_ENV_LINKS: Record<string, string | undefined> = {
   testnet: process.env.VITE_TESTNET_LINK,
   devnet: process.env.VITE_DEVNET_LINK,
   amm: process.env.VITE_AMM_LINK,
+  hooks_testnet: process.env.VITE_HOOKS_TESTNET_LINK,
 }
 const currentMode: string = process.env.VITE_ENVIRONMENT || 'mainnet'
 

diff --git a/src/containers/shared/NetworkContext.tsx b/src/containers/shared/NetworkContext.tsx
@@ -6,8 +6,8 @@ const ENV_NETWORK_MAP: Record<string, string> = {
   mainnet: 'main',
   testnet: 'test',
   devnet: 'dev',
-  nft_sandbox: 'nft-dev',
   amm: 'amm-dev',
+  hooks_testnet: 'hooks-test',
 }
 
 function getNetworkName() {

diff --git a/src/containers/shared/css/variables.scss b/src/containers/shared/css/variables.scss
@@ -113,6 +113,7 @@ $white-transparent: rgb(255 255 255 / 75%);
 // Networks
 $testnet: $orange;
 $devnet: $blue-purple-30;
+$hooks-testnet: $red-purple-30;
 $custom: $yellow-50;
 
 // Feature Sets