Use Projects component in Seed View

Signed-off-by: Sebastian Martinez <sebastinez@me.com>

src/base/orgs/View/Projects.svelte

@@ -11,29 +11,32 @@
   import type { Seed } from "@app/base/seeds/Seed";
   import AnchorActions from "@app/base/profiles/AnchorActions.svelte";
 
-  export let profile: Profile;
-  export let config: Config;
   export let seed: Seed;
-  export let account: string | null;
+  export let profile: Profile | null = null;
+  export let account: string | null = null;
+  export let config: Config;
 
   let anchors: Record<string, Anchor> = {};
   let pendingAnchors: Record<string, PendingAnchor> = {};
 
   const loadAnchors = async () => {
-    const [pending, confirmed] = await Promise.all([
-      profile.pendingAnchors(config),
-      profile.confirmedAnchors(config),
-    ]);
+    if (profile) {
+      const [pending, confirmed] = await Promise.all([
+        profile.pendingAnchors(config),
+        profile.confirmedAnchors(config),
+      ]);
 
-    anchors = confirmed;
-    pendingAnchors = pending;
+      anchors = confirmed;
+      pendingAnchors = pending;
+    }
   };
 
   const onClick = (project: ProjectInfo) => {
     navigate(
       proj.path({
         urn: project.urn,
-        addressOrName: profile.name ?? profile.address,
+        seed: seed?.host,
+        addressOrName: profile?.name ?? profile?.address,
         revision: project.head,
       })
     );
@@ -65,7 +68,7 @@
       <div class="project">
         <Widget {project} {anchor} on:click={() => onClick(project)}>
           <span class="actions" slot="actions">
-            {#if profile.org?.safe && account && anchor}
+            {#if profile?.org?.safe && account && anchor}
               {#if pendingAnchor} <!-- Pending anchor -->
                 <AnchorActions
                   {account} {config} anchor={pendingAnchor} safe={profile.org.safe}

src/base/seeds/View.svelte

@@ -1,22 +1,14 @@
 <script lang="ts">
-  import { navigate } from "svelte-routing";
   import type { Config } from "@app/config";
   import { Seed } from "@app/base/seeds/Seed";
-  import Widget from "@app/base/projects/Widget.svelte";
   import Loading from "@app/Loading.svelte";
   import SeedAddress from "@app/SeedAddress.svelte";
   import NotFound from "@app/NotFound.svelte";
-  import * as proj from "@app/project";
+  import Projects from "@app/base/orgs/View/Projects.svelte";
 
   export let config: Config;
   export let host: string;
 
-  const onProjectClick = (project: proj.ProjectInfo) => {
-    navigate(proj.path({
-      urn: project.urn,
-      seed: host,
-    }));
-  };
 </script>
 
 <style>
@@ -54,12 +46,6 @@
     display: flex;
     align-items: center;
   }
-  .projects {
-    margin-top: 2rem;
-  }
-  .projects .project {
-    margin-bottom: 1rem;
-  }
   .desktop {
     display: block !important;
   }
@@ -115,15 +101,7 @@
       <div class="desktop" />
     </div>
     <!-- Seed Projects -->
-    {#await seed.getProjects() then projects}
-      <div class="projects">
-        {#each projects as project}
-          <div class="project">
-            <Widget {project} on:click={() => onProjectClick(project)} />
-          </div>
-        {/each}
-      </div>
-    {/await}
+    <Projects {seed} {config} />
   </main>
 {:catch}
   <NotFound title={host} subtitle="Not able to query information from this seed." />