Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show users on front page as well
Alexis Sellier committed 4 years ago
commit 8d45ec27e17df6ad6016330f2ccf40f16b50367b
parent 73796ba999407aebaa2e87f2b653033d6269cf25
5 files changed +119 -72
added src/Card.svelte
@@ -0,0 +1,75 @@
+ 
<script lang="ts">
+ 
  import { Link } from 'svelte-routing';
+ 
  import Avatar from '@app/Avatar.svelte';
+ 
  import type { Profile } from '@app/profile';
+ 
  import type { Config } from '@app/config';
+ 
  import { formatName, formatAddress } from '@app/utils';
+
+ 
  export let profile: Profile;
+ 
  export let config: Config;
+ 
  export let path: string;
+ 
  export let members: string[] = [];
+ 
</script>
+
+ 
<style>
+ 
  .card {
+ 
    width: 10rem;
+ 
    height: 10rem;
+ 
    margin-right: 3rem;
+ 
    margin-top: 1.5rem;
+ 
    margin-bottom: 1.5rem;
+ 
    padding: 1rem;
+ 
    display: inline-block;
+ 
    text-align: center;
+ 
    border-radius: 1rem;
+ 
  }
+ 
  .card::last-child {
+ 
    margin-right: 0;
+ 
  }
+ 
  .card:hover  {
+ 
    background: var(--color-foreground-background-lighter);
+ 
  }
+ 
  .card-avatar {
+ 
    margin: 0 auto;
+ 
    text-align: center;
+ 
    width: 4rem;
+ 
    height: 4rem;
+ 
  }
+ 
  .card-label {
+ 
    color: var(--color-foreground-90);
+ 
    display: inline-block;
+ 
    font-weight: var(--font-weight-medium);
+ 
    margin-top: 0.75rem;
+ 
    border-radius: 0.75rem;
+ 
    padding: 0rem 0.5rem;
+ 
    text-overflow: ellipsis;
+ 
    overflow-x: hidden;
+ 
    max-width: 8rem;
+ 
  }
+ 
  .card-members {
+ 
    font-size: 0.875rem;
+ 
    color: var(--color-foreground-faded);
+ 
  }
+ 
</style>
+
+ 
<Link to={path}>
+ 
  <div class="card">
+ 
    <div class="card-avatar">
+ 
      <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
+ 
    </div>
+ 
    <div class="card-label">
+ 
      {#if profile.name}
+ 
        {formatName(profile.name, config)}
+ 
      {:else}
+ 
        {formatAddress(profile.address)}
+ 
      {/if}
+ 
    </div>
+ 
    <div class="card-members">
+ 
      {#if members.length > 0}
+ 
        {members.length} members
+ 
      {:else}
+ 
        {formatAddress(profile.address)}
+ 
      {/if}
+ 
    </div>
+ 
  </div>
+ 
</Link>
modified src/base/home/Index.svelte
@@ -1,6 +1,7 @@
<script lang="ts">

  import { navigate } from 'svelte-routing';

  import type { Config } from '@app/config';
+ 
  import { Profile } from '@app/profile';

  import { Org } from '@app/base/orgs/Org';

  import Loading from '@app/Loading.svelte';

  import Message from '@app/Message.svelte';
@@ -13,6 +14,14 @@
    ? Org.getMulti(config.orgs.pinned, config)

    : Org.getAll(config);
+ 
  const getUsers = config.users.pinned.length > 0
+ 
    ? Profile.getMulti(config.users.pinned, config)
+ 
    : Promise.resolve([]);
+
+ 
  const getEntities = Promise.all([getUsers, getOrgs]).then(([users, orgs]) => {
+ 
    return { users: users, orgs: orgs };
+ 
  });
+ 


  const viewMore = () => {

    navigate("/orgs");

  };
@@ -56,15 +65,15 @@
    </p>

  </div>
- 
  {#await getOrgs}
+ 
  {#await getEntities}

    <div class="loading">

      <Loading center />

    </div>
- 
  {:then orgs}
+ 
  {:then entities}

    <div class="heading">

      Explore <strong>orgs</strong> and <strong>projects</strong> on the Radicle network.

    </div>
- 
    <List {config} {orgs}>
+ 
    <List {config} profiles={entities.users} orgs={entities.orgs}>

      <div class="orgs-empty">There are no orgs.</div>

    </List>

    <div class="actions">
modified src/base/orgs/List.svelte
@@ -1,68 +1,31 @@
<script lang="ts">

  import { ethers } from 'ethers';

  import { onMount } from 'svelte';
- 
  import { Link } from 'svelte-routing';

  import type { Org } from '@app/base/orgs/Org';
- 
  import Avatar from '@app/Avatar.svelte';

  import { Profile } from '@app/profile';

  import type { Config } from '@app/config';
- 
  import { formatName, formatAddress } from '@app/utils';

  import Loading from '@app/Loading.svelte';
+ 
  import Card from '@app/Card.svelte';



  export let config: Config;
- 
  export let orgs: Org[];
+ 
  export let orgs: Org[] = [];
+ 
  export let profiles: Profile[] = [];



  const orgMembers: Record<string, string[]> = {};
- 
  const getProfiles = Profile.getMulti(orgs.map(o => o.name ?? o.address), config);
+ 
  const getOrgProfiles = Profile.getMulti(orgs.map(o => o.name ?? o.address), config);



  onMount(async () => {
- 
    const promises = orgs.map(org => org.getMembers(config).then(members => {
- 
      orgMembers[ethers.utils.getAddress(org.address)] = members;
- 
    }));
+ 
    const promises = orgs.map(org => {
+ 
      org.getMembers(config).then(members => {
+ 
        orgMembers[ethers.utils.getAddress(org.address)] = members;
+ 
      });
+ 
    });



    Promise.all(promises);

  });

</script>



<style>
- 
  .org {
- 
    width: 10rem;
- 
    height: 10rem;
- 
    margin-right: 3rem;
- 
    margin-top: 1.5rem;
- 
    margin-bottom: 1.5rem;
- 
    padding: 1rem;
- 
    display: inline-block;
- 
    text-align: center;
- 
    border-radius: 1rem;
- 
  }
- 
  .org::last-child {
- 
    margin-right: 0;
- 
  }
- 
  .org:hover  {
- 
    background: var(--color-foreground-background-lighter);
- 
  }
- 
  .org-avatar {
- 
    margin: 0 auto;
- 
    text-align: center;
- 
    width: 4rem;
- 
    height: 4rem;
- 
  }
- 
  .org-label {
- 
    color: var(--color-foreground-90);
- 
    display: inline-block;
- 
    font-weight: var(--font-weight-medium);
- 
    margin-top: 0.75rem;
- 
    border-radius: 0.75rem;
- 
    padding: 0rem 0.5rem;
- 
    text-overflow: ellipsis;
- 
    overflow-x: hidden;
- 
    max-width: 8rem;
- 
  }
- 
  .org-members {
- 
    font-size: 0.875rem;
- 
    color: var(--color-foreground-faded);
- 
  }

  .list {

    display: flex;

    flex-direction: row;
@@ -73,34 +36,24 @@
  }

</style>
- 
{#await getProfiles}
+ 
{#await getOrgProfiles}

  <div class="loading">

    <Loading center />

  </div>
- 
{:then profiles}
+ 
{:then orgProfiles}

  <div class="list">
+ 
    {#each orgProfiles as profile}
+ 
      {#if orgMembers[profile.address]?.length}
+ 
        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} members={orgMembers[profile.address]} />
+ 
      {:else}
+ 
        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} />
+ 
      {/if}
+ 
    {:else}
+ 
      <slot />
+ 
    {/each}
+ 


    {#each profiles as profile}
- 
      <Link to={`/orgs/${profile.nameOrAddress}`}>
- 
        <div class="org">
- 
          <div class="org-avatar">
- 
            <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
- 
          </div>
- 
          <div class="org-label">
- 
            {#if profile.name}
- 
              {formatName(profile.name, config)}
- 
            {:else}
- 
              {formatAddress(profile.address)}
- 
            {/if}
- 
          </div>
- 
          <div class="org-members">
- 
            {#if orgMembers[profile.address]?.length}
- 
              {orgMembers[profile.address].length} members
- 
            {:else}
- 
              {formatAddress(profile.address)}
- 
            {/if}
- 
          </div>
- 
        </div>
- 
      </Link>
+ 
      <Card {profile} {config} path={`/users/${profile.nameOrAddress}`} />

    {:else}

      <slot />

    {/each}
modified src/config.json
@@ -21,6 +21,11 @@
        "dxdao.radicle.eth"

      ]

    },
+ 
    "users": {
+ 
      "pinned": [
+ 
        "cloudhead.radicle.eth"
+ 
      ]
+ 
    },

    "safe": {

      "api": "https://safe-transaction.gnosis.io",

      "viewer": "https://gnosis-safe.io/app/#/safes"
@@ -47,6 +52,9 @@
      "contractHash": "0x5c34bb0755876de98e801805e6685456eea739ad0abba1cc450a7ee0f2a70b74",

      "pinned": []

    },
+ 
    "users": {
+ 
      "pinned": []
+ 
    },

    "safe": {

      "api": "https://safe-transaction.rinkeby.gnosis.io",

      "viewer": "https://rinkeby.gnosis-safe.io/app/#/safes"
modified src/config.ts
@@ -32,6 +32,7 @@ export class Config {
  orgFactory: { address: string };

  reverseRegistrar: { address: string };

  orgs: { subgraph: string; contractHash: string; pinned: string[] };
+ 
  users: { pinned: string[] };

  gasLimits: { createOrg: number };

  provider: ethers.providers.JsonRpcProvider;

  signer: ethers.Signer & TypedDataSigner | WalletConnectSigner | null;
@@ -110,6 +111,7 @@ export class Config {
    this.orgFactory = cfg.orgFactory;

    this.reverseRegistrar = cfg.reverseRegistrar;

    this.orgs = cfg.orgs;
+ 
    this.users = cfg.users;

    this.safe = cfg.safe;

    this.safe.client = this.safe.api

      ? new SafeServiceClient(this.safe.api)