diff --git a/components/operations/Faucet/AssetMinter.tsx b/components/operations/Faucet/AssetMinter.tsx new file mode 100644 index 000000000..785a60208 --- /dev/null +++ b/components/operations/Faucet/AssetMinter.tsx @@ -0,0 +1,66 @@ +import React, { useCallback, useState } from 'react'; +import { useContractWrite, useWaitForTransaction } from 'wagmi'; +import { LoadingButton } from '@mui/lab'; +import useAccountData from 'hooks/useAccountData'; +import { erc20ABI } from 'types/abi'; +import { useWeb3 } from 'hooks/useWeb3'; +import { parseUnits } from 'viem'; +import { t } from 'i18next'; + +type Props = { + symbol: string; +}; + +const AssetMinter = ({ symbol }: Props) => { + const { getMarketAccount, refreshAccountData } = useAccountData(); + + const marketAccount = getMarketAccount(symbol); + const { walletAddress } = useWeb3(); + const [loading, setLoading] = useState<string | undefined>(undefined); + + const { data, write } = useContractWrite({ + address: marketAccount?.asset, + abi: erc20ABI, + functionName: 'mint', + }); + + const { isLoading } = useWaitForTransaction({ + hash: data?.hash, + onSettled: async () => { + await refreshAccountData(); + setLoading(undefined); + }, + }); + + const mint = useCallback( + (s: string) => { + if (!marketAccount || !walletAddress) return; + try { + const { decimals } = marketAccount; + + setLoading(s); + const amounts: Record<string, string> = { + DAI: '10000', + USDC: '10000', + WBTC: '2', + OP: '1000', + 'USDC.e': '10000', + wstETH: '10', + }; + + write({ args: [walletAddress, parseUnits(amounts[symbol], decimals)] }); + } catch (e) { + setLoading(undefined); + } + }, + [marketAccount, symbol, walletAddress, write], + ); + + return ( + <LoadingButton variant="contained" onClick={() => mint(symbol)} loading={isLoading && symbol === loading}> + {t('Mint')} + </LoadingButton> + ); +}; + +export default AssetMinter; diff --git a/components/operations/Faucet/index.tsx b/components/operations/Faucet/index.tsx index e3a80dd9d..b5db4d853 100644 --- a/components/operations/Faucet/index.tsx +++ b/components/operations/Faucet/index.tsx @@ -1,62 +1,22 @@ -import React, { useCallback, useState } from 'react'; -import { useAccount, useContractWrite } from 'wagmi'; -import useWaitForTransaction from 'hooks/useWaitForTransaction'; +import React, { useCallback } from 'react'; +import { useAccount } from 'wagmi'; import Image from 'next/image'; import imageToBase64 from 'utils/imageToBase64'; import { useTranslation } from 'react-i18next'; -import { parseUnits } from 'viem'; import useAssets from 'hooks/useAssets'; import { Box, Button, Divider, Typography } from '@mui/material'; import formatSymbol from 'utils/formatSymbol'; -import { LoadingButton } from '@mui/lab'; import useAccountData from 'hooks/useAccountData'; -import { abi } from './abi'; +import AssetMinter from './AssetMinter'; function Faucet() { const { t } = useTranslation(); const { connector } = useAccount(); - const { accountData, getMarketAccount, refreshAccountData } = useAccountData(); - const [loading, setLoading] = useState<string | undefined>(undefined); + const { accountData } = useAccountData(); const assets = useAssets(); - const { data, write } = useContractWrite({ - address: '0x1ca525Cd5Cb77DB5Fa9cBbA02A0824e283469DBe', - abi, - functionName: 'mint', - }); - - const { isLoading } = useWaitForTransaction({ - hash: data?.hash, - onSettled: async () => { - await refreshAccountData(); - setLoading(undefined); - }, - }); - - const mint = useCallback( - async (symbol: string) => { - const marketAccount = getMarketAccount(symbol); - if (!marketAccount) return; - try { - const { asset, decimals } = marketAccount; - - setLoading(symbol); - const amounts: Record<string, string> = { - DAI: '50000', - USDC: '50000', - WBTC: '2', - }; - - write({ args: [asset, parseUnits(amounts[symbol], decimals)] }); - } catch { - setLoading(undefined); - } - }, - [getMarketAccount, write], - ); - const addTokens = useCallback(async () => { if (!accountData) return; @@ -106,18 +66,12 @@ function Faucet() { {formatSymbol(asset)} </Typography> </Box> - {asset === 'WETH' || asset === 'wstETH' ? ( - <a - href={asset === 'wstETH' ? 'https://stake.testnet.fi/' : 'https://goerlifaucet.com/'} - target="_blank" - rel="noopener noreferrer" - > + {asset === 'WETH' ? ( + <a href={'https://www.alchemy.com/faucets/optimism-sepolia'} target="_blank" rel="noopener noreferrer"> <Button variant="contained">{t('Mint')}</Button> </a> ) : ( - <LoadingButton variant="contained" onClick={() => mint(asset)} loading={isLoading && asset === loading}> - {t('Mint')} - </LoadingButton> + <AssetMinter symbol={asset} /> )} </Box> ))} diff --git a/public/img/networks/11155420.svg b/public/img/networks/11155420.svg new file mode 100644 index 000000000..6566bbcf7 --- /dev/null +++ b/public/img/networks/11155420.svg @@ -0,0 +1,12 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_618_1104)"> +<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="white"/> +<path d="M8.5008 15.1872C7.7856 15.1872 7.2 15.0192 6.744 14.6832C6.2928 14.3424 6.0672 13.8528 6.0672 13.224C6.0672 13.0896 6.0816 12.9312 6.1104 12.7392C6.1872 12.3072 6.2976 11.7888 6.4416 11.1792C6.8496 9.52799 7.9056 8.70239 9.6048 8.70239C10.0656 8.70239 10.4832 8.77919 10.848 8.93759C11.2128 9.08639 11.5008 9.31679 11.712 9.62399C11.9232 9.92639 12.0288 10.2864 12.0288 10.704C12.0288 10.8288 12.0144 10.9872 11.9856 11.1792C11.8944 11.712 11.7888 12.2352 11.6592 12.7392C11.448 13.56 11.088 14.1792 10.5696 14.5872C10.056 14.9904 9.3648 15.1872 8.5008 15.1872ZM8.6304 13.8912C8.9664 13.8912 9.2496 13.7904 9.4848 13.5936C9.7248 13.3968 9.8976 13.0944 9.9984 12.6816C10.1376 12.1152 10.2432 11.6256 10.3152 11.2032C10.3392 11.0784 10.3536 10.9488 10.3536 10.8144C10.3536 10.2672 10.0704 9.99359 9.4992 9.99359C9.1632 9.99359 8.8752 10.0944 8.6352 10.2912C8.4 10.488 8.232 10.7904 8.1312 11.2032C8.0208 11.6064 7.9152 12.096 7.8048 12.6816C7.7808 12.8016 7.7664 12.9264 7.7664 13.0608C7.7616 13.6176 8.0544 13.8912 8.6304 13.8912Z" fill="#EE2939"/> +<path d="M12.4464 15.1008C12.3792 15.1008 12.3312 15.0816 12.2928 15.0384C12.264 14.9904 12.2544 14.9376 12.264 14.8752L13.5072 9.01919C13.5168 8.95199 13.5504 8.89919 13.608 8.85599C13.6608 8.81279 13.7184 8.79359 13.7808 8.79359H16.176C16.8432 8.79359 17.376 8.93279 17.7792 9.20639C18.1872 9.48479 18.3936 9.88319 18.3936 10.4064C18.3936 10.5552 18.3744 10.7136 18.3408 10.8768C18.192 11.568 17.8896 12.0768 17.4288 12.408C16.9776 12.7392 16.3584 12.9024 15.5712 12.9024H14.3568L13.944 14.8752C13.9296 14.9424 13.9008 14.9952 13.8432 15.0384C13.7904 15.0816 13.7328 15.1008 13.6704 15.1008H12.4464ZM15.6336 11.6592C15.888 11.6592 16.104 11.592 16.2912 11.4528C16.4832 11.3136 16.608 11.1168 16.6704 10.8576C16.6896 10.7568 16.6992 10.6656 16.6992 10.5888C16.6992 10.416 16.6464 10.2816 16.5456 10.1904C16.4448 10.0944 16.2672 10.0464 16.0224 10.0464H14.9424L14.6016 11.6592H15.6336Z" fill="#EE2939"/> +</g> +<defs> +<clipPath id="clip0_618_1104"> +<rect width="24" height="24" fill="#EE2939"/> +</clipPath> +</defs> +</svg>