Add account selectable in deploy dialog.

Link from hashes/addresses to Hook Explorer

components/Accounts.tsx

@@ -116,9 +116,16 @@ export const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                   }}
                 >
-                  {activeAccount?.address}
+                  <a
+                    href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {activeAccount?.address}
+                  </a>
                 </Text>
               </Flex>
               <Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
@@ -215,7 +222,11 @@ export const AccountDialog = ({
                   </Button>
                 </Text>
               </Flex>
-              <Flex css={{ marginLeft: "auto" }}>
+              <Flex
+                css={{
+                  marginLeft: "auto",
+                }}
+              >
                 <a
                   href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
                   target="_blank"
@@ -237,10 +248,22 @@ export const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                   }}
                 >
                   {activeAccount && activeAccount.hooks.length > 0
-                    ? activeAccount.hooks.map((i) => truncate(i, 12)).join(",")
+                    ? activeAccount.hooks.map((i) => {
+                        return (
+                          <a
+                            key={i}
+                            href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${i}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {truncate(i, 12)}
+                          </a>
+                        );
+                      })
                     : "–"}
                 </Text>
               </Flex>

components/SetHookDialog.tsx

@@ -22,12 +22,12 @@ import {
 import { TTS, tts } from "../utils/hookOnCalculator";
 import { deployHook } from "../state/actions";
 import { useSnapshot } from "valtio";
-import state from "../state";
+import state, { SelectOption } from "../state";
 import toast from "react-hot-toast";
 import { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
 import estimateFee from "../utils/estimateFee";
 
-const transactionOptions = Object.keys(tts).map((key) => ({
+const transactionOptions = Object.keys(tts).map(key => ({
   label: key,
   value: key as keyof TTS,
 }));
@@ -56,9 +56,22 @@ export type SetHookData = {
 export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
   ({ accountAddress }) => {
     const snap = useSnapshot(state);
-    const account = snap.accounts.find((acc) => acc.address === accountAddress);
+    const activeFile = snap.files[snap.active]?.compiledContent
-
+      ? snap.files[snap.active]
+      : snap.files.filter(file => file.compiledContent)[0];
     const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
+
+    const accountOptions: SelectOption[] = snap.accounts.map(acc => ({
+      label: acc.name,
+      value: acc.address,
+    }));
+
+    const [selectedAccount, setSelectedAccount] = useState(
+      accountOptions.find(acc => acc.value === accountAddress)
+    );
+    const account = snap.accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
     const {
       register,
       handleSubmit,
@@ -68,11 +81,13 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       getValues,
       formState: { errors },
     } = useForm<SetHookData>({
-      defaultValues: {
+      defaultValues: snap.deployValues?.[activeFile?.name]
-        HookNamespace:
+        ? snap.deployValues[activeFile?.name]
-          snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+        : {
-        Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
+            HookNamespace:
-      },
+              snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+            Invoke: transactionOptions.filter(to => to.label === "ttPAYMENT"),
+          },
     });
     const { fields, append, remove } = useFieldArray({
       control,
@@ -81,14 +96,21 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     const [formInitialized, setFormInitialized] = useState(false);
     const [estimateLoading, setEstimateLoading] = useState(false);
     const watchedFee = watch("Fee");
+
     // Update value if activeWat changes
     useEffect(() => {
-      setValue(
+      const defaultValue = snap.deployValues?.[activeFile?.name]
-        "HookNamespace",
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
-        snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+        : snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "";
-      );
+      setValue("HookNamespace", defaultValue);
       setFormInitialized(true);
-    }, [snap.activeWat, snap.files, setValue]);
+    }, [
+      snap.activeWat,
+      snap.files,
+      setValue,
+      activeFile?.name,
+      snap.deployValues,
+    ]);
     useEffect(() => {
       if (
         watchedFee &&
@@ -108,7 +130,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     const [hashedNamespace, setHashedNamespace] = useState("");
     const namespace = watch(
       "HookNamespace",
-      snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
+      snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
+        : snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
     );
     const calculateHashedValue = useCallback(async () => {
       const hashedVal = await sha256(namespace);
@@ -136,14 +160,10 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [formInitialized]);
 
-    if (!account) {
-      return null;
-    }
-
     const tooLargeFile = () => {
       const activeFile = snap.files[snap.active].compiledContent
         ? snap.files[snap.active]
-        : snap.files.filter((file) => file.compiledContent)[0];
+        : snap.files.filter(file => file.compiledContent)[0];
       return Boolean(
         activeFile?.compiledContent?.byteLength &&
           activeFile?.compiledContent?.byteLength >= 64000
@@ -152,8 +172,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
 
     const onSubmit: SubmitHandler<SetHookData> = async (data) => {
       const currAccount = state.accounts.find(
-        (acc) => acc.address === account.address
+        (acc) => acc.address === account?.address
       );
+      if (!account) return;
       if (currAccount) currAccount.isLoading = true;
       const res = await deployHook(account, data);
       if (currAccount) currAccount.isLoading = false;
@@ -173,8 +194,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
             uppercase
             variant={"secondary"}
             disabled={
+              !account ||
               account.isLoading ||
-              !snap.files.filter((file) => file.compiledWatContent).length ||
+              !snap.files.filter(file => file.compiledWatContent).length ||
               tooLargeFile()
             }
           >
@@ -186,14 +208,22 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
             <DialogTitle>Deploy configuration</DialogTitle>
             <DialogDescription as="div">
               <Stack css={{ width: "100%", flex: 1 }}>
+                <Box css={{ width: "100%" }}>
+                  <Label>Account</Label>
+                  <Select
+                    instanceId="deploy-account"
+                    placeholder="Select account"
+                    hideSelectedOptions
+                    options={accountOptions}
+                    value={selectedAccount}
+                    onChange={(acc: any) => setSelectedAccount(acc)}
+                  />
+                </Box>
                 <Box css={{ width: "100%" }}>
                   <Label>Invoke on transactions</Label>
                   <Controller
                     name="Invoke"
                     control={control}
-                    defaultValue={transactionOptions.filter(
-                      (to) => to.label === "ttPAYMENT"
-                    )}
                     render={({ field }) => (
                       <Select
                         {...field}
@@ -210,9 +240,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                   <Input
                     {...register("HookNamespace", { required: true })}
                     autoComplete={"off"}
-                    defaultValue={
-                      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-                    }
                   />
                   {errors.HookNamespace?.type === "required" && (
                     <Box css={{ display: "inline", color: "$red11" }}>
@@ -275,7 +302,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                       type="number"
                       {...register("Fee", { required: true })}
                       autoComplete={"off"}
-                      onKeyPress={(e) => {
+                      onKeyPress={e => {
                         if (e.key === "." || e.key === ",") {
                           e.preventDefault();
                         }
@@ -307,8 +334,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                         alignContent: "center",
                         display: "flex",
                       }}
-                      onClick={async (e) => {
+                      onClick={async e => {
                         e.preventDefault();
+                        if (!account) return;
                         setEstimateLoading(true);
                         const formValues = getValues();
                         try {
@@ -407,7 +435,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
               <Button
                 variant="primary"
                 type="submit"
-                isLoading={account.isLoading}
+                isLoading={account?.isLoading}
               >
                 Set Hook
               </Button>

package.json

@@ -36,6 +36,7 @@
     "monaco-editor": "^0.33.0",
     "next": "^12.0.4",
     "next-auth": "^4.0.0-beta.5",
+    "next-plausible": "^3.2.0",
     "next-themes": "^0.1.1",
     "normalize-url": "^7.0.2",
     "octokit": "^1.7.0",

pages/_app.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { useRouter } from "next/router";
 import { IdProvider } from "@radix-ui/react-id";
+import PlausibleProvider from "next-plausible";
 
 import { darkTheme, css } from "../stitches.config";
 import Navigation from "../components/Navigation";
@@ -17,6 +18,8 @@ import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en.json";
 import { useSnapshot } from "valtio";
 import Alert from "../components/AlertDialog";
+import { Button, Flex } from "../components";
+import { ChatCircleText } from "phosphor-react";
 
 TimeAgo.setDefaultLocale(en.locale);
 TimeAgo.addLocale(en);
@@ -37,7 +40,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
       if (
         !gistId &&
         router.isReady &&
-        !router.pathname.includes("/sign-in") &&
+        router.pathname.includes("/develop") &&
         !snap.files.length &&
         !snap.mainModalShowed
       ) {
@@ -114,6 +117,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
           media="(prefers-color-scheme: light)"
         />
       </Head>
+
       <IdProvider>
         <SessionProvider session={session}>
           <ThemeProvider
@@ -125,23 +129,40 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
               dark: darkTheme.className,
             }}
           >
-            <Navigation />
+            <PlausibleProvider
-            <Component {...pageProps} />
+              domain="hooks-builder.xrpl.org"
-            <Toaster
+              trackOutboundLinks
-              toastOptions={{
+            >
-                className: css({
+              <Navigation />
-                  backgroundColor: "$mauve1",
+              <Component {...pageProps} />
-                  color: "$mauve10",
+              <Toaster
-                  fontSize: "$sm",
+                toastOptions={{
-                  zIndex: 9999,
+                  className: css({
-                  ".dark &": {
+                    backgroundColor: "$mauve1",
-                    backgroundColor: "$mauve4",
+                    color: "$mauve10",
-                    color: "$mauve12",
+                    fontSize: "$sm",
-                  },
+                    zIndex: 9999,
-                })(),
+                    ".dark &": {
-              }}
+                      backgroundColor: "$mauve4",
-            />
+                      color: "$mauve12",
-            <Alert />
+                    },
+                  })(),
+                }}
+              />
+              <Alert />
+              <Flex
+                as="a"
+                href="https://github.com/XRPLF/Hooks/discussions"
+                target="_blank"
+                rel="noopener noreferrer"
+                css={{ position: "fixed", right: "$4", bottom: "$4" }}
+              >
+                <Button size="sm" variant="primary" outline>
+                  <ChatCircleText size={14} style={{ marginRight: "0px" }} />
+                  Bugs & Discussions
+                </Button>
+              </Flex>
+            </PlausibleProvider>
           </ThemeProvider>
         </SessionProvider>
       </IdProvider>

state/actions/deployHook.tsx

@@ -126,6 +126,10 @@ export const deployHook = async (
   data: SetHookData
 ) => {
   if (typeof window !== "undefined") {
+    const activeFile = state.files[state.active]?.compiledContent
+      ? state.files[state.active]
+      : state.files.filter((file) => file.compiledContent)[0];
+    state.deployValues[activeFile.name] = data;
     const tx = await prepareDeployHookTx(account, data);
     if (!tx) {
       return;

state/index.ts

@@ -52,6 +52,8 @@ export interface ILog {
   defaultCollapsed?: boolean
 }
 
+export type DeployValue = Record<IFile['name'], any>;
+
 export interface IState {
   files: IFile[];
   gistId?: string | null;
@@ -82,7 +84,8 @@ export interface IState {
   compileOptions: {
     optimizationLevel: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
     strip: boolean
-  }
+  },
+  deployValues: DeployValue
 }
 
 // let localStorageState: null | string = null;
@@ -116,7 +119,8 @@ let initialState: IState = {
   compileOptions: {
     optimizationLevel: '-O2',
     strip: true
-  }
+  },
+  deployValues: {}
 };
 
 let localStorageAccounts: string | null = null;

yarn.lock

@@ -2981,6 +2981,11 @@ next-auth@^4.0.0-beta.5:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
+next-plausible@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-3.2.0.tgz#d801346253e0c1cf64a02b9fc3a42050455cbc47"
+  integrity sha512-OlYcLXBG3kKd/fKMpm8SZ5IkUKSFm1/8t7cv6e5bewIqlpdZpdWuSrjbdJpbmutb2KPLXHzilKp09zmDGjy9KQ==
+
 next-themes@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"