Create page for LSP4 Metadata encoding (#116)

lukso-network · Jul 30, 2024 · e5643c8 · e5643c8
1 parent 8c51f82
commit e5643c8
Show file tree

Hide file tree

Showing 36 changed files with 1,513 additions and 135 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -5,6 +5,9 @@ on:
     branches:
       - main
 
+env:
+  SHARED_KEY: ${{ secrets.SHARED_KEY }}
+
 jobs:
   build-and-lint:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -4,6 +4,9 @@ on:
   push:
     branches: [main]
 
+env:
+  SHARED_KEY: ${{ secrets.SHARED_KEY }}
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest

diff --git a/.gitignore b/.gitignore
@@ -25,10 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*
 
 # vercel
 .vercel

diff --git a/components/AddressButtons/AddressButtons.tsx b/components/AddressButtons/AddressButtons.tsx
@@ -3,7 +3,7 @@
  * @author Felix Hildebrandt <fhildeb>
  */
 import React, { useContext } from 'react';
-import { NetworkContext } from '../../contexts/NetworksContext';
+import { NetworkContext } from '@/contexts/NetworksContext';
 
 interface Props {
   address: string;

diff --git a/components/AddressInfos/AddressInfos.tsx b/components/AddressInfos/AddressInfos.tsx
@@ -5,15 +5,15 @@ import React, { useState, useContext, useEffect } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import { ERC725YDataKeys } from '@lukso/lsp-smart-contracts';
 
-import { NetworkContext } from '../../contexts/NetworksContext';
-import useWeb3 from '../../hooks/useWeb3';
+import { NetworkContext } from '@/contexts/NetworksContext';
+import useWeb3 from '@/hooks/useWeb3';
 import {
   EXPLORER_BASE_URL,
   LSP1_DELEGATE_VERSIONS,
   LSP1_GRAVE_FORWARDER,
   UP_RECOVERY_ADDRESSES,
-} from '../../globals';
-import { checkInterface, getData, checkIsGnosisSafe } from '../../utils/web3';
+} from '@/globals';
+import { checkInterface, getData, checkIsGnosisSafe } from '@/utils/web3';
 
 import LSP7Artifact from '@lukso/lsp-smart-contracts/artifacts/LSP7DigitalAsset.json';
 import { AbiItem } from 'web3-utils';

diff --git a/components/ContractOwner/ContractOwner.tsx b/components/ContractOwner/ContractOwner.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
 import ERC725Account from '@lukso/lsp-smart-contracts/artifacts/LSP0ERC725Account.json';
-import useWeb3 from '../../hooks/useWeb3';
+import useWeb3 from '@/hooks/useWeb3';
 
-import { eip165ABI } from '../../constants';
+import { eip165ABI } from '@/constants';
 import { AbiItem, isAddress } from 'web3-utils';
 import { INTERFACE_IDS } from '@lukso/lsp-smart-contracts';
-import AddressButtons from '../AddressButtons';
+import AddressButtons from '@/components/AddressButtons';
 
 type Props = {
   contractAddress: string;

diff --git a/components/ControllersList/ControllersList.tsx b/components/ControllersList/ControllersList.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import ERC725, { encodeArrayKey, encodeKeyName } from '@erc725/erc725.js';
 
-import { getDataBatch } from '../../utils/web3';
-import useWeb3 from '../../hooks/useWeb3';
-import AddressInfos from '../AddressInfos';
+import { getDataBatch } from '@/utils/web3';
+import useWeb3 from '@/hooks/useWeb3';
+import AddressInfos from '@/components/AddressInfos';
 import { ERC725YDataKeys } from '@lukso/lsp-smart-contracts';
 
 interface Props {

diff --git a/components/DataKeysTable/DataKeysTable.tsx b/components/DataKeysTable/DataKeysTable.tsx
@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { ERC725JSONSchema } from '@erc725/erc725.js';
 
-import AddressButtons from '../AddressButtons';
-import ValueTypeDecoder from '../ValueTypeDecoder';
+import AddressButtons from '@/components/AddressButtons';
+import ValueTypeDecoder from '@/components/ValueTypeDecoder';
 
 import ProfileSchema from './ProfileSchema.json';
 import AssetSchema from './AssetSchema.json';
 import LSP8Schema from './LSP8Schema.json';
 
 import { SCHEMA_DOCS_LINKS, SchemaName } from './schemas';
 
-import { getDataBatch } from '../../utils/web3';
+import { getDataBatch } from '@/utils/web3';
 
-import useWeb3 from '../../hooks/useWeb3';
+import useWeb3 from '@/hooks/useWeb3';
 
 interface Props {
   address: string;

diff --git a/components/Decode/Decode.tsx b/components/Decode/Decode.tsx
@@ -3,8 +3,8 @@ import Web3 from 'web3';
 import {
   TRANSACTION_SELECTORS,
   TRANSACTION_TYPES,
-} from '../../interfaces/transaction';
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
+} from '@/interfaces/transaction';
+import ErrorMessage from '@/components/ErrorMessage';
 import styles from './Decode.module.scss';
 
 interface Props {

diff --git a/components/Encode/Encode.tsx b/components/Encode/Encode.tsx
@@ -6,7 +6,7 @@ import EncodeSetData from './components/EncodeSetData';
 import EncodeTransferOwnership from './components/EncodeTransferOwnership';
 import styles from './Encode.module.scss';
 
-import { TRANSACTION_TYPES } from '../../interfaces/transaction';
+import { TRANSACTION_TYPES } from '@/interfaces/transaction';
 
 interface Props {
   web3: Web3;

diff --git a/components/Encode/components/EncodeExecute.tsx b/components/Encode/components/EncodeExecute.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Web3 from 'web3';
 import EncodedPayload from './EncodedPayload';
 import ERC725Account from '@lukso/lsp-smart-contracts/artifacts/LSP0ERC725Account.json';
-import ErrorMessage from '../../ErrorMessage';
+import ErrorMessage from '@/components/ErrorMessage';
 import styles from './EncodeExecute.module.scss';
 
 interface Props {

diff --git a/components/Encode/components/EncodeSetData.tsx b/components/Encode/components/EncodeSetData.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Web3 from 'web3';
 import EncodedPayload from './EncodedPayload';
 import ERC725Account from '@lukso/lsp-smart-contracts/artifacts/LSP0ERC725Account.json';
-import ErrorMessage from '../../ErrorMessage';
+import ErrorMessage from '@/components/ErrorMessage';
 import { AbiItem } from 'web3-utils';
 import styles from './EncodeSetData.module.scss';
 

diff --git a/components/Encode/components/EncodeTransferOwnership.tsx b/components/Encode/components/EncodeTransferOwnership.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Web3 from 'web3';
 import EncodedPayload from './EncodedPayload';
 import ERC725Account from '@lukso/lsp-smart-contracts/artifacts/LSP0ERC725Account.json';
-import ErrorMessage from '../../ErrorMessage';
+import ErrorMessage from '@/components/ErrorMessage';
 import { Contract } from 'web3-eth-contract';
 import styles from './EncodeTransferOwnership.module.scss';
 interface Props {

diff --git a/components/KeyManagerNonceChecker/KeyManagerNonceChecker.tsx b/components/KeyManagerNonceChecker/KeyManagerNonceChecker.tsx
@@ -3,8 +3,8 @@
 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';
+import useWeb3 from '@/hooks/useWeb3';
+import { NetworkContext } from '@/contexts/NetworksContext';
 
 const KeyManagerNonceChecker: React.FC = () => {
   const web3 = useWeb3();

diff --git a/components/KeyManagerPermissions/KeyManagerPermissions.tsx b/components/KeyManagerPermissions/KeyManagerPermissions.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import ERC725 from '@erc725/erc725.js';
-import PermissionsBtns from '../PermissionsBtns';
+import PermissionsBtns from '@/components/PermissionsBtns';
 
 const KeyManagerPermissions: React.FC = () => {
   const initialEncodedPermissions =

diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
@@ -4,9 +4,116 @@
  */
 import React, { useState } from 'react';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { NextRouter, useRouter } from 'next/router';
 import NetworkSwitch from './components/NetworksSwitch';
 import styles from './NavBar.module.scss';
+import clsx from 'clsx';
+
+const LinksMenu = ({
+  router,
+  createLink,
+}: {
+  router: NextRouter;
+  createLink: (path: string) => string;
+}) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <div className={clsx('navbar-item dropdown', isActive && 'is-active')}>
+      <div className="dropdown-trigger">
+        <a
+          className="navbar-link is-flex"
+          aria-haspopup="true"
+          aria-controls="dropdown-menu"
+          onClick={() => setIsActive(!isActive)}
+        >
+          Menu
+        </a>
+      </div>
+      <div className="dropdown-menu" id="dropdown-menu" role="menu">
+        <div className="dropdown-content" style={{ background: '#F0F0F0' }}>
+          <Link href={createLink('/inspector')}>
+            <a
+              className={clsx(
+                'dropdown-item',
+                router.pathname === '/inspector' && 'has-text-link',
+              )}
+              onClick={() => setIsActive(false)}
+            >
+              🔎 Inspector
+            </a>
+          </Link>
+          <Link href={createLink('/lsp-checker')}>
+            <a
+              className={clsx(
+                'dropdown-item',
+                router.pathname === '/lsp-checker' && 'has-text-link',
+              )}
+              onClick={() => setIsActive(false)}
+            >
+              ✅ LSP Checker
+            </a>
+          </Link>
+          <Link href={createLink('/data-fetcher')}>
+            <a
+              className={clsx(
+                'dropdown-item',
+                router.pathname === '/data-fetcher' && 'has-text-link',
+              )}
+              onClick={() => setIsActive(false)}
+            >
+              💽 Data Fetcher
+            </a>
+          </Link>
+          <Link href={createLink('/key-manager')}>
+            <a
+              className={clsx(
+                'dropdown-item',
+                router.pathname === '/key-manager' && 'has-text-link',
+              )}
+              onClick={() => setIsActive(false)}
+            >
+              🔐 Key Manager
+            </a>
+          </Link>
+          <Link href={createLink('/abi-encoder')}>
+            <a
+              className={clsx(
+                'dropdown-item',
+                router.pathname === '/abi-encoder' && 'has-text-link',
+              )}
+              onClick={() => setIsActive(false)}
+            >
+              📜 ABI Encoder
+            </a>
+          </Link>
+          <Link href={createLink('/lsp2-encoder')}>
+            <a
+              className={clsx(
+                'dropdown-item',
+                router.pathname === '/lsp2-encoder' && 'has-text-link',
+              )}
+              onClick={() => setIsActive(false)}
+            >
+              📖 LSP2 Encoder
+            </a>
+          </Link>
+          <Link href="/lsp4-metadata-encoder">
+            <a
+              className={clsx(
+                'dropdown-item',
+                router.pathname === '/lsp4-metadata-encoder' && 'has-text-link',
+              )}
+              onClick={() => setIsActive(false)}
+            >
+              📖 LSP4 Metadata Encoder
+            </a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 const NavBar: React.FC = () => {
   const [isActive, setIsActive] = useState(false);
@@ -16,7 +123,7 @@ const NavBar: React.FC = () => {
     setIsActive(!isActive);
   };
 
-  const createLink = (path) => {
+  const createLink = (path: string) => {
     if (typeof window === 'undefined') {
       return path;
     }
@@ -42,7 +149,7 @@ const NavBar: React.FC = () => {
         </Link>
         <a
           role="button"
-          className={`navbar-burger burger ${isActive ? 'is-active' : ''}`}
+          className={clsx('navbar-burger burger', isActive && 'is-active')}
           aria-label="menu"
           aria-expanded="false"
           onClick={toggleNavbar}
@@ -60,66 +167,11 @@ const NavBar: React.FC = () => {
               🛠 ERC725 Tools
             </a>
           </Link>
-          <Link href={createLink('/inspector')}>
-            <a
-              className={`navbar-item ${
-                router.pathname === '/inspector' && 'has-text-link'
-              }`}
-            >
-              🔎 Inspector
-            </a>
-          </Link>
-          <Link href={createLink('/lsp-checker')}>
-            <a
-              className={`navbar-item ${
-                router.pathname === '/lsp-checker' && 'has-text-link'
-              }`}
-            >
-              ✅ LSP Checker
-            </a>
-          </Link>
-          <Link href={createLink('/data-fetcher')}>
-            <a
-              className={`navbar-item ${
-                router.pathname === '/data-fetcher' && 'has-text-link'
-              }`}
-            >
-              💽 Data Fetcher
-            </a>
-          </Link>
-          <Link href={createLink('/key-manager')}>
-            <a
-              className={`navbar-item ${
-                router.pathname === '/key-manager' && 'has-text-link'
-              }`}
-            >
-              🔐 Key Manager
-            </a>
-          </Link>
-          <Link href={createLink('/abi-encoder')}>
-            <a
-              className={`navbar-item ${
-                router.pathname === '/abi-encoder' && 'has-text-link'
-              }`}
-            >
-              📜 ABI Encoder
-            </a>
-          </Link>
-          <Link href={createLink('/lsp2-encoder')}>
-            <a
-              className={`navbar-item ${
-                router.pathname === '/lsp2-encoder' && 'has-text-link'
-              }`}
-            >
-              📖 LSP2 Encoder
-            </a>
-          </Link>
         </div>
 
         <div className="navbar-end">
-          <div className="navbar-item">
-            <NetworkSwitch />
-          </div>
+          <LinksMenu router={router} createLink={createLink} />
+          <NetworkSwitch />
           <div className="navbar-item">
             <div className="buttons">
               <a

diff --git a/components/NavBar/components/NetworksSwitch/NetworksSwitch.tsx b/components/NavBar/components/NetworksSwitch/NetworksSwitch.tsx
@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
 import { useRouter } from 'next/router';
-import { INetwork, NetworkContext } from '../../../../contexts/NetworksContext';
+import { INetwork, NetworkContext } from '@/contexts/NetworksContext';
 
-import { RPC_URL } from '../../../../globals';
-import { NetworkName } from '../../../../types/network';
+import { RPC_URL } from '@/globals';
+import { NetworkName } from '@/types/network';
 
 const luksoChains: INetwork[] = [
   {