Retrieve Ethereum Network and Account information on Mount and Display it in Svelte

Instructor: [0:00] Now, the UI of your application is capable of connecting to the blockchain network using the wallet, but there are two more things to do before continuing -- avoid reconnecting every time the browser refresh and retrieve more information about the user and the network. [0:23] For the first point, let's add a function that you'll run every time the component is mounted. This can be done by using the Svelte lifecycle function onMount(). This function will run after the component is first rendered in the DOM. Let's write the function.

[0:45] First, check if the Ethereum object is available. Then, request access to the user's account using the window.ethereum.request and retrieve the first account selected. You maybe notice that there are two different request methods -- eth_accounts and eth_requestAccounts.

[1:10] The eth_requestAccounts is used to cause the wallet to pop up, to ask the user to allow the request. You should only request user's account access in response to user actions like clicking on a button. The other method is just a way to return the list of addresses owned by the user.

[1:33] After you connect for the first time, if you refresh the browser, the connection will still be available. Let's check it out. Disconnect, connect again, refresh the browser, and you can see that the user address information is still available.

[1:55] Let's create a couple of state variables to store more information -- the network, the balance, and a Boolean to know if the connection is available or not back at the onMount block.

[2:15] Let's retrieve information from the provider. For this, you'll use a new method, ethers.providers.Web3Provider. This will give you access to the blockchain provider object, allowing you to retrieve more information like the network data and the user balance.

[2:38] To get the network, you'll use the getNetwork() function. For the balance, you'll use the getBalance() function with the user address as a variable.

[2:52] Let's display the information in the HTML template. You'll show the network name and the current balance for the selected account. To do this, you'll need to format the balance value to make it readable. This value comes as a big number, and you need to parse it to make it readable by using the formatEther() function from the ethers CES package.

[3:19] Now, the value is readable for every user, as you can see here, but there is an issue with this piece of code. The same logic is also required when the user connects for the first time in the ConnectWallet function. You have duplicate code, but you can extract this code to its own function and reuse it.

[3:44] Let's write a new function, let's name it setup() and move the logic from the onMount block into here. Then, call this new function into the ConnectWallet and onMount blocks.

[4:04] Finally, let's add a bit of a styling to the application. In a SvelteKit application, you can wrap the entire page into a layout. In this file, you can see that there is a slot element.

[4:22] This is basically a placeholder where the components of a certain route will be rendered. If you want to add a global style to the application, you'll need to wrap the slot component with some container. In this case, you'll add a div element, and by using Tailwind, you can define a better-looking layout.

[4:49] In summary, in this lesson you learned how to run a function every time the application refresh, or the component mount, retrieve information from the blockchain provider, and display this information on the page in a readable way.