--box-shadow-color: var(--color-secondary-2);

	color: var(--color-background) !important;

button.secondary:hover {

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

}

	background: var(--color-background);

	box-shadow: 8px 8px 64px var(--box-shadow-color);

	max-width: 720px;

	margin-bottom: 2rem;

	margin-top: 2em;

	margin-bottom: 3em;

.error {

	color: var(--color-negative);

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

	--box-shadow-color: var(--color-negative-2);

}

.highlight {

	color: var(--color-secondary);

}

button.error:hover {

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

}

  import Register from '@app/base/register/Routes.svelte';

  const query = new URLSearchParams(window.location.search);

        <Register {config} {query} />

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

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

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

      {#if $error.message}

        <strong>Error:</strong> {$error.message}

      {:else if $error.txHash}

        <strong>Error:</strong> Transaction <a href="https://etherscan.io/tx/{$error.txHash}">{$error.txHash}</a> failed.

      {/if}

          {formatAddress($address)}

<script lang="typescript">

  export let floating = false;

  let className = floating ? "modal-floating" : "";

</script>

<style>

  .modal-floating, .modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

  }

  .modal-floating {

    z-index: 300;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .modal-overlay {

    z-index: 200;

    background-color: rgba(0, 0, 0, .75);

  }

</style>

{#if floating}

  <div class="modal-overlay"></div>

{/if}

<div class={className}>

  <div class="modal">

    <div class="modal-title">

      <slot name="title"></slot>

    </div>

    <div class="modal-body">

      <slot name="body"></slot>

    </div>

    <div class="modal-actions">

      <slot name="actions"></slot>

    </div>

  </div>

</div>

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

  import { registrar } from './registrar';

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

  enum State {

    Idle,

    CheckingAvailability,

    NameAvailable,

    NameUnavailable,

  }

  let state = State.Idle;

  let inputValue;

  let inputElement;

    inputElement.focus();

  function checkAvailability(name) {

    state = State.CheckingAvailability;

    registrar(config).available(name).then(isAvailable => {

      if (isAvailable) {

        state = State.NameAvailable;

        navigate(`/register/${name}`);

      } else {

        state = State.NameUnavailable;

      }

    });

  {#if state === State.NameUnavailable}

    <Modal floating>

      <span slot="title">

        {inputValue}.radicle.eth

      <span slot="body">

        The name <span class="highlight">{inputValue}</span> is not available for registration.

      </span>

      <span slot="actions">

        <button on:click={() => state = State.Idle} class="secondary">

          Back

        </button>

      </span>

    </Modal>

  <div class="input-caption">

    Register a <strong>radicle.eth</strong> name

  </div>

  <div class="input-main">

    <span class="name">

      <div>

        <input

          bind:this={inputElement}

          bind:value={inputValue}

          placeholder=""

          class="subdomain"

          disabled={state === State.CheckingAvailability}

          type="text"

        />

        <span class="root">.radicle.eth</span>

      </div>

    </span>

    {#if inputValue === ""}

      <button disabled class="primary register">

        Check

      </button>

    {:else if state === State.CheckingAvailability}

      <button disabled class="primary register" data-waiting>

        Check

      </button>

    {:else}

      <button on:click={() => checkAvailability(inputValue)} class="primary register">

        Check

      </button>

    {/if}

  </div>

<script lang="typescript">

  import { Route } from "svelte-routing";

  import Register from '@app/base/register/Register.svelte';

  import Begin from '@app/base/register/steps/Begin.svelte';

  import Submit from '@app/base/register/steps/Submit.svelte';

  export let config;

  export let query;

</script>

<Route path="register">

  <Register {config} />

</Route>

<Route path="register/:name" let:params>

  <Begin {config} subdomain={params.name} {query} />

</Route>

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

  <Submit {config} subdomain={params.name} {query} />

</Route>

  try {

    // Try to recover an existing commitment.

    if (commitment && commitment.name === name && commitment.owner === owner) {

      await register(name, owner, commitment.salt, config);

    } else {

      await approveRegistrar(owner, config);

      await commitAndRegister(name, owner, config);

    }

  } catch (e) {

    throw { type: Failure.TransactionFailed, message: e.message, hash: e.txHash };

  await tx.wait();

  window.localStorage.clear();

  state.set(State.Registered);

  Failed = -1,

<script lang="typescript">

  import { navigate } from 'svelte-routing';

  import { error } from '@app/error';

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

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

  import { registrar } from '../registrar';

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

  enum State {

    Initial,

    CheckingAvailability,

    NameUnavailable,

  }

  export let config;

  export let subdomain;

  export let query;

  let state = State.Initial;

  $: registrationOwner = query.get("owner") || $session.address;

  async function begin() {

    state = State.CheckingAvailability;

    if (await registrar(config).available(subdomain)) {

      navigate(`/register/${subdomain}/submit?${

        registrationOwner ? new URLSearchParams({ owner: registrationOwner }) : ''

      }`);

    } else {

      state = State.NameUnavailable;

    }

  }

</script>

<style>

</style>

<div class="modal">

  <div class="modal-title">

    {subdomain}.radicle.eth

  </div>

  <div class="modal-body">

    {#if state === State.Initial || state === State.CheckingAvailability}

      {#if registrationOwner}

        The name <span class="highlight">{subdomain}</span> is available for registration

        under account <span class="highlight">{formatAddress(registrationOwner)}</span>.

      {:else}

        The name <span class="highlight">{subdomain}</span> is available for registration.

      {/if}

    {:else if state === State.NameUnavailable}

      The name <span class="highlight">{subdomain}</span> is not available for registration.

    {/if}

  </div>

  <div class="modal-actions">

    {#if state === State.CheckingAvailability}

      <button disabled class="primary register">

        Checking availability...

      </button>

    {:else if state === State.NameUnavailable}

      <button on:click={() => navigate("/register")} class="">

        Back

      </button>

    {:else}

      {#if $session.address}

        <button on:click={begin} class="primary register">

          Begin registration →

        </button>

      {:else}

        <Connect caption="Connect to register" className="primary" />

      {/if}

      <button on:click={() => navigate("/register")} class="text">

        Cancel

      </button>

    {/if}

  </div>

</div>

<script lang="typescript">

  import { onMount } from 'svelte';

  import { get } from 'svelte/store';

  import { navigate } from 'svelte-routing';

  import { ethers } from 'ethers';

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

  import { registrar, registerName, registrationFee } from '../registrar';

  import { State, state } from '../state';

  export let config;

  export let subdomain;

  export let query;

  let error = null;

  let s = get(session);

  let registrationOwner = query.get("owner") || s.address;

  async function getFee(cfg) {

    let fee = await registrationFee(cfg);

    return ethers.utils.formatUnits(fee);

  }

  onMount(async () => {

    let oldState = get(state);

    try {

      await registerName(subdomain, registrationOwner, config);

    } catch (e) {

      console.error("Error", e);

      state.set(oldState);

      error = e;

    }

  });

</script>

<style>

  .available {

    line-height: 1.75em;

    padding: 2rem;

  }

  .domain {

    color: var(--color-secondary);

  }

</style>

<div class="modal {error ? 'error' : ''}">

  {#if error}

    <div class="modal-title error">

      Transaction failed

    </div>

  {:else}

    <div class="modal-title">

      {subdomain}.radicle.eth

    </div>

  {/if}

  {#if $state === State.Approving}

    <div class="modal-body">

      Approving Registry for {#await getFee(config)}

        ?

      {:then fee}

        {fee}

      {/await} <strong>RAD</strong>...

    </div>

    <div class="modal-actions">

      <button disabled class="primary register">

        Approving...

      </button>

    </div>

  {:else if $state === State.Committing}

    <div class="modal-actions">

      <button disabled class="primary register">

        Committing...

      </button>

    </div>

  {:else if $state === State.WaitingToRegister}

    <div class="modal-body">

      Waiting for wallet confirmation...

    </div>

    <div class="modal-actions">

      <button disabled class="primary register">

        Waiting...

      </button>

    </div>

  {:else if $state === State.Registering}

    <div class="modal-actions">

      <button disabled class="primary register">

        Registering...

      </button>

    </div>

  {:else if $state === State.Registered}

    <div class="modal-body">

      The name <span class="domain">{subdomain}</span> has been successfully registered to {$session.address}.

    </div>

    <div class="modal-actions">

      <button on:click={() => state.set(State.Idle)} class="primary register">

        Done

      </button>

    </div>

  {:else if error}

    <div class="modal-body error">

      <strong>Error:</strong> {error.message}

    </div>

    <div class="modal-actions">

      <button on:click={() => navigate("/register")} class="error">

        Back

      </button>

    </div>

  {/if}

</div>

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

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

          Tokens successfully withdrawn to {formatAddress($info.beneficiary)}.

export function formatAddress(addr) {

  return addr.substring(0, 6)

    + '...'

    + addr.substring(addr.length - 4, addr.length);

}