From 78666191e049a4762f07262c8c7e44ff0c353c0b Mon Sep 17 00:00:00 2001 From: Oleksandr Khlopiachyi Date: Thu, 18 Apr 2024 11:34:33 +0300 Subject: [PATCH] feat: add more info to faucet page --- components/Faucets/index.tsx | 121 ++++++++++++++++++++++++++++++++--- components/Layout/index.tsx | 1 - components/Spinner/index.tsx | 11 ++++ 3 files changed, 123 insertions(+), 10 deletions(-) create mode 100644 components/Spinner/index.tsx diff --git a/components/Faucets/index.tsx b/components/Faucets/index.tsx index d95d525..6c27fec 100644 --- a/components/Faucets/index.tsx +++ b/components/Faucets/index.tsx @@ -7,6 +7,7 @@ import { Input } from "../Input"; import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing'; import { stringToPath } from '@cosmjs/crypto'; import axios from "axios"; +import { Spinner } from "../Spinner"; const tabs = [ { label: 'Mainnet', id: 'mainnet' }, @@ -34,7 +35,10 @@ const CONFIG = { export const Faucets = () => { const [currentTab, setCurrentTab] = useState(tabs[0]); const [walletAddress, setWalletAddress] = useState(''); + const [mnemonic, setMnemonic] = useState(''); const [txHash, setTxHash] = useState(''); + const [fundLoading, setFundLoading] = useState(false); + const [errorMessage, setErrorMessage] = useState(''); const currentConfig = useMemo(() => { return CONFIG[currentTab.id as ('testnet' | 'devnet')] || {}; @@ -48,14 +52,18 @@ export const Faucets = () => { setTxHash(response.data.txHash); } catch (error) { + setErrorMessage((error as any).response.data.content[0].kind); + console.error(error); } }, [currentConfig?.fundWalletURL]); const handleRequestFunds = useCallback(async () => { + setFundLoading(true); if (walletAddress.length) { await fundWallet(walletAddress); } + setFundLoading(false); }, [fundWallet, walletAddress]); const handleGenerateWallet = useCallback(async () => { @@ -67,18 +75,117 @@ export const Faucets = () => { const [{ address }] = await wallet.getAccounts(); setWalletAddress(address); + setMnemonic(wallet.mnemonic); + + setFundLoading(true); await fundWallet(address); + setFundLoading(false); }, [currentConfig.coreumHDPath, currentConfig.tokenPrefix, fundWallet]); const handleChangeWalletAddress = useCallback((value: string | number) => { setWalletAddress(typeof value === 'string' ? value : String(value)); + + setTxHash(''); + setMnemonic(''); + setErrorMessage(''); + setFundLoading(false); }, []); useEffect(() => { setWalletAddress(''); setTxHash(''); + setMnemonic(''); + setErrorMessage(''); + setFundLoading(false); }, [currentTab.id]); + const getErrorMessage = useCallback((err: string) => { + switch (err) { + case 'server.rate_limit': + return ( + Error: The Rate Limit has been surpassed, please, try again in several hours. If you need more funds for specific testing purposes, please request them in the Discord + ); + case 'server.internal_error': + return 'Message: unable to transfer tokens'; + default: + return err; + } + }, []); + + const renderErrorOrTxHash = useMemo(() => { + if (errorMessage) { + return ( + {getErrorMessage(errorMessage)} + ); + } + + return ( + + {txHash} + + ); + }, [currentConfig?.explorerLink, errorMessage, getErrorMessage, txHash]); + + const renderInfo = useMemo(() => { + if (!fundLoading && !(txHash.length || errorMessage.length)) { + return null; + } + + if (fundLoading) { + return ( +
+
+ Tx Hash: + +
+
+ Wallet Address: + {walletAddress} +
+ {mnemonic.length ? ( + <> +
+ Wallet Mnemonic: + {mnemonic} +
+
+ ⚠️ Mnemonic is the only way to restore you wallet, save it in a safe place. +
+ + ) : null} +
+ ); + } + + return ( +
+
+ Tx Hash: + {renderErrorOrTxHash} +
+
+ Wallet Address: + {walletAddress} +
+ {mnemonic.length ? ( + <> +
+ Wallet Mnemonic: + {mnemonic} +
+
+ ⚠️ Mnemonic is the only way to restore you wallet, save it in a safe place. +
+ + ) : null} +
+ ); + }, [errorMessage.length, fundLoading, mnemonic, renderErrorOrTxHash, txHash.length, walletAddress]); + const renderContent = useMemo(() => { switch (currentTab.id) { case 'mainnet': @@ -96,9 +203,9 @@ export const Faucets = () => { case 'devnet': return (
-
+
Generate Funded Wallet @@ -106,7 +213,7 @@ export const Faucets = () => {
Or
-
+
{ />
- {txHash.length ? ( -
- Tx Hash: {txHash} -
- ) : ''} + {renderInfo}
); default: } - }, [currentConfig?.explorerLink, currentTab.id, handleChangeWalletAddress, handleGenerateWallet, handleRequestFunds, txHash, walletAddress]); + }, [currentTab.id, handleChangeWalletAddress, handleGenerateWallet, handleRequestFunds, renderInfo, walletAddress]); return (
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index c211b97..11a24cc 100644 --- a/components/Layout/index.tsx +++ b/components/Layout/index.tsx @@ -2,7 +2,6 @@ import { Footer } from "../Footer"; import { Navbar } from "../Navbar"; -import { motion, AnimatePresence } from "framer-motion"; interface LayoutProps { children: React.ReactNode; diff --git a/components/Spinner/index.tsx b/components/Spinner/index.tsx new file mode 100644 index 0000000..9aa8eac --- /dev/null +++ b/components/Spinner/index.tsx @@ -0,0 +1,11 @@ +export const Spinner = () => { + return ( +
+ + Loading... +
+ ); +};