From 56affe95a05a11de16e519664e127e1eab1fc8c9 Mon Sep 17 00:00:00 2001 From: franm Date: Tue, 16 Apr 2024 17:08:58 -0300 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20faucet:=20update=20faucet?= =?UTF-8?q?=20for=20op-sepolia?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/operations/Faucet/AssetMinter.tsx | 66 ++++++++++++++++++++ components/operations/Faucet/index.tsx | 60 +++--------------- public/img/networks/11155420.svg | 12 ++++ 3 files changed, 85 insertions(+), 53 deletions(-) create mode 100644 components/operations/Faucet/AssetMinter.tsx create mode 100644 public/img/networks/11155420.svg 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(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 = { + 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 ( + mint(symbol)} loading={isLoading && symbol === loading}> + {t('Mint')} + + ); +}; + +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(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 = { - 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)} - {asset === 'WETH' || asset === 'wstETH' ? ( - + {asset === 'WETH' ? ( + ) : ( - mint(asset)} loading={isLoading && asset === loading}> - {t('Mint')} - + )} ))} 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 @@ + + + + + + + + + + + +