Create a Form in Svelte and Send a Tip to an Solidity Smart Contract
It is time to interact with the contract, let's send some eth!
For this you'll need a form that is rendered only when the wallet is connected.
This form use the sendTip function and gather some required information. On submit, it will read the sendingTip loading state variable and disable or enable the button.
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] Let's put the smart contract to work. In order to allow the users of your application to send a tip, you'll need to add a form to collect the data and send it over to the contract to interact with the blockchain. [0:19] Let's write a simple form using just HTML and tailwind to add some styling. The only svelte thing that you add to this form is a way to disable the button when the form is sending the data by checking a flag variable name of sending tip. This form will use a new function named send tip.
[0:45] Now, to be able to send the form data to the smart contract, you'll need to capture the answer of meet event from the form and pass that into a new function named Send Tip. Let's write the function now. The first step in this function is to toggle the sending tip flag. The button will be disabled.
[1:12] Then it will read the form data. In setup, I read write reference of the contract. It will use this reference to access the send tip method of the smart contract to create a transaction variable. This function call will use the data that comes from the form, the message, the name, and the amount of eth to be send.
[1:42] You need to parse this value to be a valid eth value, then just wait for the transaction to be done. If the transaction is successful, the new tip event will be triggered. Since your front-end code is listening for it, you'll be able to update the tips and loading states.
[2:07] Let's try out. By clicking this button, MetaMask will show up to ask for a confirmation. After the mining process is done, the UI will update by clean the form data and rendering the new tip in the table. That is your contract can now accept tips from anywhere and anyone with an Ethereum account.
[2:37] Nice, right? In this lesson, you learn how to send information from the decentralized application to on a smart contract to store that information in the blockchain and retrieve it back to display it in the UI.