body,

input,

  font-family: var(--font-family-sans-serif);

  font-feature-settings: "ss01", "ss02", "cv01", "cv03";

}

a {

  color: inherit;

  text-decoration: none;

  border-bottom-color: transparent;

}

  line-height: 1.6;

}

input[type="text"] {

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

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

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

  export let caption = "Connect";

  export let config: Config;

  let error: Err | null = null;

  $: walletConnectState = config.walletConnect.state;

</script>

  disabled={connecting}

  {#if connecting}

    Connecting...

  {:else}

    {caption}

  {/if}

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

  <ConnectWallet

<script lang="ts">

  import { createEventDispatcher } from "svelte";

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

  const dispatch = createEventDispatcher();

  <span slot="actions">

    <slot name="actions">

        {action}

    </slot>

  </span>

</Modal>

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

  export interface Field {

    name: string;

    value?: string;

    margin-top: 2rem;

    text-align: center;

    visibility: hidden;

  }

  .actions.editable {

    visibility: visible;

</div>

<div class="actions" class:editable>

    Save

</div>

  import Icon from "./Icon.svelte";

  import MobileNavbar from "./MobileNavbar.svelte";

  import SeedDropdown from "./SeedDropdown.svelte";

  export let session: Session | null;

  export let config: Config;

    margin-left: 1.5rem;

    display: inline-block;

  }

  .connect {

    display: inline-block;

    margin-left: 2rem;

  }

  .balance {

    white-space: nowrap;

  }

        {/if}

      </span>

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

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

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

              inline />{formatAddress(address)}

          {/if}

        {/await}

    {:else if config}

      <span class="connect">

      </span>

    {/if}

    <div class="toggle" on:click={toggleNavbar}>

<script lang="ts">

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

  export let title = "";

    <p>{subtitle}</p>

  </span>

  <span slot="actions">

  </span>

</Modal>

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

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

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

  export let config: Config;

  export let addressOrName: string;

        <div class="desktop">

          {#await account && profile.org.isMember(account, config) then isMember}

            {#if isOwner(profile.org) || isMember}

                Transfer

            {/if}

          {/await}

        </div>

              <!-- Loading -->

            {:then authorized}

              {#if authorized}

              {/if}

            {/await}

          </div>

        </div>

        <div class="desktop">

          {#if isUserAuthorized(profile.address)}

          {/if}

        </div>

      {/if}

<script lang="ts">

  import { parseRadicleId, toClipboard } from "@app/utils";

  export let urn: string;

  let copied = false;

</script>

<style>

  </div>

</div>

<div>

    {#if copied}

      Copy ✓

    {:else}

      Copy

    {/if}

</div>

<script lang="ts">

  import { createEventDispatcher } from "svelte";

  export let reactions: Record<string, number> | null = null;

</script>

<style>

  }

</style>

  <div class="reactions">

    {#each Object.entries(reactions) as [reaction, count]}

      <!-- TODO: Remove the disabled attribute once we are able to increment reactions -->

        on:click={() => dispatch("click", reaction)}>

        {reaction}

        {count}

    {/each}

  </div>

{/if}

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

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

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

  export let seed: Seed;

  export let config: Config;

  let connection: Connection = Connection.Disconnected;

</script>

  title={tooltip}

  disabled={disabled || connection === Connection.Connecting}

  on:click={async () => {

      {caption}

    {/if}

  </span>

    padding: 0.25rem 0.5rem;

    border: none;

    min-width: 0;

  }

  button:hover,

  button.active {

    lastWithdrawalByUser,

    calculateTimeLock,

  } from "./lib";

  export let config: Config;

            placeholder="Set amount to withdraw"

            bind:value={amount}

            on:input={() => (error = "")} />

        </div>

        {#if error}

          <div class="error description invalid text-small faded">

  import { Status, State } from "@app/utils";

  import { withdraw } from "./lib";

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

  export let config: Config;

    <span slot="actions">

      {#if state.status === Status.Success}

      {/if}

    </span>

  </Modal>

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

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

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

  export let config: Config;

  export let owner: string;

    </span>

    <span slot="actions">

    </span>

  </Modal>

{:else}

    <span slot="actions">

      {#if state === State.Idle}

          on:click={createOrg}

          disabled={state !== State.Idle}>

          Create

      {/if}

    </span>

  </Modal>

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

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

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

  export let config: Config;

    display: flex;

    align-items: center;

    padding: 1rem 0;

  }

  .my-orgs {

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

  }

  .loading {

    padding: 2rem 0;

  }

        <span>

          My <strong>Orgs</strong>

        </span>

          Create

      </header>

      {#await Org.getOrgsByMember(account, config)}

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

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

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

  import type { Org } from "./Org";

    </div>

    <div slot="actions">

    </div>

  </Modal>

{:else if state === State.Proposed && org}

    </div>

    <div slot="actions">

    </div>

  </Modal>

{:else}

    <div slot="actions">

      {#if state === State.Signing}

          Cancel

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

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

      {:else}

          on:click={onSubmit}

          disabled={!newOwner || state !== State.Idle}>

          Submit

      {/if}

    </div>

  </Modal>

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

  import { createEventDispatcher } from "svelte";

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

  export let safe: Safe;

  export let anchor: PendingAnchor;

    display: flex;

    margin-right: 0.75rem;

  }

</style>

<span class="confirmations">

<!-- Check whether the threshold has been matched or passed -->

{#if pending <= 0}

      action = Action.Execute;

      state = State.Confirm;

    }}

    <Avatar inline source={account} title={account} /> Execute

  <!-- Check whether or not we've signed this proposal -->

{:else if isSigned}

  <Badge variant="caution">✓ signed</Badge>

{:else}

      action = Action.Sign;

      state = State.Confirm;

    }}

    Confirm

{/if}

<!-- We've initiated an action -->

    <span slot="actions">

      {#if state === State.Confirm}

          on:click={() => confirmAnchor(anchor.safeTxHash)}>

          Confirm

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

          on:click={() => {

            close();

            dispatch("success");

          }}>

          Done

      {/if}

    </span>

  </Modal>

    <span slot="actions">

      {#if state === State.Confirm}

          on:click={() => executeTransaction(anchor.safeTxHash)}>

          Confirm

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

          on:click={() => {

            close();

            dispatch("success");

          }}>

          Done

      {/if}

    </span>

  </Modal>

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

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

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

  import Tree from "./Tree.svelte";

  import Blob from "./Blob.svelte";

  }

  @media (max-width: 720px) {

    .column-right {

      padding: 1.5rem 0;

      min-width: 0;

  <!-- Mobile navigation -->

  {#if tree.entries.length > 0}

    <nav class="mobile">

        on:click={toggleMobileFileTree}>

        Browse

    </nav>

  {/if}

    font-size: 0.75rem;

    height: var(--button-tiny-height);

    padding: 0.25rem 0.5rem;

  }

  .revision-toggle:hover {

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

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

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

  export let config: Config;

        {/if}

      </span>

        disabled={!label || errors.length !== 0}

        on:click={register}>

        Check

    </div>

  </div>

</main>

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

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

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

  import { registrar } from "./registrar";

  <span slot="actions">

    {#if state === State.NameAvailable}

      {#if $session}

          Begin registration →

      {:else}

      {/if}

        Cancel

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

    {/if}

  </span>

</Modal>

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

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

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

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

    <span slot="actions">

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

      {/if}

    </span>

  </Modal>

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

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

  import { Status, State } from "@app/utils";

  export let domain: string;

  export let config: Config;

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

      <Loading center small />

    {:else if state.status === Status.Success}

    {:else if state.status === Status.Failed}

    {/if}

  </span>

</Modal>

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

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

  import { isAddressEqual, isReverseRecordSet } from "@app/utils";

  import { getRegistration, getOwner } from "./registrar";

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

  <main>

    <header>

      <h1 class="bold">{domain}</h1>

    </header>

    <Form

      {config}

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

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

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

  export let config: Config;

    </div>

  </span>

  <span slot="actions">

  </span>

</Modal>

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

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

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

  let input: HTMLElement;

        <span slot="actions">

          {#if isBeneficiary}

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

                Waiting for signature...

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

                Withdrawing...

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

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

                Withdraw

            {/if}

          {/if}

        </span>

      </Modal>

    {:else}

              bind:value={contractAddress} />

          </div>

        </span>

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

          disabled={$state === State.Loading}>

          Load

      </div>

    {/if}

  </div>

<script lang="ts">

  import { createEventDispatcher } from "svelte";

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

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

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

  export let uri: string;

  export let config: Config;

    </div>

    <div slot="actions">

        on:click={onClickConnect}

        disabled={!config.metamask.signer}>

        Connect with Metamask

    </div>

  </Modal>

</div>

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

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

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

  const dispatch = createEventDispatcher();

    </div>

    <div slot="actions">

    </div>

  </Modal>

{:else if state === State.Proposed && org}

    </div>

    <div slot="actions">

    </div>

  </Modal>

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

    to the correct address and try again.

    <div slot="actions">

        Go to registration →

    </div>

  </Error>

{:else if state === State.Failed && error}

    <div slot="actions">

      {#if state === State.Signing}

          Cancel

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

          Close

      {:else}

          on:click={onSubmit}

          disabled={!name || state !== State.Idle}>

          {#if state === State.Checking}

          {:else}

            Submit

          {/if}

      {/if}

    </div>

  </Modal>