Few more changes to deleteHook function

components/Accounts.tsx

@@ -249,6 +249,7 @@ export const AccountDialog = ({
                   <Button
                     size="xs"
                     outline
+                    disabled={activeAccount.isLoading}
                     css={{ mt: "$3", mr: "$1", ml: "auto" }}
                     onClick={() => {
                       deleteHook(activeAccount);

components/Button.tsx

@@ -171,16 +171,6 @@ export const StyledButton = styled("button", {
         color: "$textMuted",
       },
     },
-    isDisabled: {
-      true: {
-        opacity: 0.6,
-        // pointerEvents: "none",
-        cursor: "auto",
-        "&:hover": {
-          boxShadow: "inherit",
-        },
-      },
-    },
     outline: {
       true: {
         backgroundColor: "transparent",

components/EditorNavigation.tsx

@@ -25,7 +25,6 @@ import {
 import NewWindow from "react-new-window";
 import { signOut, useSession } from "next-auth/react";
 import { useSnapshot } from "valtio";
-import toast from "react-hot-toast";
 
 import {
   createNewFile,
@@ -49,7 +48,7 @@ import Flex from "./Flex";
 import Stack from "./Stack";
 import Input from "./Input";
 import Text from "./Text";
-import Tooltip from "./Tooltip";
+import toast from "react-hot-toast";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -368,65 +367,44 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               },
             }}
           >
-            <Tooltip content="Download as ZIP">
+            <Button
-              <Button
+              isLoading={snap.zipLoading}
-                isLoading={snap.zipLoading}
+              onClick={downloadAsZip}
-                onClick={downloadAsZip}
+              outline
-                outline
+              size="sm"
-                size="sm"
+              css={{ alignItems: "center" }}
-                css={{ alignItems: "center" }}
-              >
-                <DownloadSimple size="16px" />
-              </Button>
-            </Tooltip>
-            <Tooltip content="Copy share link to clipboard">
-              <Button
-                outline
-                size="sm"
-                css={{ alignItems: "center" }}
-                onClick={() => {
-                  navigator.clipboard.writeText(
-                    `${window.location.origin}/develop/${snap.gistId}`
-                  );
-                  toast.success("Copied share link to clipboard!");
-                }}
-              >
-                <Share size="16px" />
-              </Button>
-            </Tooltip>
-            <Tooltip
-              content={
-                session && session.user
-                  ? snap.gistOwner === session?.user.username
-                    ? "Sync to Gist"
-                    : "Create as a new Gist"
-                  : "You need to be logged in to sync with Gist"
-              }
             >
-              <Button
+              <DownloadSimple size="16px" />
-                outline
+            </Button>
-                size="sm"
+            <Button
-                isDisabled={!session || !session.user}
+              outline
-                isLoading={snap.gistLoading}
+              size="sm"
-                css={{ alignItems: "center" }}
+              css={{ alignItems: "center" }}
-                onClick={() => {
+              onClick={() => {
-                  if (!session || !session.user) {
+                navigator.clipboard.writeText(
-                    return;
+                  `${window.location.origin}/develop/${snap.gistId}`
-                  }
+                );
-                  if (snap.gistOwner === session?.user.username) {
+                toast.success("Copied share link to clipboard!");
-                    syncToGist(session);
+              }}
-                  } else {
+            >
-                    setCreateNewAlertOpen(true);
+              <Share size="16px" />
-                  }
+            </Button>
-                }}
+            <Button
-              >
+              outline
-                {snap.gistOwner === session?.user.username ? (
+              size="sm"
-                  <CloudArrowUp size="16px" />
+              disabled={!session || !session.user}
-                ) : (
+              isLoading={snap.gistLoading}
-                  <FilePlus size="16px" />
+              css={{ alignItems: "center" }}
-                )}
+              onClick={() => {
-              </Button>
+                if (snap.gistOwner === session?.user.username) {
-            </Tooltip>
+                  syncToGist(session);
+                } else {
+                  setCreateNewAlertOpen(true);
+                }
+              }}
+            >
+              <CloudArrowUp size="16px" />
+            </Button>
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>

components/LogBox.tsx

@@ -215,7 +215,6 @@ export const Log: FC<ILog> = ({
         )}
         {expanded && jsonData && <Pre block>{jsonData}</Pre>}
       </LogText>
-      <br />
     </>
   );
 };

components/Tooltip.tsx

@@ -1,89 +0,0 @@
-import React from "react";
-import { styled, keyframes } from "../stitches.config";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-const slideUpAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateY(2px)" },
-  "100%": { opacity: 1, transform: "translateY(0)" },
-});
-
-const slideRightAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateX(-2px)" },
-  "100%": { opacity: 1, transform: "translateX(0)" },
-});
-
-const slideDownAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateY(-2px)" },
-  "100%": { opacity: 1, transform: "translateY(0)" },
-});
-
-const slideLeftAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateX(2px)" },
-  "100%": { opacity: 1, transform: "translateX(0)" },
-});
-
-const StyledContent = styled(TooltipPrimitive.Content, {
-  borderRadius: 4,
-  padding: "$2 $3",
-  fontSize: 12,
-  lineHeight: 1,
-  color: "$text",
-  backgroundColor: "$background",
-  boxShadow:
-    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
-  "@media (prefers-reduced-motion: no-preference)": {
-    animationDuration: "400ms",
-    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
-    animationFillMode: "forwards",
-    willChange: "transform, opacity",
-    '&[data-state="delayed-open"]': {
-      '&[data-side="top"]': { animationName: slideDownAndFade },
-      '&[data-side="right"]': { animationName: slideLeftAndFade },
-      '&[data-side="bottom"]': { animationName: slideUpAndFade },
-      '&[data-side="left"]': { animationName: slideRightAndFade },
-    },
-  },
-  ".dark &": {
-    boxShadow:
-      "0px 0px 10px 2px rgba(255,255,255,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
-  },
-  ".light &": {
-    boxShadow:
-      "0px 0px 10px 2px rgba(0,0,0,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
-  },
-});
-
-const StyledArrow = styled(TooltipPrimitive.Arrow, {
-  fill: "$background",
-});
-
-interface ITooltip {
-  content: string;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-const Tooltip: React.FC<ITooltip> = ({
-  children,
-  content,
-  open,
-  defaultOpen = false,
-  onOpenChange,
-}) => {
-  return (
-    <TooltipPrimitive.Root
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-    >
-      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <StyledContent side="bottom" align="center">
-        {content}
-        <StyledArrow offset={5} width={11} height={5} />
-      </StyledContent>
-    </TooltipPrimitive.Root>
-  );
-};
-
-export default Tooltip;

package.json

@@ -19,7 +19,6 @@
     "@radix-ui/react-dialog": "^0.1.1",
     "@radix-ui/react-dropdown-menu": "^0.1.1",
     "@radix-ui/react-id": "^0.1.1",
-    "@radix-ui/react-tooltip": "^0.1.7",
     "@stitches/react": "^1.2.6-0",
     "base64-js": "^1.5.1",
     "dinero.js": "^1.9.1",

state/actions/deployHook.ts

@@ -153,13 +153,18 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
   if (!state.client) {
     return;
   }
-
+  const currentAccount = state.accounts.find(
+    (acc) => acc.address === account.address
+  );
+  if (currentAccount?.isLoading || !currentAccount?.hooks.length) {
+    return
+  }
   if (typeof window !== "undefined") {
     const tx = {
       Account: account.address,
       TransactionType: "SetHook",
       Sequence: account.sequence,
-      Fee: "1000000",
+      Fee: "100000",
       Hooks: [
         {
           Hook: {
@@ -172,9 +177,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
 
     const keypair = derive.familySeed(account.secret);
     const { signedTransaction } = sign(tx, keypair);
-    const currentAccount = state.accounts.find(
+
-      (acc) => acc.address === account.address
-    );
     if (currentAccount) {
       currentAccount.isLoading = true;
     }
@@ -196,6 +199,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
           type: "success",
           message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
         });
+        currentAccount.hooks = [];
       } else {
         toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, { id: toastId })
         state.deployLogs.push({

yarn.lock

@@ -762,27 +762,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "0.1.0"
 
-"@radix-ui/react-tooltip@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
-  integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "0.1.0"
-    "@radix-ui/react-compose-refs" "0.1.0"
-    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-id" "0.1.5"
-    "@radix-ui/react-popper" "0.1.4"
-    "@radix-ui/react-portal" "0.1.4"
-    "@radix-ui/react-presence" "0.1.2"
-    "@radix-ui/react-primitive" "0.1.4"
-    "@radix-ui/react-slot" "0.1.2"
-    "@radix-ui/react-use-controllable-state" "0.1.0"
-    "@radix-ui/react-use-escape-keydown" "0.1.0"
-    "@radix-ui/react-use-previous" "0.1.1"
-    "@radix-ui/react-use-rect" "0.1.1"
-    "@radix-ui/react-visually-hidden" "0.1.4"
-
 "@radix-ui/react-use-body-pointer-events@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz#63e7fd81ca7ffd30841deb584cd2b7f460df2597"
@@ -828,13 +807,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-use-previous@0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
-  integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@radix-ui/react-use-rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
@@ -850,14 +822,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-visually-hidden@0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
-  integrity sha512-K/q6AEEzqeeEq/T0NPChvBqnwlp8Tl4NnQdrI/y8IOY7BRR+Ug0PEsVk6g48HJ7cA1//COugdxXXVVK/m0X1mA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "0.1.4"
-
 "@radix-ui/rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"