style: use drip-list-badge in streams table (closes #700)

src/lib/components/drip-list-badge/drip-list-badge.svelte

@@ -3,53 +3,51 @@
   import ensStore from '$lib/stores/ens';
   import formatAddress from '$lib/utils/format-address';
 
-  export let listName: string;
   export let listId: string;
-  export let owner: string;
+  export let listName: string | undefined = undefined;
+  export let owner: string | undefined = undefined;
 
-  export let showAvatar = true;
-  export let showName = true;
   export let isLinked = true;
+  export let showAvatar = true;
+  export let avatarSize: 'small' | 'default' = 'default';
 
-  $: ensStore.connected && ensStore.lookup(owner);
-  $: ens = $ensStore[owner];
-
-  $: username = ens?.name ? ens.name : formatAddress(owner);
+  // lookup ens name if owner is provided
+  $: owner && ensStore.connected && ensStore.lookup(owner);
+  $: ens = owner ? $ensStore[owner] : {};
+  $: username = ens?.name || (owner && formatAddress(owner));
 </script>
 
 <svelte:element
   this={isLinked ? 'a' : 'div'}
   href={isLinked ? `/app/drip-lists/${listId}` : undefined}
   tabindex={isLinked ? 0 : -1}
-  class="drip-list-badge flex gap-2 items-center"
+  class="drip-list-badge outline-none flex gap-2 items-center"
 >
   {#if showAvatar}
-    <div class="drip-list-icon">
-      <DripListIcon style="fill: var(--color-primary)" />
+    <div
+      class="flex items-center justify-center rounded-full flex-shrink-0 bg-primary-level-1 {avatarSize ===
+      'small'
+        ? 'w-6 h-6'
+        : 'w-8 h-8'}"
+    >
+      <DripListIcon
+        style="fill: var(--color-primary); {avatarSize === 'small'
+          ? 'width:18px; height:18px;'
+          : ''}"
+      />
     </div>
   {/if}
-  {#if showName}
+  {#if listName}
     <div class="name typo-text text-foreground flex-1 min-w-0 truncate">
-      <span><span class="text-foreground-level-5">{username}/</span>{listName}</span>
+      <span
+        >{#if username}<span class="text-foreground-level-5">{username}/</span
+          >{/if}{@html listName}</span
+      >
     </div>
   {/if}
 </svelte:element>
 
 <style>
-  .drip-list-icon {
-    background-color: var(--color-primary-level-1);
-    height: 2rem;
-    width: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 1rem;
-    flex-shrink: 0;
-  }
-
-  a.drip-list-badge {
-    outline: none;
-  }
   a.drip-list-badge:focus-visible .name > span {
     background: var(--color-primary-level-1);
     border-radius: 0.25rem;

src/lib/components/splits/components/split/split.svelte

@@ -81,9 +81,6 @@
             component: DripListBadge,
             props: {
               listId: s.listId,
-              listName: s.listName,
-              owner: s.listOwner,
-              showName: false,
             },
           } as ComponentAndProps;
         case 'project-split':

src/lib/components/table/cells/user-badge.cell.svelte

@@ -3,11 +3,16 @@
   import IdentityBadge from '$lib/components/identity-badge/identity-badge.svelte';
   import { z } from 'zod';
   import type { AddressDriverAccount, NFTDriverAccount } from '$lib/stores/streams/types';
-  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
+  import DripListBadge from '$lib/components/drip-list-badge/drip-list-badge.svelte';
+  import DripListService from '$lib/utils/driplist/DripListService';
+  import type { AccountId } from '$lib/utils/common-types';
+  import type { DripList } from '$lib/utils/metadata/types';
 
   export let context: CellContext<unknown, unknown>;
 
   let user: AddressDriverAccount | NFTDriverAccount;
+  let dripList: DripList | null | undefined;
+
   $: {
     const value = context.getValue();
 
@@ -24,35 +29,26 @@
     ]);
 
     user = userSchema.parse(value);
+
+    if (user.driver === 'nft' && dripList === undefined) {
+      getDripList(user.accountId);
+    }
+  }
+
+  async function getDripList(listId: AccountId) {
+    const dripListService = await DripListService.new();
+    dripList = await dripListService.getByTokenId(listId);
   }
 </script>
 
 {#if user.driver === 'address'}
   <IdentityBadge address={user.address} />
 {:else}
   <!-- TODO: Donʼt presume any NFT account is a Drip List. -->
-  <div class="drip-list-badge">
-    <div class="icon">
-      <DripListIcon style="fill: var(--color-background); height: 1.25rem;" />
-    </div>
-    <span class="typo-text">Your Drip List</span>
-  </div>
+  <DripListBadge
+    listName={dripList ? dripList.name : '<span class="animate-pulse">...</span>'}
+    listId={user.accountId}
+    avatarSize="small"
+    isLinked={false}
+  />
 {/if}
-
-<style>
-  .drip-list-badge {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .icon {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--color-foreground);
-    border-radius: 50%;
-  }
-</style>

src/routes/app/(app)/[accountId]/tokens/[token]/streams/[dripId]/+page.svelte

@@ -73,7 +73,7 @@
     if (stream) {
       streamName =
         stream.receiver.driver === 'nft'
-          ? 'Drip List Support Stream'
+          ? 'Drip List support stream'
           : stream.name ?? 'Unnamed stream';
     }
   }

src/routes/app/(app)/streams/sections/streams.section.svelte

@@ -92,7 +92,7 @@
       // TODO: Donʼt presume that any stream to an NFT subaccount is going to a Drip List.
       const streamName =
         stream.receiver.driver === 'nft'
-          ? 'Drip List Support Stream'
+          ? 'Drip List support stream'
           : stream.name ?? 'Unnamed stream';
 
       return {

src/routes/app/(flows)/funder-onboarding/funder-onboarding-flow.ts

@@ -56,9 +56,6 @@ export function slotsTemplate(state: State, stepIndex: number): Slots {
                       component: DripListBadge,
                       props: {
                         listId: item.list.id,
-                        listName: item.list.name,
-                        owner: item.list.owner,
-                        showName: false,
                       },
                     };
                   }