import Home from '@app/base/home/Home.svelte';

  import Vesting from '@app/base/vesting/Vesting.svelte';

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

  import Resolve from '@app/base/resolve/Routes.svelte';

        <Register {config} session={$session} />

        <Resolve {config} />

    <strong>Error:</strong> {body}

      <a use:link href="/register/">Register</a>

<script lang="typescript">

  import { navigate } from 'svelte-routing';

  let input: string = "";

  const search = () => {

    navigate(`/resolve?${

      new URLSearchParams({ q: input })

    }`);

  };

</script>

<main>

  <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />

  <button class="primary" on:click={search} disabled={!input}>

    Search

  </button>

</main>

<script lang="typescript">

  import type { SvelteComponent } from 'svelte';

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

  import Create from '@app/base/orgs/Create.svelte';

  import type { Config } from '@app/config';

  export let config: Config;

  let modal: typeof SvelteComponent | null = null;

  $: owner = $session && $session.address;

</script>

<style>

</style>

<main>

  <button on:click={() => modal = Create} disabled={!owner} class="secondary">

    Create an Org

  </button>

</main>

<svelte:component this={modal} {owner} {config} on:close={() => modal = null} />

<script lang="typescript">

  import { onMount } from 'svelte';

  import { Link } from 'svelte-routing';

  import type { SvelteComponent } from 'svelte';

  import { navigate } from 'svelte-routing';

  import type { Config } from '@app/config';

  import type { Registration } from '@app/base/register/registrar';

  import { getRegistration } from '@app/base/register/registrar';

  import { parseEnsLabel, explorerLink } from '@app/utils';

  import { Org } from './Org';

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

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

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

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

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

  import SetName from '@app/ens/SetName.svelte';

  export let address: string;

  export let config: Config;

  let registration: Registration | null = null;

  let name: string | null = null;

  const back = () => navigate("/orgs");

  onMount(async () => {

    name = await config.provider.lookupAddress(address);

    registration = await getRegistration(name, config);

  });

  let setNameForm: typeof SvelteComponent | null = null;

  const setName = () => {

    setNameForm = SetName;

  };

  $: label = name && parseEnsLabel(name, config);

  $: isOwner = (org: Org): boolean => {

    return org.safe === ($session && $session.address);

  };

</script>

<style>

  main > header {

    display: flex;

    align-items: center;

    justify-content: left;

    margin-bottom: 2rem;

  }

  main > header > * {

    margin: 0 1rem 0 0;

  }

  .info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: left;

  }

  .info a {

    border: none;

  }

  .fields {

    display: grid;

    grid-template-columns: 1fr 8fr;

    grid-gap: 1rem;

  }

  .fields > div {

    justify-self: start;

    align-self: center;

    height: 2rem;

    line-height: 2rem;

  }

  .avatar {

    width: 64px;

    height: 64px;

  }

  .links {

    display: flex;

    align-items: center;

    justify-content: left;

  }

  .url {

    display: flex; /* Ensures correct vertical positioning of icons */

    margin-right: 1rem;

  }

</style>

{#await Org.get(address, config)}

  <Loading />

{:then org}

  {#if org}

    <main>

      <header>

        {#if registration && registration.avatar}

          <div class="avatar">

            <img src={registration.avatar} alt="avatar" />

          </div>

        {/if}

        <div class="info">

          <span class="title bold">{registration ? label : address}</span>

          <div class="links">

            {#if registration}

              {#if registration.url}

                <a class="url" href={registration.url}>{registration.url}</a>

              {/if}

              {#if registration.twitter}

                <a class="url" href={registration.twitter}>

                  <Icon name="twitter" />

                </a>

              {/if}

              {#if registration.github}

                <a class="url" href={registration.github}>

                  <Icon name="github" />

                </a>

              {/if}

            {/if}

          </div>

        </div>

      </header>

      <div class="fields">

        <div class="label">Address</div><div>{org.address}</div>

        <div class="label">Owner</div><div>{org.safe}</div>

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

        <div>

          {#await org.lookupAddress(config)}

            <Loading small />

          {:then name}

            {#if name}

              <Link to={`/registrations/${label}`}>{name}</Link>

            {:else if isOwner(org)}

              <button class="tiny primary" on:click={setName}>

                Set

              </button>

            {:else}

              <span class="subtle">Not set</span>

            {/if}

          {/await}

        </div>

      </div>

    </main>

  {:else}

    <Modal subtle>

      <span slot="title">🏜️</span>

      <span slot="body">

        <p class="highlight"><strong>{address}</strong></p>

        <p>Sorry, there is no Org at this address.</p>

        <p>

          <a href={explorerLink(address, config)} target="_blank">View in explorer</a>

          <span class="faded">↗</span>

        </p>

      </span>

      <span slot="actions">

        <button on:click={back}>

          Back

        </button>

      </span>

    </Modal>

  {/if}

  <svelte:component this={setNameForm} {org} {config} on:close={() => setNameForm = null} />

{:catch err}

  <Error error={err} />

{/await}

  import Orgs from '@app/base/orgs/Orgs.svelte';

  import Profile from '@app/base/orgs/Profile.svelte';

  <Orgs {config} />

  <Profile {config} address={params.address} />

<script lang="typescript">

  import { navigate } from "svelte-routing";

  import { registrar } from './registrar';

  import type { Config } from '@app/config';

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

  import DomainInput from '@app/ens/DomainInput.svelte';

  enum State {

    Idle,

    CheckingAvailability,

    NameAvailable,

    NameUnavailable,

  }

  export let config: Config;

  let state = State.Idle;

  let inputValue: string;

  function checkAvailability(name: string) {

    state = State.CheckingAvailability;

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

      if (isAvailable) {

        state = State.NameAvailable;

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

      } else {

        state = State.NameUnavailable;

      }

    });

  }

</script>

<style>

  main {

    padding-top: 2rem;

    align-self: center;

  }

  div.input-caption {

    font-size: 1.25rem;

    text-align: left;

    margin-left: 1.5rem;

    padding-left: 1.5rem;

    color: var(--color-secondary);

  }

  div.input-main {

    display: flex;

    align-items: center;

    flex-direction: row;

    margin-left: 1.5rem;

    color: var(--color-secondary);

  }

  .name {

    margin: 1rem;

  }

</style>

<main>

  {#if state === State.NameUnavailable}

    <Modal floating>

      <span slot="title">

        {inputValue}.{config.registrar.domain}

      </span>

      <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>

  {/if}

  <div class="input-caption">

    Register a <strong>{config.registrar.domain}</strong> name

  </div>

  <div class="input-main">

    <span class="name">

      <DomainInput

        bind:value={inputValue}

        autofocus

        placeholder=""

        disabled={state === State.CheckingAvailability}

        root={config.registrar.domain}

      />

    </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>

</main>

<script lang="typescript">

  import { getRegistration } from './registrar';

  import { setRecords } from './resolver';

  import type { EnsRecord } from './resolver';

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

  import type { Config } from '@app/config';

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

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

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

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

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

  import type { Field } from '@app/Form.svelte';

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

  enum State {

    Idle,

    Signing,

    Pending,

    Success,

    Failed,

  }

  export let subdomain: string;

  export let config: Config;

  let state = State.Idle;

  let editable = false;

  let fields: Field[] = [];

  let registration: Registration | null = null;

  let name = `${subdomain}.${config.registrar.domain}`;

  const loadRegistration = getRegistration(name, config)

    .then(r => {

      if (r) {

        fields = [

          { name: "owner", placeholder: "",

            value: r.owner, editable: false },

          { name: "address", placeholder: "Not set",

            value: r.address, editable: true },

          { name: "url", label: "URL", placeholder: "Not set",

            value: r.url, editable: true },

          { name: "avatar", placeholder: "Not set",

            value: r.avatar, editable: true },

          { name: "twitter", placeholder: "Not set",

            value: r.twitter, editable: true },

          { name: "github", placeholder: "Not set",

            value: r.github, editable: true },

        ];

        registration = r;

      }

      return r;

    });

  const save = async (event: { detail: Field[] }) => {

    assert(registration, "registration was found");

    const recs: EnsRecord[] = event.detail

      .filter(r => r.editable && r.value !== null)

      .map(f => {

        assert(f.value !== null);

        return { name: f.name, value: f.value }

      });

    try {

      state = State.Signing;

      const tx = await setRecords(subdomain, recs, registration.resolver, config);

      state = State.Pending;

      await tx.wait();

      state = State.Success;

    } catch (e) {

      console.error(e);

      state = State.Failed;

    }

  };

  $: isOwner = (registration: Registration): boolean => {

    return registration.owner === ($session && $session.address);

  };

</script>

<style>

  main > header {

    display: flex;

    align-items: center;

    justify-content: left;

    margin-bottom: 2rem;

  }

  main > header > * {

    margin: 0 1rem 0 0;

  }

</style>

{#await loadRegistration}

  <Loading />

{:then registration}

  {#if registration}

    {#if state === State.Idle}

      <main>

        <header>

          <h1 class="bold">{subdomain}.{config.registrar.domain}</h1>

          <button

            class="tiny primary" class:active={editable} disabled={!isOwner(registration)}

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

              Edit

          </button>

          <button class="tiny secondary" disabled={!isOwner(registration)}>

            Transfer

          </button>

        </header>

        <Form {editable} {fields} on:save={save} on:cancel={() => editable = false} />

      </main>

    {:else}

      <Modal floating>

        <span slot="title">

          Transaction

        </span>

        <span slot="body">

          {#if state === State.Signing}

            <p>Please confirm the transaction in your wallet...</p>

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

            <p>Transaction submitted. Waiting for inclusion...</p>

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

            Success!

          {/if}

        </span>

        <span slot="actions">

          {#if [State.Signing, State.Pending].includes(state)}

            <Loading center small />

          {/if}

        </span>

      </Modal>

    {/if}

  {:else}

    <Modal subtle>

      <span slot="title">

        {subdomain}.{config.registrar.domain}

      </span>

      <span slot="body">

        <p>The name <strong>{subdomain}</strong> is not registered.</p>

      </span>

      <span slot="actions">

        <Link to={`/register/${subdomain}`} primary>Register &rarr;</Link>

      </span>

    </Modal>

  {/if}

{/await}

<script lang="typescript">

  import { Route, navigate } 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';

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

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

  import type { Config } from '@app/config';

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

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

  export let session: Session | null;

  export let config: Config;

</script>

<Route path="register">

  <Register {config} />

</Route>

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

  <Begin {config} subdomain={params.name} owner={getSearchParam("owner", location)} />

</Route>

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

  {#if session}

    <Submit {config} subdomain={params.name} owner={getSearchParam("owner", location)} {session} />

  {:else}

    <Error

      message={"You must connect your wallet to register"}

      on:close={() => navigate("/register")}

    />

  {/if}

</Route>

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

  <Registration {config} subdomain={params.name} />

</Route>

// TODO: Show "look at your wallet" / "confirm tx" before state change.

// TODO: Two registration actions with same label

import { ethers } from 'ethers';

import type { BigNumber } from 'ethers';

import type { EnsResolver } from '@ethersproject/providers';

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

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

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

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

import type { Config } from '@app/config';

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

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

const registrarAbi = [

  'function rad() view returns (address)',

  'function radNode() view returns (bytes32)',

  'function minCommitmentAge() view returns (uint256)',

  'function registrationFeeRad() view returns (uint256)',

  'function commitWithPermit(bytes32, address, uint256, uint256, uint8, bytes32, bytes32)',

  'function register(string, address, uint256)',

  'function valid(string) pure returns (bool)',

  'function available(string) view returns (bool)',

];

export interface Registration {

  name: string

  owner: string

  address: string | null

  url: string | null

  avatar: string | null

  twitter: string | null

  github: string | null

  resolver: EnsResolver

}

export async function getRegistration(name: string, config: Config): Promise<Registration | null> {

  const resolver = await config.provider.getResolver(name);

  if (! resolver) {

    return null;

  }

  const owner = await getOwner(name, config);

  const address = await resolver.getAddress();

  const avatar = await resolver.getText('avatar');

  const url = await resolver.getText('url');

  const twitter = await resolver.getText('vnd.twitter');

  const github = await resolver.getText('vnd.github');

  return {

    name,

    url,

    avatar,

    owner,

    address,

    twitter,

    github,

    resolver,

  };

}

export function registrar(config: Config) {

  return new ethers.Contract(config.registrar.address, registrarAbi, config.provider);

}

export async function registrationFee(config: Config) {

  return await registrar(config).registrationFeeRad();

}

export async function registerName(name: string, owner: string, config: Config) {

  if (! name) return;

  let commitmentJson = window.localStorage.getItem('commitment');

  let commitment = commitmentJson && JSON.parse(commitmentJson);

  try {

    // Try to recover an existing commitment.

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

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

    } else {

      await commitAndRegister(name, owner, config);

    }

  } catch (e) {

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

  }

}

async function commitAndRegister(name: string, owner: string, config: Config) {

  let salt = ethers.utils.randomBytes(32);

  let minAge = (await registrar(config).minCommitmentAge()).toNumber();

  let fee = await registrationFee(config);

  await commit(makeCommitment(name, owner, salt), fee, minAge, config);

  // Save commitment in local storage in case the user refreshes or closes

  // the page.

  window.localStorage.setItem('commitment', JSON.stringify({

    name: name,

    owner: owner,

    salt: ethers.utils.hexlify(salt)

  }));

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

}

async function commit(commitment: string, fee: BigNumber, minAge: number, config: Config) {

  state.set(State.Committing);

  const owner = config.signer;

  const ownerAddr = await owner.getAddress();

  const spender = config.registrar.address;

  const deadline = ethers.BigNumber.from(unixTime()).add(3600); // Expire one hour from now.

  const token = session.token(config);

  const signature = await permitSignature(owner, token, spender, fee, deadline);

  const tx = await registrar(config)

    .connect(config.signer)

    .commitWithPermit(

      commitment,

      ownerAddr,

      fee,

      deadline,

      signature.v,

      signature.r,

      signature.s,

      { gasLimit: 150000 })

    .catch((e: Error) => console.error(e));

  await tx.wait(1);

  session.state.updateBalance(fee.mul(-1));

  // TODO: Getting "commitment too new"

  state.set(State.WaitingToRegister);

  await tx.wait(minAge + 1);

}

async function permitSignature(

  owner: ethers.Signer & TypedDataSigner,

  token: ethers.Contract,

  spenderAddr: string,

  value: ethers.BigNumberish,

  deadline: ethers.BigNumberish,

): Promise<ethers.Signature> {

  assert(owner.provider);

  const ownerAddr = await owner.getAddress();

  const nonce = await token.nonces(ownerAddr);

  const chainId = (await owner.provider.getNetwork()).chainId;

  const domain = {

    name: await token.name(),

    chainId,

    verifyingContract: token.address,

  };

  const types = {

    Permit: [

      { "name": "owner", "type": "address" },

      { "name": "spender", "type": "address" },

      { "name": "value", "type": "uint256" },

      { "name": "nonce", "type": "uint256" },

      { "name": "deadline", "type": "uint256" }

    ]

  };

  const values = {

    "owner": ownerAddr,

    "spender": spenderAddr,

    "value": value,

    "nonce": nonce,

    "deadline": deadline

  };

  const sig = await owner._signTypedData(domain, types, values);

  return ethers.utils.splitSignature(sig);

}

async function register(name: string, owner: string, salt: Uint8Array, config: Config) {

  state.set(State.Registering);

  const signer = config.provider.getSigner();

  const tx = await registrar(config).connect(signer).register(

    name, owner, ethers.BigNumber.from(salt), { gasLimit: 150000 }

  );

  console.log("Sent", tx);

  await tx.wait();

  window.localStorage.clear();

  state.set(State.Registered);

}

function makeCommitment(name: string, owner: string, salt: Uint8Array): string {

  let bytes = ethers.utils.concat([

    ethers.utils.toUtf8Bytes(name),

    ethers.utils.getAddress(owner),

    ethers.BigNumber.from(salt).toHexString(),

  ]);

  return ethers.utils.keccak256(bytes);

}

async function getOwner(name: string, config: Config): Promise<string> {

  const ensAbi = [

    "function owner(bytes32 node) view returns (address)"

  ];

  let ensAddr = config.provider.network.ensAddress;

  if (! ensAddr) {

    throw new Error("ENS address is not defined");

  }

  let registry = new ethers.Contract(ensAddr, ensAbi, config.provider);

  let owner = await registry.owner(ethers.utils.namehash(name));

  return owner;

}

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

import type { EnsResolver } from '@ethersproject/providers';

import { ethers } from 'ethers';

import type { Config } from '@app/config';

const resolverAbi = [

  "function multicall(bytes[] calldata data) returns(bytes[] memory results)",

  "function setAddr(bytes32 node, address addr)",

  "function setText(bytes32 node, string calldata key, string calldata value)",

];

export type EnsRecord = { name: string, value: string };

export async function setRecords(name: string, records: EnsRecord[], resolver: EnsResolver, config: Config): Promise<TransactionResponse> {

  const resolverContract = new ethers.Contract(resolver.address, resolverAbi, config.signer);

  const node = ethers.utils.namehash(`${name}.${config.registrar.domain}`);

  let calls = [];

  const iface = new ethers.utils.Interface(resolverAbi);

  for (let r of records) {

    switch (r.name) {

      case "address":

        calls.push(

          iface.encodeFunctionData("setAddr", [node, r.value])

        );

        break;

      case "url":

      case "avatar":

        calls.push(

          iface.encodeFunctionData("setText", [node, r.name, r.value])

        );

        break;

      case "github":

      case "twitter":

        calls.push(

          iface.encodeFunctionData("setText", [node, "vnd." + r.name, r.value])

        );

        break;

      default:

        console.error(`unknown field "${r.name}"`);

    }

  }

  return resolverContract.multicall(calls);

}

import { derived, writable } from "svelte/store";

export enum State {

  Failed = -1,

  Idle,

  Committing,

  WaitingToRegister,

  Registering,

  Registered,

}

export const state = writable(State.Idle);

state.subscribe(s => {

  console.log("regiter.state", s);

});

<script lang="typescript">

  // TODO: Should check for availability here, before saying a name is available.

  // Perhaps the availability check should be moved out of the 'submit' step then.

  import { navigate } from 'svelte-routing';

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

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

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

  import type { Config } from '@app/config';

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

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

  enum State {

    Initial,

    CheckingAvailability,

    NameUnavailable,

  }

  export let config: Config;

  export let subdomain: string;

  export let owner: string | null;

  let state = State.Initial;

  $: registrationOwner = owner || ($session && $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>

<Modal>

  <span slot="title">

    {subdomain}.{config.registrar.domain}

  </span>

  <span slot="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}

  </span>

  <span slot="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}

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

          Begin registration →

        </button>

      {:else}

        <Connect caption="Connect to register" className="primary" {config} />

      {/if}

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

        Cancel

      </button>

    {/if}

  </span>

</Modal>

<script lang="typescript">

  // TODO: When name is registered, prompt user to edit records.

  // TODO: When transfering name, warn about transfering to org.

  import { onMount } from 'svelte';

  import { navigate } from 'svelte-routing';

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

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

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

  import type { Config } from '@app/config';

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

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

  import Err from '@app/Error.svelte';

  export let config: Config;

  export let subdomain: string;

  export let owner: string | null;

  export let session: Session;

  let error: Error | null = null;

  let registrationOwner = owner || session.address;

  const done = () => navigate(`/registrations/${subdomain}`)

  onMount(async () => {

    try {

      await registerName(subdomain, registrationOwner, config);

    } catch (e) {

      console.error("Error", e);

      state.set(State.Idle);

      error = e;

    }

  });

</script>

<style></style>

{#if error}

  <Err

    title="Transaction failed"

    message={error.message}

    on:close={() => navigate('/register')}

  />

{:else}

  <Modal>

    <span slot="title">

      {subdomain}.{config.registrar.domain}

    </span>

    <span slot="body">

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

        Committing...

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

        Waiting for commitment time...

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

        Registering name...

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

        The name <strong>{subdomain}</strong> has been successfully registered to

        <strong>{registrationOwner}</strong>.

      {/if}

    </span>

    <span slot="actions">

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

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

          Done

        </button>

      {:else}

        <div class="modal-actions">

          <Loading small center />

        </div>

      {/if}

    </span>

  </Modal>

{/if}