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>