* Make sure you run `npx eslint .` to check for code formatting problems.

  You can use the `--fix` flag to automatically fix any issues the linter catches.

* Before adding any code dependencies, check with the maintainers if this is okay.

* Write properly formatted comments: they should be english sentences, eg:

      // Return the current UNIX time.

  import { Profile, ProfileType } from "@app/profile";

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

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

  export let address: string;

  export let resolve = false;

  export let noBadge = false;

  export let noAvatar = false;

  onMount(async () => {

    if (!profile) {

        (t: AddressType) => (addressType = t),

      );

      if (resolve) {

          p => (profile = p),

        );

      }

  $: addressLabel =

    resolve && profile?.name

      ? compact

        : profile.name

      : checksumAddress;

  $: checksumAddress = compact

        <Badge variant="foreground">org</Badge>

      {/if}

    {:else if addressType === AddressType.Contract}

        {addressLabel}

      </a>

      {#if !noBadge}

      <a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>

    {:else}

      <!-- While we're waiting to find out what address type it is -->

        {addressLabel}

      </a>

    {/if}

<script lang="ts">

  import { Router, Route } from "svelte-routing";

  import { Connection, state, session } from "@app/session";

  import Home from "@app/base/home/Index.svelte";

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

  import ColorPalette from "./ColorPalette.svelte";

    if ($state.connection === Connection.Connected) {

    } else if ($state.connection === Connection.Disconnected) {

      // Update the session state if we're already connected to WalletConnect

      // from a previous session.

      }

    }

  });

  function handleKeydown(event: KeyboardEvent) {

</svelte:head>

<div class="app">

    <!-- Loading wallet -->

    <div class="wrapper">

      <Loading center />

    </div>

    <ColorPalette />

    <div class="wrapper">

      <Router>

        <Route path="/">

        </Route>

        <Route path="vesting">

        </Route>

        <Route path="/:addressOrName" let:params>

        </Route>

      </Router>

    </div>

  {:catch err}

<script lang="ts">

  import { formatRadicleUrn, formatTimestamp } from "@app/utils";

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

  import { Profile, ProfileType } from "@app/profile";

  export let author: Author;

  export let timestamp: number;

  export let caption: string;

  export let profile: Profile | null = null;

  onMount(async () => {

      profile = await Profile.get(

        author.profile.ens.name,

        ProfileType.Minimal,

      );

    }

  });

      noBadge

      compact

      {noAvatar}

      {profile}

      address={profile.address} />

  {:else if author.profile}

<script lang="ts">

  import { onMount } from "svelte";

  import type { Comment, Thread } from "@app/issue";

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

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

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

  export let comment: Comment | Thread;

  export let caption = "left a comment";

  export let getImage: (path: string) => Promise<Blob>;

      profile = await Profile.get(

        comment.author.profile.ens.name,

        ProfileType.Minimal,

      );

    }

  });

    <div class="card-header">

      <Authorship

        noAvatar

        {caption}

        {profile}

        author={comment.author}

  import { Connection, state } from "@app/session";

  import type { Err } from "@app/error";

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

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

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

  export let caption = "Connect";

  export let buttonVariant: "foreground" | "primary";

  let error: Err | null = null;

  const onModalClose = () => {

    if (wcs.state === "open") {

      wcs.onClose();

    }

  };

  const onConnect = async () => {

    try {

    } catch (e: any) {

      walletConnectState.set({ state: "close" });

      error = e;

  };

  $: connecting = $state.connection === Connection.Connecting;

</script>

<Button

{#if $walletConnectState.state === "open"}

  <ConnectWallet

    uri={$walletConnectState.uri}

    on:close={onModalClose} />

{:else if error}

</script>

<script lang="ts">

  import cloneDeep from "lodash/cloneDeep";

  import { link } from "svelte-routing";

  export let fields: Field[];

  export let editable = false;

  export let disabled = false;

  let formFields = cloneDeep(fields);

  let hasErrors = false;

                <Address

                  resolve={field.resolve ?? false}

                  address={field.value}

              </div>

              <div class="layout-mobile-inline">

                <Address

                  compact

                  resolve={field.resolve ?? false}

                  address={field.value}

              </div>

            {:else if field.url}

              <div>

<script lang="ts">

  import type { ProjectsAndProfiles } from "@app/Search.svelte";

  import type { Session } from "@app/session";

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

  export let session: Session | null;

  let query: string;

  let results: ProjectsAndProfiles | null = null;

    <a use:link href="/" class="logo"><Logo /></a>

    <div class="search">

      <Search

        on:search={e => {

          ({ query, results } = e.detail);

        }} />

          <Floating>

            <span slot="toggle">Seeds</span>

            <svelte:fragment slot="modal">

            </svelte:fragment>

          </Floating>

        </span>

  </div>

  <div class="right">

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

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

      </a>

      <!-- Don't show anything -->

    {:else}

      <span class="network unavailable">No Network</span>

      <Button

        style="width: 10rem; white-space: nowrap;"

        variant="foreground"

        on:mouseover={() => (sessionButtonHover = true)}

        on:focus={() => (sessionButtonHover = true)}

        on:mouseout={() => (sessionButtonHover = false)}

        on:blur={() => (sessionButtonHover = false)}>

          <Loading small center />

        {:then profile}

          {#if sessionButtonHover}

          {/if}

        {/await}

      </Button>

      <span class="connect">

      </span>

    {/if}

    <ThemeToggle />

          <div class="modal">

            <div style="padding-bottom: 1rem;">

              <Search

                on:finished={() => {

                  closeFocused();

                }}

  {#if results}

    <SearchResults

      {results}

      {query}

      on:close={() => {

<script lang="ts">

  import type { SvelteComponent } from "svelte";

  import type { Seed, Stats } from "@app/base/seeds/Seed";

  import type { ProjectInfo } from "@app/project";

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

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

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

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

  export let addressOrName: string;

  export let action: string | null = null;

  <title>{addressOrName}</title>

</svelte:head>

  <div class="layout-centered">

    <Loading center />

  </div>

        <span class="title txt-title">

          <span class="txt-bold layout-desktop">

            {profile.name

              : profile.address}

          </span>

          <span class="txt-bold layout-mobile">

            {profile.name

              : utils.formatAddress(profile.address)}

          </span>

          {#if profile.name && profile.org}

      <!-- Seed Address -->

      {#if profile.seed && profile.seed.valid}

        <div class="txt-highlight">Seed</div>

      {/if}

      <!-- Address -->

      <div class="txt-highlight">Address</div>

      <div class="layout-desktop">

      </div>

      <div class="layout-mobile">

      </div>

      <div class="layout-desktop" />

      <!-- Owner -->

      {#if profile.org}

        <div class="txt-highlight">Owner</div>

        <div class="layout-desktop">

        </div>

        <div class="layout-mobile">

        </div>

        <div class="layout-desktop" />

      {/if}

  <svelte:component

    this={setNameForm}

    entity={new User(profile.address)}

    on:close={() => (setNameForm = null)} />

{:catch err}

  {#if err instanceof NotFoundError}

<script lang="ts">

  import { onMount } from "svelte";

  import type { Review } from "@app/patch";

  import { formatVerdict } from "@app/patch";

  import type { Blob } from "@app/project";

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

  export let review: Review;

  export let getImage: (path: string) => Promise<Blob>;

  let profile: Profile | null = null;

      profile = await Profile.get(

        review.author.profile.ens.name,

        ProfileType.Minimal,

      );

    }

  });

{#if review.comment.body}

  <Comment

    {getImage}

    comment={review.comment}

    caption={formatVerdict(review.verdict)} />

{:else}

  <div>

    <Authorship

      {profile}

      author={review.author}

      timestamp={review.timestamp}

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

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

  import { Project } from "@app/project";

  export interface ProjectsAndProfiles {

    projects: { info: ProjectInfo; seed: Host }[];

  async function searchProjectsAndProfiles(

    query: string,

  ): Promise<SearchResult> {

    try {

      // The query is a plain Ethereum address.

        return { type: "singleProfile", id: query };

      }

        nameOrUrn: query,

      }));

      // The query is a radicle project URN.

      try {

        let params: string[];

          params = [normalizedQuery];

        } else {

          params = [

            `${normalizedQuery}.eth`,

          ];

        }

        projectsAndProfiles.profiles.push(...profiles);

      } catch {

        // TODO: collect errors and forward to user.

</script>

<script lang="ts" strictEvents>

  import debounce from "lodash/debounce";

  import { createEventDispatcher } from "svelte";

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

  import { unreachable } from "@app/utils";

  const dispatch = createEventDispatcher<{

    finished: boolean;

    loading = true;

    const query = input;

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

      shake();

import { Seed } from "@app/base/seeds/Seed";

import SeedAddress from "./SeedAddress.svelte";

describe("SeedAddress", () => {

  it("shows the seed emoji and seed host", () => {

    });

  });

  it("shows the full seed id", () => {

    });

  });

});

<script lang="ts">

  import { navigate } from "svelte-routing";

  import { Seed } from "@app/base/seeds/Seed";

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

  import type { SeedSession } from "@app/siwe";

  import { closeFocused } from "@app/Floating.svelte";

  export let seeds: { [key: string]: SeedSession };

  // When a user signs into a new seed we want to update the seed listing

  $: formatSeeds = async () => {

    return await Promise.all(

      Object.values(seeds).map(async session => {

        const key = `${seed.emoji} ${seed.host}`;

        return {

<script lang="ts">

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

  import type { Seed } from "@app/base/seeds/Seed";

  import { signInWithEthereum } from "@app/siwe";

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

  import { Connection } from "@app/session";

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

  export let seed: Seed;

  export let caption = "Sign in";

  export let tooltip = "";

  export let disabled = false;

  on:click={async () => {

    connection = Connection.Connecting;

    try {

    } catch (e) {

      console.error("Sign in", e);

      connection = Connection.Disconnected;

<script lang="ts">

  import { session } from "@app/session";

  import { setOpenGraphMetaTag, toWei, capitalize } from "@app/utils";

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

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

  let amount: string = "";

  let loading: boolean = false;

    loading = true;

    try {

      const currentTime = new Date().getTime();

      const lastWithdrawal = await lastWithdrawalByUser(

        $session.signer,

      );

      const maxWithdrawAmount = await getMaxWithdrawAmount(

        $session.signer,

      );

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

<main>

  <div class="title">

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

    </span>

  </div>

    <div class="subtitle">

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

      </span>

      please

      <br />

  {:else if !$session}

    <div class="subtitle">

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

      </span>

      ​,

      <br />

<script lang="ts">

  import { Route } from "svelte-routing";

  import Index from "@app/base/faucet/Index.svelte";

  import Withdraw from "./Withdraw.svelte";

</script>

<Route path="faucet">

</Route>

<Route path="faucet/withdraw">

</Route>

<script lang="ts">

  import { onMount } from "svelte";

  import { navigate } from "svelte-routing";

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

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

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

  import { session } from "@app/session";

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

  let error: Error;

  const amount: string = window.history.state.amount;

    try {

      if ($session) {

        state.status = Status.Signing;

        state.status = Status.Pending;

        await tx.wait();

        state.status = Status.Success;

import * as ethers from "ethers";

import { assert } from "@app/error";

import type { TransactionResponse } from "@ethersproject/providers";

import { toWei } from "@app/utils";

import type { WalletConnectSigner } from "@app/WalletConnectSigner";

import type { TypedDataSigner } from "@ethersproject/abstract-signer";

type Signer = (ethers.Signer & TypedDataSigner) | WalletConnectSigner | null;

export async function withdraw(

  amount: string,

  signer: Signer,

): Promise<TransactionResponse> {

  assert(signer);

  const faucet = new ethers.Contract(

    signer,

  );

}

export async function getMaxWithdrawAmount(

  signer: Signer,

): Promise<ethers.BigNumber> {

  assert(signer);

  const faucet = new ethers.Contract(

    signer,

  );

export async function calculateTimeLock(

  amount: string,

  signer: Signer,

): Promise<ethers.BigNumber> {

  assert(signer);

  const faucet = new ethers.Contract(

    signer,

  );

export async function lastWithdrawalByUser(

  signer: Signer,

): Promise<ethers.BigNumber> {

  assert(signer);

  const address = signer.getAddress();

  const faucet = new ethers.Contract(

    signer,

  );

<script lang="ts">

  import { navigate } from "svelte-routing";

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

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

  import type { ProjectInfo } from "@app/project";

  import * as proj from "@app/project";

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

  import { setOpenGraphMetaTag } from "@app/utils";

  setOpenGraphMetaTag([

    { prop: "og:title", content: "Radicle Interface" },

import * as ethers from "ethers";

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

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

import { assert } from "@app/error";

export class Org {

  address: string;

    this.name = name;

  }

    try {

      const [owner, resolved] = await resolveOrgOwner(org);

}

export const getOrgContract = cache.cached(

  },

  addressOrName => addressOrName,

);

<script lang="ts">

  import type { Blob, Project } from "@app/project";

  import { canonicalize, capitalize } from "@app/utils";

  import { formatObjectId } from "@app/cobs";

  export let issue: Issue;

  export let project: Project;

  // Get an image blob based on a relative path.

  const getImage = async (imagePath: string): Promise<Blob> => {

      </div>

    </div>

    <Authorship

      author={issue.author}

      timestamp={issue.timestamp}

      caption="opened on" />

  </header>

  <main>

    <div class="comments">

      {#each issue.discussion as comment}

        {#if comment.replies}

          <div class="replies">

            {#each comment.replies as reply}

            {/each}

          </div>

        {/if}

  import { onMount } from "svelte";

  import { formatObjectId } from "@app/cobs";

  import type { Issue } from "@app/issue";

  import { Profile, ProfileType } from "@app/profile";

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

  export let issue: Issue;

  let profile: Profile | null = null;

      profile = await Profile.get(

        issue.author.profile.ens.name,

        ProfileType.Minimal,

      );

    }

  });

    </div>

    <Authorship

      {profile}

      caption="opened"

      author={issue.author}

      timestamp={issue.timestamp} />

</script>

<script lang="ts">

  import type { Issue } from "@app/issue";

  import type { ToggleButtonOption } from "@app/ToggleButton.svelte";

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

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

  export let issues: Issue[];

  export let project: Project;

  export let state: State;

              path: null,

            });

          }}>

        </div>

      {/each}

    </div>

<script lang="ts">

  import { Project, ProjectContent } from "@app/project";

  import { capitalize } from "@app/utils";

  import { Patch, PatchTab } from "@app/patch";

  export let patch: Patch;

  export let project: Project;

  const onSwitch = ({ detail }: { detail: PatchTab }) => {

    activeTab = detail;

    </div>

    <Authorship

      noAvatar

      author={patch.author}

      timestamp={patch.timestamp}

      caption="opened" />

  <main>

    {#if activeTab === PatchTab.Timeline}

      <div class="flex">

        <PatchSideBar {patch} />

      </div>

    {:else if activeTab === PatchTab.Diff && revision.changeset}

  import { onMount } from "svelte";

  import { formatObjectId } from "@app/cobs";

  import type { Patch } from "@app/patch";

  import { Profile, ProfileType } from "@app/profile";

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

  export let patch: Patch;

  let profile: Profile | null = null;

      profile = await Profile.get(

        patch.author.profile.ens.name,

        ProfileType.Minimal,

      );

    }

  });

    </div>

    <Authorship

      {profile}

      caption="opened"

      author={patch.author}

      timestamp={patch.timestamp} />

<script lang="ts">

  import { type Patch, TimelineType } from "@app/patch";

  import { formatSeedId } from "@app/utils";

  import { canonicalize } from "@app/utils";

  export let patch: Patch;

  export let revisionNumber: number;

  export let project: Project;

  $: timeline = patch.createTimeline(revisionNumber);

          }}

          caption={`merged to ${formatSeedId(element.inner.peer.id)}`}

          timestamp={element.timestamp}

      </div>

    {:else if element.type === TimelineType.Review && element.inner.author.profile?.ens?.name}

      <div class="margin-left">

      </div>

    {:else if element.type === TimelineType.Comment}

      <div class="margin-left">

        <!-- Since the element variable only experiences changes on the inner property,

        this component has to be forced to be rerendered when element.inner changes -->

        {#key element.inner}

        {/key}

      </div>

    {:else if element.type === TimelineType.Thread}

      <div class="margin-left">

        <div class="replies">

          {#each element.inner.replies as comment}

          {/each}

        </div>

      </div>

<script lang="ts">

  type State = "proposed" | "draft" | "archived";

  import type { Patch } from "@app/patch";

  import type { ToggleButtonOption } from "@app/ToggleButton.svelte";

  import { groupPatches } from "@app/patch";

  export let state: State = "proposed";

  export let patches: Patch[];

  export let project: Project;

              path: null,

            });

          }}>

        </div>

      {/each}

    </div>

<script lang="ts">

  import type { State as IssueState } from "./Issues.svelte";

  import * as proj from "@app/project";

  import Patch from "./Patch.svelte";

  export let peer: string | null = null;

  export let project: proj.Project;

  export let content: proj.ProjectContent;

  export let revision: string | null;

  const parentName = project.profile

    : null;

  let pageTitle = parentName ? `${parentName}/${project.name}` : project.name;

    <Async

      fetch={issue.Issue.getIssues(project.urn, project.seed.api)}

      let:result>

    </Async>

  {:else if content === proj.ProjectContent.Issue && $browserStore.issue}

    <Async

        project.seed.api,

      )}

      let:result>

    </Async>

  {:else if content === proj.ProjectContent.Patches}

    <Async

      fetch={patch.Patch.getPatches(project.urn, project.seed.api)}

      let:result>

    </Async>

  {:else if content === proj.ProjectContent.Patch && $browserStore.patch}

    <Async

        project.seed.api,

      )}

      let:result>

    </Async>

  {/if}

{:else}

<script lang="ts">

  import type { Writable } from "svelte/store";

  import { formatLocationHash } from "@app/utils";

  import * as proj from "@app/project";

  import type { RouteLocation } from "@app/index";

  export let peer: string | null;

  export let content: proj.ProjectContent = proj.ProjectContent.Tree;

  export let project: proj.Project;

  export let location: RouteLocation | null = null;

  const browse: proj.BrowseTo = { content, peer, path: "/" };

  revision={browser.revision || head}

  content={browser.content}

  {project}

<script lang="ts">

  import { Route } from "svelte-routing";

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

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

</script>

<!-- With a seed context -->

<Route path="/seeds/:seed/:id/*" let:params>

</Route>

<Route path="/seeds/:seed/:id/remotes/:peer/*" let:params>

</Route>

<!-- Explicit user and org context, will at some point be replaced by the generic route -->

<Route path="/:profile/:id/remotes/:peer/*" let:params>

  <View

    profileName={params.profile}

    id={params.id}

    peer={params.peer} />

</Route>

<Route path="/:profile/:id/*" let:params>

</Route>

<script lang="ts">

  import { Route, Router } from "svelte-routing";

  import { Project, ProjectContent } from "@app/project";

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

  export let seedHost: string | null = null;

  export let profileName: string | null = null; // Address or name of parent profile.

  export let peer: string | null = null;

</script>

<style>

</style>

<main>

    <header>

      <Loading center />

    </header>

    <Router>

      <!-- The default action is to render Browser with the default branch head -->

      <Route path="/">

      </Route>

      <Route path="/tree">

      </Route>

      <Route path="/tree/*" let:params let:location>

        <ProjectRoute

          {location}

          {peer}

          {project}

      </Route>

      <Route path="/history">

          content={ProjectContent.History}

          {peer}

          {project}

      </Route>

      <Route path="/history/*" let:params let:location>

        <ProjectRoute

          {location}

          {peer}

          {project}

      </Route>

      <Route path="/commits/:commit" let:params>

          content={ProjectContent.Commit}

          {peer}

          {project}

      </Route>

      <Route path="/commits/*" let:params let:location>

        <ProjectRoute

          {location}

          {peer}

          {project}

      </Route>

      <Route path="/issues" let:location>

          {peer}

          {project}

          {location}

      </Route>

      <Route path="/issues/:issue" let:params let:location>

        <ProjectRoute

          {peer}

          {project}

          {location}

      </Route>

      <Route path="/patches">

          content={ProjectContent.Patches}

          {peer}

          {project}

      </Route>

      <Route path="/patches/:patch" let:params>

        <ProjectRoute

          patch={params.patch}

          {peer}

          {project}

      </Route>

    </Router>

  {:catch}

<script lang="ts">

  import { navigate } from "svelte-routing";

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

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

  let input = "";

  let valid: boolean = false;

<main>

  <div class="title">

    name

  </div>

  <div class="subtitle">

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

    the

    <br />

    Radicle names never expire and free to register.

  </div>

      {valid}

      {validationMessage}>

      <svelte:fragment slot="right">

      </svelte:fragment>

    </TextInput>

  import { navigate } from "svelte-routing";

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

  import { session } from "@app/session";

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

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

    NameUnavailable,

  }

  export let name: string;

  export let owner: string | null;

  onMount(async () => {

    try {

      if (isAvailable) {

        state = State.NameAvailable;

  </span>

  <span slot="subtitle">

  </span>

  <span slot="body">

        <Connect

          caption="Connect to register"

          buttonVariant="primary"

      {/if}

      <Button on:click={() => navigate("/registrations")} variant="text">

  import Submit from "@app/base/registrations/Submit.svelte";

  import View from "@app/base/registrations/View.svelte";

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

  import type { Session } from "@app/session";

  import { getSearchParam } from "@app/utils";

  export let session: Session | null;

</script>

<Route path="registrations">

</Route>

<Route path="registrations/:name/form" let:params let:location>

</Route>

<Route path="registrations/:name/submit" let:params let:location>

  {#if session}

    <Submit

      name={params.name}

      owner={getSearchParam("owner", location)}

      {session} />

</Route>

<Route path="registrations/:domain" let:params>

</Route>

  import { onMount } from "svelte";

  import { navigate } from "svelte-routing";

  import type { Session } from "@app/session";

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

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

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

  import { registerName, State, state } from "./registrar";

  export let name: string;

  export let owner: string | null;

  export let session: Session;

  const registrationOwner = owner || session.address;

  const view = () =>