From fef0c40690956c2d8d6ebd0079ec37c8b975ad26 Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Mon, 15 Jan 2024 16:08:51 +0100 Subject: [PATCH 1/6] feat: add basic filter css customization to _variables --- src/components/Search/Filter.module.css | 23 +++++++++++++++++++++++ src/components/Search/Filter.tsx | 2 ++ src/stylesGlobal/_variables.css | 19 ++++++++----------- 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/components/Search/Filter.module.css b/src/components/Search/Filter.module.css index 25d67d5bb..0a572e334 100644 --- a/src/components/Search/Filter.module.css +++ b/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); + color: var(--filter-type-font-size); +} + +.filterList label { + color: var(--filter-label-color); + color: 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; diff --git a/src/components/Search/Filter.tsx b/src/components/Search/Filter.tsx index 264e0f0db..0986a404c 100644 --- a/src/components/Search/Filter.tsx +++ b/src/components/Search/Filter.tsx @@ -164,6 +164,7 @@ export default function Filter({ onClick={async () => { clearFilters(addFiltersToUrl) }} + className={styles.clearBtn} > Clear filters @@ -186,6 +187,7 @@ export default function Filter({ onChange={async () => { handleSelectedFilter(option.value, filter.id) }} + className={styles.filterInput} /> ) })} diff --git a/src/stylesGlobal/_variables.css b/src/stylesGlobal/_variables.css index 4104d6c10..e7b394a81 100644 --- a/src/stylesGlobal/_variables.css +++ b/src/stylesGlobal/_variables.css @@ -119,17 +119,14 @@ --pagination-hover-font-color: var(--color-highlight); /* Filter and sort */ - --filter-font-color: var(--color-secondary); - --filter-hover-font-color: var(--font-color-text); - --filter-selected-font-color: var(--background-body); - --filter-background: var(--background-content); - --filter-selected-background: var(--font-color-text); - --filter-border-radius: var(--border-radius); - --filter-border-size: var(--border-size-sm); - --filter-border-color: var(--border-color); - --filter-selected-border-color: var(--background-body); - --filter-clear-font-color: var(--color-secondary); - --filter-clear-hover-font-color: var(--color-highlight); + --filter-title-color: var(--font-color-heading); + --filter-title-font-size: var(--font-size-title); + --filter-type-color: var(--color-secondary); + --filter-type-font-size: var(--font-size-large); + --filter-label-color: var(--color-secondary); + --filter-label-font-size: var(--font-size-base); + --filter-clear-color: var(--color-primary); + --filter-clear-hover-color: var(--color-highlight); /* Confetti */ --confetti-color-one: var(--brand-blue-light); From 408713454ada6a91a3d0705dd7dd58c911d029af Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Mon, 15 Jan 2024 16:12:16 +0100 Subject: [PATCH 2/6] fix: remove unused class --- src/components/Search/Filter.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Search/Filter.tsx b/src/components/Search/Filter.tsx index 0986a404c..98fca4dc0 100644 --- a/src/components/Search/Filter.tsx +++ b/src/components/Search/Filter.tsx @@ -187,7 +187,6 @@ export default function Filter({ onChange={async () => { handleSelectedFilter(option.value, filter.id) }} - className={styles.filterInput} /> ) })} From 0eecc33d66609279b55e71e25b6053035d43eeb9 Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Mon, 15 Jan 2024 16:18:44 +0100 Subject: [PATCH 3/6] style: sortList composes filterList --- src/components/Search/sort.module.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Search/sort.module.css b/src/components/Search/sort.module.css index cf1671942..86b5a372d 100644 --- a/src/components/Search/sort.module.css +++ b/src/components/Search/sort.module.css @@ -7,9 +7,7 @@ } .sortList { - display: flex; - flex-direction: column; - gap: calc(var(--spacer) / 2); + composes: filterList from './Filter.module.css'; } .sortList div *, From 4e766995daf67f69882e4e19069f5359b13e7d94 Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Mon, 15 Jan 2024 16:31:09 +0100 Subject: [PATCH 4/6] fix: typo --- src/components/Search/Filter.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Search/Filter.module.css b/src/components/Search/Filter.module.css index 0a572e334..d38c96a33 100644 --- a/src/components/Search/Filter.module.css +++ b/src/components/Search/Filter.module.css @@ -22,12 +22,12 @@ .sidePositioning h5, .topPositioning h3 { color: var(--filter-type-color); - color: var(--filter-type-font-size); + font-size: var(--filter-type-font-size); } .filterList label { color: var(--filter-label-color); - color: var(--filter-label-font-size); + font-size: var(--filter-label-font-size); } .clearBtn { From 215ac7fa757d9324d1b67747c9c321373c392fba Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Mon, 15 Jan 2024 16:41:48 +0100 Subject: [PATCH 5/6] chore: update base values for better migration --- src/stylesGlobal/_variables.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stylesGlobal/_variables.css b/src/stylesGlobal/_variables.css index e7b394a81..6444856b8 100644 --- a/src/stylesGlobal/_variables.css +++ b/src/stylesGlobal/_variables.css @@ -121,9 +121,9 @@ /* Filter and sort */ --filter-title-color: var(--font-color-heading); --filter-title-font-size: var(--font-size-title); - --filter-type-color: var(--color-secondary); + --filter-type-color: var(--font-color-text); --filter-type-font-size: var(--font-size-large); - --filter-label-color: var(--color-secondary); + --filter-label-color: var(--font-color-text); --filter-label-font-size: var(--font-size-base); --filter-clear-color: var(--color-primary); --filter-clear-hover-color: var(--color-highlight); From 3b757a5bcc9a0b219b541266bb844adfb5401508 Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Wed, 7 Feb 2024 16:18:19 +0100 Subject: [PATCH 6/6] Feat: Oasis Pontus-x Support (#503) * feat: add pontus-x network support WIP * feat: add pontus-x network support * refactor: custom chain config * feat: allow multiple custom networks to be added to metamask * refactor: clarify network for tokens to add * feat: multiple custom chains in write networks script * fix: custom ocean config for multiple custom chains * fix: tests --------- Co-authored-by: Albert Peci --- app.config.js | 9 +++- chains.config.js | 43 +++++++++++++++++-- networksMetadata.config.js | 32 +++++++++++--- scripts/write-networks-metadata.js | 4 +- src/@hooks/useNetworkMetadata/utils.ts | 3 ++ src/@utils/ocean/index.ts | 7 ++- src/@utils/wallet/chains.ts | 42 +++++++++--------- src/@utils/wallet/index.ts | 6 +-- .../@shared/AddToken/index.module.css | 3 +- src/components/@shared/AddToken/index.tsx | 10 +++++ src/components/Header/Wallet/Details.tsx | 21 ++++++--- 11 files changed, 134 insertions(+), 46 deletions(-) diff --git a/app.config.js b/app.config.js index 39c345aa7..7eb5da50d 100644 --- a/app.config.js +++ b/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, diff --git a/chains.config.js b/chains.config.js index a57158989..f384232ca 100644 --- a/chains.config.js +++ b/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 } diff --git a/networksMetadata.config.js b/networksMetadata.config.js index 32273bd2f..7b7e4c129 100644 --- a/networksMetadata.config.js +++ b/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: '' } diff --git a/scripts/write-networks-metadata.js b/scripts/write-networks-metadata.js index 4401f737d..e900303d2 100644 --- a/scripts/write-networks-metadata.js +++ b/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 diff --git a/src/@hooks/useNetworkMetadata/utils.ts b/src/@hooks/useNetworkMetadata/utils.ts index a44b43e0c..62d54b443 100644 --- a/src/@hooks/useNetworkMetadata/utils.ts +++ b/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}${ diff --git a/src/@utils/ocean/index.ts b/src/@utils/ocean/index.ts index 69e4360ef..f3873e81e 100644 --- a/src/@utils/ocean/index.ts +++ b/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 diff --git a/src/@utils/wallet/chains.ts b/src/@utils/wallet/chains.ts index 1b68589dd..2557d9836 100644 --- a/src/@utils/wallet/chains.ts +++ b/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] } diff --git a/src/@utils/wallet/index.ts b/src/@utils/wallet/index.ts index 4f0c099a4..b37f41878 100644 --- a/src/@utils/wallet/index.ts +++ b/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 { 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 }) ) diff --git a/src/components/@shared/AddToken/index.module.css b/src/components/@shared/AddToken/index.module.css index ef83c4924..3e83a4dd1 100644 --- a/src/components/@shared/AddToken/index.module.css +++ b/src/components/@shared/AddToken/index.module.css @@ -58,7 +58,8 @@ position: relative; } -.symbol { +.symbol, +.network { text-transform: none; } diff --git a/src/components/@shared/AddToken/index.tsx b/src/components/@shared/AddToken/index.tsx index c3198299b..6ed506919 100644 --- a/src/components/@shared/AddToken/index.tsx +++ b/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 '} {symbol} + {chain && ( + <> + {' ('} + {chain.name} + {')'} + + )} )} diff --git a/src/components/Header/Wallet/Details.tsx b/src/components/Header/Wallet/Details.tsx index aa8a77c05..f4672488b 100644 --- a/src/components/Header/Wallet/Details.tsx +++ b/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 (
@@ -40,10 +42,17 @@ export default function Details(): ReactElement { {/* */} {activeConnector?.name} - + {chains && + chains.map((chain) => { + if (!getCustomChainIds().includes(chain.id)) return false + return ( + + ) + })} {activeConnector?.name === 'MetaMask' && }