91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import React, { useMemo } from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
|
|
import { faFaucetDrip } from "@fortawesome/free-solid-svg-icons/faFaucetDrip";
|
|
import ExternalLink from "./components/ExternalLink";
|
|
import ContentFrame from "./ContentFrame";
|
|
import StandardFrame from "./StandardFrame";
|
|
import StandardSubtitle from "./StandardSubtitle";
|
|
import { useChainInfo } from "./useChainInfo";
|
|
|
|
const Faucets: React.FC = () => {
|
|
const { network, faucets } = useChainInfo();
|
|
const loc = useLocation();
|
|
const urls = useMemo(() => {
|
|
const s = new URLSearchParams(loc.search);
|
|
const address = s.get("address");
|
|
|
|
const _urls: string[] =
|
|
network === "testnet"
|
|
? faucets.map((u) =>
|
|
// eslint-disable-next-line no-template-curly-in-string
|
|
address !== null ? u.replaceAll("${ADDRESS}", address) : u
|
|
)
|
|
: [];
|
|
|
|
// Shuffle faucets to avoid UI bias
|
|
for (let i = _urls.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[_urls[i], _urls[j]] = [_urls[j], _urls[i]];
|
|
}
|
|
|
|
return _urls;
|
|
}, [network, faucets, loc]);
|
|
|
|
return (
|
|
<StandardFrame>
|
|
<StandardSubtitle>Faucets</StandardSubtitle>
|
|
<ContentFrame>
|
|
<div className="py-4 space-y-3">
|
|
{urls.length > 0 && (
|
|
<div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-red-800 font-bold underline px-2 py-1">
|
|
<FontAwesomeIcon
|
|
className="self-center"
|
|
icon={faTriangleExclamation}
|
|
size="1x"
|
|
/>
|
|
<span>
|
|
The following external links come from
|
|
https://github.com/ethereum-lists/chains and are *NOT* endorsed
|
|
by us. Use at your own risk.
|
|
</span>
|
|
</div>
|
|
)}
|
|
{/* Display the shuffling notice only if there are 1+ faucets */}
|
|
{urls.length > 1 && (
|
|
<div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-yellow-700 px-2 py-1">
|
|
<FontAwesomeIcon
|
|
className="self-center"
|
|
icon={faTriangleExclamation}
|
|
size="1x"
|
|
/>
|
|
<span>The faucet links below are shuffled on page load.</span>
|
|
</div>
|
|
)}
|
|
{urls.length > 0 ? (
|
|
<div className="pt-2 space-y-3">
|
|
{urls.map((url) => (
|
|
<div className="flex space-x-2 items-baseline">
|
|
<FontAwesomeIcon
|
|
className="text-gray-400"
|
|
icon={faFaucetDrip}
|
|
size="1x"
|
|
/>
|
|
<ExternalLink key={url} href={url}>
|
|
<span>{url}</span>
|
|
</ExternalLink>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div>There are no registered faucets.</div>
|
|
)}
|
|
</div>
|
|
</ContentFrame>
|
|
</StandardFrame>
|
|
);
|
|
};
|
|
|
|
export default Faucets;
|