<a use:link href="/faucet">

        <span class="network">Rinkeby</span>

      </a>

  import debounce from "lodash/debounce";

  export let noDelay = false;

  if (noDelay) {

  } else {

    debounce(() => (show = true), 200)();

  }

  async function search() {

    if (!valid) {

      return;

    }

    loading = true;

    const query = input;

    const searchResult = await searchProjectsAndProfiles(input, config);

    if (searchResult.type === "nothing") {

      shake();

    } else if (searchResult.type === "error") {

      // TODO: show some kind of notification to the user.

      shake();

    } else if (searchResult.type === "singleProfile") {

      input = "";

      navigate(`/${searchResult.id}`, { replace: true });

      dispatch("finished");

    } else if (searchResult.type === "singleProject") {

      input = "";

      navigate(`/seeds/${searchResult.seedHost}/${searchResult.id}`, {

        replace: true,

      });

      dispatch("finished");

    } else if (searchResult.type === "projectsAndProfiles") {

      // TODO: show some kind of notification about any errors to the user.

      input = "";

      dispatch("search", {

        query,

        results: searchResult.projectsAndProfiles,

      });

      dispatch("finished");

    } else {

      unreachable(searchResult);

    loading = false;

  $: valid = input !== "";

  .search {

    display: flex;

  }

<div class="search" class:shaking>

    valid={input !== ""}

    {loading}

    on:submit={search}

    placeholder="Search a name or address…" />

<script lang="ts" strictEvents>

  import { createEventDispatcher } from "svelte";

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

  export let loading: boolean = false;

  export let valid: boolean = false;

  export let validationMessage: string | undefined = undefined;

  const dispatch = createEventDispatcher<{

    submit: boolean;

  }>();

  function handleKeydown(event: KeyboardEvent) {

    if (event.key === "Enter") {

      dispatch("submit");

    }

  }

    flex: 1;

    height: 2.5rem;

    width: 100%;

    gap: 0.5rem;

  }

  .validation-message {

    color: var(--color-negative);

    font-size: var(--font-size-small);

    margin-left: 1rem;

    position: relative;

    margin-top: 0.5rem;

  }

  .validation-wrapper {

    position: absolute;

    width: 100%;

  }

  .key-hint {

    border-radius: 0.25rem;

    color: var(--color-secondary);

    background-color: var(--color-secondary-2);

    padding: 0 0.5rem;

  <div class="validation-wrapper">

    <input

      class:regular={variant === "regular"}

      class:dashed={variant === "dashed"}

      style:padding-right={rightContainerWidth

        ? `${rightContainerWidth}px`

        : "auto"}

      bind:this={inputElement}

      type="text"

      {name}

      {placeholder}

      {disabled}

      bind:value

      on:input

      on:keydown|stopPropagation={handleKeydown}

      on:click

      on:change />

      {#if $$slots.right}

        <slot name="right" />

      {/if}

      {#if loading}

        <Loading small noDelay />

      {/if}

      {#if valid && !loading}

        <div class="key-hint">⏎</div>

      {/if}

    {#if validationMessage}

      <div class="validation-message">

        {validationMessage}

      </div>

    {/if}

  </div>

    calculateTimeLock,

  let amount: string = "";

  let loading: boolean = false;

  let validationMessage: string | undefined = undefined;

  let valid: boolean = false;

  async function withdraw(amount: string) {

    if (!valid || !$session) {

      return;

    }

    loading = true;

      const lastWithdrawal = await lastWithdrawalByUser(

        $session.signer,

        config,

      );

      const maxWithdrawAmount = await getMaxWithdrawAmount(

        $session.signer,

        config,

      );

      if (toWei(amount).gt(maxWithdrawAmount)) {

        validationMessage = `Reduce amount, max withdrawal is ${formatEther(

          maxWithdrawAmount,

        )}.`;

        return;

      }

      // since JS doesn't display a correct Date string when passing a 10 digit

      // timestamp.

        validationMessage = `Not ready to withdraw, return after ${new Date(

          nextAvailableWithdraw.toNumber(),

        ).toLocaleString("en-GB")}`;

        return;

      navigate("/faucet/withdraw", { state: { amount } });

    } catch (error) {

      validationMessage = "There was an error, check the dev console.";

      console.error(error);

    } finally {

      loading = false;

  function validate(amount: string) {

    if (amount === "") {

      return { valid: false };

    }

    if (isNaN(Number(amount)) || Number(amount) <= 0) {

      return {

        valid: false,

        validationMessage: "Please enter a positive number.",

      };

    }

    return { valid: true };

  $: ({ valid, validationMessage } = validate(amount));

  main {

    gap: 1.5rem;

    height: 100%;

    justify-content: center;

    padding-bottom: 24vh;

    padding-top: 5rem;

    width: 28rem;

  .title {

    color: var(--color-secondary);

    font-size: var(--font-size-medium);

  .subtitle {

    color: var(--color-secondary);

  .form {

    gap: 1rem;

  <title>Radicle &ndash; Faucet</title>

<main>

  <div class="title">

    Obtain RAD tokens on <span class="txt-bold">

      {config.network.name}

    </span>

  {#if config.network.name === "homestead"}

    <div class="subtitle">

      To get RAD tokens on <span class="txt-bold">

        {config.network.name},

      </span>

      please

      <br />

      check

      <a class="link" href="https://docs.radicle.xyz/get-involved/obtain-rad">

        popular exchanges

      </a>

      ​.

    </div>

  {:else if !$session}

    <div class="subtitle">

      To get RAD tokens on <span class="txt-bold">

        {config.network.name}

      </span>

      ​,

      <br />

      please connect your wallet.

    </div>

  {:else}

    <div class="form">

      <TextInput

        autofocus

        placeholder="Enter amount to withdraw"

        {validationMessage}

        on:submit={() => {

          withdraw(amount);

        }}

        bind:value={amount}

        {valid}

        {loading} />

      <Button

        variant="primary"

        on:click={() => withdraw(amount)}

        disabled={!valid || loading}>

        Withdraw

      </Button>

    </div>

  {/if}

  let valid: boolean = false;

  let validationMessage: string | undefined = undefined;

    if (!valid) {

      return;

    }

    navigate(`/registrations/${ensName}/form`);

  function validate(input: string) {

    if (input === "") {

      return { valid: false };

    }

      return {

        valid: false,

        validationMessage: "Please do not use dots as separators.",

      };

      return {

        valid: false,

        validationMessage: "Please enter a minimum of 2 characters.",

      };

      return {

        valid: false,

        validationMessage: "Please enter a maximum of 128 characters.",

      };

    return { valid: true };

  $: ensName = input.trim();

  $: ({ valid, validationMessage } = validate(ensName));

  main {

    flex-direction: column;

    gap: 1.5rem;

    height: 100%;

    justify-content: center;

    padding-bottom: 24vh;

    padding-top: 5rem;

    width: 32rem;

  .title {

    color: var(--color-secondary);

    font-size: var(--font-size-medium);

  .subtitle {

    color: var(--color-secondary);

  .form {

    display: flex;

    gap: 1rem;

  <title>Radicle &ndash; Register</title>

<main>

  <div class="title">

    Register a <span class="txt-bold">{config.registrar.domain}</span>

    name

  </div>

  <div class="subtitle">

    Register a unique name with our ENS registrar, under <br />

    the

    <span class="txt-bold">radicle.eth</span>

    domain (e.g. cloudhead.radicle.eth).

    <br />

    Radicle names never expire and free to register.

  </div>

  <div class="form">

    <TextInput

      bind:value={input}

      autofocus

      on:submit={register}

      {valid}

      {validationMessage}>

      <svelte:fragment slot="right">

        .{config.registrar.domain}

      </svelte:fragment>

    </TextInput>

    <Button

      disabled={!valid}

      variant="primary"

      size="regular"

      on:click={register}>

      Check

    </Button>

  import type { VestingInfo } from "./vesting";

  import * as utils from "@app/utils";

  import Modal from "@app/Modal.svelte";

  import { state, getInfo, withdrawVested } from "./vesting";

  let validationMessage: string | undefined = undefined;

  let valid: boolean = false;

    if (!valid) {

      return;

    }

    state.set("loading");

    try {

      info = await getInfo(contractAddress, config);

    } catch (error) {

      validationMessage =

        "Couldn't load contract, check dev console for details.";

      console.error(error);

    }

    state.set("idle");

    info && session && utils.isAddressEqual(info.beneficiary, session.address);

  function validate(address: string) {

    if (address === "") {

      return { valid: false };

    }

    if (!utils.isAddress(address)) {

      return {

        valid: false,

        validationMessage: "Please enter a valid Ethereum address.",

      };

    }

    return { valid: true };

  }

  $: ({ valid, validationMessage } = validate(contractAddress));

  main {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    height: 100%;

    justify-content: center;

    padding-bottom: 24vh;

    padding-top: 5rem;

    width: 38rem;

  }

  .title {

    font-size: var(--font-size-medium);

  .form {

{#if info}

  <Modal>

    <span slot="title">

      {contractAddress}

    </span>

    <span slot="body">

      {#if $state === "withdrawn"}

        Tokens successfully withdrawn to {utils.formatAddress(

          info.beneficiary,

        )}.

      {:else}

        <table>

          <tr>

            <td class="label">Beneficiary</td>

            <td>

              <Address {config} address={info.beneficiary} compact resolve />

            </td>

          </tr>

          <tr>

            <td class="label">Allocation</td>

            <td>

              {info.totalVesting}

              <span class="txt-bold">{info.symbol}</span>

            </td>

          </tr>

          <tr>

            <td class="label">Withdrawn</td>

            <td>

              {info.withdrawn}

              <span class="txt-bold">{info.symbol}</span>

            </td>

          </tr>

          <tr>

            <td class="label">Withdrawable</td>

            <td>

              {info.withdrawableBalance}

              <span class="txt-bold">{info.symbol}</span>

            </td>

          </tr>

        </table>

      {/if}

    </span>

    <span slot="actions">

      {#if isBeneficiary}

        {#if $state === "withdrawingSign"}

          <Button disabled waiting={true} variant="primary">

            Waiting for signature…

          </Button>

        {:else if $state === "withdrawing"}

          <Button disabled waiting={true} variant="primary">

            Withdrawing…

          </Button>

        {:else if $state === "idle"}

          <Button

            on:click={() => withdrawVested(contractAddress, config)}

            variant="primary">

            Withdraw

          </Button>

        {/if}

      {/if}

      <Button

        on:click={() => {

          info = null;

          state.set("idle");

        }}

        variant="primary">

        Back

      </Button>

    </span>

  </Modal>

{:else}

  <main>

    <div class="title">

      Your Radicle <span class="txt-bold">vesting contract</span>

    </div>

    <div class="form">

      <TextInput

        autofocus

        placeholder="Enter vesting contract address"

        {valid}

        {validationMessage}

        loading={$state === "loading"}

        disabled={$state === "loading"}

        on:submit={() => {

          loadContract(config);

        }}

        bind:value={contractAddress} />

      <Button

        on:click={() => loadContract(config)}

        variant="primary"

        waiting={$state === "loading"}

        disabled={!valid || $state === "loading"}>

        Load

      </Button>

    </div>

  </main>

{/if}

import { ethers } from "ethers";

import { writable } from "svelte/store";

import * as session from "@app/session";

import * as utils from "@app/utils";

export const state = writable<

  "idle" | "loading" | "withdrawingSign" | "withdrawing" | "withdrawn"

>("idle");

  state.set("withdrawingSign");

  state.set("withdrawing");

  state.set("withdrawn");

    totalVesting: utils.formatBalance(total),

    withdrawableBalance: utils.formatBalance(withdrawable),

    withdrawn: utils.formatBalance(withdrawn),

<script lang="ts" strictEvents>

  import type { Org } from "@app/base/orgs/Org";

  import { createEventDispatcher } from "svelte";

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

  import Modal from "@app/Modal.svelte";

  import { formatAddress, isAddress } from "@app/utils";

  const dispatch = createEventDispatcher<{ close: boolean }>();

  let state:

    | "idle"

    // Single sig.

    | "signing"

    | "pending"

    | "success"

    // Multi sig.

    | "proposing"

    | "proposed"

    | "failed" = "idle";

  let newOwner: string = "";

  let errorMessage: string | null = null;

  let valid: boolean = false;

  let validationMessage: string | undefined = undefined;

    if (!valid) {

        state = "proposing";

        state = "proposed";

        state = "signing";

        state = "pending";

        state = "success";

    } catch (error: unknown) {

      if (error instanceof Error) {

        errorMessage = error.message;

      } else {

        errorMessage = "Unknown error.";

      }

      console.error(error);

      state = "failed";

  function validate(address: string) {

    if (address === "") {

      return { valid: false };

    }

    if (state !== "idle") {

      return { valid: false };

    }

    if (!isAddress(address)) {

      return {

        valid: false,

        validationMessage: "Please enter a valid Ethereum address.",

      };

    }

    return { valid: true };

  }

  $: ({ valid, validationMessage } = validate(newOwner));

    margin-top: 2rem;

  }

  .message {

    padding-left: 1rem;

    padding-top: 1rem;

    word-break: break-all;

{#if state === "success" && newOwner}

{:else if state === "proposed" && org}

{:else if state === "failed"}

  <Modal floating error small>

    <div slot="title">

      🔑

      <div>Transfer ownership</div>

    </div>

    <div slot="subtitle">

      <div class="message">

        {errorMessage}

      </div>

    </div>

    <div slot="actions" class="actions">

      <Button

        variant="negative"

        on:click={() => {

          state = "idle";

        }}>

        Back

      </Button>

    </div>

  </Modal>

  <Modal floating>

      {#if state === "signing"}

      {:else if state === "pending"}

      {:else if state === "proposing" && org}

      {:else if state === "idle"}

      {#if state === "idle"}

        <div style="position: absolute; text-align: left;">

          <div style="width: 31rem;">

            <TextInput

              autofocus

              {valid}

              {validationMessage}

              on:submit={onSubmit}

              disabled={state !== "idle"}

              bind:value={newOwner} />

          </div>

      {:else if state === "pending" || state === "proposing" || state === "signing"}

      {#if state === "signing"}

      {:else if state === "pending"}

        <Button variant="primary" on:click={onSubmit} disabled={!valid}>

  import ErrorModal from "@app/Error.svelte";

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

    if (!valid) {

      return;

    }

      } catch (e) {

        if (e instanceof Error) {

          error = e.message;

        } else {

          error = "Unknown error. Check dev console for details.";

        }

  $: valid = name !== "" && state === State.Idle;

  <ErrorModal floating title="🧣" on:close>

  </ErrorModal>

  <ErrorModal floating title="Transaction failed" message={error} on:close />

            on:submit={onSubmit}

            loading={state === State.Checking}

            {valid}

        <Button variant="primary" on:click={onSubmit} disabled={!valid}>

          Submit