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

Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

Now the UI is capable to connect to the Ethereum network by using the wallet, but we need two more things to continue.

  1. Avoid re-connecting every time the browser is refreshed
  2. Get more information about the user and the network.

For the first, let's run a little function every time the component is mounted.

Then, let's read and display some more information:

  • The user balance
  • The network that the user is currently connected

Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here.

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: src/routes/index.svelte is called src/routes/+page.svelte

src/routes/__layout.svelte is called src/routes/+layout.svelte

Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

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.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today