diff --git a/content/pages/faucet.json b/content/pages/faucet.json index 228ae64f..14b4921c 100644 --- a/content/pages/faucet.json +++ b/content/pages/faucet.json @@ -1,9 +1,17 @@ { "title": "Pontus-X Faucet", "description": "Request tokens for the Pontus-X Networks", - "input": { - "label": "Your Pontus-X address", - "placeholder": "0x28080F654eED6CC00e8b16F4841E92CD0c2C0778", - "buttonLabel": "Get tokens" + "buttonLabel": "Get Tokens", + "card": { + "cardTitle": "Welcome to the Pontus-X Faucet", + "cardDescription": "A faucet is a service that provides free tokens for testing purposes. Known accounts can request 10 EUROe fee tokens and 1000 EUROe payment tokens to use on the Pontus-X network. These tokens are available every 12 hours.", + "cardExplainerTitle": "How to Request Tokens", + "cardExplainerFirstStep": "Ensure you have a web3 wallet (e.g. MetaMask) connected.", + "cardExplainerSecondStep": "Your wallet address will be automatically detected and displayed below.", + "cardExplainerThirdStep": "Click the button to request your free tokens.", + "cardExplainerFourthStep": "Wait for a few seconds while the request is processed.", + "cardExplainerFithStep": "You will receive a confirmation once the tokens are successfully sent to your address.", + "cardNetworkAddress": "Your Pontus-X address", + "cardNetwork": "Connected Network" } } diff --git a/src/components/Faucet/index.tsx b/src/components/Faucet/index.tsx index ebc1c1e1..c8f0269b 100644 --- a/src/components/Faucet/index.tsx +++ b/src/components/Faucet/index.tsx @@ -1,42 +1,56 @@ -import { ReactElement, useCallback, useEffect, useState } from 'react' -import { LoggerInstance } from '@oceanprotocol/lib' -import styles from './index.module.css' +import Alert from '@components/@shared/atoms/Alert' import Button from '@components/@shared/atoms/Button' import Loader from '@components/@shared/atoms/Loader' -import Alert from '@components/@shared/atoms/Alert' +import { LoggerInstance } from '@oceanprotocol/lib' +import { ReactElement, useCallback, useEffect, useState } from 'react' +import { toast } from 'react-toastify' +import { useAccount, useNetwork, useSignMessage } from 'wagmi' import content from '../../../content/pages/faucet.json' -import { ethers } from 'ethers' import { getMessage, requestTokens } from '../../@utils/faucet' -import { useAccount, useSignMessage } from 'wagmi' -import { toast } from 'react-toastify' +import styles from './index.module.css' +import NetworkName from '../@shared/NetworkName' interface Content { title: string description: string - input: { - label: string - placeholder: string - buttonLabel: string + buttonLabel: string + card: { + cardTitle: string + cardDescription: string + cardExplainerTitle: string + cardExplainerFirstStep: string + cardExplainerSecondStep: string + cardExplainerThirdStep: string + cardExplainerFourthStep: string + cardExplainerFithStep: string + cardNetworkAddress: string + cardNetwork: string } } -const networkNameMap: { [key: number]: string } = { - 32456: 'Pontus-X Devnet', - 32457: 'Pontus-X Testnet' -} - const FaucetPage = (): ReactElement => { - const { input }: Content = content - const { label, buttonLabel } = input + const { buttonLabel }: Content = content + const { card }: Content = content + const { + cardTitle, + cardDescription, + cardExplainerTitle, + cardExplainerFirstStep, + cardExplainerSecondStep, + cardExplainerThirdStep, + cardExplainerFourthStep, + cardExplainerFithStep, + cardNetworkAddress, + cardNetwork + } = card const [isLoading, setIsLoading] = useState(false) const [isRequestingTokens, setIsRequestingTokens] = useState(false) - const [address, setAddress] = useState('') - const [network, setNetwork] = useState('Unknown') const [message, setMessage] = useState() const [error, setError] = useState() const { address: accountAddress } = useAccount() + const { chain } = useNetwork() const { data: signMessageData, @@ -111,78 +125,29 @@ const FaucetPage = (): ReactElement => { faucetTokenRequest ]) - useEffect(() => { - const fetchAddressAndNetwork = async () => { - try { - const provider = new ethers.providers.Web3Provider(window.ethereum) - const signer = provider.getSigner() - const address = await signer.getAddress() - const network = await provider.getNetwork() - setAddress(address) - setNetwork(networkNameMap[network.chainId] || 'Unknown') - } catch (error) { - LoggerInstance.error(error) - } - } - - fetchAddressAndNetwork() - - if (window.ethereum) { - window.ethereum.on('accountsChanged', fetchAddressAndNetwork) - window.ethereum.on('chainChanged', fetchAddressAndNetwork) - } - - return () => { - if (window.ethereum) { - window.ethereum.removeListener( - 'accountsChanged', - fetchAddressAndNetwork - ) - window.ethereum.removeListener('chainChanged', fetchAddressAndNetwork) - } - } - }, []) - return (
-

Welcome to the Pontus-X Faucet

-

- A faucet is a service that provides free tokens for testing purposes. - Known accounts can request 10 EUROe fee tokens and 1000 EUROe payment - tokens to use on the Pontus-X network. These tokens are available every - 12 hours. -

+

{cardTitle}

+

{cardDescription}

-

How to Request Tokens:

+

{cardExplainerTitle}

    -
  1. Ensure you have a web3 wallet (e.g. MetaMask) connected.
  2. -
  3. - Your wallet address will be automatically detected and displayed - below. -
  4. -
  5. - Click the "Get Tokens" button to request your free tokens. -
  6. -
  7. Wait for a few seconds while the request is processed.
  8. -
  9. - You will receive a confirmation once the tokens are successfully - added to your wallet. -
  10. +
  11. {cardExplainerFirstStep}
  12. +
  13. {cardExplainerSecondStep}
  14. +
  15. {cardExplainerThirdStep}
  16. +
  17. {cardExplainerFourthStep}
  18. +
  19. {cardExplainerFithStep}
-

- Note: You can only request tokens once every 12 - hours. If you encounter any issues, please try again later. -

- {label}: {address} + {cardNetworkAddress}: {accountAddress}
- Connected Network: {network} + {cardNetwork}: