7f2394d Load project meta from seed — radicle-explorer

Radicle web interface

Load project meta from seed

Alexis Sellier committed 4 years ago

commit 7f2394d9de2c7aedc26167de10e3e74ea9a31dec
parent b57f662dfd700acd865eb65fad125d5556b1de5a

6 files changed +75 -4

modified public/index.css

@@ -249,6 +249,10 @@ input.wide {

 	font-weight: bold !important;
 }
 span.small {
 	font-size: 0.75rem;
 }
 button.error:hover {
 	background-color: var(--color-negative);
 }

modified src/base/orgs/View.svelte

@@ -168,7 +168,7 @@

           <Loading center />
         {:then projects}
           {#each projects as project}
             <Project {project} />
             <Project {project} {config} />
           {/each}
         {:catch err}
           <div class="error">

modified src/base/projects/Project.ts

@@ -1,5 +1,34 @@

 import type { Config } from '@app/config';
 export interface Project {
   id: string
   stateHash: string
   stateHashFormat: string
 }
 export interface User {
   urn: string
   avatar: { emoji: string, background: { r: number, g: number, b: number } }
 }
 export interface Meta {
   name: string
   description: string
   maintainers: User[]
 }
 export async function getMetadata(urn: string, config: Config): Promise<Meta | null> {
   const response = await fetch(`${config.seed.url}/projects/${urn}`, {
     method: 'GET',
     headers: {
       'Accept': 'application/json',
     },
     mode: 'no-cors'
   });
   if (! response.ok) {
     return null;
   }
   return await response.json();
 }

modified src/base/projects/Widget.svelte

@@ -1,7 +1,30 @@

 <script type="typescript">
   import type { Project } from './Project';
   import { onMount } from 'svelte';
   import type { Config } from '@app/config';
   import { getMetadata } from './Project';
   import type { Project, Meta } from './Project';
   enum Status { Loading, Loaded, Error }
   type State =
       { status: Status.Loading }
     | { status: Status.Loaded, meta: Meta | null }
     | { status: Status.Error, error: string };
   export let project: Project;
   export let config: Config;
   let state: State = { status: Status.Loading };
   onMount(async () => {
     try {
       const meta = await getMetadata(project.id, config);
       state = { status: Status.Loaded, meta };
     } catch (err) {
       state = { status: Status.Error, error: err.message };
     }
   });
 </script>
 <style>

@@ -21,6 +44,16 @@

 </style>
 <article>
   <div class="id">{project.id}</div>
   <div class="anchor">commit {project.stateHash}</div>
   {#if state.status == Status.Loaded && state.meta}
     <div class="name">{state.meta.name}</div>
     <div class="description">{state.meta.description}</div>
     <div class="id">{project.id}</div>
     <div class="anchor">commit {project.stateHash}</div>
   {:else}
     <div class="id">{project.id}</div>
     <div class="anchor">commit {project.stateHash}</div>
     {#if state.status == Status.Error}
       <span class="faded small"><strong>Error</strong>: {state.error}</span>
     {/if}
   {/if}
 </article>

modified src/config.json

@@ -25,5 +25,8 @@

     "orgs": {
       "subgraph": "https://api.thegraph.com/subgraphs/name/radicle-dev/radicle-orgs-ropsten"
     }
   },
   "seed": {
     "url": "http://sprout.radicle.xyz"
   }
 }

modified src/config.ts

@@ -24,6 +24,7 @@ export class Config {

   gasLimits: { createOrg: number };
   provider: ethers.providers.JsonRpcProvider;
   signer: ethers.Signer & TypedDataSigner | null;
   seed: { url: string };
   constructor(
     network: { name: string, chainId: number },

@@ -46,6 +47,7 @@ export class Config {

     this.provider = provider;
     this.signer = signer;
     this.gasLimits = gasLimits;
     this.seed = config.seed;
   }
 }