Skip to content

Latest commit

 

History

History
109 lines (84 loc) · 3.56 KB

README.md

File metadata and controls

109 lines (84 loc) · 3.56 KB
Raw

Lesson 09

Connecting the web to the blockchain

The first step in this part of the journey, will be to setup a simple UI that allow you to connect the current user to the blockchain through it's wallet.

To do this, let's write some code.

Sveltekit applications works by using a file system routing method, meaning that you need to create files under the src/routes/ folder and those will be then reflected as routes (urls) in your app. Let's keep ti simple and just use the default route here, open src/routes/+page.svelte and delete the content of it.

You're first step will be create a button that allow the user to "sing-in" to your new dapp and allow the UI to react to that showing a different content if the authorization process was successful.

<script>
	let userAddress = null;
</script>

{#if userAddress}
	<p class="text-xl text-green-600">
		Successfullly connected with account: <strong>{userAddress}</strong>
	</p>
{:else}
	<button class="bg-blue-600 text-gray-50 shadow-md rounded-md px-3 py-8 text-center"
		>Connect with Wallet</button
	>
{/if}

This little snippet of code will render a button if the userAddress state variable is null or a message otherwise.

Let's add an function to react to the click event

<script>
	let userAddress = null;

	async function connectWallet() {}
</script>

{#if userAddress}
	<p class="text-xl text-green-600">
		Successfullly connected with account: <strong>{userAddress}</strong>
	</p>
{: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}

Now, is time to start working with the wallet. Metamask injects an object named ethereum into the global window object. So the first step is to check that window.ethereum is available. If that is true, is time to request access to the ethereum account, for that you can use the methods provided by the window.ethereum object.

window.ethereum.request({ method: 'eth_requestAccounts'} })

That will return an array of accounts that are available, pick the first one sincee that is the choosen one in Metamask, an update the state to reflect that the user is connected.

<script>
	let userAddress = null;

	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) {
				// it returns an array of accounts, it should have at least 1 element
				userAddress = accounts[0]; // update the state
			} else {
				alert('No ethereum accounts found');
			}
		} else {
			alert('No ethereum Wallet found');
		}
	}
</script>

{#if userAddress}
	<p class="text-xl text-green-600">
		Successfullly connected with account: <strong>{userAddress}</strong>
	</p>
{: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 can test this out by running the client application, go to your terminal an run

$ npm run dev

That will start a dev server, in the browser open http://localhost:5173 and you'll see the button. Now you can interact with it.