--elevation-high: 0px 8px 64px var(--color-secondary-5);

  --elevation-high-negative: 0px 8px 64px var(--color-negative-5);

  --elevation-high: 0px 8px 64px var(--color-secondary-5);

  --elevation-high-negative: 0px 8px 64px var(--color-negative-5);

  --glow: var(--color-secondary-3);

  --glow-error: var(--color-negative-3);

  --font-size-huge: 2rem;

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

  import { twemoji, unreachable } from "@app/lib/utils";

  import ColorPalette from "./App/ColorPalette.svelte";

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

  import Faucet from "@app/views/faucet/Routes.svelte";

  function handleKeydown(event: KeyboardEvent) {

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

      const elems = document.querySelectorAll<HTMLElement>("button.primary");

      if (elems.length === 1) {

        // We only allow this when there's one primary button.

        elems[0].click();

      }

    }

  }

  .emoji {

    margin: 1rem 0;

  }

<svelte:window on:keydown={handleKeydown} />

    <!-- Loading wallet -->

    <ColorPalette />

        <Faucet {wallet} activeRoute={$activeRouteStore} />

        <Registrations

          {wallet}

          session={$session}

          activeRoute={$activeRouteStore} />

        <NotFound title="404" subtitle="Nothing here" />

    <div class="wrapper">

      <Modal error subtle>

        <span slot="title">

          <div class="emoji" use:twemoji>👻</div>

          <div>Error connecting to network</div>

        </span>

        <span slot="body">

          {err.message ? err.message : JSON.stringify(err)}

        </span>

      </Modal>

  const colors = extractCssVariables("--color");

  let show = false;

  const onKeydown = (event: KeyboardEvent) => {

    if (import.meta.env.PROD) {

      return;

    }

    const hasInputTarget =

      event.target &&

      ((event.target as HTMLInputElement).type === "text" ||

        (event.target as HTMLTextAreaElement).type === "textarea");

    if (

      hasInputTarget ||

      event.repeat ||

      event.altKey ||

      event.metaKey ||

      event.ctrlKey

    ) {

      return false;

    }

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

      show = !show;

    }

  };

  function clickOutside(ev: MouseEvent) {

    if (thisComponent && !thisComponent.contains(ev.target as HTMLDivElement)) {

      show = !show;

    }

  }

  let thisComponent: HTMLDivElement;

  .container {

    position: fixed;

    background: var(--color-background);

    padding: 2rem;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    box-shadow: var(--elevation-low);

    border-radius: 1rem;

    z-index: 100;

    min-width: 46rem;

  }

    width: 4rem;

    height: 4rem;

    outline-offset: 0.5rem;

<svelte:window on:keydown={onKeydown} on:click={clickOutside} />

{#if show}

  <div

    bind:this={thisComponent}

    class="container"

    on:click={() => (checkers = !checkers)}>

    <div class:checkers>

      {#each colorGroups as colorGroup}

        <div>

          {#each colors.filter(color => {

            return color.match(`--color-${colorGroup}`);

          }) as color}

            <div style="display: inline-flex;">

              <div

                class:unused={!usedColors.includes(color)}

                title={color}

                class="color"

                style={`background-color: var(${color});`} />

            </div>

          {/each}

        </div>

      {/each}

{/if}

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

  import SearchResults from "./Header/SearchResults.svelte";

  let query: string;

  let results: ProjectsAndProfiles | null = null;

      <Search

        {wallet}

        on:search={e => {

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

        }} />

          params: { view: { resource: "form" } },

        params: { view: { resource: "validateName" } },

                }}

                on:search={e => {

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

                params: { view: { resource: "validateName" } },

  {#if results}

    <SearchResults

      {wallet}

      {results}

      {query}

      on:close={() => {

        results = null;

      }} />

  {/if}

<script lang="ts" context="module">

  import type { Host } from "@app/lib/api";

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

  import { ethers } from "ethers";

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

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

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

  import { config } from "@app/lib/config";

  export interface ProjectsAndProfiles {

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

    profiles: Profile[];

  }

  type SearchResult =

    | { type: "nothing" }

    | { type: "error"; message: string }

    | { type: "singleProfile"; id: string }

    | { type: "singleProject"; seedHost: string; id: string }

    | { type: "projectsAndProfiles"; projectsAndProfiles: ProjectsAndProfiles };

  async function searchProjectsAndProfiles(

    query: string,

    wallet: Wallet,

  ): Promise<SearchResult> {

    try {

      // The query is a plain Ethereum address.

      if (ethers.utils.isAddress(query)) {

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

      }

      const projectOnSeeds = config.seeds.pinned.map(seed => ({

        nameOrId: query,

        seed: seed.host,

      }));

      // The query is a radicle project ID.

      if (utils.isRadicleId(query)) {

        const projects = await Project.getMulti(projectOnSeeds);

        if (projects.length === 1) {

          return {

            type: "singleProject",

            seedHost: projects[0].seed.host,

            id: query,

          };

        } else if (projects.length === 0) {

          return { type: "nothing" };

        } else {

          return {

            type: "projectsAndProfiles",

            projectsAndProfiles: { projects, profiles: [] },

          };

        }

      }

      // The query is either a project or a profile name.

      const normalizedQuery = query.toLowerCase();

      const projectsAndProfiles: ProjectsAndProfiles = {

        projects: [],

        profiles: [],

      };

      try {

        const projects = await Project.getMulti(projectOnSeeds);

        projectsAndProfiles.projects.push(...projects);

      } catch {

        // TODO: collect errors and forward to user.

      }

      try {

        let params: string[];

        if (utils.isENSName(normalizedQuery, wallet)) {

          params = [normalizedQuery];

        } else {

          params = [

            `${normalizedQuery}.${wallet.registrar.domain}`,

            `${normalizedQuery}.eth`,

          ];

        }

        const profiles = await Profile.getMulti(params, wallet);

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

      } catch {

        // TODO: collect errors and forward to user.

      }

      const projectCount = projectsAndProfiles.projects.length;

      const profileCount = projectsAndProfiles.profiles.length;

      if (profileCount === 1 && projectCount === 0) {

        return {

          type: "singleProfile",

          id: projectsAndProfiles.profiles[0].address,

        };

      }

      if (profileCount === 0 && projectCount === 1) {

        return {

          type: "singleProject",

          seedHost: projectsAndProfiles.projects[0].seed.host,

          id: query,

        };

      }

      if (profileCount > 0 || projectCount > 0) {

        return {

          type: "projectsAndProfiles",

          projectsAndProfiles,

        };

      }

      return { type: "nothing" };

    } catch (error) {

      let message = "An unknown error occoured while searching.";

      if (error instanceof Error) {

        message = error.message;

      }

      return { type: "error", message };

    }

  }

</script>

    search: { query: string; results: ProjectsAndProfiles };

    const searchResult = await searchProjectsAndProfiles(input, wallet);

      dispatch("search", {

        query,

        results: searchResult.projectsAndProfiles,

<script lang="ts" strictEvents>

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

  import { formatRadicleId, getSeedEmoji, twemoji } from "@app/lib/utils";

  import type { Wallet } from "@app/lib/wallet";

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

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

  import { createEventDispatcher } from "svelte";

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

  import Link from "@app/components/Link.svelte";

  export let query: string;

  export let results: ProjectsAndProfiles;

  export let wallet: Wallet;

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

</script>

<style>

  .results {

    text-align: left;

  }

  ul {

    list-style-type: none;

    padding: 0;

  }

  li {

    margin: 0.5rem 0;

  }

  .id {

    color: var(--color-foreground-5);

  }

</style>

<svelte:window on:click={() => dispatch("close")} />

<Modal center floating>

  <span slot="title" use:twemoji>️🔍</span>

  <span slot="subtitle">

    <p class="txt-highlight txt-medium">

      <span class="txt-bold">

        Results for <q>{query}</q>

      </span>

    </p>

  </span>

  <span class="results" slot="body">

    {#if results.projects.length > 0}

      <p class="txt-highlight txt-medium">Projects</p>

      <ul>

        {#each results.projects as project}

          <li>

            <Link

              route={{

                resource: "projects",

                params: {

                  view: { resource: "tree" },

                  seed: project.seed.host,

                  id: project.info.id,

                },

              }}>

              <span title={project.seed.host}>

                <span>

                  {getSeedEmoji(project.seed.host)} {project.info.name}

                </span>

                <span class="id">

                   {formatRadicleId(project.info.id)}

                </span>

              </span>

            </Link>

          </li>

        {/each}

      </ul>

    {/if}

    {#if results.profiles.length > 0}

      <p class="txt-highlight txt-medium">ENS names</p>

      <ul>

        {#each results.profiles as profile}

          <li>

            <Address address={profile.address} {profile} {wallet} resolve />

          </li>

        {/each}

      </ul>

    {/if}

  </span>

  <span slot="actions">

    <Button variant="foreground" on:click={() => dispatch("close")}>

      Close

    </Button>

  </span>

</Modal>

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

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

  let error: Err | null = null;

    } catch (e: any) {

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

      error = e;

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

  <ConnectWallet

    {wallet}

    uri={$walletConnectState.uri}

    on:close={onModalClose} />

{:else if error}

  <ErrorModal

    floating

    emoji="👛"

    title="Connection failed"

    {error}

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

{/if}

<script lang="ts" strictEvents>

  import type { Wallet } from "@app/lib/wallet";

  import { createEventDispatcher } from "svelte";

  import { qrcode } from "pure-svg-code";

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

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

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

  import { twemoji } from "@app/lib/utils";

  export let uri: string;

  export let wallet: Wallet;

  $: svgString = qrcode({

    content: uri,

    width: 200,

    height: 200,

    color: "black",

    padding: 0,

    background: "white",

    ecl: "M",

  });

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

  const onClickConnect = () => {

    state.connectMetamask(wallet);

  };

  const onClose = () => {

    dispatch("close");

  };

</script>

<style>

  .qrcode-wrapper {

    width: min-content;

    margin: 0 auto;

    padding: 0.75rem;

    background-color: white;

  }

  .qrcode {

    width: 200px;

    height: 200px;

  }

  .wrapper {

    cursor: default;

    display: flex;

    flex-direction: column;

    height: 100%;

  }

  .actions {

    display: flex;

    justify-content: center;

    gap: 0.75rem;

  }

</style>

<div class="wrapper">

  <Modal floating center>

    <div slot="title">

      <div use:twemoji>👛</div>

      <div>Connect your wallet</div>

    </div>

    <div slot="subtitle">

      <div class="txt-small">

        Scan the QR code with <span class="txt-bold">WalletConnect</span>

        or use

        <span class="txt-bold">Metamask</span>

        .

      </div>

    </div>

    <div slot="body">

      <div class="qrcode-wrapper">

        <div class="qrcode">

          {@html svgString}

        </div>

      </div>

    </div>

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

      <Button

        variant="secondary"

        size="small"

        on:click={onClickConnect}

        disabled={!wallet.metamask.signer}>

        Connect with Metamask

      </Button>

      <Button variant="text" size="small" on:click={onClose}>Close</Button>

    </div>

  </Modal>

</div>

<script lang="ts" strictEvents>

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

  import { createEventDispatcher } from "svelte";

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

  import { twemoji } from "@app/lib/utils";

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

  export let error: Err | null = null;

  export let title = "Error";

  export let emoji = "";

  export let subtitle = "";

  export let message = "";

  export let floating = false;

  export let subtle = false;

  export let action = floating ? "Close" : "Back";

  const body = message || (error && error.message) || "";

<Modal on:close error {floating} {subtle}>

  <span slot="title" use:twemoji>

    {#if emoji}

      <div>{emoji}</div>

    {/if}

    {title}

  </span>

  <span slot="subtitle">

    {subtitle}

  </span>

  <span slot="body">

    <slot>

      <span class="txt-bold">Error:</span>

      {body}

    </slot>

  </span>

  <span slot="actions">

    <slot name="actions">

      <Button variant="negative" on:click={() => dispatch("close")}>

        {action}

      </Button>

    </slot>

  </span>

</Modal>

    font-size: calc(var(--font-size-huge) * 0.75);

    background-color: var(--glow-error);

  export let floating = false;

  export let error = false;

  export let subtle = false;

  export let small = false;

  export let narrow = false;

  export let center = false;

  .floating,

  .overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

  }

  .floating {

    z-index: 300;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .overlay {

    z-index: 200;

    background-color: #00000075;

  }

    border: 1px solid var(--color-secondary);

  .narrow {

    max-width: 600px;

  }

  .subtle {

    border: none;

    box-shadow: none;

    background: radial-gradient(var(--glow) 0%, transparent 70%);

  }

  .subtle.error {

    background: radial-gradient(var(--glow-error) 0%, transparent 70%);

  }

    padding-top: 0.5rem;

    margin-top: 2rem;

    text-align: center;

  }

  .small .subtitle {

    color: var(--color-foreground);

  }

  .error {

    box-shadow: var(--elevation-high-negative);

    border-color: var(--color-negative);

  }

  .error > * {

    color: var(--color-negative);

{#if floating}

  <div class="overlay" />

{/if}

<div class:floating class:layout-centered={!center}>

  <div class="modal" class:subtle class:narrow class:small class:error>

    <div class="title">

      <slot name="title" />

    {#if $$slots.body && !small}

      <div class="body">

        <slot name="body" />

      </div>

    {/if}

    <div class="actions">

      <slot name="actions" />

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

  export let title = "";

  export let subtitle = "";

<Modal subtle>

  <span slot="title" use:twemoji>🏜️</span>

  <span slot="body">

    <p class="txt-medium txt-highlight">

      <span class="txt-bold">{title}</span>

    </p>

    <p>{subtitle}</p>

  </span>

  <span slot="actions">