wip

drips-network · Jun 3, 2024 · c77c394 · c77c394
1 parent 163998a
commit c77c394
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 52 deletions.
diff --git a/src/lib/components/section/section.svelte b/src/lib/components/section/section.svelte
@@ -8,6 +8,9 @@
 
   export let collapsable = false;
   export let collapsed = false;
+
+  /** Bind to this to get the section skeleton instance of this section. */
+  export let skeletonInstance: SectionSkeleton | undefined;
 </script>
 
 <section class="app-section" style:margin-bottom={collapsed ? '-2rem' : 0}>
@@ -18,7 +21,7 @@
     actionsDisabled={collapsed || header.actionsDisabled}
   />
   <div>
-    <SectionSkeleton bind:collapsed {...skeleton}>
+    <SectionSkeleton bind:this={skeletonInstance} bind:collapsed {...skeleton}>
       <slot />
     </SectionSkeleton>
   </div>

diff --git a/src/lib/components/supporters-section/supporters.section.svelte b/src/lib/components/supporters-section/supporters.section.svelte
@@ -74,8 +74,7 @@
 
 <script lang="ts">
   import Heart from '$lib/components/icons/Heart.svelte';
-  import SectionHeader from '../section-header/section-header.svelte';
-  import SectionSkeleton from '../section-skeleton/section-skeleton.svelte';
+  import type SectionSkeleton from '../section-skeleton/section-skeleton.svelte';
   import IdentityBadge from '../identity-badge/identity-badge.svelte';
   import SupportItem from './components/support-item.svelte';
   import { gql } from 'graphql-request';
@@ -101,17 +100,33 @@
   import formatAmtPerSec from '$lib/stores/amt-delta-unit/utils/format-amt-per-sec';
   import { fade } from 'svelte/transition';
   import AddUnknownTokenButton from './components/add-unknown-token-button.svelte';
+  import Section from '../section/section.svelte';
 
   export let supportItems: SupportersSectionSupportItemFragment[];
 
   export let ownerAccountId: string | undefined = undefined;
 
-  export let type: 'project' | 'dripList';
+  export let type: 'project' | 'dripList' | 'address';
   export let headline = 'Support';
   export let emptyStateHeadline = 'No supporters';
-  export let emptyStateText = `This ${
-    type === 'dripList' ? 'Drip List' : 'project'
-  } doesnʼt have any supporters yet.`;
+
+  export let collapsed = false;
+  export let collapsable = false;
+
+  let emptyStateText: string;
+  $: {
+    switch (type) {
+      case 'project':
+        emptyStateText = `This project doesnʼt have any supporters yet.`;
+        break;
+      case 'dripList':
+        emptyStateText = `This Drip List doesnʼt have any supporters yet.`;
+        break;
+      case 'address':
+        emptyStateText = `This user doesnʼt have any supporters yet.`;
+        break;
+    }
+  }
 
   export let infoTooltip: string | undefined = undefined;
 
@@ -122,14 +137,22 @@
 </script>
 
 <section class="app-section">
-  <SectionHeader {infoTooltip} icon={Heart} label={headline} />
-  <SectionSkeleton
-    bind:this={sectionSkeleton}
-    loaded={true}
-    empty={supportItems.length === 0}
-    emptyStateEmoji="🫧"
-    {emptyStateHeadline}
-    {emptyStateText}
+  <Section
+    bind:collapsed
+    bind:collapsable
+    header={{
+      icon: Heart,
+      label: headline,
+      infoTooltip,
+    }}
+    skeleton={{
+      loaded: true,
+      empty: supportItems.length === 0,
+      emptyStateEmoji: '🫧',
+      emptyStateHeadline,
+      emptyStateText,
+    }}
+    bind:skeletonInstance={sectionSkeleton}
   >
     <div class="items">
       {#each supportItems as item}
@@ -280,7 +303,7 @@
         {/if}
       {/each}
     </div>
-  </SectionSkeleton>
+  </Section>
 </section>
 
 <style>

diff --git a/src/routes/app/(app)/[accountId]/+page.svelte b/src/routes/app/(app)/[accountId]/+page.svelte
@@ -12,6 +12,7 @@
   import Developer from '$lib/components/developer-section/developer.section.svelte';
   import walletStore from '$lib/stores/wallet/wallet.store';
   import mapFilterUndefined from '$lib/utils/map-filter-undefined';
+  import Supporters from '$lib/components/supporters-section/supporters.section.svelte';
 
   export let data;
 
@@ -24,7 +25,9 @@
   let description: string | undefined;
   $: description = data.ensData?.records.description;
 
-  $: isSelf = data.profileData?.account.address && data.profileData.account.address.toLowerCase() === $walletStore.address?.toLowerCase();
+  $: isSelf =
+    data.profileData?.account.address &&
+    data.profileData.account.address.toLowerCase() === $walletStore.address?.toLowerCase();
 </script>
 
 <HeadMeta title={data.ensData?.ensName ?? data.profileData?.account.address ?? undefined} />
@@ -44,43 +47,78 @@
 {:else if data.profileData}
   <article class="flex flex-col gap-16">
     <SectionSkeleton placeholderOutline={false} loaded>
-        <header class="flex flex-wrap sm:flex-nowrap gap-4">
-          <IdentityBadge
-            disableLink
-            address={data.profileData.account.address}
-            size="gigantic"
-            showIdentity={false}
-            disableTooltip
-          />
-          <div class="flex items-center sm:py-4">
-            <div class="flex flex-col gap-4">
-              <h1 class="w-full -mb-2">
-                <IdentityBadge
-                  disableLink
-                  address={data.profileData.account.address}
-                  size="gigantic"
-                  showAvatar={false}
-                  disableTooltip
-                />
-              </h1>
-              <ul class="social-links">
-                <div in:fade|local><SocialLink network="ethereum" value={data.profileData.account.address} /></div>
-                {#each Object.entries(socialLinkValues ?? {}) as [network, value]}
-                  {#if value}<li in:fade|local>
-                      <SocialLink network={network} {value} />
-                    </li>{/if}
-                {/each}
-              </ul>
-              {#if description}<p in:fade|local>{description}</p>{/if}
-            </div>
+      <header class="flex flex-wrap sm:flex-nowrap gap-4">
+        <IdentityBadge
+          disableLink
+          address={data.profileData.account.address}
+          size="gigantic"
+          showIdentity={false}
+          disableTooltip
+        />
+        <div class="flex items-center sm:py-4">
+          <div class="flex flex-col gap-4">
+            <h1 class="w-full -mb-2">
+              <IdentityBadge
+                disableLink
+                address={data.profileData.account.address}
+                size="gigantic"
+                showAvatar={false}
+                disableTooltip
+              />
+            </h1>
+            <ul class="social-links">
+              <div in:fade|local>
+                <SocialLink network="ethereum" value={data.profileData.account.address} />
+              </div>
+              {#each Object.entries(socialLinkValues ?? {}) as [network, value]}
+                {#if value}<li in:fade|local>
+                    <SocialLink {network} {value} />
+                  </li>{/if}
+              {/each}
+            </ul>
+            {#if description}<p in:fade|local>{description}</p>{/if}
           </div>
-        </header>
+        </div>
+      </header>
     </SectionSkeleton>
     <Developer accountId={data.profileData.account.accountId} />
-    <ProjectsSection collapsable projects={mapFilterUndefined(data.profileData.projects, (v) => v === null ? undefined : v)} />
-    <DripListsSection collapsable votingRounds={data.profileData.votingRounds} dripLists={mapFilterUndefined(data.profileData.dripLists, (v) => v === null ? undefined : v)} />
-    <Streams collapsable userStreams={data.profileData.streams} disableActions={!isSelf} accountId={data.profileData.account.accountId} />
-    <Balances collapsable collapsed userBalances={data.profileData.balances} accountId={data.profileData.account.accountId} />
+    <ProjectsSection
+      collapsable
+      collapsed={mapFilterUndefined(data.profileData.projects, (v) => (v === null ? undefined : v))
+        .length === 0}
+      projects={mapFilterUndefined(data.profileData.projects, (v) => (v === null ? undefined : v))}
+    />
+    <DripListsSection
+      collapsable
+      collapsed={[
+        ...data.profileData.votingRounds,
+        ...mapFilterUndefined(data.profileData.dripLists, (v) => (v === null ? undefined : v)),
+      ].length === 0}
+      votingRounds={data.profileData.votingRounds}
+      dripLists={mapFilterUndefined(data.profileData.dripLists, (v) =>
+        v === null ? undefined : v,
+      )}
+    />
+    <Supporters
+      collapsable
+      collapsed={data.profileData.support.length === 0}
+      type="address"
+      supportItems={data.profileData.support}
+    />
+    <Streams
+      hideIncoming
+      collapsable
+      collapsed={data.profileData.streams.outgoing.length === 0}
+      userStreams={data.profileData.streams}
+      disableActions={!isSelf}
+      accountId={data.profileData.account.accountId}
+    />
+    <Balances
+      collapsable
+      collapsed={data.profileData.balances.length === 0}
+      userBalances={data.profileData.balances}
+      accountId={data.profileData.account.accountId}
+    />
   </article>
 {/if}
 

diff --git a/src/routes/app/(app)/funds/sections/streams.section.svelte b/src/routes/app/(app)/funds/sections/streams.section.svelte
@@ -76,6 +76,8 @@
   export let collapsed = false;
   export let collapsable = false;
 
+  export let hideIncoming = false;
+
   export let emptyStateHeadline = 'No streams';
 
   export let userStreams: StreamsSectionStreamsFragment;
@@ -279,7 +281,7 @@
     empty: incoming.length === 0 && outgoing.length === 0,
   }}
 >
-  {#if optionsIncoming.data.length > 0 && !onlyDripListStreams}
+  {#if !hideIncoming && optionsIncoming.data.length > 0 && !onlyDripListStreams}
     <div class="table-container">
       {#if optionsOutgoing.data.length > 0}
         <h4 class="table-group-header">↓ Incoming</h4>