Skip to content

Commit

Permalink
Refactor/faucet page (#559)
Browse files Browse the repository at this point in the history 
* refactor(faucet): rename Verify to Faucet

* refactor(faucet): extract faucet content to faucet.json

* refactor: use wagmi instead of ethers

* refactor: rename function to PageFaucet()

* refactor(faucet): update Content interface

* refactor: use NetworkName

---------

Co-authored-by: Moritz Kirstein <mkirstein@protonmail.com>
  • Loading branch information
@oceanByte @moritzkirstein
oceanByte and moritzkirstein authored Oct 30, 2024
1 parent 6f10a2e commit f61d269
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 96 deletions.
16 changes: 12 additions & 4 deletions content/pages/faucet.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
}
125 changes: 45 additions & 80 deletions src/components/Faucet/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<string>('')
const [network, setNetwork] = useState<string>('Unknown')
const [message, setMessage] = useState<string>()
const [error, setError] = useState<string>()

const { address: accountAddress } = useAccount()
const { chain } = useNetwork()

const {
data: signMessageData,
Expand Down Expand Up @@ -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 (
<div className={styles.card}>
<h2 className={styles.title}>Welcome to the Pontus-X Faucet</h2>
<p className={styles.description}>
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.
</p>
<h2 className={styles.title}>{cardTitle}</h2>
<p className={styles.description}>{cardDescription}</p>
<div className={styles.instructions}>
<h3>How to Request Tokens:</h3>
<h3>{cardExplainerTitle}</h3>
<ol>
<li>Ensure you have a web3 wallet (e.g. MetaMask) connected.</li>
<li>
Your wallet address will be automatically detected and displayed
below.
</li>
<li>
Click the &quot;Get Tokens&quot; button to request your free tokens.
</li>
<li>Wait for a few seconds while the request is processed.</li>
<li>
You will receive a confirmation once the tokens are successfully
added to your wallet.
</li>
<li>{cardExplainerFirstStep}</li>
<li>{cardExplainerSecondStep}</li>
<li>{cardExplainerThirdStep}</li>
<li>{cardExplainerFourthStep}</li>
<li>{cardExplainerFithStep}</li>
</ol>
<p>
<strong>Note:</strong> You can only request tokens once every 12
hours. If you encounter any issues, please try again later.
</p>
</div>
<div className={styles.address}>
<strong>{label}:</strong> {address}
<strong>{cardNetworkAddress}:</strong> {accountAddress}
</div>
<div className={styles.network}>
<strong>Connected Network:</strong> {network}
<strong>{cardNetwork}:</strong> <NetworkName networkId={chain?.id} />
</div>
<form className={styles.form} onSubmit={handleSearchStart}>
<Button
disabled={!address || isLoading || isRequestingTokens}
disabled={!accountAddress || isLoading || isRequestingTokens}
style="primary"
size="small"
type="submit"
Expand Down
17 changes: 5 additions & 12 deletions src/pages/faucet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
import { ReactElement } from 'react'
import { useRouter } from 'next/router'
import Verify from '../components/Faucet'
import AssetProvider from '@context/Asset'
import Faucet from '../components/Faucet'
import content from '../../content/pages/faucet.json'
import Page from '@components/@shared/Page'

export default function PageVerify(): ReactElement {
const router = useRouter()
const { did } = router.query

export default function PageFaucet(): ReactElement {
return (
<AssetProvider did={did as string}>
<Page title={content.title} description={content.description} uri="">
<Verify />
</Page>
</AssetProvider>
<Page title={content.title} description={content.description} uri="">
<Faucet />
</Page>
)
}

0 comments on commit f61d269

Please sign in to comment.