chore: lint

src/app.d.ts

@@ -11,11 +11,14 @@ declare namespace App {
 
 declare const VITE_APP_VERSION: string;
 
-// eslint window checks for custom events
+/* eslint-disable */
+
 declare namespace svelteHTML {
 	interface HTMLAttributes {
-		'on:submit'?: (event: CustomEvent) => void;
-		'on:openAddCanister'?: (event: CustomEvent) => void;
-		'on:addCanister'?: (event: CustomEvent) => void;
+		onopenAddCanister?: (event: CustomEvent<any>) => void;
+		onaddCanister?: (event: CustomEvent<any>) => void;
+		onaddSnsCanister?: (event: CustomEvent<any>) => void;
 	}
 }
+
+/* eslint-enable */

src/lib/components/canisters/CanisterEdit.svelte

@@ -15,7 +15,7 @@
 	let validConfirm = false;
 	let saving = false;
 
-	const handleSubmit = async ($event: MouseEvent | TouchEvent) => {
+	const handleSubmit = async ($event: SubmitEvent) => {
 		$event.preventDefault();
 
 		if (!validConfirm || canisterName === undefined || canisterName === '') {
@@ -38,12 +38,19 @@
 	$: validConfirm = canisterName !== undefined && canisterName !== '';
 </script>
 
-<button on:click|stopPropagation={() => (visible = true)} aria-label="Edit" class="toolbar small">
+<button
+	onclick={($event) => {
+		$event.stopPropagation();
+		visible = true;
+	}}
+	aria-label="Edit"
+	class="toolbar small"
+>
 	<IconEdit size="small" />
 </button>
 
 <Popover bind:visible center>
-	<form class="container" on:submit={async ($event) => await handleSubmit($event)}>
+	<form class="container" onsubmit={handleSubmit}>
 		<label for="canisterName">Canister name</label>
 
 		<input

src/lib/components/canisters/CanisterId.svelte

@@ -19,7 +19,7 @@
 		canisterId !== '' &&
 		$canistersUniqueGroups.find(({ id }: Canister) => id === canisterId) === undefined;
 
-	const handleSubmit = async ($event: MouseEvent | TouchEvent) => {
+	const handleSubmit = async ($event: SubmitEvent) => {
 		$event.preventDefault();
 
 		if (!validConfirm || canisterId === undefined) {
@@ -34,7 +34,7 @@
 
 <slot />
 
-<form on:submit={async ($event) => await handleSubmit($event)}>
+<form onsubmit={handleSubmit}>
 	<input
 		bind:value={canisterId}
 		type="text"

src/lib/components/canisters/CanisterName.svelte

@@ -21,9 +21,6 @@
 		margin: 0;
 	}
 
-	.canister-id {
-	}
-
 	.name {
 		min-height: 1.2rem;
 		margin-bottom: 0.15rem;

src/lib/components/core/Back.svelte

@@ -5,7 +5,7 @@
 
 <nav>
 	<button class="toolbar" on:click={async () => await back()} title="Back">
-		<IconBack slot="icon" />
+		<IconBack />
 		<span class="visually-hidden">Back</span>
 	</button>
 </nav>

src/lib/components/core/SignIn.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import IconInternetComputer from '$lib/components/icons/IconInternetComputer.svelte';
 	import { signIn } from '@junobuild/core';
+
+	const onclick = async () => await signIn();
 </script>
 
-<button type="button" on:click={signIn} class="primary">
+<button type="button" {onclick} class="primary">
 	<IconInternetComputer />
 	Continue with Internet Identity
 </button>

src/lib/components/core/Worker.svelte

@@ -45,6 +45,6 @@
 		})();
 </script>
 
-<svelte:window on:addCanister={addCanister} on:addSnsCanister={addSnsCanister} />
+<svelte:window onaddCanister={addCanister} onaddSnsCanister={addSnsCanister} />
 
 <slot />

src/lib/components/overlays/Add.svelte

@@ -32,7 +32,7 @@
 	$: back = step !== 'type';
 </script>
 
-<svelte:window on:openAddCanister={() => (open = true)} />
+<svelte:window onopenAddCanister={() => (open = true)} />
 
 {#if open}
 	<Modal on:papyClose={onClose} on:papyBack={onBack} {back}>

src/lib/components/ui/Button.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
+	import { nonNullish } from '$lib/utils/utils';
 
 	export let display: 'inline' | 'card' = 'card';
 	export let text: string;
 
-	export let icon: Component;
+	export let icon: Component | undefined = undefined;
 
 	export let card = true;
 	$: card = display === 'card';
 </script>
 
 <div class={card ? 'card' : 'inline'}>
 	<button type="button" class={card ? 'toolbar' : 'primary'} title={text} on:click>
-		<svelte:component this={icon} slot="icon" />
+		{#if nonNullish(icon)}
+			<svelte:component this={icon} slot="icon" />
+		{/if}
 		<span class={card ? 'visually-hidden' : ''}>{text}</span>
 	</button>
 

src/lib/components/ui/Modal.svelte

@@ -79,6 +79,8 @@
 		position: absolute;
 		inset: 0;
 
+		@include overlay.backdrop-button;
+
 		@include overlay.backdrop('light');
 
 		@include interaction.tappable;