From 1cafcf35a5898162bbbbae0953a18f1f94f86571 Mon Sep 17 00:00:00 2001
From: Georgios Jason Efstathiou <j@jason-e.dev>
Date: Fri, 21 Jul 2023 13:35:48 +0200
Subject: [PATCH] feat: dynamic share button on drip lists

---
 .../drip-list-card/drip-list-card.svelte      |  2 +
 .../share-button/share-button.svelte          | 79 +++++++++++++++++++
 .../app/(app)/component-showcase/+page.svelte |  5 ++
 3 files changed, 86 insertions(+)
 create mode 100644 src/lib/components/share-button/share-button.svelte

diff --git a/src/lib/components/drip-list-card/drip-list-card.svelte b/src/lib/components/drip-list-card/drip-list-card.svelte
index fa5c60ded..df07dd43e 100644
--- a/src/lib/components/drip-list-card/drip-list-card.svelte
+++ b/src/lib/components/drip-list-card/drip-list-card.svelte
@@ -23,6 +23,7 @@
   import StreamStateBadge from '../stream-state-badge/stream-state-badge.svelte';
   import formatTokenAmount from '$lib/utils/format-token-amount';
   import tokensStore from '$lib/stores/tokens/tokens.store';
+  import ShareButton from '../share-button/share-button.svelte';
 
   export let dripList: DripList;
   export let representationalSplits: RepresentationalSplits;
@@ -74,6 +75,7 @@
   <div class="header">
     <h1>{dripList.name}</h1>
     <div class="actions">
+      <ShareButton url="https://drips.network/app/drip-lists/{dripList.account.accountId}" />
       {#if isOwnList}
         <Button on:click={triggerEditModal} icon={Pen}>Edit list</Button>
       {/if}
diff --git a/src/lib/components/share-button/share-button.svelte b/src/lib/components/share-button/share-button.svelte
new file mode 100644
index 000000000..b4b3abc78
--- /dev/null
+++ b/src/lib/components/share-button/share-button.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import LinkIcon from 'radicle-design-system/icons/Link.svelte';
+  import ShareIcon from 'radicle-design-system/icons/Sharrow.svelte';
+  import CopyIcon from 'radicle-design-system/icons/Copy.svelte';
+  import CheckCircle from 'radicle-design-system/icons/CheckCircle.svelte';
+  import { fade } from 'svelte/transition';
+
+  export let text: string | undefined = undefined;
+  export let url: string;
+
+  let shareSupported = browser && navigator.share;
+
+  function handleClick() {
+    if (shareSupported) {
+      navigator.share({
+        text,
+        url,
+      });
+    } else {
+      // Copy URL to clipboard
+      navigator.clipboard.writeText(url);
+
+      copySuccess = true;
+      setTimeout(() => (copySuccess = false), 1000);
+    }
+  }
+
+  let hovering = false;
+  let copySuccess = false;
+</script>
+
+{#if shareSupported}
+  <button on:click={handleClick}>
+    <ShareIcon />
+  </button>
+{:else}
+  <button
+    on:mouseenter={() => (hovering = true)}
+    on:focus={() => (hovering = true)}
+    on:mouseleave={() => (hovering = false)}
+    on:blur={() => (hovering = false)}
+    on:click={handleClick}
+    class:copy-success={copySuccess}
+  >
+    {#if copySuccess}
+      <div transition:fade|local={{ duration: 200 }}>
+        <CheckCircle style="fill: var(--color-positive)" />
+      </div>
+    {:else if hovering}
+      <div transition:fade|local={{ duration: 200 }}>
+        <CopyIcon style="fill: var(--color-primary-level-6)" />
+      </div>
+    {:else}
+      <div transition:fade|local={{ duration: 200 }}><LinkIcon /></div>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  button {
+    height: 2rem;
+    width: 2rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    border-radius: 1rem;
+  }
+
+  button > * {
+    position: absolute;
+  }
+
+  button:hover:not(.copy-success),
+  button:focus-visible:not(.copy-success) {
+    background-color: var(--color-primary-level-1);
+  }
+</style>
diff --git a/src/routes/app/(app)/component-showcase/+page.svelte b/src/routes/app/(app)/component-showcase/+page.svelte
index adb83ad5a..4a4fde1e4 100644
--- a/src/routes/app/(app)/component-showcase/+page.svelte
+++ b/src/routes/app/(app)/component-showcase/+page.svelte
@@ -26,6 +26,7 @@
   import SplitsIcon from 'radicle-design-system/icons/Splits.svelte';
   import DripsLogo from '$lib/components/header/drips-logo.svelte';
   import HeadMeta from '$lib/components/head-meta/head-meta.svelte';
+  import ShareButton from '$lib/components/share-button/share-button.svelte';
 
   // Button
   let disabled = false;
@@ -231,6 +232,10 @@
 
 <h1>Component showcase</h1>
 
+<div class="showcase-item">
+  <ShareButton url="https://wikipedia.com/" text="Check this out:" />
+</div>
+
 <div class="showcase-item">
   <h2>Visual Percentage Editor</h2>
   <VisualPercentageEditor