Add few more fixes and styling to modals

components/SetHookDialog.tsx

@@ -1,5 +1,5 @@
+import React, { useState } from "react";
 import { Plus, Trash, X } from "phosphor-react";
-import React from "react";
 import Button from "./Button";
 import Box from "./Box";
 import { Stack, Flex, Select } from ".";
@@ -24,6 +24,7 @@ import { deployHook } from "../state/actions";
 import type { IAccount } from "../state";
 import { useSnapshot } from "valtio";
 import state from "../state";
+import toast from "react-hot-toast";
 
 const transactionOptions = Object.keys(tts).map((key) => ({
   label: key,
@@ -51,6 +52,7 @@ export type SetHookData = {
 
 export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
   const snap = useSnapshot(state);
+  const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
   const {
     register,
     handleSubmit,
@@ -72,11 +74,16 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
   if (!account) {
     return null;
   }
-  const onSubmit: SubmitHandler<SetHookData> = (data) => {
-    deployHook(account, data);
+  const onSubmit: SubmitHandler<SetHookData> = async (data) => {
+    const res = await deployHook(account, data);
+    if (res && res.engine_result === "tesSUCCESS") {
+      toast.success("Transaction succeeded!");
+      return setIsSetHookDialogOpen(false);
+    }
+    toast.error(`Transaction failed! (${res?.engine_result_message})`);
   };
   return (
-    <Dialog>
+    <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
       <DialogTrigger asChild>
         <Button
           ghost
@@ -110,12 +117,6 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                       closeMenuOnSelect={false}
                       isMulti
                       menuPosition="absolute"
-                      styles={{
-                        menuPortal: (provided) => ({
-                          ...provided,
-                          zIndex: 9000,
-                        }),
-                      }}
                       options={transactionOptions}
                     />
                   )}

pages/test/[[...slug]].tsx

@@ -4,9 +4,15 @@ import { FC, useCallback, useEffect, useState } from "react";
 import Split from "react-split";
 import { useSnapshot } from "valtio";
 import {
-  Box, Button, Container,
-  Flex, Input,
-  Select, Tab, Tabs, Text
+  Box,
+  Button,
+  Container,
+  Flex,
+  Input,
+  Select,
+  Tab,
+  Tabs,
+  Text,
 } from "../../components";
 import transactionsData from "../../content/transactions.json";
 import state from "../../state";
@@ -183,13 +189,23 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
   return (
     <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
       <Container
-        css={{ p: "$3 0", fontSize: "$sm", height: "calc(100% - 28px)" }}
+        css={{
+          p: "$3 01",
+          fontSize: "$sm",
+          height: "calc(100% - 45px)",
+        }}
       >
         <Flex column fluid css={{ height: "100%", overflowY: "auto" }}>
           <Flex
             row
             fluid
-            css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}
+            css={{
+              justifyContent: "flex-end",
+              alignItems: "center",
+              mb: "$3",
+              mt: "1px",
+              pr: "1px",
+            }}
           >
             <Text muted css={{ mr: "$3" }}>
               Transaction type:{" "}
@@ -207,7 +223,12 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
           <Flex
             row
             fluid
-            css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}
+            css={{
+              justifyContent: "flex-end",
+              alignItems: "center",
+              mb: "$3",
+              pr: "1px",
+            }}
           >
             <Text muted css={{ mr: "$3" }}>
               Account:{" "}
@@ -229,6 +250,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                 justifyContent: "flex-end",
                 alignItems: "center",
                 mb: "$3",
+                pr: "1px",
               }}
             >
               <Text muted css={{ mr: "$3" }}>
@@ -242,7 +264,6 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                     Amount: { type: "currency", value: e.target.value },
                   })
                 }
-                variant="deep"
                 css={{ width: "70%", flex: "inherit", height: "$9" }}
               />
             </Flex>
@@ -255,6 +276,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                 justifyContent: "flex-end",
                 alignItems: "center",
                 mb: "$3",
+                pr: "1px",
               }}
             >
               <Text muted css={{ mr: "$3" }}>
@@ -289,6 +311,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                   justifyContent: "flex-end",
                   alignItems: "center",
                   mb: "$3",
+                  pr: "1px",
                 }}
               >
                 <Text muted css={{ mr: "$3" }}>
@@ -305,7 +328,6 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                           : e.target.value,
                     })
                   }
-                  variant="deep"
                   css={{ width: "70%", flex: "inherit", height: "$9" }}
                 />
               </Flex>

state/actions/deployHook.ts

@@ -106,8 +106,9 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
     if (currentAccount) {
       currentAccount.isLoading = true;
     }
+    let submitRes;
     try {
-      const submitRes = await state.client.send({
+      submitRes = await state.client.send({
         command: "submit",
         tx_blob: signedTransaction,
       });
@@ -137,5 +138,6 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
     if (currentAccount) {
       currentAccount.isLoading = false;
     }
+    return submitRes;
   }
 };