Merge pull request #227 from XRPLF/feat/remember-deploy-values

Remember deploy values / Add feedback button

components/SetHookDialog.tsx

@@ -57,7 +57,9 @@ 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 {
       register,
@@ -68,11 +70,13 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       getValues,
       formState: { errors },
     } = useForm<SetHookData>({
-      defaultValues: {
-        HookNamespace:
-          snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
-        Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
-      },
+      defaultValues: snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues[activeFile?.name]
+        : {
+            HookNamespace:
+              snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+            Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
+          },
     });
     const { fields, append, remove } = useFieldArray({
       control,
@@ -81,14 +85,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(
-        "HookNamespace",
-        snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-      );
+      const defaultValue = snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
+        : 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 +119,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);
@@ -191,9 +204,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                   <Controller
                     name="Invoke"
                     control={control}
-                    defaultValue={transactionOptions.filter(
-                      (to) => to.label === "ttPAYMENT"
-                    )}
                     render={({ field }) => (
                       <Select
                         {...field}
@@ -210,9 +220,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" }}>

pages/_app.tsx

@@ -18,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);
@@ -38,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
       ) {
@@ -148,6 +150,18 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
                 }}
               />
               <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>

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;