modal

wighawag · Jan 16, 2024 · d5be77b · d5be77b
1 parent 4b6b59a
commit d5be77b
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 33 deletions.
diff --git a/web/src/lib/components/modals/Modals.svelte b/web/src/lib/components/modals/Modals.svelte
@@ -96,14 +96,17 @@
 		height: 100%;
 		background-color: black;
 		opacity: 0.6;
-
-		/* display: grid;
-		place-content: center;
-		grid-template-columns: 1fr; */
 	}
 
 	.modal {
-		background-color: red;
+		background-color: var(--color-background-base-300);
+		border-radius: 1rem;
+		padding: 1rem;
+
+		display: grid;
+		place-content: center;
+		grid-template-columns: 1fr;
+		text-align: center;
 
 		position: fixed;
 

diff --git a/web/src/lib/web3/NeedAWallet.svelte b/web/src/lib/web3/NeedAWallet.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import Modal from '$lib/components/modals/Modal.svelte';
+	import {url} from '$lib/utils/path';
+	import {connection} from '.';
+</script>
+
+<Modal onResponse={() => connection.cancel()}>
+	<div class="title">You need to a web3 wallet to continue</div>
+	<div class="download">
+		<a href="https://metamask.io/download.html" class="button primary">
+			<img alt={`Download Metamask}`} src={url('/images/wallets/metamask.svg')} />
+			Download metamask
+		</a>
+	</div>
+</Modal>
+
+<style>
+	.title {
+		text-align: center;
+	}
+
+	.download {
+		display: flex;
+		justify-content: center;
+	}
+
+	.download a {
+		margin: 1rem;
+		width: max-content;
+		height: 3rem;
+	}
+	.download img {
+		object-fit: contain;
+		padding: 0;
+		margin-left: 0.5rem;
+		margin-right: 0.5rem;
+		width: 2.5rem;
+		height: 2.5rem;
+		cursor: pointer;
+	}
+</style>
diff --git a/web/src/lib/web3/Web3AccountInfo.svelte b/web/src/lib/web3/Web3AccountInfo.svelte
@@ -19,22 +19,35 @@
 {#if $account.loadingStep}
 	{#if $account.loadingStep.id == 'SIGNING'}
 		<Modal>
-			<h3 class="text-lg font-bold">Welcome to Jolly-Roger</h3>
-			<p class="py-4">Sign the message to access to your data.</p>
+			<h3 class="title">Welcome to Jolly-Roger</h3>
+			<p class="message">Sign the message to access to your data.</p>
 			<div class="modal-action">
-				<button on:click={() => account.rejectLoadingStep()} class="btn btn-error">Cancel</button>
+				<button on:click={() => account.rejectLoadingStep()} class="button error">Cancel</button>
 			</div>
 		</Modal>
 	{:else if $account.loadingStep.id == 'WELCOME'}
 		<AccountSignIn {account} />
 	{:else}
 		<Modal>
-			<h3 class="text-lg font-bold">{$account.loadingStep.id}</h3>
-			<p class="py-4">{$account.loadingStep.id}</p>
+			<h3 class="title">{$account.loadingStep.id}</h3>
+			<p class="message">{$account.loadingStep.id}</p>
 			<div class="modal-action">
-				<button on:click={() => account.rejectLoadingStep()} class="btn btn-error">Cancel</button>
-				<button on:click={() => account.acceptLoadingStep()} class="btn">Continue</button>
+				<button on:click={() => account.rejectLoadingStep()} class="button error">Cancel</button>
+				<button on:click={() => account.acceptLoadingStep()} class="button success">Continue</button>
 			</div>
 		</Modal>
 	{/if}
 {/if}
+
+<style>
+	.title {
+		font-size: 1.125rem;
+		line-height: 1.75rem;
+		font-weight: 700;
+	}
+
+	.message {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>
diff --git a/web/src/lib/web3/Web3ConnectionError.svelte b/web/src/lib/web3/Web3ConnectionError.svelte
@@ -6,12 +6,19 @@
 	import Alert from '$lib/components/alert/Alert.svelte';
 	import {url} from '$lib/utils/path';
 	import {resetIndexer} from '$lib/blockchain/state/State';
+	import NeedAWallet from './NeedAWallet.svelte';
 
 	const builtin = connection.builtin;
+
+	$: console.log($connection.error);
 </script>
 
 {#if $connection.error}
-	<Alert data={$connection.error} onClose={connection.acknowledgeError} />
+	{#if $connection.error.id === 'NoBuiltinWallet'}
+		<NeedAWallet />
+	{:else}
+		<Alert data={$connection.error} onClose={connection.acknowledgeError} />
+	{/if}
 {:else if $network.nonceCached === 'BlockOutOfRangeError' || $network.genesisNotMatching || $network.blocksCached}
 	<AlertWithSlot>
 		<p class="main-message">

diff --git a/web/src/lib/web3/Web3Executing.svelte b/web/src/lib/web3/Web3Executing.svelte
@@ -13,8 +13,8 @@
 {#if $execution.executing}
 	{#if $network.notSupported}
 		<Modal cancelation={{cancelable: false}}>
-			<h3 class="text-lg font-bold">You are connected to unsupported network</h3>
-			<p class="py-4">
+			<h3 class="title">You are connected to unsupported network</h3>
+			<p class="message">
 				Proceed to switch to {getNetworkConfig($contractsInfos.chainId)?.chainName ||
 					`the network with chainID: ${$contractsInfos.chainId}`}.
 			</p>
@@ -23,11 +23,11 @@
 					on:click={async () => {
 						await execution.cancel();
 					}}
-					class="btn btn-error">Cancel</button
+					class="button error">Cancel</button
 				>
 				<button
 					on:click={() => network.switchTo($contractsInfos.chainId, getNetworkConfig($contractsInfos.chainId))}
-					class="btn">Switch</button
+					class="button success">Switch</button
 				>
 			</div>
 		</Modal>
@@ -36,20 +36,33 @@
 		<!-- TODO account need to be connected -->
 	{:else if $account.state === 'Disconnected' && !$account.unlocking}
 		<Modal cancelation={{cancelable: false}}>
-			<h3 class="text-lg font-bold">To proceed, you need to connect to a wallet.</h3>
+			<h3 class="title">To proceed, you need to connect to a wallet.</h3>
 			<div class="modal-action">
 				<button
 					on:click={async () => {
 						await execution.cancel();
 					}}
-					class="btn btn-error">Cancel</button
+					class="button error">Cancel</button
 				>
 				<button
 					disabled={$connection.connecting}
-					class={`${$connection.initialised ? '' : '!invisible'} m-1 btn btn-primary`}
+					class={`${$connection.initialised ? '' : '!invisible'} m-1 button primary`}
 					on:click={() => connection.connect()}>{$connection.connecting ? 'Connecting' : 'Connect'}</button
 				>
 			</div>
 		</Modal>
 	{/if}
 {/if}
+
+<style>
+	.title {
+		font-size: 1.125rem;
+		line-height: 1.75rem;
+		font-weight: 700;
+	}
+
+	.message {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>
diff --git a/web/src/lib/web3/Web3PendingActions.svelte b/web/src/lib/web3/Web3PendingActions.svelte
@@ -33,11 +33,11 @@
 		cancelation={{button: true, clickOutside: false}}
 	>
 		{#if $pendingActions.list[0].item.metadata && $pendingActions.list[0].item.metadata.title}
-			<h3 class="text-lg font-bold">
+			<h3 class="title">
 				{$pendingActions.list[0].item.metadata.title}
 			</h3>
 		{/if}
-		<p class="py-4">
+		<p class="message">
 			{#if $pendingActions.list[0].item.metadata && $pendingActions.list[0].item.metadata.description}
 				{$pendingActions.list[0].item.metadata.description}
 			{:else}
@@ -46,3 +46,16 @@
 		</p>
 	</Modal>
 {/if}
+
+<style>
+	.title {
+		font-size: 1.125rem;
+		line-height: 1.75rem;
+		font-weight: 700;
+	}
+
+	.message {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>
diff --git a/web/src/lib/web3/Web3WalletSelection.svelte b/web/src/lib/web3/Web3WalletSelection.svelte
@@ -42,34 +42,72 @@
 
 {#if $connection.requireSelection}
 	<Modal onResponse={() => connection.cancel()}>
-		<div class="text-center">
+		<div class="title">
 			<p>How do you want to connect ?</p>
 		</div>
-		<div class="flex flex-wrap justify-center pb-3">
+		<div class="options-list">
 			{#each options as option}
 				<!-- TODO handle a11y-->
 				<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions
 permalink-->
 				<img
-					class="cursor-pointer p-2 m-2 border-2 h-12 w-12 object-contain"
 					alt={`Login with ${option.name}`}
 					src={url(`/${option.img}`)}
 					on:click={() => connection.select(option.id)}
 				/>
 			{/each}
 		</div>
 		{#if builtinNeedInstalation}
-			<div class="text-center">OR</div>
-			<div class="flex justify-center">
-				<a href="https://metamask.io/download.html" class="m-4 w-max-content btn btn-primary">
-					<img
-						class="cursor-pointer p-0 mx-2 h-10 w-10 object-contain"
-						alt={`Download Metamask}`}
-						src={url('/images/metamask.svg')}
-					/>
+			<div class="title">OR</div>
+			<div class="download">
+				<a href="https://metamask.io/download.html" class="button primary">
+					<img alt={`Download Metamask}`} src={url('/images/wallets/metamask.svg')} />
 					Download metamask
 				</a>
 			</div>
 		{/if}
 	</Modal>
 {/if}
+
+<style>
+	.title {
+		text-align: center;
+	}
+
+	.options-list {
+		display: flex;
+		padding-bottom: 0.75rem;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.options-list img {
+		object-fit: contain;
+		padding: 0.5rem;
+		margin: 0.5rem;
+		width: 3rem;
+		height: 3rem;
+		border-width: 2px;
+		cursor: pointer;
+	}
+
+	.download {
+		display: flex;
+		justify-content: center;
+	}
+
+	.download a {
+		margin: 1rem;
+		width: max-content;
+		height: 3rem;
+	}
+	.download img {
+		object-fit: contain;
+		padding: 0;
+		margin-left: 0.5rem;
+		margin-right: 0.5rem;
+		width: 2.5rem;
+		height: 2.5rem;
+		cursor: pointer;
+	}
+</style>