From 56fb979d1608d698d8a8bad0e484bb6ea6623783 Mon Sep 17 00:00:00 2001 From: Moreshwar Dalvi Date: Mon, 4 Jul 2022 11:13:44 +0530 Subject: [PATCH] showing wallet balance on the card --- client/src/components/Welcome.jsx | 75 ++++++++++++++----- client/src/context/TransactionContext.jsx | 90 +++++++++++++++++------ 2 files changed, 123 insertions(+), 42 deletions(-) diff --git a/client/src/components/Welcome.jsx b/client/src/components/Welcome.jsx index a009dfa..09b38c9 100644 --- a/client/src/components/Welcome.jsx +++ b/client/src/components/Welcome.jsx @@ -7,7 +7,8 @@ import { TransactionContext } from "../context/TransactionContext"; import { shortenAddress } from "../utils/shortenAddress"; import { Loader } from "."; -const companyCommonStyles = "min-h-[70px] sm:px-0 px-2 sm:min-w-[120px] flex justify-center items-center border-[0.5px] border-gray-400 text-sm font-light text-white"; +const companyCommonStyles = + "min-h-[70px] sm:px-0 px-2 sm:min-w-[120px] flex justify-center items-center border-[0.5px] border-gray-400 text-sm font-light text-white"; const Input = ({ placeholder, name, type, value, handleChange }) => ( ( ); const Welcome = () => { - const { currentAccount, connectWallet, handleChange, sendTransaction, formData, isLoading } = useContext(TransactionContext); + const { + currentAccount, + connectWallet, + accountBalance, + handleChange, + sendTransaction, + formData, + isLoading, + } = useContext(TransactionContext); + + console.log(accountBalance); const handleSubmit = (e) => { const { addressTo, amount, keyword, message } = formData; @@ -41,7 +52,8 @@ const Welcome = () => { Send Crypto
across the world

- Explore the crypto world. Buy and sell cryptocurrencies easily on Krypto. + Explore the crypto world. Buy and sell cryptocurrencies easily on + Krypto.

{!currentAccount && ( - )} + {isLoading ? ( + + ) : ( + + )} diff --git a/client/src/context/TransactionContext.jsx b/client/src/context/TransactionContext.jsx index bd2d0b4..59bc71d 100644 --- a/client/src/context/TransactionContext.jsx +++ b/client/src/context/TransactionContext.jsx @@ -10,16 +10,28 @@ const { ethereum } = window; const createEthereumContract = () => { const provider = new ethers.providers.Web3Provider(ethereum); const signer = provider.getSigner(); - const transactionsContract = new ethers.Contract(contractAddress, contractABI, signer); + const transactionsContract = new ethers.Contract( + contractAddress, + contractABI, + signer + ); return transactionsContract; }; export const TransactionsProvider = ({ children }) => { - const [formData, setformData] = useState({ addressTo: "", amount: "", keyword: "", message: "" }); + const [formData, setformData] = useState({ + addressTo: "", + amount: "", + keyword: "", + message: "", + }); const [currentAccount, setCurrentAccount] = useState(""); + const [accountBalance, setAccountBalance] = useState(null); const [isLoading, setIsLoading] = useState(false); - const [transactionCount, setTransactionCount] = useState(localStorage.getItem("transactionCount")); + const [transactionCount, setTransactionCount] = useState( + localStorage.getItem("transactionCount") + ); const [transactions, setTransactions] = useState([]); const handleChange = (e, name) => { @@ -31,16 +43,21 @@ export const TransactionsProvider = ({ children }) => { if (ethereum) { const transactionsContract = createEthereumContract(); - const availableTransactions = await transactionsContract.getAllTransactions(); - - const structuredTransactions = availableTransactions.map((transaction) => ({ - addressTo: transaction.receiver, - addressFrom: transaction.sender, - timestamp: new Date(transaction.timestamp.toNumber() * 1000).toLocaleString(), - message: transaction.message, - keyword: transaction.keyword, - amount: parseInt(transaction.amount._hex) / (10 ** 18) - })); + const availableTransactions = + await transactionsContract.getAllTransactions(); + + const structuredTransactions = availableTransactions.map( + (transaction) => ({ + addressTo: transaction.receiver, + addressFrom: transaction.sender, + timestamp: new Date( + transaction.timestamp.toNumber() * 1000 + ).toLocaleString(), + message: transaction.message, + keyword: transaction.keyword, + amount: parseInt(transaction.amount._hex) / 10 ** 18, + }) + ); console.log(structuredTransactions); @@ -53,6 +70,14 @@ export const TransactionsProvider = ({ children }) => { } }; + const fetchBalance = async (address) => { + const balance = await ethereum + .request({ method: "eth_getBalance", params: [address, "latest"] }) + .then((bal) => ethers.utils.formatEther(bal)); + + setAccountBalance(balance); + }; + const checkIfWalletIsConnect = async () => { try { if (!ethereum) return alert("Please install MetaMask."); @@ -60,6 +85,7 @@ export const TransactionsProvider = ({ children }) => { const accounts = await ethereum.request({ method: "eth_accounts" }); if (accounts.length) { + fetchBalance(accounts[0]); setCurrentAccount(accounts[0]); getAllTransactions(); @@ -75,9 +101,13 @@ export const TransactionsProvider = ({ children }) => { try { if (ethereum) { const transactionsContract = createEthereumContract(); - const currentTransactionCount = await transactionsContract.getTransactionCount(); + const currentTransactionCount = + await transactionsContract.getTransactionCount(); - window.localStorage.setItem("transactionCount", currentTransactionCount); + window.localStorage.setItem( + "transactionCount", + currentTransactionCount + ); } } catch (error) { console.log(error); @@ -90,8 +120,11 @@ export const TransactionsProvider = ({ children }) => { try { if (!ethereum) return alert("Please install MetaMask."); - const accounts = await ethereum.request({ method: "eth_requestAccounts", }); + const accounts = await ethereum.request({ + method: "eth_requestAccounts", + }); + fetchBalance(accounts[0]); setCurrentAccount(accounts[0]); window.location.reload(); } catch (error) { @@ -110,15 +143,22 @@ export const TransactionsProvider = ({ children }) => { await ethereum.request({ method: "eth_sendTransaction", - params: [{ - from: currentAccount, - to: addressTo, - gas: "0x5208", - value: parsedAmount._hex, - }], + params: [ + { + from: currentAccount, + to: addressTo, + gas: "0x5208", + value: parsedAmount._hex, + }, + ], }); - const transactionHash = await transactionsContract.addToBlockchain(addressTo, parsedAmount, message, keyword); + const transactionHash = await transactionsContract.addToBlockchain( + addressTo, + parsedAmount, + message, + keyword + ); setIsLoading(true); console.log(`Loading - ${transactionHash.hash}`); @@ -126,7 +166,8 @@ export const TransactionsProvider = ({ children }) => { console.log(`Success - ${transactionHash.hash}`); setIsLoading(false); - const transactionsCount = await transactionsContract.getTransactionCount(); + const transactionsCount = + await transactionsContract.getTransactionCount(); setTransactionCount(transactionsCount.toNumber()); window.location.reload(); @@ -156,6 +197,7 @@ export const TransactionsProvider = ({ children }) => { sendTransaction, handleChange, formData, + accountBalance, }} > {children}