Merge branch 'main' into ev/iss655

docs/DEVELOPMENT.md

@@ -31,13 +31,13 @@ You can preview the production build with `npm run preview`.
 
 ## 🌳 Environment
 
-There are a few environment variables required for the app to function. You can find an overview under `.env.template`. You'll need access credentials for Pinata, Tenderly and a Gelato Relay API key for claiming projects. You'll also need to set up `PUBLIC_NETWORK`, as described right below.
+There are a few environment variables required for the app to function. You can find an overview under `.env.template`. Youʼll need access credentials for Pinata, Tenderly and a Gelato Relay API key for claiming projects. Youʼll also need to set up `PUBLIC_NETWORK`, as described right below.
 
 ## 🔗 Chain Config
 
-To run the app, you'll need to configure the `PUBLIC_NETWORK` environment variable. This should be the chainId of the chain you want to run the app for, and can currently be either 1, 5 or 11155111. The app will only allow connecting wallets that are set to this network, and all server-side requests will be made for this network's subgraph.
+To run the app, youʼll need to configure the `PUBLIC_NETWORK` environment variable. This should be the chainId of the chain you want to run the app for, and can currently be either 1, 5 or 11155111. The app will only allow connecting wallets that are set to this network, and all server-side requests will be made for this network's subgraph.
 
-For your convenience, we've deployed production mirrors of the app set to allow testnet connections:
+For your convenience, weʼve deployed production mirrors of the app set to allow testnet connections:
 
 ```sh
 https://goerli.drips.network/ # PUBLIC_NETWORK set to 5
@@ -68,7 +68,7 @@ To get started, make sure you have Docker installed & running, ensure the app's
 npm run e2e
 ```
 
-This will build a production version of the app, and execute all E2E test suites. Each test suite itself will run `docker compose up` to start the E2E test environment (ipfs node, anvil testnet w/ Drips contracts, and Graph Node w/ Drips subgraph). On first run, you'll see `Pinging Graph Node…` being logged for an extended amount of time. On subsequent runs, this step will be a lot faster, because much of the E2E Docker environment is being cached.
+This will build a production version of the app, and execute all E2E test suites. Each test suite itself will run `docker compose up` to start the E2E test environment (ipfs node, anvil testnet w/ Drips contracts, and Graph Node w/ Drips subgraph). On first run, youʼll see `Pinging Graph Node…` being logged for an extended amount of time. On subsequent runs, this step will be a lot faster, because much of the E2E Docker environment is being cached.
 
 **Important:** The local testnet is based on a static chain state which is copied into the testnet image from ./src/e2e-tests/docker/testnet/state. When a new version of contracts is released, this state needs to be updated. The subgraph is downloaded at image build time from the latest state of the `drips-subgraph` repo's `v2` branch.
 
@@ -138,7 +138,7 @@ After doing this, the app will display the token within all token pickers. Alter
 
 #### `PUBLIC_TEST_MODE` and `playwrightAddress`
 
-Unfortunately, two major differences in app logic for E2E tests couldn't be avoided: Firstly, the app uses a mock wallet store that connects to the local testnet instead of the real one, and IPFS access is mocked using localstorage. The logic checks for an env variable `PUBLIC_TEST_MODE` being true. The mock wallet store also checks for `window.playwrightAddress`, and initializes itself to be connected to that address. In order to make use of these adjustments, call `page.addInitScript` and set the two variables.
+Unfortunately, two major differences in app logic for E2E tests couldnʼt be avoided: Firstly, the app uses a mock wallet store that connects to the local testnet instead of the real one, and IPFS access is mocked using localstorage. The logic checks for an env variable `PUBLIC_TEST_MODE` being true. The mock wallet store also checks for `window.playwrightAddress`, and initializes itself to be connected to that address. In order to make use of these adjustments, call `page.addInitScript` and set the two variables.
 
 ## 😱 Advanced
 

src/e2e-tests/top-up-create-stream.e2e.test.ts

@@ -168,7 +168,6 @@ describe('app', async () => {
       it('displays the original users outgoing stream on their profile', async () => {
         await page.goto('http://127.0.0.1:3000/app/0x433220a86126eFe2b8C98a723E73eBAd2D0CbaDc');
 
-        await expect(page.locator('text=↑ Outgoing')).toHaveCount(1);
         await expect(page.locator('text=E2E Test Stream')).toHaveCount(1);
       });
 
@@ -420,7 +419,7 @@ describe('app', async () => {
       await page.locator('div[data-testid="sidenav"] a:text("Drip List")').click();
 
       await expect(
-        page.locator('text=Fund your dependencies by creating your Drip List'),
+        page.locator('text=Fund all your dependencies at once with a Drip List'),
       ).toHaveCount(1);
     });
 
@@ -536,7 +535,7 @@ describe('app', async () => {
     });
 
     it('advances the flow', async () => {
-      await page.locator('button', { hasText: 'Confirm changes in wallet' }).click();
+      await page.locator('button', { hasText: 'Confirm changes in your wallet' }).click();
       await page.locator('button', { hasText: 'Got it' }).click();
     });
 
@@ -551,9 +550,9 @@ describe('app', async () => {
     });
 
     /* 
-      The tests below are a bit tricky to implement because i wasn't able to find a way to get
+      The tests below are a bit tricky to implement because i wasnʼt able to find a way to get
       the vite preview server to pay attention to the PUBLIC_TEST_MODE env var. Without this being true,
-      it won't load the single drip list view, because that fetches data server-side, and without that env
+      it wonʼt load the single drip list view, because that fetches data server-side, and without that env
       var being set in the server just returns a 404.
 
       TODO: Figure out how to set PUBLIC_TEST_MODE to true in the vite `preview` server, then implement the

src/lib/components/account-menu/account-menu.svelte

@@ -1,8 +1,6 @@
 <script>
   import wallet from '$lib/stores/wallet/wallet.store';
   import UserIcon from 'radicle-design-system/icons/User.svelte';
-
-  import CrossIcon from 'radicle-design-system/icons/CrossSmall.svelte';
   import Button from '../button/button.svelte';
   import IdentityBadge from '../identity-badge/identity-badge.svelte';
   import AccountMenuItem from './components/account-menu-item.svelte';
@@ -43,7 +41,7 @@
       <svelte:fragment slot="right"
         ><Button
           disabled={safeAppMode}
-          icon={CrossIcon}
+          variant="ghost"
           on:click={() => {
             cupertinoPaneStore.closeSheet();
             wallet.disconnect();

src/lib/components/aggregate-fiat-estimate/aggregate-fiat-estimate.svelte

@@ -67,7 +67,7 @@
       <Tooltip>
         <WarningIcon style="fill: var(--color-negative)" />
         <svelte:fragment slot="tooltip-content">
-          This amount includes unknown tokens for which we couldn't determine a current USD value.
+          This amount includes unknown tokens for which we couldnʼt determine a current USD value.
         </svelte:fragment>
       </Tooltip>
     </div>

src/lib/components/carousel/items/carousel-edu-card.svelte

@@ -2,7 +2,6 @@
   import Button from '$lib/components/button/button.svelte';
   import dismissablesStore from '$lib/stores/dismissables/dismissables.store';
   import type { ComponentType } from 'svelte';
-  import CrossSmall from 'radicle-design-system/icons/CrossSmall.svelte';
 
   export let id: string;
   export let title: string;
@@ -17,9 +16,6 @@
 </script>
 
 <div class="edu-card">
-  <button class="close-button" on:click={() => dismissablesStore.dismiss(id)}>
-    <CrossSmall />
-  </button>
   <div class="illustration-outer">
     <div class="illustration">
       <svelte:component this={illustration} />
@@ -30,7 +26,8 @@
       <h3 class="pixelated">{title}</h3>
       <p>{description}</p>
     </div>
-    <div class="actions">
+    <div class="actions gap-1">
+      <Button variant="ghost" on:click={() => dismissablesStore.dismiss(id)}>Dismiss</Button>
       {#each actions as action}
         <Button
           icon={action.icon}
@@ -92,22 +89,6 @@
     margin-right: 1.5rem;
   }
 
-  .close-button {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    transition: background-color 0.3s;
-    border-radius: 1rem;
-  }
-
-  .close-button:hover {
-    background-color: var(--color-foreground-level-1);
-  }
-
-  .close-button:focus {
-    background-color: var(--color-foreground-level-2);
-  }
-
   @media (max-width: 768px) {
     .edu-card {
       flex-direction: column;

src/lib/components/divider/divider.svelte

@@ -8,6 +8,6 @@
   .divider {
     height: 1px;
     border-radius: 0.25rem;
-    background-color: var(--color-foreground-level-3);
+    background-color: var(--color-foreground);
   }
 </style>

src/lib/components/drip-list-members-editor/drip-list-members-editor.svelte

@@ -96,7 +96,7 @@
 
       // TODO: This only supports GitHub forge
       const repoExists = await verifyRepoExists(username, repoName);
-      if (!repoExists) throw new Error("This project doesn't exist");
+      if (!repoExists) throw new Error('This project doesnʼt exist');
 
       let gitProject = await gitProjectService.getByUrl(inputValue);
 
@@ -117,7 +117,7 @@
         top: listElem.scrollHeight,
       });
 
-      // It doesn't work without setTimeout for some reason 🤷‍♂️
+      // It doesnʼt work without setTimeout for some reason 🤷‍♂️
       setTimeout(() => inputElem.focus(), 0);
     } catch (e) {
       // eslint-disable-next-line no-console
@@ -183,7 +183,7 @@
 
       percentages = { ...percentages, [address]: 0 };
 
-      // It doesn't work without setTimeout for some reason 🤷‍♂️
+      // It doesnʼt work without setTimeout for some reason 🤷‍♂️
       setTimeout(() => inputElem.focus(), 0);
     } catch (e) {
       // eslint-disable-next-line no-console

src/lib/components/drip-lists-section/drip-lists-section.svelte

@@ -99,7 +99,7 @@
     empty: dripLists && dripLists.length === 0,
     error,
     emptyStateEmoji: '🫗',
-    emptyStateHeadline: isSelf ? "You don't have a Drip List" : 'No Drip List',
+    emptyStateHeadline: isSelf ? 'You donʼt have a Drip List' : 'No Drip List',
     emptyStateText: isSelf
       ? 'Create your Drip List to start supporting your dependencies'
       : 'Drip Lists enable supporting a set of open-source projects.',
@@ -115,7 +115,7 @@
   {/if}
 </Section>
 
-{#if showSupportersSection}
+{#if showSupportersSection && dripLists?.length}
   <Supporters
     type="dripList"
     headline="Support"

src/lib/components/dropdown/dropdown.svelte

@@ -118,7 +118,7 @@
         {selectedOption.title}
       </span>
     </div>
-    <div class="chevron" class:expanded><ChevronDown /></div>
+    <div class="chevron" class:expanded><ChevronDown style="fill: var(--foreground)" /></div>
   </div>
 
   {#if expanded}

src/lib/components/edu-card/edu-card.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import dismissablesStore from '$lib/stores/dismissables/dismissables.store';
   import { fade } from 'svelte/transition';
-  import Cross from 'radicle-design-system/icons/Cross.svelte';
   import TransitionedHeight from '../transitioned-height/transitioned-height.svelte';
+  import Button from '../button/button.svelte';
 
   export let dimissableId: string;
   export let negativeMarginWhileCollapsed: string | undefined = undefined;
@@ -13,13 +13,16 @@
     <div out:fade|local={{ duration: 300 }} class="edu-card">
       <div class="text">
         <slot name="text" />
+        <div class="flex gap-1">
+          <slot name="buttons" />
+          <Button variant="ghost" on:click={() => dismissablesStore.dismiss(dimissableId)}
+            >Dismiss</Button
+          >
+        </div>
       </div>
       <div class="illustration">
         <slot name="illustration" />
       </div>
-      <button on:click={() => dismissablesStore.dismiss(dimissableId)} class="close-button">
-        <Cross />
-      </button>
     </div>
   {/if}
 </TransitionedHeight>
@@ -51,24 +54,6 @@
     align-items: center;
   }
 
-  .edu-card button {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    right: 1rem;
-    top: 1rem;
-    border-radius: 50%;
-    height: 2rem;
-    width: 2rem;
-    z-index: 1;
-    background-color: var(--color-background);
-  }
-
-  .edu-card button:focus-visible {
-    background-color: var(--color-foreground-level-2);
-  }
-
   @media (max-width: 768px) {
     .edu-card {
       flex-direction: column-reverse;

src/lib/components/emoji/emoji.svelte

@@ -24,7 +24,7 @@
   {#if customEmoji}
     <svelte:component this={customEmoji} size={sizePx} />
   {:else}
-    <!-- Design System Emoji doesn't support "massive" size, so we fall back to "huge". -->
+    <!-- Design System Emoji doesnʼt support "massive" size, so we fall back to "huge". -->
     <DesignSystemEmoji {emoji} size={size === 'massive' ? 'huge' : size} />
   {/if}
 </div>

src/lib/components/list-select/list-select.svelte

@@ -6,7 +6,7 @@
   import PercentageEditor from '$lib/components/percentage-editor/percentage-editor.svelte';
 
   export let items: Items;
-
+  export let type: 'tokens' | 'generic' = 'generic';
   export let searchable = true;
   export let multiselect = false;
   export let blockInteraction = false;
@@ -178,7 +178,7 @@
         class="typo-text"
         bind:this={searchBarElem}
         bind:value={searchString}
-        placeholder="Search…"
+        placeholder={type === 'tokens' ? 'Search tokens' : 'Search'}
       />
     </div>
   {/if}
@@ -279,7 +279,7 @@
     border-bottom: 1px solid var(--color-foreground);
     display: flex;
     gap: 0.5rem;
-    color: var(--color-foreground);
+    /* color: var(--color-foreground); */
   }
 
   .item:last-child {
@@ -358,7 +358,7 @@
   }
 
   .item .content .text {
-    color: var(--color-foreground);
+    color: var(--color-foreground-level-4);
     flex-shrink: 0;
   }
 

src/lib/components/list-select/list-select.unit.test.ts

@@ -38,18 +38,18 @@ describe('list-select.svelte', async () => {
       },
     });
 
-    screen.getByPlaceholderText('Search…');
+    screen.getByPlaceholderText('Search');
   });
 
-  it("doesn't show a searchbar if searchable is false", () => {
+  it('doesnʼt show a searchbar if searchable is false', () => {
     render(ListSelect, {
       props: {
         items: testItems,
         searchable: false,
       },
     });
 
-    const searchBar = screen.queryByPlaceholderText('Search…');
+    const searchBar = screen.queryByPlaceholderText('Search');
     expect(searchBar).not.toBeInTheDocument();
   });
 
@@ -60,7 +60,7 @@ describe('list-select.svelte', async () => {
       },
     });
 
-    const searchBar = screen.getByPlaceholderText('Search…');
+    const searchBar = screen.getByPlaceholderText('Search');
 
     await userEvent.type(searchBar, 'test-item-1');
 
@@ -98,7 +98,7 @@ describe('list-select.svelte', async () => {
 
     await userEvent.tab();
 
-    const searchBar = screen.getByPlaceholderText('Search…');
+    const searchBar = screen.getByPlaceholderText('Search');
     expect(searchBar).toHaveFocus();
 
     await userEvent.tab();

src/lib/components/projects-section/projects-section.svelte

@@ -48,7 +48,7 @@
     actions: isSelf
       ? [
           {
-            // TODO: (FIX) clicking this button after completing the claim project flow freezes the UI (in all browsers). It shouldn't. 😊
+            // TODO: (FIX) clicking this button after completing the claim project flow freezes the UI (in all browsers). It shouldnʼt. 😊
             handler: () => goto(`/app/claim-project`),
             label: 'Claim project',
             icon: Plus,
@@ -66,7 +66,7 @@
     emptyStateHeadline: 'No claimed projects',
     emptyStateText: isSelf
       ? 'If you develop an open-source project, click "Claim project" to get started.'
-      : "This user hasn't claimed any software projects yet.",
+      : 'This user hasnʼt claimed any software projects yet.',
   }}
 >
   {#if projects}

src/lib/components/section-skeleton/section-skeleton.svelte

@@ -40,7 +40,7 @@
               <div class="text-group">
                 <p class="typo-text-small-bold">Oops, something went wrong.</p>
                 <p class="typo-text-small">
-                  Sorry, we weren't able to load this. There may be more information in the
+                  Sorry, we werenʼt able to load this. There may be more information in the
                   developer console.
                 </p>
                 <a

src/lib/components/section/section.svelte

@@ -32,6 +32,6 @@
   }
 
   .content {
-    padding-top: 2rem;
+    padding-top: 1.5rem;
   }
 </style>

src/lib/components/social-link/social-link.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <div class="social-link">
-  <svelte:component this={icon} />
+  <svelte:component this={icon} style="fill: var(--foreground)" />
   {#if prefix !== undefined}
     <a target="_blank" rel="noreferrer" class="typo-text" href={url}
       >{value.replaceAll('http://', '').replaceAll('https://', '')}</a