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.

Send a tip!

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.

<form
	class="w-2/3 mx-auto border rounded-md border-indigo-200 flex flex-col gap-8 p-6 mt-4"
	on:submit|preventDefault={sendTip}
>
	<div class="grid grid-cols-2">
		<label for="tipAmount"> Send me an ethereum tip! </label>
		<input type="string" name="amount" placeholder="0.001" />
	</div>
	<div class="grid grid-cols-2">
		<label for="tipName"> Your name </label>
		<input type="text" name="name" placeholder="Name" />
	</div>
	<div class="grid grid-cols-2">
		<label for="tipMessage"> A quick message </label>
		<input type="text" name="message" placeholder="Message" />
	</div>
	<button
		disabled={sendingTip}
		type="submit"
		class="bg-green-500 text-gray-50 shadow-md rounded-md px-2 py-2 text-center w-1/3 self-center hover:bg-green-600"
		>{#if sendingTip} Sending... {:else} Send a tip! {/if}</button
	>
</form>

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

Let's setup the sendTip function

async function sendTip(event) {
		sendingTip = true; // update the loading state
		const formData = new FormData(event.target); // read the form data
		const data = {};
		for (let field of formData) {
			const [key, value] = field;
			data[key] = value;
		}
		// perform the transaction
		// get the signer of the transaction and a read-write instance of the contract
		const rwContract = new ethers.Contract(contractAddress, TipJarABI.abi, provider.getSigner());
		const transaction = await rwContract.sendTip(data.message, data.name, {
			value: ethers.utils.parseEther(data.amount)
		});
		await transaction.wait(); // wait for the tranmsaction to be done.

When the trasnaction is successful, the NewTip event will be triggerd and you can re-read the tips there and also update the loading state.

By clicking the Send a tip! button, Metamask should popup to ask you form confirmation like this

And after the mining process is done, the UI will update cleaning the form and rendering the new tip in the table.

That's is!.. Your contract is now able to accept tips from anywhere and anyone with an Ethereum account. Nice right?

Now.. how can you withdraw that eth?