diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 2307e1a2d..544e31d15 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -344,7 +344,7 @@
"empty": "No options found"
},
"testnetFaucet": {
- "explanation": "Each address on goerli can claim {{ amount }}ETH to test out the ENS manager app, as well as all the new contracts.",
+ "explanation": "Each address on {{ testnet }} can claim {{ amount }} {{ ticker }} to test out the ENS manager app, as well as any other testnet usage.",
"note": "It may take a few minutes to show up in your wallet."
}
}
diff --git a/src/components/@molecules/FaucetBanner.tsx b/src/components/@molecules/FaucetBanner.tsx
index e899f3c0f..f275d2798 100644
--- a/src/components/@molecules/FaucetBanner.tsx
+++ b/src/components/@molecules/FaucetBanner.tsx
@@ -1,5 +1,7 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { formatEther } from '@ethersproject/units'
import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled, { css } from 'styled-components'
@@ -15,7 +17,7 @@ import {
} from '@ensdomains/thorin'
import { useAccountSafely } from '@app/hooks/useAccountSafely'
-import { useChainId } from '@app/hooks/useChainId'
+import { useChainName } from '@app/hooks/useChainName'
import useFaucet from '@app/hooks/useFaucet'
import { InnerDialog } from '../@atoms/InnerDialog'
@@ -44,8 +46,12 @@ const LargeCheckIcon = styled.svg(
`,
)
+const getAmountFromHex = (hex: `0x${string}`) => formatEther(BigNumber.from(hex))
+const msToDays = (ms: number) => Math.floor(ms / 1000 / 60 / 60 / 24)
+const chainEthTicker = (chainName: string) => `${chainName.slice(0, 2)}ETH`
+
const FaucetBanner = () => {
- const chainId = useChainId()
+ const chainName = useChainName()
const { isReady } = useRouter()
const { address } = useAccountSafely()
const {
@@ -60,7 +66,14 @@ const FaucetBanner = () => {
const closeDialog = () => setDialogOpen(false)
const openDialog = () => setDialogOpen(true)
- if (chainId !== 5 || !isReady) return null
+ const amount = useMemo(() => getAmountFromHex(data?.amount || '0x0'), [data?.amount])
+
+ useEffect(() => {
+ closeDialog()
+ }, [chainName, address])
+
+ if ((chainName !== 'goerli' && chainName !== 'sepolia') || !isReady || isLoading || !data)
+ return null
const BannerComponent = (
@@ -69,9 +82,13 @@ const FaucetBanner = () => {
icon={}
onClick={openDialog}
alert="info"
- title="You have unclaimed goETH!"
+ title={`You have unclaimed ${chainName} ETH!`}
>
- {t('testnetFaucet.explanation', { amount: '0.25' })}
+ {t('testnetFaucet.explanation', {
+ amount,
+ testnet: chainName,
+ ticker: chainEthTicker(chainName),
+ })}
)
@@ -80,11 +97,18 @@ const FaucetBanner = () => {