Course lesson
Now the UI is capable to connect to the Ethereum network by using the wallet, but we need two more things to continue.
Now the UI is capable to connect to the Ethereum network by using the wallet, but we need two more things to continue.
For the first, let's run a little function every time the component is mounted.
Then, let's read and display some more information:
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.
Now the UI is capable to connect to the Ethereum network by using the wallet, but we need two more things to continue.
For the first, let's run a little function every time the component is mounted.
onMount(async () => {
if (window.ethereum) {
const accounts = await window.ethereum.request({ method: 'eth_accounts' }); // Just get the accounts but without permissions
if (accounts.length > 0) {
userAddress = accounts[0]; // Update the userAddress state variable
}
}
});Now, let's read some more information like:
Let's add this as state variables too
let network = null;
let balance = null;
let isConnected = false;
onMount(async () => {
if (window.ethereum) {
const accounts = await window.ethereum.request({ method: 'eth_accounts' }); // Just get the accounts but without permissions
if (accounts.length > 0) {
userAddress = accounts[0]; // Update the userAddress state variable
const provider = new ethers.providers.Web3Provider(window.ethereum);
network = await provider.getNetwork();
balance = await provider.getBalance(userAddress);
isConnected = true;
}
}
});The only issue with this is that the same actions we added when the user re-load the page are required to be done when the user connect the wallet for the first time connectWallet function.
So we can extract this code to it's own function an reuse it.
async function connectWallet() {
if (window.ethereum) {
// ethereum is an object injected by the wallet. Let's check if is available
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); // use the request method to get the accounts, aka logging in to Metamask
if (accounts.length > 0) {
await setup(accounts);
} else {
alert('No ethereum accounts found');
}
} else {
alert('No ethereum Wallet found');
}
}
// Let's avoid clicking connect every time and check if the wallet was already connected
onMount(async () => {
if (window.ethereum) {
const accounts = await window.ethereum.request({ method: 'eth_accounts' }); // get the accounts
if (accounts.length > 0) {
await setup(accounts);
}
}
});
async function setup(accounts) {
userAddress = accounts[0]; // update the state
// Get and update the ethereum provider
const provider = new ethers.providers.Web3Provider(window.ethereum);
network = await provider.getNetwork();
balance = await provider.getBalance(userAddress);
isConnected = true;
}Now let's display the information in the HTML.
Here you'll show the network name and the current balance for the account. To do that you'll need to format the value (that comes like a BigNumber) into a readable number by using formatEther function from ethers.js utilities
{#if isConnected}
<p class="text-xl text-green-600">
Successfullly connected with account: <strong>{userAddress}</strong>
</p>
<ul>
<li>Current Network: {network.name}</li>
<li>Your current balance: {ethers.utils.formatEther(balance)} eth</li>
</ul>
{:else}
<button
class="bg-blue-600 text-gray-50 shadow-md rounded-md px-3 py-8 text-center"
on:click={connectWallet}>Connect with Wallet</button
>
{/if}You may be wondering why the different request methiods eth_accounts vs eth_requestAccounts
eth_requestAccounts This request cause the wallet to popup to ask the user to allow the request. You should only request user's accounts in response to user actions like a button click.eth_accounts Just return the list of addresses owned by the client.Course lesson
Now the UI is capable to connect to the Ethereum network by using the wallet, but we need two more things to continue.