Update testnet faucet to support layer/token configuration

src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx

@@ -9,7 +9,8 @@ import { ActiveAccounts } from './ActiveAccounts'
 import { ChartDuration } from '../../utils/chart-utils'
 import { useTranslation } from 'react-i18next'
 import { useConstant } from '../../hooks/useConstant'
-import { Network } from '../../../types/network'
+import { Ticker } from '../../../types/ticker'
+import { getTickerForScope } from '../../../config'
 import { getLayerLabels } from '../../utils/content'
 import { TestnetFaucet } from './TestnetFaucet'
 import { SearchScope } from '../../../types/searchScope'
@@ -24,6 +25,7 @@ export const ParaTimeSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const defaultChartDurationValue = useConstant<ChartDuration>(() => ChartDuration.TODAY)
   const [chartDuration, setChartDuration] = useState<ChartDuration>(defaultChartDurationValue)
   const paratime = getLayerLabels(t)[scope.layer]
+  const ticker = getTickerForScope(scope)
   const handleDurationSelectedChange = (duration: ChartDuration | null) => {
     if (!duration) {
       return
@@ -54,8 +56,8 @@ export const ParaTimeSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
           <Nodes scope={scope} />
         </StyledGrid>
         <StyledGrid item xs={22} md={5}>
-          {scope.network === Network.mainnet && <RosePriceCard />}
-          {scope.network === Network.testnet && <TestnetFaucet layer={scope.layer} />}
+          {ticker === Ticker.ROSE && <RosePriceCard />}
+          <TestnetFaucet network={scope.network} layer={scope.layer} ticker={ticker} />
         </StyledGrid>
       </Snapshot>
     </>

src/app/pages/ParatimeDashboardPage/TestnetFaucet.tsx

@@ -8,6 +8,8 @@ import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
 import { COLORS } from '../../../styles/theme/colors'
 import { faucet } from '../../utils/externalLinks'
 import { Layer } from '../../../oasis-nexus/api'
+import { NativeTicker, Ticker } from '../../../types/ticker'
+import { Network } from '../../../types/network'
 
 const StyledBox = styled(Box)(({ theme }) => ({
   gap: theme.spacing(5),
@@ -19,13 +21,16 @@ const StyledBox = styled(Box)(({ theme }) => ({
 }))
 
 type TestnetFaucetProps = {
+  network: Network
   layer: Layer
+  ticker: NativeTicker
 }
 
-export const TestnetFaucet: FC<TestnetFaucetProps> = ({ layer }) => {
+export const TestnetFaucet: FC<TestnetFaucetProps> = ({ network, layer, ticker }) => {
   const { t } = useTranslation()
+  const link = faucet[network]?.[layer]?.[ticker]
 
-  return (
+  return link ? (
     <SnapshotCard title={t('testnetFaucet.header')} withContentPadding={false}>
       <StyledBox>
         <Typography
@@ -36,16 +41,10 @@ export const TestnetFaucet: FC<TestnetFaucetProps> = ({ layer }) => {
         >
           {t('testnetFaucet.description')}
         </Typography>
-        <Button
-          href={faucet[layer]}
-          target="_blank"
-          rel="noopener noreferrer"
-          color="secondary"
-          variant="outlined"
-        >
+        <Button href={link} target="_blank" rel="noopener noreferrer" color="secondary" variant="outlined">
           {t('testnetFaucet.request')}
         </Button>
       </StyledBox>
     </SnapshotCard>
-  )
+  ) : null
 }

src/app/utils/externalLinks.ts

@@ -1,4 +1,6 @@
 import { Layer } from '../../oasis-nexus/api'
+import { Network } from '../../types/network'
+import { NativeTicker, Ticker } from '../../types/ticker'
 
 export const socialMedia = {
   telegram: process.env.REACT_APP_SOCIAL_TELEGRAM,
@@ -50,13 +52,16 @@ export const github = {
 
 const faucetUrl = 'https://faucet.testnet.oasis.dev/'
 const faucetParaTimeBaseUrl = `${faucetUrl}?paratime=`
-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`,
-}
+export const faucet: Partial<Record<Network, Partial<Record<Layer, Partial<Record<NativeTicker, string>>>>>> =
+  {
+    [Network.testnet]: {
+      [Layer.consensus]: { [Ticker.TEST]: faucetUrl },
+      [Layer.emerald]: { [Ticker.TEST]: `${faucetParaTimeBaseUrl}emerald` },
+      [Layer.sapphire]: { [Ticker.TEST]: `${faucetParaTimeBaseUrl}sapphire` },
+      [Layer.pontusx]: { [Ticker.TEST]: 'mailto:[email protected]?subject=tokens' },
+      [Layer.cipher]: { [Ticker.TEST]: `${faucetParaTimeBaseUrl}cipher` },
+    },
+  }
 
 export const api = {
   spec: `${process.env.REACT_APP_API}spec/v1.html`,