Merge pull request #581 from radicle-dev/jason/add-drip-list-share-bu…

…tton feat: dynamic drip list share button
drips-network · Jul 21, 2023 · 7168afc · 7168afc
2 parents 6d1b880 + 1cafcf3
commit 7168afc
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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

diff --git a/src/routes/app/(app)/component-showcase/examples/example-table.svelte b/src/routes/app/(app)/component-showcase/examples/example-table.svelte
@@ -15,15 +15,23 @@
 
   interface IncomingStreamInfo {
     name: string;
-    address: string;
+    from: {
+      address: string;
+      driver: 'address';
+      accountId: string;
+    };
     totalEarned: AmountCellData;
     amountPerSec: AmountCellData;
   }
 
   const defaultData: IncomingStreamInfo[] = [
     {
       name: 'Marketing Contributor',
-      address: '0x99505B669C6064BA2B2f26f2E4fffa5e8d906299',
+      from: {
+        address: '0x99505B669C6064BA2B2f26f2E4fffa5e8d906299',
+        accountId: '1234',
+        driver: 'address',
+      },
       totalEarned: {
         amount: {
           amount: BigInt('1000000000000000000'),
@@ -39,7 +47,11 @@
     },
     {
       name: 'Windows support for Upstream',
-      address: '0x71E686C1B95e8A1faA636Ea046b97eA985E248d0',
+      from: {
+        address: '0x71E686C1B95e8A1faA636Ea046b97eA985E248d0',
+        accountId: '1235',
+        driver: 'address',
+      },
       totalEarned: {
         amount: {
           amount: BigInt('5000000000000000000'),
@@ -55,7 +67,11 @@
     },
     {
       name: 'RAD Contributor Vesting',
-      address: '0x71E686C1B95e8A1faA636Ea046b97eA985E248d0',
+      from: {
+        address: '0x71E686C1B95e8A1faA636Ea046b97eA985E248d0',
+        accountId: '1235',
+        driver: 'address',
+      },
       totalEarned: {
         amount: {
           amount: BigInt('3000000000000000000'),
@@ -78,7 +94,7 @@
       cell: (info) => info.getValue(),
     },
     {
-      accessorKey: 'address',
+      accessorKey: 'from',
       cell: () => IdentityBadgeCell,
       header: 'From',
       enableSorting: false,