feat: external navigation warning (#802)

* feat: external navigation warning * fix: apply only to metadata and non radix urls
radixdlt · Nov 2, 2023 · 26dfadf · 26dfadf
1 parent fc2d1be
commit 26dfadf
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 104 deletions.
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
   import { onMount } from 'svelte'
   import {
     accounts,
+    externalNavigationConfirmation,
     networkConfiguration,
     selectedAccount,
     storage
@@ -28,8 +29,14 @@
   import ErrorPage from '@dashboard-pages/error-page/ErrorPage.svelte'
   import { callApi } from '@api/gateway'
   import { errorPage } from '../stores'
-  import { NETWORK_CONFIG } from '@constants'
   import { PUBLIC_NETWORK_NAME } from '$env/static/public'
+  import { NETWORK_CONFIG, NON_EXTERNAL_ORIGINS } from '@constants'
+  import Dialog from '@components/_base/dialog/Dialog.svelte'
+  import ButtonNew from '@components/_base/button/ButtonNew.svelte'
+  import IconNew from '@components/_base/icon/IconNew.svelte'
+  import Cross from '@icons/cross-2.svg'
+  import External from '@icons/external-white.svg'
+  import ExternalBlack from '@icons/external-black.svg'
 
   let mounted = false
 
@@ -40,6 +47,21 @@
     $errorPage = undefined
   }
 
+  let displayNavigationWarning = false
+
+  $: if ($externalNavigationConfirmation) displayNavigationWarning = true
+
+  $: if ($externalNavigationConfirmation) {
+    if (
+      NON_EXTERNAL_ORIGINS.includes(
+        new URL($externalNavigationConfirmation.url).origin
+      )
+    ) {
+      displayNavigationWarning = false
+      $externalNavigationConfirmation.confirm(true)
+    }
+  }
+
   onMount(() => {
     callApi('getNetworkConfiguration').then((res) =>
       res.match(
@@ -137,13 +159,15 @@
   {#if mounted}
     <Layout {hideSearch} {routes}>
       <!-- svelte-ignore a11y-missing-content -->
+
       <a
         slot="logo"
         href="/"
         class="logo"
         style:background-image="url({LogoIcon})"
         style:margin-bottom="var(--spacing-lg)"
       />
+
       <div class="page">
         <div>
           {#if $errorPage}
@@ -160,6 +184,47 @@
       </div>
     </Layout>
   {/if}
+
+  <Dialog bind:open={displayNavigationWarning}>
+    <div class="external-page-warning">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div
+        on:click={() => {
+          const navigation = $externalNavigationConfirmation
+          if (navigation) navigation.confirm(false)
+          displayNavigationWarning = false
+        }}
+        class="close-icon"
+      >
+        <IconNew icon={Cross} faded />
+      </div>
+      <div class="external-icon">
+        <IconNew icon={ExternalBlack} --size="1.5rem" />
+      </div>
+
+      <h2 class="warning-title">Leaving Radix Dashboard</h2>
+
+      <p class="warning-text">
+        You are now leaving the Radix Dashboard and redirecting to {$externalNavigationConfirmation?.url}
+      </p>
+
+      <div class="button">
+        <ButtonNew
+          size="big"
+          on:click={() => {
+            const navigation = $externalNavigationConfirmation
+            if (navigation) navigation.confirm(true)
+            displayNavigationWarning = false
+          }}
+        >
+          <div class="continue-btn">
+            <IconNew icon={External} />
+            Continue
+          </div>
+        </ButtonNew>
+      </div>
+    </div>
+  </Dialog>
 </Theme>
 
 <style lang="scss" global>
@@ -189,4 +254,46 @@
     padding: var(--spacing-md);
     text-align: center;
   }
+
+  .external-page-warning {
+    display: grid;
+    grid:
+      'close     title'
+      'icon      title'
+      'content   content'
+      'button    button' / 1.5rem 1fr;
+    width: 20rem;
+    row-gap: var(--spacing-lg);
+
+    .close-icon {
+      grid-area: close;
+      cursor: pointer;
+    }
+
+    .external-icon {
+      grid-area: icon;
+      transform: translateX(-3px);
+    }
+
+    .warning-title {
+      grid-area: title;
+      align-self: end;
+      margin: 0;
+    }
+
+    .warning-text {
+      grid-area: content;
+      margin-bottom: var(--spacing-lg);
+    }
+
+    .button {
+      grid-area: button;
+      .continue-btn {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-md);
+        color: var(--theme-light);
+      }
+    }
+  }
 </style>
diff --git a/packages/ui/src/components/_base/backdrop/Backdrop.svelte b/packages/ui/src/components/_base/backdrop/Backdrop.svelte
@@ -0,0 +1,26 @@
+<script>
+  import { fade } from 'svelte/transition'
+
+  export let zIndex = 2
+  export let duration = 300
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="backdrop"
+  transition:fade={{ duration }}
+  on:click|self
+  style:z-index={zIndex}
+/>
+
+<style>
+  .backdrop {
+    backdrop-filter: blur(8px);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+</style>
diff --git a/packages/ui/src/components/_base/dialog/Dialog.stories.svelte b/packages/ui/src/components/_base/dialog/Dialog.stories.svelte
diff --git a/packages/ui/src/components/_base/dialog/Dialog.svelte b/packages/ui/src/components/_base/dialog/Dialog.svelte
@@ -1,50 +1,37 @@
 <script lang="ts">
-  import {
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    DialogDescription
-  } from '@rgossiaux/svelte-headlessui'
-  import { css } from '@styles'
-  import Box from '@components/_base/box/Box.svelte'
-  import type { config } from '@styles'
+  import { fade, scale } from 'svelte/transition'
+  import Backdrop from '../backdrop/Backdrop.svelte'
 
-  export let size:
-    | `$${(typeof config)['theme']['sizes']['4xl']}`
-    | `$${(typeof config)['theme']['sizes']['5xl']}`
-    | `$${(typeof config)['theme']['sizes']['6xl']}`
-  export let open = true
-
-  const overlay = css({
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    alpha: 0.5,
-    width: '100%',
-    height: '100%'
-  })()
+  export let open = false
 </script>
 
-<Dialog {open} on:close={() => (open = false)}>
-  <DialogOverlay class={overlay} />
-  <Box
-    cx={{
-      position: 'fixed',
-      zIndex: 1000,
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      width: size,
-      padding: '$sm',
-      borderRadius: '$md'
+{#if open}
+  <Backdrop zIndex={4} duration={200} />
+  <div
+    class="dialog card"
+    transition:scale={{
+      duration: 200
     }}
   >
-    <DialogTitle>
-      <slot name="title" />
-    </DialogTitle>
-    <DialogDescription>
-      <slot name="description" />
-    </DialogDescription>
-  </Box>
-</Dialog>
+    <slot />
+  </div>
+{/if}
+
+<style lang="scss">
+  .dialog {
+    position: fixed;
+    z-index: 1000;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--theme-surface-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-lg);
+
+    @include mixins.desktop {
+      padding: var(--spacing-xl);
+    }
+  }
+</style>
diff --git a/packages/ui/src/components/_base/link/Link.svelte b/packages/ui/src/components/_base/link/Link.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
+  import { externalNavigationConfirmation } from '@stores'
   import IconNew from '../icon/IconNew.svelte'
   import ExternalLink from '@icons/external-link.svg'
 
@@ -9,7 +10,25 @@
 </script>
 
 {#if external}
-  <a class="wrapper" href={url} target="_blank">
+  <a
+    class="wrapper"
+    href={url}
+    on:click={(e) => {
+      e.preventDefault()
+
+      const awaitConfirmation = new Promise((resolve) => {
+        $externalNavigationConfirmation = {
+          confirm: resolve,
+          url: url
+        }
+      })
+
+      awaitConfirmation.then((confirmation) => {
+        if (confirmation) window.open(url, '_blank')
+      })
+    }}
+    target="_blank"
+  >
     {text || url}
 
     <IconNew icon={ExternalLink} />

diff --git a/packages/ui/src/components/_base/side-panel/SidePanel.svelte b/packages/ui/src/components/_base/side-panel/SidePanel.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte'
-  import { fade, fly } from 'svelte/transition'
+  import { createEventDispatcher } from 'svelte'
+  import { fly } from 'svelte/transition'
+  import Backdrop from '../backdrop/Backdrop.svelte'
 
   export let open = true
   export let useBackdrop = false
@@ -21,10 +22,8 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if open}
   {#if useBackdrop}
-    <div
-      class="backdrop"
-      transition:fade={{ duration: 300 }}
-      on:click|self={() => {
+    <Backdrop
+      on:click={() => {
         dispatch('close')
       }}
     />
@@ -52,15 +51,4 @@
     overflow-y: scroll;
     padding: var(--spacing-2xl) var(--spacing-3xl);
   }
-
-  .backdrop {
-    backdrop-filter: blur(8px);
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 2;
-  }
 </style>
diff --git a/packages/ui/src/components/_base/tooltip/Tooltip.svelte b/packages/ui/src/components/_base/tooltip/Tooltip.svelte
@@ -20,9 +20,9 @@
 </script>
 
 <Popover type="info" {placement} bind:show>
-  <div 
-  on:mouseenter={() => (show = !!text && true)} 
-  on:mouseleave={() => (show = false)}
+  <div
+    on:mouseenter={() => (show = !!text && true)}
+    on:mouseleave={() => (show = false)}
   >
     <slot />
   </div>

diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
@@ -77,3 +77,5 @@ export const YEARLY_XRD_EMISSIONS = 300_000_000
 
 export const SAFE_IMAGE_SERVICE_URL =
   'https://image-service-dev.extratools.works'
+
+export const NON_EXTERNAL_ORIGINS = ['https://www.radixdlt.com']
Original file line number	Diff line number	Diff line change
Expand Up		@@ -77,3 +77,5 @@ export const YEARLY_XRD_EMISSIONS = 300_000_000

		export const SAFE_IMAGE_SERVICE_URL =
		'https://image-service-dev.extratools.works'

		export const NON_EXTERNAL_ORIGINS = ['https://www.radixdlt.com']