delete hook and delete account features, #140 #47

components/Accounts.tsx

@@ -1,6 +1,6 @@
 import toast from "react-hot-toast";
 import { useSnapshot } from "valtio";
-import { ArrowSquareOut, Copy, Wallet, X } from "phosphor-react";
+import { ArrowSquareOut, Copy, Trash, Wallet, X } from "phosphor-react";
 import React, { useEffect, useState, FC } from "react";
 import Dinero from "dinero.js";
 
@@ -30,6 +30,7 @@ const labelStyle = css({
 import transactionsData from "../content/transactions.json";
 import { SetHookDialog } from "./SetHookDialog";
 import { addFunds } from "../state/actions/addFaucetAccount";
+import { deleteHook } from "../state/actions/deployHook";
 
 export const AccountDialog = ({
   activeAccountAddress,
@@ -90,6 +91,22 @@ export const AccountDialog = ({
           }}
         >
           <Wallet size="15px" /> {activeAccount?.name}
+          <DialogClose asChild>
+            <Button
+              size="xs"
+              outline
+              css={{ ml: "auto", mr: "$9" }}
+              tabIndex={-1}
+              onClick={() => {
+                const index = state.accounts.findIndex(
+                  (acc) => acc.address === activeAccount?.address
+                );
+                state.accounts.splice(index, 1);
+              }}
+            >
+              Delete Account <Trash size="15px" />
+            </Button>
+          </DialogClose>
         </DialogTitle>
         <DialogDescription as="div" css={{ fontFamily: "$monospace" }}>
           <Stack css={{ display: "flex", flexDirection: "column", gap: "$3" }}>
@@ -222,10 +239,25 @@ export const AccountDialog = ({
                     fontFamily: "$monospace",
                   }}
                 >
-                  {activeAccount &&
-                    activeAccount.hooks.map((i) => truncate(i, 6)).join(",")}
+                  {activeAccount && activeAccount.hooks.length > 0
+                    ? activeAccount.hooks.map((i) => truncate(i, 12)).join(",")
+                    : "–"}
                 </Text>
               </Flex>
+              {activeAccount && activeAccount?.hooks?.length > 0 && (
+                <Flex css={{ marginLeft: "auto" }}>
+                  <Button
+                    size="xs"
+                    outline
+                    css={{ mt: "$3", mr: "$1", ml: "auto" }}
+                    onClick={() => {
+                      deleteHook(activeAccount);
+                    }}
+                  >
+                    Delete Hook <Trash size="15px" />
+                  </Button>
+                </Flex>
+              )}
             </Flex>
           </Stack>
         </DialogDescription>

state/actions/addFaucetAccount.ts

@@ -50,8 +50,9 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
       if (showToast) {
         toast.success("New account created", { id: toastId });
       }
+      const currNames = state.accounts.map(acc => acc.name);
       state.accounts.push({
-        name: names[state.accounts.length],
+        name: names.filter(name => !currNames.includes(name))[0],
         xrp: (json.xrp || 0 * 1000000).toString(),
         address: json.address,
         secret: json.secret,
@@ -76,7 +77,7 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
 })();
 
 export const addFunds = async (address: string) => {
-  const toastId = toast.loading("Creating account");
+  const toastId = toast.loading("Requesting funds");
   const res = await fetch(`${window.location.origin}/api/faucet?account=${address}`, {
     method: "POST",
   });

state/actions/deployHook.ts

@@ -1,4 +1,5 @@
 import { derive, sign } from "xrpl-accountlib";
+import toast from "react-hot-toast";
 
 import state, { IAccount } from "../index";
 import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
@@ -139,3 +140,72 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
     return submitRes;
   }
 };
+
+export const deleteHook = async (account: IAccount & { name?: string }) => {
+  if (!state.client) {
+    return;
+  }
+
+  if (typeof window !== "undefined") {
+    const tx = {
+      Account: account.address,
+      TransactionType: "SetHook",
+      Sequence: account.sequence,
+      Fee: "100000",
+      Hooks: [
+        {
+          Hook: {
+            CreateCode: "",
+            Flags: 1,
+          }
+        }
+      ]
+    };
+
+    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;
+    }
+    let submitRes;
+    const toastId = toast.loading("Deleting hook...");
+    try {
+      submitRes = await state.client.send({
+        command: "submit",
+        tx_blob: signedTransaction,
+      });
+
+      if (submitRes.engine_result === "tesSUCCESS") {
+        toast.success('Hook deleted successfully ✅', { id: toastId })
+        state.deployLogs.push({
+          type: "success",
+          message: "Hook deleted successfully ✅",
+        });
+        state.deployLogs.push({
+          type: "success",
+          message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
+        });
+      } else {
+        toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, { id: toastId })
+        state.deployLogs.push({
+          type: "error",
+          message: `[${submitRes.engine_result || submitRes.error}] ${submitRes.engine_result_message || submitRes.error_exception}`,
+        });
+      }
+    } catch (err) {
+      console.log(err);
+      toast.error('Error occured while deleting hoook', { id: toastId })
+      state.deployLogs.push({
+        type: "error",
+        message: "Error occured while deleting hook",
+      });
+    }
+    if (currentAccount) {
+      currentAccount.isLoading = false;
+    }
+    return submitRes;
+  }
+};

utils/hookOnCalculator.ts

@@ -38,10 +38,4 @@ const calculateHookOn = (arr: (keyof TTS)[]) => {
   return start.substring(2);
 }
 
-if (typeof window !== 'undefined') {
-  // @ts-ignore
-
-  window.kissa = calculateHookOn
-}
-
 export default calculateHookOn