Development

app.config.js

@@ -1,3 +1,8 @@
+const {
+  getDefaultChainIds,
+  getSupportedChainIds
+} = require('./chains.config.js')
+
 module.exports = {
   // URI of single metadata cache instance for all networks.
   // While ocean.js includes this value for each network as part of its ConfigHelper,
@@ -18,10 +23,10 @@ module.exports = {
 
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
-  chainIds: [100, 80001],
+  chainIds: getDefaultChainIds(),
 
   // List of all supported chainIds. Used to populate the Chains user preferences list.
-  chainIdsSupported: [100, 80001],
+  chainIdsSupported: getSupportedChainIds(),
 
   customProviderUrl: process.env.NEXT_PUBLIC_PROVIDER_URL,
 

chains.config.js

@@ -1,13 +1,12 @@
 // chain configs in ocean.js ConfigHelperConfig format
 // see: https://github.com/oceanprotocol/ocean.js/blob/e07a7cb6ecea12b39ed96f994b4abe37806799a1/src/utils/ConfigHelper.ts#L8
 
-const GEN_X_NETWORK_ID = 100
-
 const chains = [
   {
     chainId: 100,
-    network: 'genx',
     isDefault: true,
+    isCustom: true,
+    network: 'genx',
     metadataCacheUri: 'https://aquarius510.v4.delta-dao.com',
     nodeUri: 'https://rpc.genx.minimal-gaia-x.eu',
     providerUri: 'https://provider.v4.genx.delta-dao.com',
@@ -34,8 +33,40 @@ const chains = [
     veFeeEstimate: '0xCFeF55c6ae4d250586e293f29832967a04A9087d',
     providerAddress: '0x68C24FA5b2319C81b34f248d1f928601D2E5246B'
   },
+  {
+    chainId: 32456,
+    isDefault: false,
+    isCustom: true,
+    network: 'pontusx',
+    metadataCacheUri: 'https://aquarius.dev.pontus-x.eu',
+    nodeUri: 'https://rpc.dev.pontus-x.eu',
+    providerUri: 'https://provider.dev.pontus-x.eu',
+    subgraphUri: 'https://subgraph.dev.pontus-x.eu',
+    explorerUri: 'https://explorer.pontus-x.eu',
+    oceanTokenAddress: '0xdF171F74a8d3f4e2A789A566Dce9Fa4945196112',
+    oceanTokenSymbol: 'OCEAN',
+    fixedRateExchangeAddress: '0x8372715D834d286c9aECE1AcD51Da5755B32D505',
+    dispenserAddress: '0x5461b629E01f72E0A468931A36e039Eea394f9eA',
+    startBlock: 57428,
+    transactionBlockTimeout: 50,
+    transactionConfirmationBlocks: 1,
+    transactionPollingTimeout: 750,
+    gasFeeMultiplier: 1.1,
+    nftFactoryAddress: '0xFdC4a5DEaCDfc6D82F66e894539461a269900E13',
+    opfCommunityFeeCollector: '0x1f84fB438292269219f9396D57431eA9257C23d4',
+    veAllocate: '0x3fa1d5AC45ab1Ff9CFAe227c5583Ec0484b54Ef9',
+    veOCEAN: '0x061955B6980A34fce74b235f90DBe20d76f087b1',
+    veDelegation: '0x96E3aE4247a01C3d40a261df1F8ead70E32E7C0c',
+    veFeeDistributor: '0x35F1e6765750E874EB9d0675393A1A394A4749b4',
+    veDelegationProxy: '0x51B1b14b8bfb43a2fB0b49843787Ca440200F6b7',
+    DFRewards: '0x6BB265D6c08b7E7432dF9B3D3499beEAA9856232',
+    DFStrategyV1: '0x98FBBB6523441b960E4D1d9A98601332092F4aB6',
+    veFeeEstimate: '0xCFeF55c6ae4d250586e293f29832967a04A9087d',
+    providerAddress: '0x68C24FA5b2319C81b34f248d1f928601D2E5246B'
+  },
   {
     chainId: 80001,
+    isDefault: false,
     metadataCacheUri: 'https://aquarius510.v4.delta-dao.com',
     providerUri: 'https://provider.dev-v4.mumbai.delta-dao.com'
   }
@@ -49,9 +80,13 @@ const getSupportedChainIds = () => {
   return chains.map((c) => c.chainId)
 }
 
+const getCustomChainIds = () => {
+  return chains.filter((c) => c.isCustom).map((c) => c.chainId)
+}
+
 module.exports = {
   chains,
   getDefaultChainIds,
   getSupportedChainIds,
-  GEN_X_NETWORK_ID
+  getCustomChainIds
 }

networksMetadata.config.js

@@ -1,26 +1,46 @@
 // networks metadata to add to EVM-based Chains list
 // see: https://github.com/ethereum-lists/chains
 
-const { GEN_X_NETWORK_ID } = require('./chains.config')
-
 const networksMetadata = [
   {
+    chainId: 100,
+    networkId: 100,
     name: 'GEN-X Testnet',
     chain: 'GEN-X',
     rpc: ['https://rpc.genx.minimal-gaia-x.eu'],
     faucets: [],
     nativeCurrency: {
-      name: 'GEN-X Token',
+      name: 'GX',
       symbol: 'GX',
       decimals: 18
     },
     infoURL: 'https://docs.genx.minimal-gaia-x.eu',
     shortName: 'GEN-X',
-    chainId: GEN_X_NETWORK_ID,
-    networkId: GEN_X_NETWORK_ID,
     explorers: [
       {
-        name: 'Exchange Logging Service',
+        name: 'GEN-X Testnet Explorer',
+        url: 'https://explorer.pontus-x.eu',
+        standard: ''
+      }
+    ]
+  },
+  {
+    chainId: 32456,
+    networkId: 32456,
+    name: 'Pontus-X Testnet',
+    chain: 'Pontus-X',
+    rpc: ['https://rpc.dev.pontus-x.eu'],
+    faucets: [],
+    nativeCurrency: {
+      name: 'EUROe',
+      symbol: 'EUROe',
+      decimals: 18
+    },
+    infoURL: 'https://docs.pontus-x.eu',
+    shortName: 'Pontus-X',
+    explorers: [
+      {
+        name: 'Pontus-X Testnet Explorer',
         url: 'https://explorer.pontus-x.eu',
         standard: ''
       }

scripts/write-networks-metadata.js

@@ -23,7 +23,7 @@ const bargeNetwork = {
 
 const axios = require('axios')
 const { networksMetadata } = require('../networksMetadata.config')
-const { GEN_X_NETWORK_ID } = require('../chains.config')
+const { getCustomChainIds } = require('../chains.config')
 
 // https://github.com/ethereum-lists/chains
 const chainDataUrl = 'https://chainid.network/chains.json'
@@ -34,7 +34,7 @@ axios(chainDataUrl).then((response) => {
 
   // avoid having 2 nodes with the same chainId
   const filteredData = response.data.filter(
-    (node) => node.chainId !== GEN_X_NETWORK_ID
+    (node) => !getCustomChainIds().includes(node.chainId)
   )
 
   // add custom networks metadata to the list

src/@hooks/useNetworkMetadata/utils.ts

@@ -46,6 +46,9 @@ export function getNetworkDisplayName(data: EthereumListsChain): string {
     case 100:
       displayName = 'GEN-X Testnet'
       break
+    case 32456:
+      displayName = 'Pontus-X Testnet'
+      break
     default:
       displayName = data
         ? `${data.chain}${

src/@utils/ocean/index.ts

@@ -1,5 +1,5 @@
 import { ConfigHelper, Config } from '@oceanprotocol/lib'
-import { chains } from '../../../chains.config'
+import { chains, getCustomChainIds } from '../../../chains.config'
 import { ethers } from 'ethers'
 import abiDatatoken from '@oceanprotocol/contracts/artifacts/contracts/templates/ERC20TemplateEnterprise.sol/ERC20TemplateEnterprise.json'
 
@@ -29,7 +29,8 @@ export function getOceanConfig(network: string | number): Config {
   const filterBy = typeof network === 'string' ? 'network' : 'chainId'
   const customConfig = chains.find((c) => c[filterBy] === network)
 
-  if (network === 100) return customConfig as Config
+  if (getCustomChainIds().includes(network as number))
+    return customConfig as Config
 
   let config = new ConfigHelper().getConfig(
     network,
@@ -39,6 +40,8 @@ export function getOceanConfig(network: string | number): Config {
       network === 'bsc' ||
       network === 56 ||
       network === 'gaiaxtestnet' ||
+      network === 'pontusx' ||
+      network === 32456 ||
       network === 2021000 ||
       network === 8996
       ? undefined

src/@utils/wallet/chains.ts

@@ -1,33 +1,35 @@
 import { Chain } from 'wagmi'
 import * as wagmiChains from 'wagmi/chains'
+import { networksMetadata } from '../../../networksMetadata.config'
 
-export const genx = {
-  id: 100,
-  name: 'GEN-X Testnet',
-  network: 'genx',
-  nativeCurrency: {
-    decimals: 18,
-    name: 'GX',
-    symbol: 'GX'
-  },
+export const additionalChains: Chain[] = networksMetadata.map((metadata) => ({
+  id: metadata.chainId,
+  name: metadata.name,
+  network: metadata.chain,
+  nativeCurrency: metadata.nativeCurrency,
   rpcUrls: {
-    public: { http: ['https://rpc.genx.minimal-gaia-x.eu'] },
-    default: { http: ['https://rpc.genx.minimal-gaia-x.eu'] }
+    public: { http: metadata.rpc },
+    default: { http: metadata.rpc }
   },
   blockExplorers: {
     default: {
-      name: 'GEN-X Testnet Explorer',
-      url: 'https://explorer.pontus-x.eu'
+      name: metadata.explorers[0].name,
+      url: metadata.explorers[0].url
     }
   }
-} as Chain
+}))
 
 export const getSupportedChains = (chainIdsSupported: number[]): Chain[] => {
-  const chains = [wagmiChains, genx].map((chain) => {
-    return Object.values(chain).filter((chain) =>
-      chainIdsSupported.includes(chain.id)
-    )
-  })
+  const wagmiChainsFiltered = [wagmiChains]
+    .map((chain) => {
+      return Object.values(chain).filter(
+        (chain) =>
+          chainIdsSupported.includes(chain.id) &&
+          // ensure to overwrite custom "additional" chains
+          !additionalChains.map((addChain) => addChain.id).includes(chain.id)
+      )
+    })
+    .flat() as Chain[]
 
-  return chains.flat()
+  return [...wagmiChainsFiltered, ...additionalChains]
 }

src/@utils/wallet/index.ts

@@ -3,10 +3,10 @@ import { createClient, erc20ABI } from 'wagmi'
 import { ethers, Contract, Signer } from 'ethers'
 import { formatEther } from 'ethers/lib/utils'
 import { getDefaultClient } from 'connectkit'
-import { polygonMumbai } from 'wagmi/chains'
-import { genx } from './chains'
 import { getNetworkDisplayName } from '@hooks/useNetworkMetadata'
 import { getOceanConfig } from '../ocean'
+import { getSupportedChains } from './chains'
+import { chainIdsSupported } from '../../../app.config'
 
 export async function getDummySigner(chainId: number): Promise<Signer> {
   if (typeof chainId !== 'number') {
@@ -31,7 +31,7 @@ export const wagmiClient = createClient(
     appName: 'Pontus-X',
     infuraId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID,
     // TODO: mapping between appConfig.chainIdsSupported and wagmi chainId
-    chains: [genx, polygonMumbai],
+    chains: getSupportedChains(chainIdsSupported),
     walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
   })
 )

src/components/@shared/AddToken/index.module.css

@@ -58,7 +58,8 @@
   position: relative;
 }
 
-.symbol {
+.symbol,
+.network {
   text-transform: none;
 }
 

src/components/@shared/AddToken/index.tsx

@@ -4,6 +4,7 @@ import { addTokenToWallet } from '@utils/wallet'
 import Button from '@shared/atoms/Button'
 import OceanLogo from '@images/logo.svg'
 import styles from './index.module.css'
+import { useNetwork } from 'wagmi'
 
 const cx = classNames.bind(styles)
 
@@ -29,6 +30,8 @@ export default function AddToken({
   className,
   minimal
 }: AddTokenProps): ReactElement {
+  const { chain } = useNetwork()
+
   const styleClasses = cx({
     button: true,
     minimal,
@@ -57,6 +60,13 @@ export default function AddToken({
           <>
             {'Add '}
             <span className={styles.symbol}>{symbol}</span>
+            {chain && (
+              <>
+                {' ('}
+                <span className={styles.network}>{chain.name}</span>
+                {')'}
+              </>
+            )}
           </>
         )}
       </span>

src/components/Header/Wallet/Details.tsx

@@ -1,19 +1,21 @@
 import { ReactElement } from 'react'
 import Button from '@shared/atoms/Button'
 // import { useOrbis } from '@context/DirectMessages'
-import { useDisconnect, useAccount, useConnect } from 'wagmi'
+import { useDisconnect, useAccount, useConnect, useNetwork } from 'wagmi'
 import styles from './Details.module.css'
 import Avatar from '@components/@shared/atoms/Avatar'
 import Bookmark from '@images/bookmark.svg'
 import { MenuLink } from '../Menu'
 import AddTokenList from './AddTokenList'
-import { GEN_X_NETWORK_ID } from 'chains.config'
+import { getCustomChainIds } from 'chains.config'
 import AddNetwork from '@components/@shared/AddNetwork'
 
 export default function Details(): ReactElement {
   const { connector: activeConnector, address: accountId } = useAccount()
+
   const { connect } = useConnect()
   const { disconnect } = useDisconnect()
+  const { chains } = useNetwork()
 
   return (
     <div className={styles.details}>
@@ -40,10 +42,17 @@ export default function Details(): ReactElement {
               {/* <img className={styles.walletLogo} src={activeConnector?.logo} /> */}
               {activeConnector?.name}
             </span>
-            <AddNetwork
-              chainId={GEN_X_NETWORK_ID}
-              networkName="GEN-X Testnet"
-            />
+            {chains &&
+              chains.map((chain) => {
+                if (!getCustomChainIds().includes(chain.id)) return false
+                return (
+                  <AddNetwork
+                    key={`Add-Network-Button${chain.id}`}
+                    chainId={chain.id}
+                    networkName={chain.name}
+                  />
+                )
+              })}
             {activeConnector?.name === 'MetaMask' && <AddTokenList />}
           </div>
           <p>

src/components/Search/Filter.module.css

@@ -14,6 +14,29 @@
   gap: calc(var(--spacer) / 2);
 }
 
+.sidePositioning h3 {
+  color: var(--filter-title-color);
+  font-size: var(--filter-title-font-size);
+}
+
+.sidePositioning h5,
+.topPositioning h3 {
+  color: var(--filter-type-color);
+  font-size: var(--filter-type-font-size);
+}
+
+.filterList label {
+  color: var(--filter-label-color);
+  font-size: var(--filter-label-font-size);
+}
+
+.clearBtn {
+  color: var(--filter-clear-color);
+}
+.clearBtn:hover {
+  color: var(--filter-clear-hover-color);
+}
+
 .filtersHeader {
   display: flex;
   justify-content: space-between;