Drip List Blueprints

src/lib/components/progress-bar/progress-bar.svelte

@@ -14,9 +14,15 @@
     progressFn: ProgressFn;
     updateFrequencyMs?: number;
     errorMessage?: string | undefined;
+    centeredProgressText?: boolean;
   }
 
-  let { progressFn, updateFrequencyMs = 10, errorMessage = undefined }: Props = $props();
+  let {
+    progressFn,
+    updateFrequencyMs = 10,
+    errorMessage = undefined,
+    centeredProgressText = true,
+  }: Props = $props();
 
   let interval: ReturnType<typeof setInterval> | undefined = $state();
 
@@ -86,13 +92,18 @@
       {/if}
     </div>
   </div>
+
   {#if remainingText || done}
     <p
       style:margin-top="0.25rem"
+      style:width="100%"
       style:min-height="2rem"
       style:display="flex"
+      style:text-align={centeredProgressText ? 'center' : 'left'}
+      style:justify-content={centeredProgressText ? 'center' : 'flex-start'}
       style:align-items="center"
       style:gap="0.125rem"
+      style:font-feature-settings="'tnum'"
       class="typo-text"
       style:color={textColor}
       transition:slide={{ duration: 300 }}
@@ -112,7 +123,11 @@
 
 <style>
   .progress-bar-wrapper {
+    min-width: 16rem;
     color: var(--color-foreground-level-6);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 
   .progress-bar-container {

src/lib/components/stepper/components/await-step.svelte

@@ -16,6 +16,8 @@
   import { createEventDispatcher, onMount, type Component } from 'svelte';
   import type { UpdateAwaitStepFn } from '../types';
   import { isHttpError } from '@sveltejs/kit';
+  import type { ProgressFn } from '$lib/components/progress-bar/progress-bar.svelte';
+  import ProgressBar from '$lib/components/progress-bar/progress-bar.svelte';
 
   const dispatch = createEventDispatcher<{ result: Result }>();
 
@@ -25,6 +27,12 @@
     link?: { url: string; label: string } | undefined;
     icon?: { component: Component; props: Record<string, unknown> } | undefined;
     promise: (updateFn: UpdateAwaitStepFn) => Promise<unknown>;
+    progressBar?:
+      | {
+          progressFn: ProgressFn;
+          centeredProgressText?: boolean;
+        }
+      | undefined;
   }
 
   let {
@@ -33,6 +41,7 @@
     link = $bindable(),
     icon = $bindable(),
     promise,
+    progressBar = $bindable(),
   }: Props = $props();
 
   const updateFn: UpdateAwaitStepFn = (params) => {
@@ -87,7 +96,13 @@
   {/if}
   <p>{message}</p>
   {#if subtitle}<p class="subtitle typo-text-small">{subtitle}</p>{/if}
+
+  {#if progressBar}
+    <ProgressBar {...progressBar} />
+  {/if}
+
   {#if link}
+    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
     <a class="typo-link" href={link.url} target="_blank" rel="noreferrer">{link.label}</a>
   {/if}
 </div>

src/lib/components/stepper/types.ts

@@ -3,6 +3,7 @@ import type { SendTransactionsResponse } from '@safe-global/safe-apps-sdk';
 import type { TransactionLike, TypedDataDomain, TypedDataField } from 'ethers';
 import type { TransactionReceipt } from 'ethers';
 import type { Component, ComponentProps } from 'svelte';
+import type { ProgressFn } from '../progress-bar/progress-bar.svelte';
 
 export type TransactionWrapper = {
   title: string;
@@ -93,6 +94,14 @@ export interface AwaitPendingPayload extends UpdateAwaitStepParams {
    * and text displayed on the await step before the promise resolves.
    */
   promise: (updateFn: UpdateAwaitStepFn) => Promise<unknown>;
+  /**
+   * Optional function to report progress of the awaited promise.
+   * If provided, a progress bar is shown below the message.
+   */
+  progressBar?: {
+    progressFn: ProgressFn;
+    centeredProgressText?: boolean;
+  };
 }
 
 export interface MovePayload {

src/lib/flows/create-drip-list-flow/create-drip-list-flow.ts

@@ -13,6 +13,8 @@ import type { AddItemError } from '$lib/components/list-editor/errors';
 import walletStore from '$lib/stores/wallet/wallet.store';
 import dismissablesStore from '$lib/stores/dismissables/dismissables.store';
 import DripList from '$lib/components/illustrations/drip-list.svelte';
+import type { BlueprintOrBlueprintError } from '../../utils/blueprints/schemas';
+import PopulateBlueprint from './steps/populate-blueprint/populate-blueprint.svelte';
 
 export interface State {
   dripList: DripListConfig;
@@ -53,11 +55,27 @@ const staticHeaderComponent = {
   },
 };
 
-export const steps = (state: Writable<State>, skipWalletConnect = false, isModal = false) => [
+export const steps = (
+  state: Writable<State>,
+  skipWalletConnect = false,
+  isModal = false,
+  blueprintOrBlueprintError: BlueprintOrBlueprintError | undefined,
+) => [
+  ...(blueprintOrBlueprintError
+    ? [
+        makeStep({
+          component: PopulateBlueprint,
+          props: {
+            blueprintOrBlueprintError,
+          },
+        }),
+      ]
+    : []),
   makeStep({
     component: ChooseCreationMode,
     props: {
       canCancel: isModal,
+      blueprintMode: !!blueprintOrBlueprintError,
     },
     staticHeaderComponent,
   }),

src/lib/flows/create-drip-list-flow/create-drip-list-stepper.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
   import Stepper from '$lib/components/stepper/stepper.svelte';
   import { flowState, steps } from './create-drip-list-flow';
+  import type { BlueprintOrBlueprintError } from '../../utils/blueprints/schemas';
 
   interface Props {
     skipWalletConnect?: boolean;
     isModal?: boolean;
+    displaySlots?: boolean;
+    blueprintOrBlueprintError: BlueprintOrBlueprintError | undefined;
   }
 
-  let { skipWalletConnect = false, isModal = false }: Props = $props();
+  let { skipWalletConnect = false, isModal = false, blueprintOrBlueprintError }: Props = $props();
 
   let currentStepIndex = $state(0);
 
@@ -18,6 +21,6 @@
   bind:currentStepIndex
   on:stepChange={() => window.scrollTo({ top: 0 })}
   context={() => myState}
-  steps={steps(myState, skipWalletConnect, isModal)}
+  steps={steps(myState, skipWalletConnect, isModal, blueprintOrBlueprintError)}
   minHeightPx={128}
 />

src/lib/flows/create-drip-list-flow/steps/build-list/build-list.svelte

@@ -17,6 +17,7 @@
   } from '$lib/flows/import-from-csv/csv-import-helpers';
   import importFromCSVSteps from '$lib/flows/import-from-csv/import-from-csv-steps';
   import CustodialWarning from '$lib/components/annotation-box/custodial-warning.svelte';
+  import type { AccountId } from '$lib/utils/common-types';
 
   const dispatch = createEventDispatcher<StepComponentEvents>();
 

src/lib/flows/create-drip-list-flow/steps/choose-creation-mode/choose-creation-mode.svelte

@@ -15,15 +15,17 @@
   import TextInput from '$lib/components/text-input/text-input.svelte';
   import TextArea from '$lib/components/text-area/text-area.svelte';
   import type { TextInputValidationState } from '$lib/components/text-input/text-input';
+  import AnnotationBox from '$lib/components/annotation-box/annotation-box.svelte';
 
   const dispatch = createEventDispatcher<StepComponentEvents>();
 
   interface Props {
     context: Writable<State>;
     canCancel?: boolean;
+    blueprintMode?: boolean;
   }
 
-  let { context, canCancel = false }: Props = $props();
+  let { context, canCancel = false, blueprintMode = false }: Props = $props();
 
   let textAreaValidationState: TextInputValidationState = $derived(
     !$context.dripList.description
@@ -46,6 +48,13 @@
   headline="Create a Drip List"
   description="Choose your new list's name and description, and decide how you'd like to add recipients."
 >
+  {#if blueprintMode}
+    <AnnotationBox type="info">
+      You are creating a Drip List based on an externally-created blueprint. You can review the
+      recipients of your Drip List in the next step.
+    </AnnotationBox>
+  {/if}
+
   <FormField title="Title*">
     <TextInput bind:value={$context.dripList.title} />
   </FormField>
@@ -57,47 +66,51 @@
       validationState={textAreaValidationState}
     />
   </FormField>
-  <FormField title="Recipients*">
-    <TwoBigOptions
-      bind:selected={$context.selectedCreationMode}
-      option1={{
-        emoji: '🧐',
-        title: 'Choose by yourself',
-        attributes: [
-          {
-            icon: DripList,
-            text: 'Decide on recipients yourself',
-          },
-          {
-            icon: TokenStreams,
-            text: 'Still publicly available for donations',
-          },
-          {
-            icon: Proposals,
-            text: 'Decide to collaborate anytime later',
-          },
-        ],
-      }}
-      option2={{
-        emoji: '👪',
-        title: 'Collaborate on recipients',
-        attributes: [
-          {
-            icon: DripList,
-            text: 'Invite collaborators to decide together',
-          },
-          {
-            icon: Proposals,
-            text: 'Set a voting period',
-          },
-          {
-            icon: ArrowUp,
-            text: 'Publish your list after voting',
-          },
-        ],
-      }}
-    />
-  </FormField>
+
+  {#if !blueprintMode}
+    <FormField title="Recipients*">
+      <TwoBigOptions
+        bind:selected={$context.selectedCreationMode}
+        option1={{
+          emoji: '🧐',
+          title: 'Choose by yourself',
+          attributes: [
+            {
+              icon: DripList,
+              text: 'Decide on recipients yourself',
+            },
+            {
+              icon: TokenStreams,
+              text: 'Still publicly available for donations',
+            },
+            {
+              icon: Proposals,
+              text: 'Decide to collaborate anytime later',
+            },
+          ],
+        }}
+        option2={{
+          emoji: '👪',
+          title: 'Collaborate on recipients',
+          attributes: [
+            {
+              icon: DripList,
+              text: 'Invite collaborators to decide together',
+            },
+            {
+              icon: Proposals,
+              text: 'Set a voting period',
+            },
+            {
+              icon: ArrowUp,
+              text: 'Publish your list after voting',
+            },
+          ],
+        }}
+      />
+    </FormField>
+  {/if}
+
   {#snippet actions()}
     {#if canCancel}
       <Button onclick={() => dispatch('conclude')} variant="ghost">Cancel</Button>