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>