From 44208af1126d2ede2bb969214a19a483c0b03179 Mon Sep 17 00:00:00 2001 From: Albert Peci Date: Tue, 6 Aug 2024 22:21:52 +0200 Subject: [PATCH 1/6] refactor(faucet): rename Verify to Faucet --- src/pages/faucet.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/faucet.tsx b/src/pages/faucet.tsx index c73c19e40..0848360a4 100644 --- a/src/pages/faucet.tsx +++ b/src/pages/faucet.tsx @@ -1,12 +1,12 @@ import { ReactElement } from 'react' -import Verify from '../components/Faucet' +import Faucet from '../components/Faucet' import content from '../../content/pages/faucet.json' import Page from '@components/@shared/Page' export default function PageVerify(): ReactElement { return ( - + ) } From 370c18414f6382815f4b58bd73ff8679c8205097 Mon Sep 17 00:00:00 2001 From: Albert Peci Date: Tue, 6 Aug 2024 22:35:50 +0200 Subject: [PATCH 2/6] refactor(faucet): extract faucet content to faucet.json --- content/pages/faucet.json | 16 ++++++-- src/components/Faucet/index.tsx | 70 +++++++++++++++++---------------- 2 files changed, 49 insertions(+), 37 deletions(-) diff --git a/content/pages/faucet.json b/content/pages/faucet.json index 228ae64f6..14b4921c3 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 ebc1c1e19..4534c539e 100644 --- a/src/components/Faucet/index.tsx +++ b/src/components/Faucet/index.tsx @@ -13,10 +13,18 @@ import { toast } from 'react-toastify' interface Content { title: string description: string - input: { - label: string - placeholder: string - buttonLabel: string + card: { + cardTitle: string + cardDescription: string + cardExplainerTitle: string + cardExplainerFirstStep: string + cardExplainerSecondStep: string + cardExplainerThirdStep: string + cardExplainerFourthStep: string + cardExplainerFithStep: string + cardExplainerNote: string + cardNetworkAddress: string + cardNetwork: string } } @@ -26,8 +34,21 @@ const networkNameMap: { [key: number]: string } = { } 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, + cardExplainerNote, + cardNetworkAddress, + cardNetwork + } = card const [isLoading, setIsLoading] = useState(false) const [isRequestingTokens, setIsRequestingTokens] = useState(false) @@ -145,40 +166,23 @@ const FaucetPage = (): ReactElement => { 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. -
  2. - Your wallet address will be automatically detected and displayed - below. -
    3. -
  3. - Click the "Get Tokens" button to request your free tokens. -
    4. -
  4. Wait for a few seconds while the request is processed.
    5. -
  5. - You will receive a confirmation once the tokens are successfully - added to your wallet. -
    6. +
  6. {cardExplainerFirstStep}
    7. +
  7. {cardExplainerSecondStep}
    8. +
  8. {cardExplainerThirdStep}
    9. +
  9. {cardExplainerFourthStep}
    10. +
  10. {cardExplainerFithStep}
-

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

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