Merge branch 'development/juan/DEW-161/add-license-fees-snp-count' in…

…to deploy/staging

.env.base

@@ -1,3 +1,5 @@
+REACT_APP_ENVIRONMENT=local
+
 REACT_APP_TESTNET_BE_URL=https://be-testnet.constellationnetwork.io
 REACT_APP_TESTNET_L0_NODE_URL=https://l0-lb-testnet.constellationnetwork.io
 
@@ -11,5 +13,3 @@ REACT_APP_MAINNET_ONE_BE_URL=https://block-explorer.constellationnetwork.io
 REACT_APP_MAINNET_ONE_FIREBASE_URL=https://dag-explorer.firebaseio.com/app
 
 REACT_APP_DAG_EXPLORER_API_URL=https://d13uswnxs0x35s.cloudfront.net
-
-REACT_APP_ENVIRONMENT = development

.env.delta

@@ -1,2 +1,3 @@
+REACT_APP_ENVIRONMENT=delta
 REACT_APP_DAG_EXPLORER_API_URL=https://2acimilk97.execute-api.us-west-1.amazonaws.com
 REACT_APP_ECOSYSTEM_API_URL=https://s6m3r0ls3a.execute-api.us-west-1.amazonaws.com

.env.production

@@ -1,4 +1,4 @@
-REACT_APP_ENVIRONMENT = production
+REACT_APP_ENVIRONMENT=production
 REACT_APP_DAG_EXPLORER_API_URL=https://dyzt5u1o3ld0z.cloudfront.net
 REACT_APP_ECOSYSTEM_API_URL=https://d2a4s9vrrsa9d4.cloudfront.net
 REACT_APP_GA4_MEASUREMENT_ID=G-XCQE4GHTWP

.env.staging

@@ -1,3 +1,3 @@
-REACT_APP_ENVIRONMENT = staging
+REACT_APP_ENVIRONMENT=staging
 REACT_APP_DAG_EXPLORER_API_URL=https://d13uswnxs0x35s.cloudfront.net
 REACT_APP_ECOSYSTEM_API_URL=https://dn9tzq97tvcxj.cloudfront.net

.env.theta

@@ -1,2 +1,3 @@
+REACT_APP_ENVIRONMENT=theta
 REACT_APP_DAG_EXPLORER_API_URL=https://fk7a8p6ta6.execute-api.ca-central-1.amazonaws.com
 REACT_APP_ECOSYSTEM_API_URL=https://c30k37k8m5.execute-api.ca-central-1.amazonaws.com

.eslintrc.js

@@ -15,8 +15,9 @@ module.exports = {
   extends: [
     'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    'plugin:import/recommended',
   ],
-  plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint'],
+  plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint', 'unused-imports'],
   rules: {
     quotes: ['error', 'single'],
     'no-return-await': 'off',
@@ -25,10 +26,6 @@ module.exports = {
     'no-console': 'off',
     'func-names': 'off',
     'spaced-comment': 'off',
-    'import/no-extraneous-dependencies': 'off',
-    'import/no-unresolved': 'off',
-    'import/extensions': 'off',
-    'import/prefer-default-export': 'off',
     'no-promise-executor-return': 'off',
     'no-restricted-syntax': 'off',
     'no-plusplus': 'off',
@@ -39,6 +36,9 @@ module.exports = {
     'react/function-component-definition': ['warn', { namedComponents: 'arrow-function' }],
     'react/react-in-jsx-scope': 'off',
     'react/jsx-filename-extension': ['warn', { extensions: ['.jsx', '.tsx'] }],
+    'import/no-duplicates': 'error',
+    'import/no-unresolved': 'off',
+    'unused-imports/no-unused-imports': 'error',
   },
   globals: {
     it: 'readonly',

package.json

@@ -42,7 +42,9 @@
     "commander": "^9.3.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "prettier": "2.6.2",
     "react-scripts": "5.0.1",
     "sass": "^1.52.2",

src/api/block-explorer/address.ts

@@ -1,20 +1,19 @@
-import { useContext } from 'react';
 import { AddressRewardsResponse, Balance, Transaction } from '../../types';
 import { useFetch } from '../../utils/reactQuery';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
-import { Network } from '../../constants';
+import { useNetwork } from '../../context/NetworkContext';
+import { HgtpNetwork } from '../../constants';
 import { getBEUrl } from '../../utils/networkUrls';
 
 const { REACT_APP_DAG_EXPLORER_API_URL } = process.env;
 
 const getUrl = () => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = getBEUrl(network);
   return `${url}/addresses`;
 };
 
 const getMetagraphUrl = (metagraphId: string) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = getBEUrl(network);
   return `${url}/currency/${metagraphId}/addresses`;
 };
@@ -43,15 +42,15 @@ export const useGetAddressBalance = (address: string) => {
   return useFetch<Balance>(getUrl() + '/' + address + '/balance');
 };
 
-export const useGetAddressTotalRewards = (address: string, network: Exclude<Network, 'mainnet1'>) => {
+export const useGetAddressTotalRewards = (address: string, network: Exclude<HgtpNetwork, 'mainnet1'>) => {
   return useFetch<{ totalAmount: number; isValidator: boolean }>(
     REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/addresses/' + address + '/total-rewards'
   );
 };
 
 export const useGetAddressRewards = (
   address: string,
-  network: Exclude<Network, 'mainnet1'>,
+  network: Exclude<HgtpNetwork, 'mainnet1'>,
   params?: Record<any, any>
 ) => {
   return useFetch<{ data: AddressRewardsResponse[]; meta: { limit: number; offset: number; total: number } }>(
@@ -65,7 +64,7 @@ export const useGetAddressRewards = (
 export const useGetAddressMetagraphRewards = (
   address: string,
   metagraphId: string,
-  network: Exclude<Network, 'mainnet1'>,
+  network: Exclude<HgtpNetwork, 'mainnet1'>,
   params?: Record<any, any>
 ) => {
   return useFetch<{ data: AddressRewardsResponse[]; meta: { limit: number; offset: number; total: number } }>(

src/api/block-explorer/block.ts

@@ -1,11 +1,10 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { Block } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 import { getBEUrl } from '../../utils/networkUrls';
 
-const getUrl = (metagraphId ?: string) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+const getUrl = (metagraphId?: string) => {
+  const { network } = useNetwork();
   const url = getBEUrl(network);
   return metagraphId ? `${url}/currency/${metagraphId}/blocks` : `${url}/blocks`;
 };

src/api/block-explorer/global-snapshot.ts

@@ -1,11 +1,10 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { RewardTransaction, Snapshot, Transaction } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 import { getBEUrl } from '../../utils/networkUrls';
 
 const getUrl = (metagraphId?: string) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = getBEUrl(network);
   return !metagraphId ? `${url}/global-snapshots` : `${url}/currency/${metagraphId}/snapshots`;
 };

src/api/block-explorer/metagraph-address.ts

@@ -1,29 +1,28 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { AddressMetagraphResponse, Snapshot } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 
 const { REACT_APP_DAG_EXPLORER_API_URL } = process.env;
 
 const getMetagraphsUrl = (address: string) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   return `${REACT_APP_DAG_EXPLORER_API_URL}/${network}/addresses/${address}/metagraphs`;
 };
 
 const getMetagraphSnapshotsUrl = (address: string) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   return `${REACT_APP_DAG_EXPLORER_API_URL}/${network}/addresses/${address}/metagraph-snapshots`;
 };
 
 export const useGetAddressMetagraphs = (address: string, params?: any) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   return useFetch<AddressMetagraphResponse[]>(getMetagraphsUrl(address), params, {
     enabled: true,
   });
 };
 
 export const useGetAddressMetagraphSnapshots = (address?: string, params?: any) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   return useFetch<{ data: Snapshot[]; meta?: any }>(
     getMetagraphSnapshotsUrl(address),
     params,

src/api/block-explorer/metagraphs.ts

@@ -1,18 +1,17 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { MetagraphInfo, MetagraphProject } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 
 const { REACT_APP_DAG_EXPLORER_API_URL } = process.env;
 
 const getUrl = () => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = `${REACT_APP_DAG_EXPLORER_API_URL}/${network}/metagraphs`;
   return url;
 };
 
 const getProjectsUrl = () => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = `${REACT_APP_DAG_EXPLORER_API_URL}/${network}/metagraph-projects`;
   return url;
 };

src/api/block-explorer/snapshots.ts

@@ -1,12 +1,11 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { Snapshot } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 
 const { REACT_APP_DAG_EXPLORER_API_URL } = process.env;
 
 export const useGetLatestDAGSnapshots = (params?: any, refetchInterval?: number) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/dag/latest-snapshots';
   return useFetch<{ data: Snapshot[]; meta?: any }>(
     url,
@@ -20,7 +19,7 @@ export const useGetLatestDAGSnapshots = (params?: any, refetchInterval?: number)
 };
 
 export const useGetLatestMetagraphSnapshots = (params?: any, refetchInterval?: number) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/metagraph/latest-snapshots';
   return useFetch<{ data: Snapshot[]; meta?: any }>(
     url,

src/api/block-explorer/stats.ts

@@ -1,11 +1,10 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 
 const { REACT_APP_DAG_EXPLORER_API_URL } = process.env;
 
 export const useGetNetworkStats = (params?: any, refetchInterval?: number) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/stats';
   return useFetch<{
     data: {

src/api/block-explorer/transaction.ts

@@ -1,19 +1,18 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { MetagraphTransactionResponse, Transaction } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 import { getBEUrl } from '../../utils/networkUrls';
 
 const { REACT_APP_DAG_EXPLORER_API_URL } = process.env;
 
 const getUrl = (metagraphId?: string) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = getBEUrl(network);
   return metagraphId ? `${url}/currency/${metagraphId}/transactions` : `${url}/transactions`;
 };
 
 export const useGetTransaction = (hash: string, metagraphId?: string) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   if (metagraphId) {
     const url = `${REACT_APP_DAG_EXPLORER_API_URL}/${network}/metagraphs/${metagraphId}/transactions/${hash}`;
     return useFetch<MetagraphTransactionResponse>(url);
@@ -36,7 +35,7 @@ export const useGetAllTransactions = (params?: any, refetchInterval?: number, me
 };
 
 export const useGetLatestDAGTransactions = (params?: any, refetchInterval?: number) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/dag/latest-transactions';
   return useFetch<{ data: Transaction[]; meta?: any }>(
     url,
@@ -50,7 +49,7 @@ export const useGetLatestDAGTransactions = (params?: any, refetchInterval?: numb
 };
 
 export const useGetLatestMetagraphTransactions = (params?: any, refetchInterval?: number) => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/metagraph/latest-transactions';
   return useFetch<{ data: Transaction[]; meta?: any }>(
     url,

src/api/l0-node/dag.ts

@@ -1,13 +1,12 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { Balance, TotalSupply } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 import { getL0Url } from '../../utils/networkUrls';
 
 const { REACT_APP_MAINNET_TWO_L0_NODE_URL } = process.env;
 
 const getUrl = () => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = getL0Url(network);
   return `${url}/dag`;
 };

src/api/l0-node/global-snapshot.ts

@@ -1,11 +1,10 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { Snapshot } from '../../types';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 import { getL0Url } from '../../utils/networkUrls';
 
 const getUrl = () => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   const url = getL0Url(network); 
   return `${url}/global-snapshot`;
 }

src/api/l0-node/index.ts

@@ -1,8 +1,7 @@
-import { useContext } from 'react';
 import { useFetch } from '../../utils/reactQuery';
 import { Peer, ValidatorNode } from '../../types';
-import { Network } from '../../constants';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { HgtpNetwork } from '../../constants';
+import { useNetwork } from '../../context/NetworkContext';
 import { getL0Url } from '../../utils/networkUrls';
 
 export { useGetLatestSnapshot, useGetSnapshot, useGetLatestSnapshotOrdinal } from './global-snapshot';
@@ -15,25 +14,25 @@ export {
 
 const { REACT_APP_DAG_EXPLORER_API_URL } = process.env;
 
-const getUrl = (network: Network) => {
+const getUrl = (network: HgtpNetwork) => {
   return getL0Url(network);
 };
 
 export const useGetClusterInfo = () => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   return useFetch<Peer[]>(getUrl(network) + '/cluster/info', {}, { enabled: !!network });
 };
 
 export const useGetMetric = () => {
-  const { network } = useContext(NetworkContext) as NetworkContextType;
+  const { network } = useNetwork();
   return useFetch<string>(getUrl(network) + '/metric', {}, { enabled: !!network });
 };
 
-export const useGetValidatorNodes = (network: Exclude<Network, 'mainnet1'>) => {
+export const useGetValidatorNodes = (network: Exclude<HgtpNetwork, 'mainnet1'>) => {
   return useFetch<ValidatorNode[]>(REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/validator-nodes');
 };
 
-export const useGetClusterRewards = (network: Exclude<Network, 'mainnet1'>) => {
+export const useGetClusterRewards = (network: Exclude<HgtpNetwork, 'mainnet1'>) => {
   return useFetch<{ totalRewards: number }>(
     REACT_APP_DAG_EXPLORER_API_URL + '/' + network + '/validator-nodes/rewards'
   );

src/components/Header/Header.tsx

@@ -1,7 +1,6 @@
-import { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { AVAILABLE_NETWORKS } from '../../constants';
-import { NetworkContext, NetworkContextType } from '../../context/NetworkContext';
+import { useNetwork } from '../../context/NetworkContext';
 import { SearchBar } from '../SearchBar/SearchBar';
 import styles from './Header.module.scss';
 import { AddressShape } from '../Shapes/AddressShape';
@@ -11,7 +10,7 @@ import { Warning } from 'phosphor-react';
 
 export const Header = () => {
   const { pathname } = useLocation();
-  const { network, networkVersion } = useContext(NetworkContext) as NetworkContextType;
+  const { network, networkVersion } = useNetwork();
 
   return (
     <header className={`${styles.fullWidth} ${styles.bgGray}`}>

src/components/InputRow/component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cls from 'classnames';
-import ReactTooltip, { Place } from 'react-tooltip';
+import ReactTooltip, { type Place } from 'react-tooltip';
 
 import { DatePickerRow } from './components';
 import styles from './component.module.scss';