06b5d47 Show orgs on orgs index page — radicle-explorer

modified src/Blockies.svelte

@@ -21,6 +21,8 @@

   .icon {
     width: 100%;
     height: 100%;
     min-width: 1rem;
     min-height: 1rem;
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: 50%;

modified src/base/orgs/Create.svelte

@@ -67,7 +67,7 @@

 {#if error}
   <Error {error} floating on:close />
 {:else if org} <!-- Org created -->
   <Modal on:close>
   <Modal floating on:close>
     <span slot="title">
       🎉
     </span>

@@ -90,7 +90,7 @@

     </span>
   </Modal>
 {:else} <!-- Org creation flow -->
   <Modal on:close>
   <Modal floating on:close>
     <span slot="title">
       <div>🎪</div>
       <span>Create an Org</span>

@@ -128,7 +128,7 @@

         </button>
         <button on:click={() => dispatch('close')} class="text">
           Back
           Close
         </button>
       {/if}
     </span>

modified src/base/orgs/Index.svelte

@@ -2,19 +2,63 @@

   import type { SvelteComponent } from 'svelte';
   import { session } from '@app/session';
   import Create from '@app/base/orgs/Create.svelte';
   import { Org } from '@app/base/orgs/Org';
   import type { Config } from '@app/config';
   import Error from '@app/Error.svelte';
   import Blockies from '@app/Blockies.svelte';
   import Loading from '@app/Loading.svelte';
   export let config: Config;
   let modal: typeof SvelteComponent = Create;
   let owner: string | null = $session && $session.address;
   const onCreate = () => modal = Create;
   let modal: typeof SvelteComponent | null = null;
   $: account = $session && $session.address;
 </script>
 {#if owner}
   <svelte:component this={modal} {owner} {config} on:close={() => window.history.back()} />
 {:else}
   <Error on:close={() => window.history.back()}>
     Not connected.
   </Error>
 {/if}
 <style>
   main {
     width: 100%;
     padding: 0 3rem;
     display: block;
     align-items: space-between;
     justify-content: space-between;
   }
   main header {
     color: var(--color-secondary);
     padding: 0 3rem 3rem 3rem;
     font-size: 1.25rem;
     display: flex;
     align-items: center;
   }
   button.create {
     margin-left: 1.5rem;
   }
   .org {
     width: 3rem;
     height: 3rem;
     margin: 3rem;
     display: inline-block;
   }
 </style>
 <main>
   {#await Org.getAll(config)}
     <Loading center />
   {:then orgs}
     <header>
       <span><strong>Orgs</strong> on the Radicle network.</span>
       <button class="create small secondary" on:click={onCreate} disabled={!account}>
         Create
       </button>
     </header>
     {#each orgs as org}
       <div class="org"><Blockies address={org.address} /></div>
     {/each}
   {/await}
 </main>
 <svelte:component this={modal} owner={account} {config} on:close={() => modal = null} />

modified src/base/orgs/Org.ts

@@ -16,6 +16,16 @@ const GetProjects = `

   }
 `;
 // TODO: Add timestamps to org creation.
 const GetOrgs = `
   query GetOrgs {
     orgs {
       id
       owner
     }
   }
 `;
 const orgFactoryAbi = [
   "function createOrg(address) returns (address)",
   "function createOrg(address[], uint256) returns (address)",

@@ -85,6 +95,21 @@ export class Org {

     return projects;
   }
   static async getAll(config: Config): Promise<Array<Org>> {
     const result = await utils.querySubgraph(GetOrgs, {}, config);
     console.log(result);
     let orgs: Org[] = [];
     for (let o of result.orgs) {
       try {
         orgs.push(new Org(o.id, o.owner));
       } catch (e) {
         console.error(e);
       }
     }
     return orgs;
   }
   static fromReceipt(receipt: ContractReceipt): Org | null {
     let event = receipt.events?.find(e => e.event === 'OrgCreated');

modified src/utils.ts

@@ -73,7 +73,7 @@ export async function querySubgraph(

   query: string,
   variables: Record<string, any>,
   config: Config
 ): Promise<any> {
 ): Promise<null | any> {
   const response = await fetch(config.orgs.subgraph, {
     method: 'POST',
     headers: {

@@ -84,7 +84,14 @@ export async function querySubgraph(

       variables,
     })
   });
   const json = await response.json()
   const json = await response.json();
   if (json.errors) {
     for (let e of json.errors) {
       console.error("querySubgraph:", e.message);
     }
     return null;
   }
   return json.data;
 }