Connect a Metamask Account to a Svelte Application
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/index.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.
Instructor: [0:00] Now that your smart contract is done, it's time to work on the front-end application for it. In this case, you'll work with SvelteKit. The first step in this part of your journey is to implement a simple UI that allows the application to connect the current user to the blockchain using the wallet. [0:23] Let's write some code. SvelteKit applications work by using a file system routing strategy. It means that you need to create files under the routes folder, and those will be then reflected as URLs in your application. Let's keep it simple and just use the default route here and delete its contents.
[0:47] Let's create first a button that will allow the user to sign in into your application and enable the UI to react to that change, showing a different content. If the authorization process was successful, this little snippet of code will render a button if the user's address state variable is null or a message otherwise.
[1:14] Let's add now a function to react to the click event. This function will be named as connectWallet() and will be associated with the button element using the onclick action. Now, it's time to start working with the wallet.
[1:31] MetaMask injects an object named Ethereum into the global window object. The first step is to check that the window.ethereum is available. If that's true, it's time to request access to the Ethereum account. For that, you can use the method provided by the window.ethereum object.
[1:55] To retrieve accounts available, you'll use the request method, parsing the string eth.request(accounts) as action. This will return an array of accounts. Choose the first one, since that is the one selected in MetaMask, and update the state to reflect that the user is connected.
[2:17] Don't forget that in Svelte, the state update is done just by assigning a new value to a certain variable. Save it. You can test this out by checking your application. Don't forget to set the onClick action at the bottom and pass the connectWallet function.
[2:37] Remember, you have to keep this running in a terminal with npm run dev. Click on the button. You'll see that MetaMask pop-up shows up asking to allow the connection to be accepted. You can see that the application UI reflects that change by rendering the user account.
[2:58] In this lesson, you learned how to request access to the user's wallet and to add this interaction to the Svelte application.