Update hook deployment logic for v2

components/Accounts.tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useState, FC } from "react";
 import Dinero from "dinero.js";
 
 import Button from "./Button";
-import { addFaucetAccount, deployHook, importAccount } from "../state/actions";
+import { addFaucetAccount, importAccount } from "../state/actions";
 import state from "../state";
 import Box from "./Box";
 import { Container, Heading, Stack, Text, Flex } from ".";
@@ -27,6 +27,8 @@ const labelStyle = css({
   fontSize: "10px",
   mb: "$0.5",
 });
+import transactionsData from "../content/transactions.json";
+import { SetHookDialog } from "./SetHookDialog";
 
 export const AccountDialog = ({
   activeAccountAddress,
@@ -342,7 +344,6 @@ const Accounts: FC<AccountProps> = (props) => {
             fontSize: "13px",
             wordWrap: "break-word",
             fontWeight: "$body",
-            fontFamily: "$monospace",
             gap: 0,
             height: "calc(100% - 52px)",
             flexWrap: "nowrap",
@@ -396,29 +397,12 @@ const Accounts: FC<AccountProps> = (props) => {
                 </Box>
                 {!props.hideDeployBtn && (
                   <div
+                    className="hook-deploy-button"
                     onClick={(e) => {
-                      e.preventDefault();
                       e.stopPropagation();
                     }}
                   >
-                    <Button
+                    <SetHookDialog account={account} />
-                      css={{ ml: "auto" }}
-                      size="xs"
-                      uppercase
-                      isLoading={account.isLoading}
-                      disabled={
-                        account.isLoading ||
-                        !snap.files.filter((file) => file.compiledWatContent)
-                          .length
-                      }
-                      variant="secondary"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        deployHook(account);
-                      }}
-                    >
-                      Deploy
-                    </Button>
                   </div>
                 )}
               </Flex>
@@ -440,6 +424,11 @@ const Accounts: FC<AccountProps> = (props) => {
   );
 };
 
+export const transactionsOptions = transactionsData.map((tx) => ({
+  value: tx.TransactionType,
+  label: tx.TransactionType,
+}));
+
 const ImportAccountDialog = () => {
   const [value, setValue] = useState("");
   return (

components/Button.tsx

@@ -87,7 +87,8 @@ export const StyledButton = styled("button", {
           boxShadow: "inset 0 0 0 1px $colors$mauve11",
         },
         "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$mauve12, inset 0 0 0 2px $colors$mauve12",
+          boxShadow:
+            "inset 0 0 0 1px $colors$mauve12, inset 0 0 0 2px $colors$mauve12",
         },
         '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
           {
@@ -141,6 +142,29 @@ export const StyledButton = styled("button", {
             boxShadow: "inset 0 0 0 1px $colors$purple8",
           },
       },
+      destroy: {
+        backgroundColor: `$red9`,
+        boxShadow: "inset 0 0 0 1px $colors$red9",
+        color: "$white",
+        "@hover": {
+          "&:hover": {
+            backgroundColor: "$red10",
+            boxShadow: "inset 0 0 0 1px $colors$red11",
+          },
+        },
+        "&:active": {
+          backgroundColor: "$red8",
+          boxShadow: "inset 0 0 0 1px $colors$red8",
+        },
+        "&:focus": {
+          boxShadow: "inset 0 0 0 2px $colors$red12",
+        },
+        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
+          {
+            backgroundColor: "$mauve4",
+            boxShadow: "inset 0 0 0 1px $colors$red8",
+          },
+      },
     },
     muted: {
       true: {
@@ -236,16 +260,21 @@ export const StyledButton = styled("button", {
   },
 });
 
-const CustomButton: React.FC<React.ComponentProps<typeof StyledButton> & { as?: string }> =
+const CustomButton: React.FC<
-  React.forwardRef(({ children, as = "button", ...rest }, ref) => (
+  React.ComponentProps<typeof StyledButton> & { as?: string }
-    // @ts-expect-error
+> = React.forwardRef(({ children, as = "button", ...rest }, ref) => (
-    <StyledButton {...rest} ref={ref} as={as}>
+  // @ts-expect-error
-      <Flex as="span" css={{ gap: "$2", alignItems: "center" }} className="button-content">
+  <StyledButton {...rest} ref={ref} as={as}>
-        {children}
+    <Flex
-      </Flex>
+      as="span"
-      {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
+      css={{ gap: "$2", alignItems: "center" }}
-    </StyledButton>
+      className="button-content"
-  ));
+    >
+      {children}
+    </Flex>
+    {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
+  </StyledButton>
+));
 
 CustomButton.displayName = "CustomButton";
 

components/Dialog.tsx

@@ -55,7 +55,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
 
 const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
   return (
-    <div>
+    <div style={{ overflowY: "auto" }}>
       <StyledOverlay />
       <StyledContent css={css}>{children}</StyledContent>
     </div>
@@ -77,7 +77,7 @@ const StyledDescription = styled(DialogPrimitive.Description, {
 });
 
 // Exports
-export const Dialog = styled(DialogPrimitive.Root);
+export const Dialog = styled(DialogPrimitive.Root, { overflowY: "auto" });
 export const DialogTrigger = DialogPrimitive.Trigger;
 export const DialogContent = Content;
 export const DialogTitle = StyledTitle;

components/Input.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { styled } from "../stitches.config";
 
 export const Input = styled("input", {
@@ -148,4 +149,10 @@ export const Input = styled("input", {
   },
 });
 
-export default Input;
+// eslint-disable-next-line react/display-name
+const ReffedInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof Input>
+>((props, ref) => <Input {...props} ref={ref} />);
+
+export default ReffedInput;

components/Select.tsx

@@ -1,12 +1,13 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import { mauve, mauveDark } from "@radix-ui/colors";
 import { useTheme } from "next-themes";
-import { styled } from '../stitches.config';
+import { styled } from "../stitches.config";
-import dynamic from 'next/dynamic';
+import dynamic from "next/dynamic";
 import type { Props } from "react-select";
 const SelectInput = dynamic(() => import("react-select"), { ssr: false });
 
-const Select: FC<Props> = props => {
+// eslint-disable-next-line react/display-name
+const Select = forwardRef<any, Props>((props, ref) => {
   const { theme } = useTheme();
   const isDark = theme === "dark";
   const colors: any = {
@@ -21,12 +22,13 @@ const Select: FC<Props> = props => {
   colors.selected = colors.secondary;
   return (
     <SelectInput
-      menuPosition="fixed"
+      ref={ref}
-      theme={theme => ({
+      menuPosition={props.menuPosition || "fixed"}
+      theme={(theme) => ({
         ...theme,
         spacing: {
           ...theme.spacing,
-          controlHeight: 30
+          controlHeight: 30,
         },
         colors: {
           primary: colors.selected,
@@ -51,6 +53,6 @@ const Select: FC<Props> = props => {
       {...props}
     />
   );
-};
+});
 
 export default styled(Select, {});