Add Pontus-X as a hidden layer

.changelog/1245.feature.md

@@ -0,0 +1 @@
+Add Pontus-X as a hidden layer

src/app/components/LayerPicker/LayerMenu.tsx

@@ -11,7 +11,7 @@ import { Layer } from '../../../oasis-nexus/api'
 import { getLayerLabels } from '../../utils/content'
 import { RouteUtils } from '../../utils/route-utils'
 import { Network } from '../../../types/network'
-import { orderByLayer } from '../../../types/layers'
+import { isLayerHidden, orderByLayer } from '../../../types/layers'
 import { useScreenSize } from '../../hooks/useScreensize'
 
 type BaseLayerMenuItemProps = {
@@ -109,6 +109,7 @@ export const LayerMenu: FC<LayerMenuProps> = ({
 }) => {
   const [hoveredLayer, setHoveredLayer] = useState<undefined | Layer>()
   const options = Object.values(Layer)
+    .filter(layer => !isLayerHidden(layer))
     .map(layer => ({
       layer,
       enabled: RouteUtils.getEnabledLayersForNetwork(selectedNetwork || network).includes(layer),

src/app/components/Search/search-utils.ts

@@ -33,6 +33,7 @@ export const searchSuggestionTerms = {
       suggestedTokenFragment: 'mock',
     },
     cipher: undefined,
+    pontusx: undefined,
     consensus: undefined,
   },
   testnet: {
@@ -49,6 +50,13 @@ export const searchSuggestionTerms = {
       suggestedTokenFragment: 'USD',
     },
     cipher: undefined,
+    pontusx: {
+      // TODO: provide proper suggestions
+      suggestedBlock: '4260',
+      suggestedTransaction: '0xd9b5c08be1cb74229abedd9b3e1afb8b43228085a6abf72993db415959ab6b35',
+      suggestedAccount: '0xfA3AC9f65C9D75EE3978ab76c6a1105f03156204',
+      suggestedTokenFragment: 'USD',
+    },
     consensus: undefined,
   },
 } satisfies SpecifiedPerEnabledLayer<LayerSuggestions>

src/app/pages/HomePage/Graph/Graph/graph-utils.ts

@@ -27,6 +27,10 @@ export abstract class GraphUtils {
           x: 1.2 * width,
           y: 0.7 * height,
         }
+      case Layer.pontusx:
+        // TODO: update this if/when we want to display this layer
+        // We meed this case here since this switch/case is declared to be exhaustive.
+        return initialValue
       case Layer.sapphire:
         return {
           scale: 2.4,

src/app/pages/HomePage/Graph/Graph/index.tsx

@@ -293,7 +293,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
     return !RouteUtils.getEnabledLayersForNetwork(network).includes(Layer)
   }
 
-  const disabledMap: Record<Layer, boolean> = {
+  const disabledMap: Partial<Record<Layer, boolean>> = {
     [Layer.emerald]: isLayerDisabled(Layer.emerald),
     [Layer.consensus]: isLayerDisabled(Layer.consensus),
     [Layer.cipher]: isLayerDisabled(Layer.cipher),

src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx

@@ -140,7 +140,7 @@ const layerTooltipBodyCaption = (t: TFunction, layer: Layer, enabled: boolean, o
       : t('common.paraTimeOnline')
 }
 
-const useLayerTooltipMap = (network: Network): Record<Layer, TooltipInfo> => {
+const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo>> => {
   const isSapphireEnabled = RouteUtils.getEnabledLayersForNetwork(network).includes(Layer.sapphire)
   const isEmeraldEnabled = RouteUtils.getEnabledLayersForNetwork(network).includes(Layer.emerald)
   const isCipherEnabled = RouteUtils.getEnabledLayersForNetwork(network).includes(Layer.cipher)
@@ -270,7 +270,9 @@ export const GraphTooltipMobile: FC<GraphTooltipMobileProps> = ({ network, layer
   const navigate = useNavigate()
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
-  const { body, disabled, failing } = useLayerTooltipMap(network)[layer]
+  const tooltip = useLayerTooltipMap(network)[layer]
+  if (!tooltip) return
+  const { body, disabled, failing } = tooltip
 
   const navigateTo = () => {
     if (disabled) {

src/app/pages/ParatimeDashboardPage/LearningMaterials.tsx

@@ -62,6 +62,7 @@ const getContent = (t: TFunction) => {
         },
       },
       [Layer.cipher]: undefined,
+      [Layer.pontusx]: undefined,
     },
     [Network.testnet]: {
       [Layer.emerald]: {
@@ -99,8 +100,9 @@ const getContent = (t: TFunction) => {
         },
       },
       [Layer.cipher]: undefined,
+      [Layer.pontusx]: undefined,
     },
-  } satisfies SpecifiedPerEnabledRuntime<LayerContent>
+  } satisfies SpecifiedPerEnabledRuntime<LayerContent | undefined>
 }
 
 export const LearningMaterials: FC<{ scope: SearchScope }> = ({ scope }) => {

src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx

@@ -10,7 +10,7 @@ import { ChartDuration } from '../../utils/chart-utils'
 import { useTranslation } from 'react-i18next'
 import { useConstant } from '../../hooks/useConstant'
 import { Network } from '../../../types/network'
-import { getLayerNames } from '../../../types/layers'
+import { getLayerLabels } from '../../utils/content'
 import { TestnetFaucet } from './TestnetFaucet'
 import { SearchScope } from '../../../types/searchScope'
 import { Snapshot } from 'app/components/Snapshots/Snapshot'
@@ -23,7 +23,7 @@ export const ParaTimeSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()
   const defaultChartDurationValue = useConstant<ChartDuration>(() => ChartDuration.TODAY)
   const [chartDuration, setChartDuration] = useState<ChartDuration>(defaultChartDurationValue)
-  const paratime = getLayerNames(t)[scope.layer]
+  const paratime = getLayerLabels(t)[scope.layer]
   const handleDurationSelectedChange = (duration: ChartDuration | null) => {
     if (!duration) {
       return

src/app/pages/SearchResultsPage/GlobalSearchResultsView.tsx

@@ -16,7 +16,7 @@ import {
 } from '../../../types/network'
 import { HideMoreResults, ShowMoreResults } from './notifications'
 import { getThemesForNetworks } from '../../../styles/theme'
-import { orderByLayer } from '../../../types/layers'
+import { isNotOnHiddenLayer, orderByLayer } from '../../../types/layers'
 import { useRedirectIfSingleResult } from './useRedirectIfSingleResult'
 
 export const GlobalSearchResultsView: FC<{
@@ -33,7 +33,7 @@ export const GlobalSearchResultsView: FC<{
   const otherNetworks = RouteUtils.getEnabledNetworks().filter(isNotMainnet)
   const notificationTheme = themes[Network.testnet]
   const mainnetResults = searchResults.filter(isOnMainnet).sort(orderByLayer)
-  const otherResults = searchResults.filter(isNotOnMainnet).sort(orderByLayer)
+  const otherResults = searchResults.filter(isNotOnMainnet).filter(isNotOnHiddenLayer).sort(orderByLayer)
 
   return (
     <>

src/app/utils/__tests__/externalLinks.test.ts

@@ -18,7 +18,7 @@ onlyRunOnCI('externalLinks', () => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       for (const [_linkName, url] of Object.entries(linksGroup)) {
         expect(typeof url).toBe('string')
-        expect(url).toMatch(/^https:/)
+        expect(url).toMatch(/^(https|mailto):/)
       }
     }
   })
@@ -32,6 +32,7 @@ onlyRunOnCI('externalLinks', () => {
         if (url.startsWith(externalLinksModule.github.commit)) continue // We store only partial url in constants
         if (url.startsWith(externalLinksModule.github.releaseTag)) continue // We store only partial url in constants
         if (url.startsWith(externalLinksModule.ipfs.proxyPrefix)) continue // We store only partial url in constants
+        if (url.startsWith('mailto')) continue // We can't test email addresses
 
         it.concurrent(`${linksGroupName} ${linkName} ${url}`, async () => {
           const response = await nodeFetch(url, { method: 'GET' })

src/app/utils/content.tsx

@@ -9,6 +9,7 @@ export const getLayerLabels = (t: TFunction): Record<Layer, string> => ({
   [Layer.emerald]: t('common.emerald'),
   [Layer.sapphire]: t('common.sapphire'),
   [Layer.cipher]: t('common.cipher'),
+  [Layer.pontusx]: t('common.pontusx'),
   [Layer.consensus]: t('common.consensus'),
 })
 

src/app/utils/externalLinks.ts

@@ -48,6 +48,7 @@ export const faucet = {
   [Layer.consensus]: faucetUrl,
   [Layer.emerald]: `${faucetParaTimeBaseUrl}emerald`,
   [Layer.sapphire]: `${faucetParaTimeBaseUrl}sapphire`,
+  [Layer.pontusx]: 'mailto:[email protected]?subject=tokens',
   [Layer.cipher]: `${faucetParaTimeBaseUrl}cipher`,
 }
 

src/app/utils/route-utils.ts

@@ -25,13 +25,15 @@ export abstract class RouteUtils {
       [Layer.emerald]: true,
       [Layer.sapphire]: true,
       [Layer.cipher]: false,
+      [Layer.pontusx]: false,
       // Disable WIP Consensus on production an staging
       [Layer.consensus]: !isStableDeploy,
     },
     [Network.testnet]: {
       [Layer.emerald]: true,
       [Layer.sapphire]: true,
       [Layer.cipher]: false,
+      [Layer.pontusx]: true,
       [Layer.consensus]: false,
     },
   } satisfies Record<Network, Record<Layer, boolean>>

src/app/utils/rpc-utils.ts

@@ -20,6 +20,7 @@ const LAYER_DECIMALS: Record<Layer, number> = {
   [Layer.emerald]: paraTimesConfig[Layer.emerald].decimals,
   [Layer.sapphire]: paraTimesConfig[Layer.sapphire].decimals,
   [Layer.cipher]: paraTimesConfig[Layer.cipher].decimals,
+  [Layer.pontusx]: paraTimesConfig[Layer.pontusx].decimals,
   [Layer.consensus]: consensusDecimals,
 }
 

src/config.ts

@@ -108,6 +108,32 @@ const sapphireConfig: LayerConfig = {
   outOfDateThreshold: 2 * 60 * 1000,
 }
 
+const pontusxConfig: LayerConfig = {
+  mainnet: {
+    activeNodes: undefined,
+    address: undefined,
+    blockGasLimit: undefined,
+    runtimeId: undefined,
+  },
+  testnet: {
+    activeNodes: 8, // TODO use correct number
+    address: 'oasis1qqczuf3x6glkgjuf0xgtcpjjw95r3crf7y2323xd', // TODO use correct address
+    // See max_batch_gas https://github.com/oasisprotocol/sapphire-paratime/blob/main/runtime/src/lib.rs#L166
+    blockGasLimit: 15_000_000,
+    runtimeId: '000000000000000000000000000000000000000000000000a6d1e3ebf60dff6c',
+  },
+  local: {
+    activeNodes: undefined,
+    address: undefined,
+    blockGasLimit: undefined,
+    runtimeId: undefined,
+  },
+
+  decimals: 18,
+  type: RuntimeTypes.Evm,
+  outOfDateThreshold: 2 * 60 * 1000,
+}
+
 type LayersConfig = {
   [key in Layer]: LayerConfig | null
 }
@@ -116,6 +142,7 @@ export const paraTimesConfig = {
   [Layer.cipher]: cipherConfig,
   [Layer.emerald]: emeraldConfig,
   [Layer.sapphire]: sapphireConfig,
+  [Layer.pontusx]: pontusxConfig,
   [Layer.consensus]: null,
 } satisfies LayersConfig
 

src/locales/en/translation.json

@@ -87,6 +87,7 @@
     "paratime": "Paratime",
     "parentheses": "({{subject}})",
     "percentage": "Percentage",
+    "pontusx": "Pontus-X",
     "proposal": "Proposal",
     "proposer": "Proposer",
     "rank": "Rank",
@@ -472,6 +473,7 @@
       "sapphireParaTimeDesc": "Confidential EVM Compatible ParaTime providing a smart contract development environment with EVM compatibility",
       "emeraldParaTimeDesc": "EVM Compatible ParaTime providing smart contract environment with EVM compatibility.",
       "cipherParaTimeDesc": "The Cipher ParaTime is a Confidential ParaTime for executing Wasm smart contracts.",
+      "pontusxParaTimeDesc": "Pontus-X ParaTime",
       "consensusDesc": "Our scalable, high-throughput, secure, proof-of-stake consensus layer run by a decentralized set of validator nodes.",
       "close": "Close"
     },

src/oasis-nexus/api.ts

@@ -124,6 +124,15 @@ function arrayify<T>(arrayOrItem: null | undefined | T | T[]): T[] {
   return arrayOrItem
 }
 
+// TODO: remove when pontusx API is ready
+axios.interceptors.request.use(config => {
+  // Mock pontusx
+  if (config.url?.includes('/v1/pontusx')) {
+    config.url = config.url.replace('/v1/pontusx', '/v1/sapphire')
+  }
+  return config
+})
+
 export const useGetConsensusTransactions: typeof generated.useGetConsensusTransactions = (
   network,
   params?,

src/types/layers.ts

@@ -4,14 +4,6 @@ import { uniq } from '../app/utils/helpers'
 // a cycle of imports which confuse jest
 // eslint-disable-next-line no-restricted-imports
 import { Layer } from '../oasis-nexus/generated/api'
-import { TFunction } from 'i18next'
-
-export const getLayerNames = (t: TFunction): Record<Layer, string> => ({
-  [Layer.emerald]: t('common.emerald'),
-  [Layer.sapphire]: t('common.sapphire'),
-  [Layer.cipher]: t('common.cipher'),
-  [Layer.consensus]: t('common.consensus'),
-})
 
 interface HasLayer {
   layer: Layer
@@ -24,8 +16,11 @@ const layerOrder: Record<Layer, number> = {
   [Layer.sapphire]: 2,
   [Layer.emerald]: 3,
   [Layer.cipher]: 4,
+  [Layer.pontusx]: 5,
 }
 
+const hiddenLayers: Layer[] = [Layer.pontusx]
+
 export const orderByLayer = (itemA: HasLayer, itemB: HasLayer): number =>
   layerOrder[itemA.layer] - layerOrder[itemB.layer]
 
@@ -36,3 +31,7 @@ export const doesLayerSupportEncryptedTransactions = (layer: Layer): boolean =>
 
 export const doesAnyOfTheseLayersSupportEncryptedTransactions = (layers: Layer[] | undefined): boolean =>
   uniq(layers).some(doesLayerSupportEncryptedTransactions)
+
+export const isLayerHidden = (layer: Layer): boolean => hiddenLayers.includes(layer)
+
+export const isNotOnHiddenLayer = (item: HasLayer) => !isLayerHidden(item.layer)

src/types/searchScope.ts

@@ -1,5 +1,5 @@
 import { getNetworkNames, Network } from './network'
-import { getLayerNames } from './layers'
+import { getLayerLabels } from '../app/utils/content'
 import { HasScope, Layer } from '../oasis-nexus/api'
 import { TFunction } from 'i18next'
 
@@ -14,7 +14,7 @@ export const MainnetEmerald: SearchScope = {
 }
 
 export const getNameForScope = (t: TFunction, scope: SearchScope) =>
-  `${getLayerNames(t)[scope.layer]} ${getNetworkNames(t)[scope.network]}`
+  `${getLayerLabels(t)[scope.layer]} ${getNetworkNames(t)[scope.network]}`
 
 export const getKeyForScope: (scope: SearchScope) => string = ({ network, layer }) => `${network}.${layer}`