Interact with a Solidity Smart Contract Using Ethers and the Contract ABI in SvetleKit

Instructor: [0:00] It's time to configure the client application to communicate with the blockchain and execute the smart contract features. To do that, you first need to import the ABI file generated by the smart contract compilation process. This can be found here under the contract's folder. [0:21] Just import this JSON file into your svelte code. ABI stands for Application Binary Interface. It allows the contract to communicate and interact with external applications and order a smart contracts. You can consider these to be similar to an API. The ABI works as a function selector defining the specific methods that can be called to a smart contract execution.

[0:53] This is a JSON RPC file. Now, let's back to the JavaScript code. Let's create two new variables. One to hold the smart contract address and another, to hold the smart contract reference.

[1:09] It's recommended to store the smart contract address in an environment variable to be able to easily update in the future if it is required. Do you recall that the address of the smart contract on lesson seven? You need that now.

[1:25] Let's copy the address and paste it into a secret file. Name it .emb. Create a variable, name it beat_contract_address.

[1:35] SvelteKit, thank you to Beat, offers a simple way to retrieve them by their variables by using import.meta.emb. Every variable, name it with the beat_prefix will be available to be used in the frontend. Let's create a new function and name this function as setup contract.

[2:10] This function will have two steps. Set up the contract object reference by calling ethers.contract. This method receives the contract address, the ABI code, and the provider. The set of contract function need to access the provider reference. You need to create a global variable to hold it.

[2:32] Let's write this here. Now, use the contract reference with the on method to listen for the new tip event. When the new tip event happens, it will run this callback function to update the balance of the user address. On the setup function, just call the setup contract function.

[2:55] The contract reference is created. Time to interact with the contract to retrieve information from it. Let's create a function that Reddit tips stored in the contract and render that into the UI. Here, you'll use the get all tips method from the contract to read the tips. Let's transform this data by mapping it to get better naming and then store that into a new variable.

[3:26] Create a place to render this data. This is tabular data. A table element makes sense. Let's add a table here in the UI and some style by using tailwind. Let's create the headers of this table and now into the body of the table, you'll need to look through the old tips variable to create each row.

[3:47] To render them, you need to use the each template method. The variable old tips need to be globally available to the template. Let's create all tips array here. Now, each of the items of the array is available to the item variable in the each block.

[4:07] Here, you will create the row and columns for the table. With this in place, the UI will show a new table with information from the contract. At this point, there is no tips to render. There is nothing new in the UI.

[4:23] In summary, in this lesson, you'll learn how to set up the contract reference by importing the AVI file and using the ethers.contract method. You also learn how to retrieve information from the contract by using some of the functions created in the contract. Finally, you also learn how to render information into the svelte template by using the each block.