add network tag to all network-related tools

lukso-network · Apr 24, 2024 · fbfd6bd · fbfd6bd
1 parent 1c5d6cd
commit fbfd6bd
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/components/KeyManagerNonceChecker/KeyManagerNonceChecker.tsx b/components/KeyManagerNonceChecker/KeyManagerNonceChecker.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable react/no-unescaped-entities */
 
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 
 import LSP6KeyManager from '@lukso/lsp-smart-contracts/artifacts/LSP6KeyManager.json';
 import useWeb3 from '../../hooks/useWeb3';
+import { NetworkContext } from '../../contexts/NetworksContext';
 
 const KeyManagerNonceChecker: React.FC = () => {
   const web3 = useWeb3();
@@ -12,6 +13,7 @@ const KeyManagerNonceChecker: React.FC = () => {
   const [callerAddress, setCallerAddress] = useState('');
   const [channelId, setChannelId] = useState('');
   const [nonce, setNonce] = useState('');
+  const { network } = useContext(NetworkContext);
 
   const [showNonce, setShowNonce] = useState(false);
   const [error, showError] = useState(false);
@@ -51,6 +53,10 @@ const KeyManagerNonceChecker: React.FC = () => {
   return (
     <div className="container mt-5">
       <h2 className="title is-2">Nonce</h2>
+      <div className="tags has-addons">
+        <span className="tag is-dark">Network</span>
+        <span className="tag is-warning">{network.name}</span>
+      </div>
       <article className="message is-info">
         <div className="message-body">
           Retrieve the nonce of a{' '}

diff --git a/pages/data-fetcher.tsx b/pages/data-fetcher.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { isAddress } from 'web3-utils';
 import ERC725 from '@erc725/erc725.js';
 import { ERC725YDataKeys } from '@lukso/lsp-smart-contracts';
@@ -21,6 +21,7 @@ import useWeb3 from '../hooks/useWeb3';
 
 import SampleAddressInput from '../components/SampleAddressInput/SampleAddressInput';
 import { SAMPLE_ADDRESS } from '../constants';
+import { NetworkContext } from '../contexts/NetworksContext';
 
 const dataKeyList = [
   ...LSP1DataKeys.map((key) => ({ name: key.name, key: key.key, icon: '📢' })),
@@ -45,6 +46,7 @@ const GetData: NextPage = () => {
     isErc725X: false,
     isErc725Y: false,
   });
+  const { network } = useContext(NetworkContext);
 
   const web3 = useWeb3();
 
@@ -116,6 +118,10 @@ const GetData: NextPage = () => {
       </Head>
       <div className="container">
         <h2 className="title is-2">Data Fetcher</h2>
+        <div className="tags has-addons">
+          <span className="tag is-dark">Network</span>
+          <span className="tag is-warning">{network.name}</span>
+        </div>
         <article className="message is-info">
           <div className="message-body">
             Retrieve the encoded storage of a

diff --git a/pages/inspector.tsx b/pages/inspector.tsx
@@ -95,7 +95,7 @@ const Home: NextPage = () => {
       setIsLoading(false);
     };
     check();
-  }, [address, web3, errorMessage]);
+  }, [address, web3, errorMessage, network.name, router]);
 
   const ERC725InspectResult = () => {
     if (
@@ -227,6 +227,10 @@ const Home: NextPage = () => {
       </Head>
       <div className="container">
         <h2 className="title is-2">Inspector</h2>
+        <div className="tags has-addons">
+          <span className="tag is-dark">Network</span>
+          <span className="tag is-warning">{network.name}</span>
+        </div>
         <article className="message is-info">
           <div className="message-body">
             Retrieve and decode all