basic comms working

2 files changed, 10 insertions, 7 deletions

diff --git a/front/src/components/modals/Modal.tsx b/front/src/components/modals/Modal.tsx
index 7dd688c..e7bae78 100644
--- a/front/src/components/modals/Modal.tsx
+++ b/front/src/components/modals/Modal.tsx
@@ -2,7 +2,7 @@ import useLocalState from "@/state/state";
 import { useEffect, useRef, useState } from "react";
 
 function Modal({ children }: any) {
-  const { setModal } = useLocalState();
+  const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
   function onKey(event: any) {
     if (event.key === "Escape") setModal(null);
   }
diff --git a/front/src/components/modals/ShipModal.tsx b/front/src/components/modals/ShipModal.tsx
index 86bffbb..e823a3a 100644
--- a/front/src/components/modals/ShipModal.tsx
+++ b/front/src/components/modals/ShipModal.tsx
@@ -1,13 +1,16 @@
 import type { Ship } from "@/types/urbit";
 import Modal from "./Modal";
 import Avatar from "../Avatar";
-import copyIcon from "@/assets/icons/copy.svg";
+import Icon from "@/components/Icon";
 import useLocalState from "@/state/state";
 import { useLocation } from "wouter";
 import toast from "react-hot-toast";
 
 export default function ({ ship }: { ship: Ship }) {
-  const { setModal, api } = useLocalState();
+  const { setModal, api } = useLocalState((s) => ({
+    setModal: s.setModal,
+    api: s.api,
+  }));
   const [_, navigate] = useLocation();
   function close() {
     setModal(null);
@@ -22,12 +25,12 @@ export default function ({ ship }: { ship: Ship }) {
       <div id="ship-modal">
         <div className="flex">
           <Avatar p={ship} size={60} />
-          <img
+          <Icon
+            name="copy"
+            size={20}
             className="copy-icon cp"
-            role="link"
             onClick={copy}
-            src={copyIcon}
-            alt=""
+            title="Copy ship name"
           />
         </div>
         <div className="buttons f1">