7d1f226 Rename Error component to ErrorModal — radicle-explorer

modified src/Connect.svelte

@@ -2,7 +2,7 @@

   import { get } from "svelte/store";
   import { Connection, state } from "@app/session";
   import type { Err } from "@app/error";
   import Error from "@app/Error.svelte";
   import ErrorModal from "@app/ErrorModal.svelte";
   import type { Config } from "@app/config";
   import ConnectWallet from "@app/components/Modal/ConnectWallet.svelte";
   import Button from "@app/Button.svelte";

@@ -52,7 +52,7 @@

     uri={$walletConnectState.uri}
     on:close={onModalClose} />
 {:else if error}
   <Error
   <ErrorModal
     floating
     emoji="👛"
     title="Connection failed"

deleted src/Error.spec.ts

@@ -1,44 +0,0 @@

 import Error from "./Error.svelte";
 import { Failure } from "@app/error";
 describe("Error", () => {
   it("should show passed in props", () => {
     cy.mount(Error, {
       props: {
         subtitle: "Subtitle of Modal",
         error: {
           type: Failure.InsufficientBalance,
           txHash:
             "0x8b678e51f970c5307bf45a8bcea373b597f9acbcea5c5ba784a1d383361a89d1",
           message: "Not enough RAD",
         },
       },
     });
     cy.get("body").contains("Error").should("be.visible");
     cy.get("body").contains("Subtitle of Modal").should("be.visible");
     cy.get("body").contains("Not enough RAD").should("be.visible");
     cy.get("button").contains("Back").should("be.visible");
   });
   it("should show custom error message", () => {
     cy.mount(Error, {
       props: {
         subtitle: "Subtitle of Modal",
         message: "Error message to check for",
       },
     });
     cy.get("body").contains("Error message to check for").should("be.visible");
   });
   it("should change button label to Close when floating", () => {
     cy.mount(Error, {
       props: {
         title: "Title of Modal",
         subtitle: "Subtitle of Modal",
         message: "Error message to check for",
         floating: true,
       },
     });
     cy.get("button").contains("Close").should("be.visible");
   });
 });

deleted src/Error.svelte

@@ -1,48 +0,0 @@

 <script lang="ts">
   import type { Err } from "@app/error";
   import { createEventDispatcher } from "svelte";
   import Modal from "@app/Modal.svelte";
   import Button from "@app/Button.svelte";
   const dispatch = createEventDispatcher();
   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) || "";
 </script>
 <Modal on:close error {floating} {subtle}>
   <span slot="title">
     {#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>

added src/ErrorModal.spec.ts

@@ -0,0 +1,44 @@

 import ErrorModal from "./ErrorModal.svelte";
 import { Failure } from "@app/error";
 describe("Error", () => {
   it("should show passed in props", () => {
     cy.mount(ErrorModal, {
       props: {
         subtitle: "Subtitle of Modal",
         error: {
           type: Failure.InsufficientBalance,
           txHash:
             "0x8b678e51f970c5307bf45a8bcea373b597f9acbcea5c5ba784a1d383361a89d1",
           message: "Not enough RAD",
         },
       },
     });
     cy.get("body").contains("Error").should("be.visible");
     cy.get("body").contains("Subtitle of Modal").should("be.visible");
     cy.get("body").contains("Not enough RAD").should("be.visible");
     cy.get("button").contains("Back").should("be.visible");
   });
   it("should show custom error message", () => {
     cy.mount(ErrorModal, {
       props: {
         subtitle: "Subtitle of Modal",
         message: "Error message to check for",
       },
     });
     cy.get("body").contains("Error message to check for").should("be.visible");
   });
   it("should change button label to Close when floating", () => {
     cy.mount(ErrorModal, {
       props: {
         title: "Title of Modal",
         subtitle: "Subtitle of Modal",
         message: "Error message to check for",
         floating: true,
       },
     });
     cy.get("button").contains("Close").should("be.visible");
   });
 });

added src/ErrorModal.svelte

@@ -0,0 +1,48 @@

 <script lang="ts">
   import type { Err } from "@app/error";
   import { createEventDispatcher } from "svelte";
   import Modal from "@app/Modal.svelte";
   import Button from "@app/Button.svelte";
   const dispatch = createEventDispatcher();
   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) || "";
 </script>
 <Modal on:close error {floating} {subtle}>
   <span slot="title">
     {#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>

modified src/Profile.svelte

@@ -16,7 +16,7 @@

   import { session } from "@app/session";
   import { Org } from "@app/base/orgs/Org";
   import Message from "@app/Message.svelte";
   import Error from "@app/Error.svelte";
   import ErrorModal from "@app/ErrorModal.svelte";
   import { User } from "@app/base/users/User";
   import Projects from "@app/base/seeds/View/Projects.svelte";
   import { MissingReverseRecord, NotFoundError } from "@app/error";

@@ -491,6 +491,6 @@

       title={addressOrName}
       subtitle="Sorry, the requested name has no reverse record set." />
   {:else}
     <Error error={err} />
     <ErrorModal error={err} />
   {/if}
 {/await}

modified src/base/faucet/Withdraw.svelte

@@ -4,7 +4,7 @@

   import type { Config } from "@app/config";
   import Loading from "@app/Loading.svelte";
   import Modal from "@app/Modal.svelte";
   import Err from "@app/Error.svelte";
   import ErrorModal from "@app/ErrorModal.svelte";
   import type { State } from "@app/utils";
   import { Status } from "@app/utils";
   import { withdraw } from "./lib";

@@ -51,7 +51,10 @@

 </style>
 {#if error}
   <Err title="Transaction failed" message={error.message} on:close={back} />
   <ErrorModal
     title="Transaction failed"
     message={error.message}
     on:close={back} />
 {:else}
   <Modal>
     <span slot="title">

modified src/base/registrations/Routes.svelte

@@ -4,7 +4,7 @@

   import New from "@app/base/registrations/New.svelte";
   import Submit from "@app/base/registrations/Submit.svelte";
   import View from "@app/base/registrations/View.svelte";
   import Error from "@app/Error.svelte";
   import ErrorModal from "@app/ErrorModal.svelte";
   import type { Config } from "@app/config";
   import type { Session } from "@app/session";
   import { getSearchParam } from "@app/utils";

@@ -29,7 +29,7 @@

       owner={getSearchParam("owner", location)}
       {session} />
   {:else}
     <Error
     <ErrorModal
       message={"You must connect your wallet to register"}
       on:close={() => navigate("/registrations")} />
   {/if}

modified src/base/registrations/Submit.svelte

@@ -7,7 +7,7 @@

   import type { Config } from "@app/config";
   import Loading from "@app/Loading.svelte";
   import Modal from "@app/Modal.svelte";
   import Err from "@app/Error.svelte";
   import ErrorModal from "@app/ErrorModal.svelte";
   import BlockTimer from "@app/BlockTimer.svelte";
   import Button from "@app/Button.svelte";

@@ -54,7 +54,7 @@

 </svelte:head>
 {#if error}
   <Err
   <ErrorModal
     title="Transaction failed"
     message={error.message}
     on:close={() => navigate("/registrations")} />

modified src/base/registrations/View.svelte

@@ -10,7 +10,7 @@

   import Form from "@app/Form.svelte";
   import type { Field } from "@app/Form.svelte";
   import { assert } from "@app/error";
   import Error from "@app/Error.svelte";
   import ErrorModal from "@app/ErrorModal.svelte";
   import { isAddressEqual, isReverseRecordSet } from "@app/utils";
   import Button from "@app/Button.svelte";

@@ -235,11 +235,11 @@

 {#if state.status === Status.Loading}
   <Loading />
 {:else if state.status === Status.Failed}
   <Error
   <ErrorModal
     title="Registration could not be loaded"
     on:close={() => navigate("/registrations")}>
     {state.error}
   </Error>
   </ErrorModal>
 {:else if state.status === Status.NotFound}
   <Modal subtle>
     <span slot="title" class="secondary">

modified src/ens/SetName.svelte

@@ -6,7 +6,7 @@

   import { formatAddress, isAddressEqual } from "@app/utils";
   import { Org } from "@app/base/orgs/Org";
   import type { User } from "@app/base/users/User";
   import ErrorModal from "@app/Error.svelte";
   import ErrorModal from "@app/ErrorModal.svelte";
   import Address from "@app/Address.svelte";
   import * as utils from "@app/utils";
   import Button from "@app/Button.svelte";