Withdraw eth from a Smart Contract in a Svelte Application
Now that we have an application that is accepting tips to the smart contract that was defined, we need to be able to withdraw the funds that are sent to the contract. The smart contract function for this is already defined so we will just need to call the function from the front end.
To do this we will create a new route to display the contract information. We will then check if the current user is the contract owner and if so allow that user to withdraw the contract funds by clicking a button that we wire up to call the withdraw function from the smart contract.
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] The UI of your application is now capable of accepting tips from your users, but that is not all that the smart contract can do. You also need to be able to withdraw the funds to your account, right? [0:16] To accomplish this feature, in the UI, you need first to create a new route. In SvelteKit, this is done by creating a new file under the routes folder. Let's name this file as withdraw.svelte. Now, let's update the layout of the application by editing the layout file to add a menu, create two list item here with anchors to the home page, and the withdraw route.
[0:47] Finally, just rub around the slot with a new container to make it a bit prettier. Save it. You can now see that the UI have these two links at the top that allow you to navigate through the different routes.
[1:04] Let's back to the index file. Copy the entire code of this, because you'll use pretty much the same logic and paste it into the withdraw.svelte file. Let's get rid of this form since it will not be used here.
[1:22] Back to the JavaScript code on top, create a state variable name Am I the Owner. Now, in the setup contract function, let's get the contract owner using the contract.owner function. Let's compare this value with the user address using the ethers.getaddress function.
[1:47] To check if the current user of the application is actually the owner of the contract, you'll use this flag to enable or disable the process. Also, let's update this listener to use the new withdrawal event instead of the new tips. Remember that in the contract, you created a new event named new withdrawal.
[2:13] This is fine when the withdrawal happens. Inside the callback function for the event, you'll be able to update the contract balance. For this, you need to add a state variable here named contract balance and another one that is named as is withdrawing, a flag to know what is the state of the process.
[2:38] In the callback let's get the contract balance by using the provider, .getBalance and just passing the contract address. Also, update the user balance in the same way.
[2:54] Since this event happens when the withdrawal ends, let's just update the flag too. You can get rid of the sendTip function, update the setup function too. Let's retrieve the contract balance so that you can display it on first render.
[3:13] Now, down here, is time to write the withdraw function. Just create a simple function. First, check if the user is already connected. Inside here, let's update the is withdrawing state variable and create a read/write reference of the contract in the same way you did before by passing the signal as a third argument.
[3:40] Perform the transaction by accessing the withdraw function from the contract and wait for it to be done. Don't forget to add the async keyword here.
[3:53] Let's finish the updates to the UI. This page look different to the home page. Add a new title here, so you can differentiate from the rest of the application. Create a container and move everything into it.
[4:11] Add a new list item to show the contract balance. Remember that only the owner of the contract can withdraw, so you need to check if the current user is the owner. Also, check if the balance is bigger than zero. You'll only be able to withdraw, if the contract balance is more than zero. If it's not, let's just display a message at the bottom to allow the user to perform the withdrawal.
[4:42] At the onClick event of this button, add a reference to the withdraw function. Also, disable the bottom, if he's withdrawing or if the contract balance is zero.
[4:52] Finally, add the ternary here to change the text of the button depending on the flag state. If the user is not the owner, render a message saying that only the owner of the contract can withdraw the balance. Save it.
[5:09] You can see that the message immediately shows up. Since I'm connected with the local fake user, change this to the contract owner account. Now, I have access to the withdraw button. You can see the user current balance and the current contract balance. That is three eth.
[5:29] Click the button, confirm the transaction. Now, the UI reflects the change. The balance of the contract is zero and the user balance is bigger. In summary, in this lesson, you learn how to retrieve the owner of the contract and compare it with the current user, how to perform the withdraw function, and also how to update the UI using different eth logs.