Merge pull request #2102 from oasisprotocol/csillag/improve-pontusx-faucet-display

Improve Testnet Faucet info for Pontus-X runtime

Author: csillag

.changelog/2102.trivial.md

@@ -0,0 +1 @@
+Customize test faucet wording for Pontus-X

src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx

@@ -12,7 +12,7 @@ import { getLayerLabels } from '../../utils/content'
 import { TestnetFaucet } from './TestnetFaucet'
 import { RuntimeScope } from '../../../types/searchScope'
 import { Snapshot, StyledGrid } from 'app/components/Snapshots/Snapshot'
-import { getFaucetLink } from '../../utils/faucet-links'
+import { getFaucetInfo } from '../../utils/faucet-links'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 
 export const ParaTimeSnapshot: FC<{ scope: RuntimeScope }> = ({ scope }) => {
@@ -23,7 +23,7 @@ export const ParaTimeSnapshot: FC<{ scope: RuntimeScope }> = ({ scope }) => {
   const tokens = getTokensForScope(scope)
   const mainToken = tokens[0]
   const mainTicker = mainToken.ticker
-  const faucetLink = getFaucetLink(scope.network, scope.layer, mainTicker)
+  const faucetInfo = getFaucetInfo(t, scope.network, scope.layer, mainTicker)
   const handleDurationSelectedChange = (duration: ChartDuration | null) => {
     if (!duration) {
       return
@@ -55,7 +55,7 @@ export const ParaTimeSnapshot: FC<{ scope: RuntimeScope }> = ({ scope }) => {
         </StyledGrid>
         <StyledGrid item xs={22} md={5}>
           {showFiatValues && !mainToken.free && <TokenPriceCard token={mainToken} />}
-          {faucetLink && <TestnetFaucet network={scope.network} layer={scope.layer} ticker={mainTicker} />}
+          {faucetInfo && <TestnetFaucet network={scope.network} layer={scope.layer} ticker={mainTicker} />}
         </StyledGrid>
       </Snapshot>
     </ErrorBoundary>

src/app/pages/ParatimeDashboardPage/TestnetFaucet.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react'
-import { useTranslation } from 'react-i18next'
 import { SnapshotCardExternalLink } from '../../components/Snapshots/SnapshotCardExternalLink'
-import { getFaucetLink } from '../../utils/faucet-links'
+import { getFaucetInfo } from '../../utils/faucet-links'
 import { Layer } from '../../../oasis-nexus/api'
 import { Ticker } from '../../../types/ticker'
 import { Network } from '../../../types/network'
+import { useTranslation } from 'react-i18next'
 
 type TestnetFaucetProps = {
   network: Network
@@ -14,14 +14,7 @@ type TestnetFaucetProps = {
 
 export const TestnetFaucet: FC<TestnetFaucetProps> = ({ network, layer, ticker }) => {
   const { t } = useTranslation()
-  const link = getFaucetLink(network, layer, ticker)
+  const info = getFaucetInfo(t, network, layer, ticker)
 
-  return link ? (
-    <SnapshotCardExternalLink
-      description={t('testnetFaucet.description')}
-      label={t('testnetFaucet.request')}
-      title={t('testnetFaucet.header')}
-      url={link}
-    />
-  ) : null
+  return info ? <SnapshotCardExternalLink {...info} /> : null
 }

src/app/utils/faucet-links.ts

@@ -2,21 +2,72 @@ import { Ticker } from 'types/ticker'
 import { Network } from '../../types/network'
 import { Layer } from '../../oasis-nexus/api'
 import { faucets } from './externalLinks'
+import { TFunction } from 'i18next'
 
-const faucetLinks: Partial<Record<Network, Partial<Record<Layer, Partial<Record<Ticker, string>>>>>> = {
-  testnet: {
-    consensus: { [Ticker.TEST]: faucets.oasisTestnet },
-    emerald: { [Ticker.TEST]: `${faucets.oasisTestnet}?paratime=emerald` },
-    sapphire: { [Ticker.TEST]: `${faucets.oasisTestnet}?paratime=sapphire` },
-    cipher: { [Ticker.TEST]: `${faucets.oasisTestnet}?paratime=cipher` },
-    pontusxdev: {
-      [Ticker.EUROe]: `mailto:contact@delta-dao.com?subject=${encodeURIComponent('Request test tokens for Pontus-X Devnet')}`,
-    },
-    pontusxtest: {
-      [Ticker.EUROe]: `mailto:contact@delta-dao.com?subject=${encodeURIComponent('Request test tokens for Pontus-X Testnet')}`,
-    },
-  },
+type FaucetInfo = {
+  url: string
+  description: string
+  title: string
+  label: string
 }
 
-export const getFaucetLink = (network: Network, layer: Layer, ticker: Ticker) =>
-  faucetLinks[network]?.[layer]?.[ticker]
+export const getFaucetInfo = (
+  t: TFunction,
+  network: Network,
+  layer: Layer,
+  ticker: Ticker,
+): FaucetInfo | undefined => {
+  const faucetLinks: Partial<Record<Network, Partial<Record<Layer, Partial<Record<Ticker, FaucetInfo>>>>>> = {
+    testnet: {
+      consensus: {
+        [Ticker.TEST]: {
+          url: faucets.oasisTestnet,
+          description: t('testnetFaucet.description'),
+          title: t('testnetFaucet.header'),
+          label: t('testnetFaucet.request'),
+        },
+      },
+      emerald: {
+        [Ticker.TEST]: {
+          url: `${faucets.oasisTestnet}?paratime=emerald`,
+          description: t('testnetFaucet.description'),
+          title: t('testnetFaucet.header'),
+          label: t('testnetFaucet.request'),
+        },
+      },
+      sapphire: {
+        [Ticker.TEST]: {
+          url: `${faucets.oasisTestnet}?paratime=sapphire`,
+          description: t('testnetFaucet.description'),
+          title: t('testnetFaucet.header'),
+          label: t('testnetFaucet.request'),
+        },
+      },
+      cipher: {
+        [Ticker.TEST]: {
+          url: `${faucets.oasisTestnet}?paratime=cipher`,
+          description: t('testnetFaucet.description'),
+          title: t('testnetFaucet.header'),
+          label: t('testnetFaucet.request'),
+        },
+      },
+      pontusxdev: {
+        [Ticker.EUROe]: {
+          url: `mailto:contact@delta-dao.com?subject=${encodeURIComponent('Request test tokens for Pontus-X Devnet')}`,
+          description: t('pontusx.testTokens.description'),
+          title: t('pontusx.testTokens.header'),
+          label: t('pontusx.testTokens.request'),
+        },
+      },
+      pontusxtest: {
+        [Ticker.EUROe]: {
+          url: `mailto:contact@delta-dao.com?subject=${encodeURIComponent('Request test tokens for Pontus-X Testnet')}`,
+          description: t('pontusx.testTokens.description'),
+          title: t('pontusx.testTokens.header'),
+          label: t('pontusx.testTokens.request'),
+        },
+      },
+    },
+  }
+  return faucetLinks[network]?.[layer]?.[ticker]
+}

src/locales/en/translation.json

@@ -715,7 +715,12 @@
   },
   "pontusx": {
     "devnet": "Pontus-X devnet",
-    "testnet": "Pontus-X"
+    "testnet": "Pontus-X",
+    "testTokens": {
+      "description": "Do you need some tokens for testing?",
+      "header": "Test tokens",
+      "request": "Contact us"
+    }
   },
   "rofl": {
     "active": "Active",