Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add SeedAddress to user page
Sebastian Martinez committed 4 years ago
commit 8b18e8006849e36872cb928d87179e4e222fb689
parent 521a2bbf60986d6f0b416403a45ae52350820a5a
5 files changed +70 -64
added src/SeedAddress.svelte
@@ -0,0 +1,59 @@
+ 
<script lang="ts">
+ 
  import type { Config } from "./config";
+ 
  import { formatSeedAddress, formatSeedId, toClipboard } from "./utils";
+
+ 
  export let config: Config;
+ 
  export let id: string;
+ 
  export let host: string;
+ 
  export let port: number;
+
+ 
  let seedCopied = false;
+
+ 
  const copySeed = (seedId: string, seedHost: string) => {
+ 
    return () => toClipboard(formatSeedAddress(seedId, seedHost, config)).then(() => {
+ 
      seedCopied = true;
+ 
      setTimeout(() => {
+ 
        seedCopied = false;
+ 
      }, 3000);
+ 
    });
+ 
  };
+ 
</script>
+
+ 
<style>
+ 
  .seed-address {
+ 
    display: inline-flex;
+ 
    font-size: 1rem;
+ 
    color: var(--color-foreground-90);
+ 
  }
+ 
  .seed-icon {
+ 
    width: 1rem;
+ 
    margin-right: 0.5rem;
+ 
  }
+ 
</style>
+
+
+ 
<div class="mobile">
+ 
  <button class="tiny faded" disabled={seedCopied} on:click={copySeed(id, host)}>
+ 
    {#if seedCopied}
+ 
      Copy ✓
+ 
    {:else}
+ 
      Copy
+ 
    {/if}
+ 
  </button>
+ 
</div>
+ 
<div class="desktop">
+ 
  <div class="seed-address">
+ 
    <span class="seed-icon">🌱</span>
+ 
    <span><a href="/seeds/{host}" class="link">{formatSeedId(id)}@{host}</a></span>
+ 
    <span class="faded">:{port}</span>
+ 
  </div>
+ 
</div>
+ 
<div class="desktop">
+ 
  <button class="tiny faded" disabled={seedCopied} on:click={copySeed(id, host)}>
+ 
    {#if seedCopied}
+ 
      Copy ✓
+ 
    {:else}
+ 
      Copy
+ 
    {/if}
+ 
  </button>
+ 
</div>
deleted src/SeedID.svelte
@@ -1,59 +0,0 @@
- 
<script lang="ts">
- 
  import type { Config } from "./config";
- 
  import { formatSeedAddress, formatSeedId, toClipboard } from "./utils";
-
- 
  export let config: Config;
- 
  export let id: string;
- 
  export let host: string;
- 
  export let port: number;
-
- 
  let seedCopied = false;
-
- 
  const copySeed = (seedId: string, seedHost: string) => {
- 
    return () => toClipboard(formatSeedAddress(seedId, seedHost, config)).then(() => {
- 
      seedCopied = true;
- 
      setTimeout(() => {
- 
        seedCopied = false;
- 
      }, 3000);
- 
    });
- 
  };
- 
</script>
-
- 
<style>
- 
  .seed-address {
- 
    display: inline-flex;
- 
    font-size: 1rem;
- 
    color: var(--color-foreground-90);
- 
  }
- 
  .seed-icon {
- 
    width: 1rem;
- 
    margin-right: 0.5rem;
- 
  }
- 
</style>
-
-
- 
<div class="mobile">
- 
  <button class="tiny faded" disabled={seedCopied} on:click={copySeed(id, host)}>
- 
    {#if seedCopied}
- 
      Copy ✓
- 
    {:else}
- 
      Copy
- 
    {/if}
- 
  </button>
- 
</div>
- 
<div class="desktop">
- 
  <div class="seed-address">
- 
    <span class="seed-icon">🌱</span>
- 
    <span><a href="/seeds/{host}" class="link">{formatSeedId(id)}@{host}</a></span>
- 
    <span class="faded">:{port}</span>
- 
  </div>
- 
</div>
- 
<div class="desktop">
- 
  <button class="tiny faded" disabled={seedCopied} on:click={copySeed(id, host)}>
- 
    {#if seedCopied}
- 
      Copy ✓
- 
    {:else}
- 
      Copy
- 
    {/if}
- 
  </button>
- 
</div>
modified src/base/orgs/View.svelte
@@ -17,7 +17,7 @@
  import { Profile, ProfileType } from '@app/profile';

  import Projects from './View/Projects.svelte';

  import Link from '@app/Link.svelte';
- 
  import SeedId from '@app/SeedID.svelte';
+ 
  import SeedAddress from '@app/SeedAddress.svelte';



  export let addressOrName: string;

  export let config: Config;
@@ -249,7 +249,7 @@
          <!-- Seed Address -->

          {#if profile.seedId && profile.seedHost}

            <div class="label">Seed</div>
- 
            <SeedId {config} id={profile.seedId} host={profile.seedHost} port={config.seed.link.port} />
+ 
            <SeedAddress {config} id={profile.seedId} host={profile.seedHost} port={config.seed.link.port} />

          {/if}

          <!-- Name/Profile -->

          <div class="label">Profile</div>
modified src/base/seeds/View.svelte
@@ -3,7 +3,7 @@
  import { Seed } from "@app/base/seeds/Seed";

  import Widget from "@app/base/projects/Widget.svelte";

  import Loading from "@app/Loading.svelte";
- 
  import SeedId from "@app/SeedID.svelte";
+ 
  import SeedAddress from "@app/SeedAddress.svelte";



  export let config: Config;

  export let seedAddress: string;
@@ -94,7 +94,7 @@
      <div class="label">Seed</div>

      {#if info.version === "0.2.0" && seed.host}

        {#await seed.getPeer() then peer}
- 
          <SeedId {config} id={peer.id} host={seed.host} port={config.seed.link.port} />
+ 
          <SeedAddress {config} id={peer.id} host={seed.host} port={config.seed.link.port} />

        {/await}

      {:else}

        <div class="seed-address subtle">N/A</div>
modified src/base/users/View.svelte
@@ -15,6 +15,7 @@
  import SetName from '@app/ens/SetName.svelte';

  import { User } from '@app/base/users/User';

  import Link from '@app/Link.svelte';
+ 
  import SeedAddress from '@app/SeedAddress.svelte';



  export let addressOrName: string;

  export let config: Config;
@@ -34,7 +35,7 @@
<style>

  main {

    padding: 5rem 0;
- 
    width: 36rem;
+ 
    width: 720px;

  }

  main > header {

    display: flex;
@@ -173,6 +174,11 @@
          <div class="mobile"><Address compact {config} address={profile.anchorsAccount} /></div>

          <div class="desktop" />

        {/if}
+ 
        <!-- Seed Address -->
+ 
        {#if profile.seedId && profile.seedHost}
+ 
          <div class="label">Seed</div>
+ 
          <SeedAddress {config} id={profile.seedId} host={profile.seedHost} port={config.seed.link.port} />
+ 
        {/if}

        <!-- Profile -->

        <div class="label">Profile</div>

        <div>