aragon · brickpop · Jul 31, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/components/dialogs/NewActionDialog.tsx b/components/dialogs/NewActionDialog.tsx
@@ -6,36 +6,37 @@ import { ElseIf, If, Then } from "@/components/if";
 import { useState } from "react";
 import { AbiFunction } from "viem";
 import { CalldataForm } from "../input/calldata-form";
+import { ImportActionsForm } from "../input/import-actions-form";
 
-export type NewActionType = "" | "withdrawal" | "select-abi-function" | "calldata" | "custom-abi";
+export type NewActionType = "" | "withdrawal" | "select-abi-function" | "calldata" | "import-json";
 
 interface INewActionDialogProps extends IDialogRootProps {
-  onClose: (newAction: RawAction | null, abi: AbiFunction | null) => void;
+  onClose: (newAction: RawAction[] | null, abi: AbiFunction | null) => void;
   newActionType: NewActionType;
 }
 
 export const NewActionDialog: React.FC<INewActionDialogProps> = (props) => {
   const { onClose, newActionType } = props;
-  const [stagedAction, setStagedAction] = useState<RawAction | null>(null);
+  const [stagedActions, setStagedActions] = useState<RawAction[] | null>(null);
   const [abi, setAbi] = useState<AbiFunction | null>(null);
 
   const onReceiveAbiAction = (action: RawAction, newAbi: AbiFunction) => {
-    setStagedAction(action);
+    setStagedActions([action]);
     setAbi(newAbi);
   };
   const onActionCleared = () => {
-    setStagedAction(null);
+    setStagedActions(null);
     setAbi(null);
   };
   const handleSubmit = () => {
-    if (!stagedAction) return;
+    if (!stagedActions) return;
 
-    onClose(stagedAction, abi || null);
-    setStagedAction(null);
+    onClose(stagedActions, abi || null);
+    setStagedActions(null);
   };
   const dismiss = () => {
     onClose(null, null);
-    setStagedAction(null);
+    setStagedActions(null);
   };
 
   const show = newActionType !== "";
@@ -46,25 +47,27 @@ export const NewActionDialog: React.FC<INewActionDialogProps> = (props) => {
       <DialogContent className="flex flex-col gap-y-4 md:gap-y-6">
         <If condition={newActionType === "withdrawal"}>
           <Then>
-            <WithdrawalForm onChange={(action) => setStagedAction(action)} onSubmit={() => handleSubmit()} />
+            <WithdrawalForm onChange={(action) => setStagedActions([action])} onSubmit={() => handleSubmit()} />
           </Then>
           <ElseIf condition={newActionType === "select-abi-function"}>
             <FunctionAbiSelectForm
               onChange={(action, abi) => onReceiveAbiAction(action, abi)}
               onActionCleared={onActionCleared}
             />
           </ElseIf>
-          <ElseIf condition={newActionType === "custom-abi"}></ElseIf>
           <ElseIf condition={newActionType === "calldata"}>
-            <CalldataForm onChange={(action) => setStagedAction(action)} onSubmit={() => handleSubmit()} />
+            <CalldataForm onChange={(action) => setStagedActions([action])} onSubmit={() => handleSubmit()} />
+          </ElseIf>
+          <ElseIf condition={newActionType === "import-json"}>
+            <ImportActionsForm onChange={(actions) => setStagedActions(actions)} />
           </ElseIf>
         </If>
 
         <div className="flex justify-between">
           <Button variant="secondary" size="lg" onClick={() => dismiss()}>
             Cancel
           </Button>
-          <Button variant="primary" disabled={!stagedAction} size="lg" onClick={() => handleSubmit()}>
+          <Button variant="primary" disabled={!stagedActions} size="lg" onClick={() => handleSubmit()}>
             Add action
           </Button>
         </div>

diff --git a/components/input/calldata-form.tsx b/components/input/calldata-form.tsx
@@ -20,7 +20,7 @@ import { useAbi } from "@/hooks/useAbi";
 import { CallFunctionSignatureField, CallParamField } from "../proposalActions/callParamField";
 
 interface ICalldataFormProps {
-  onChange: (actions: RawAction) => any;
+  onChange: (action: RawAction) => any;
   onSubmit?: () => any;
 }
 

diff --git a/components/input/import-actions-form.tsx b/components/input/import-actions-form.tsx
@@ -0,0 +1,62 @@
+import { type RawAction } from "@/utils/types";
+import { type FC, useState } from "react";
+import { TextArea } from "@aragon/ods";
+import { If } from "../if";
+import { decodeStrJson } from "@/utils/json-actions";
+
+interface IImportActionsFormProps {
+  onChange: (actions: RawAction[]) => any;
+}
+
+export const ImportActionsForm: FC<IImportActionsFormProps> = ({ onChange }) => {
+  const [actions, setActions] = useState<RawAction[]>([]);
+  const [strJson, setStrJson] = useState("");
+
+  const onJsonData = (strJson: string) => {
+    try {
+      setStrJson(strJson);
+
+      const actions = decodeStrJson(strJson);
+      setActions(actions);
+      onChange(actions);
+    } catch (_) {
+      //
+      setActions([]);
+      onChange([]);
+    }
+  };
+
+  return (
+    <div className="my-6">
+      <div className="pb-4">
+        <TextArea
+          className=""
+          label="JSON actions"
+          placeholder="Copy the contents of the JSON file here"
+          alert={resolveCalldataAlert(strJson)}
+          onChange={(e) => onJsonData(e.target.value)}
+        />
+      </div>
+
+      {/* Try to decode */}
+      <If condition={!!actions?.length}>
+        <div className="flex flex-row items-center justify-between pt-4">
+          <p className="text-md text-neutral-800">{actions?.length || 0} action(s) can be imported</p>
+        </div>
+      </If>
+    </div>
+  );
+};
+
+// Helpers
+
+function resolveCalldataAlert(strJson: string): { message: string; variant: "critical" | "warning" } | undefined {
+  if (!strJson) return undefined;
+
+  try {
+    decodeStrJson(strJson);
+    return undefined;
+  } catch (_) {
+    return { message: "The given JSON data contains invalid entries", variant: "critical" };
+  }
+}
diff --git a/components/input/withdrawal-form.tsx b/components/input/withdrawal-form.tsx
@@ -7,7 +7,7 @@ import { ElseIf, If, Then } from "../if";
 import { PUB_CHAIN } from "@/constants";
 
 interface IWithdrawalFormProps {
-  onChange: (actions: RawAction) => any;
+  onChange: (action: RawAction) => any;
   onSubmit?: () => any;
 }
 

diff --git a/plugins/emergency-multisig/pages/new.tsx b/plugins/emergency-multisig/pages/new.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, useState } from "react";
-import { Button, Dropdown, IconType, InputText, Tag, TextAreaRichText } from "@aragon/ods";
+import { Button, IconType, InputText, Tag, TextAreaRichText } from "@aragon/ods";
 import { useAccount } from "wagmi";
 import { Else, ElseIf, If, Then } from "@/components/if";
 import { PleaseWaitSpinner } from "@/components/please-wait";
@@ -16,6 +16,8 @@ import { NewActionDialog, NewActionType } from "@/components/dialogs/NewActionDi
 import { Address } from "viem";
 import { AddActionCard } from "@/components/cards/AddActionCard";
 import { ProposalActions } from "@/components/proposalActions/proposalActions";
+import { downloadAsFile } from "@/utils/download-as-file";
+import { encodeActionsAsJson } from "@/utils/json-actions";
 
 export default function Create() {
   const { address: selfAddress, isConnected } = useAccount();
@@ -44,7 +46,7 @@ export default function Create() {
   const handleSummaryInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSummary(event?.target?.value);
   };
-  const handleNewActionDialogClose = (newAction: RawAction | null) => {
+  const handleNewActionDialogClose = (newAction: RawAction[] | null) => {
     if (!newAction) {
       setAddActionType("");
       return;
@@ -75,6 +77,13 @@ export default function Create() {
   });
   const signersWithPubKey = filteredSignerItems.length;
 
+  const exportAsJson = () => {
+    if (!actions.length) return;
+
+    const result = encodeActionsAsJson(actions);
+    downloadAsFile("actions.json", JSON.stringify(result), "text/json");
+  };
+
   return (
     <MainSection narrow>
       <div className="w-full justify-between">
@@ -184,6 +193,18 @@ export default function Create() {
             onRemove={(idx) => onRemoveAction(idx)}
           />
 
+          <If condition={actions?.length}>
+            <Button
+              className="mt-6"
+              iconLeft={IconType.RICHTEXT_LIST_UNORDERED}
+              size="lg"
+              variant="tertiary"
+              onClick={() => exportAsJson()}
+            >
+              Export actions as JSON
+            </Button>
+          </If>
+
           <div className="mt-8 grid w-full grid-cols-2 gap-4 md:grid-cols-4">
             <AddActionCard
               title="Add a payment"
@@ -192,30 +213,30 @@ export default function Create() {
               onClick={() => setAddActionType("withdrawal")}
             />
             <AddActionCard
-              title="Select a function"
+              title="Add a function call"
               icon={IconType.BLOCKCHAIN_BLOCKCHAIN}
               disabled={isCreating}
               onClick={() => setAddActionType("select-abi-function")}
             />
             <AddActionCard
-              title="Enter the function ABI"
-              disabled
-              icon={IconType.RICHTEXT_LIST_UNORDERED}
-              onClick={() => setAddActionType("custom-abi")}
-            />
-            <AddActionCard
-              title="Copy the calldata"
+              title="Add raw calldata"
               icon={IconType.COPY}
               disabled={isCreating}
               onClick={() => setAddActionType("calldata")}
             />
+            <AddActionCard
+              title="Import JSON actions"
+              disabled={isCreating}
+              icon={IconType.RICHTEXT_LIST_UNORDERED}
+              onClick={() => setAddActionType("import-json")}
+            />
           </div>
 
           {/* Dialog */}
 
           <NewActionDialog
             newActionType={addActionType}
-            onClose={(newAction) => handleNewActionDialogClose(newAction)}
+            onClose={(newActions) => handleNewActionDialogClose(newActions)}
           />
 
           {/* Submit */}

diff --git a/plugins/multisig/pages/new.tsx b/plugins/multisig/pages/new.tsx
@@ -1,4 +1,4 @@
-import { Button, Dropdown, IconType, InputText, Tag, TextAreaRichText } from "@aragon/ods";
+import { Button, IconType, InputText, Tag, TextAreaRichText } from "@aragon/ods";
 import React, { ReactNode, useState } from "react";
 import { RawAction } from "@/utils/types";
 import { Else, ElseIf, If, Then } from "@/components/if";
@@ -12,6 +12,8 @@ import { Address } from "viem";
 import { NewActionDialog, NewActionType } from "@/components/dialogs/NewActionDialog";
 import { AddActionCard } from "@/components/cards/AddActionCard";
 import { ProposalActions } from "@/components/proposalActions/proposalActions";
+import { downloadAsFile } from "@/utils/download-as-file";
+import { encodeActionsAsJson } from "@/utils/json-actions";
 
 export default function Create() {
   const { address: selfAddress, isConnected } = useAccount();
@@ -38,7 +40,7 @@ export default function Create() {
   const handleSummaryInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSummary(event?.target?.value);
   };
-  const handleNewActionDialogClose = (newAction: RawAction | null) => {
+  const handleNewActionDialogClose = (newAction: RawAction[] | null) => {
     if (!newAction) {
       setAddActionType("");
       return;
@@ -64,6 +66,13 @@ export default function Create() {
     setResources([].concat(resources as any));
   };
 
+  const exportAsJson = () => {
+    if (!actions.length) return;
+
+    const result = encodeActionsAsJson(actions);
+    downloadAsFile("actions.json", JSON.stringify(result), "text/json");
+  };
+
   return (
     <MainSection narrow>
       <div className="w-full justify-between">
@@ -174,6 +183,18 @@ export default function Create() {
             onRemove={(idx) => onRemoveAction(idx)}
           />
 
+          <If condition={actions?.length}>
+            <Button
+              className="mt-6"
+              iconLeft={IconType.RICHTEXT_LIST_UNORDERED}
+              size="lg"
+              variant="tertiary"
+              onClick={() => exportAsJson()}
+            >
+              Export actions as JSON
+            </Button>
+          </If>
+
           <div className="mt-8 grid w-full grid-cols-2 gap-4 md:grid-cols-4">
             <AddActionCard
               title="Add a payment"
@@ -182,30 +203,30 @@ export default function Create() {
               onClick={() => setAddActionType("withdrawal")}
             />
             <AddActionCard
-              title="Select a function"
+              title="Add a function call"
               icon={IconType.BLOCKCHAIN_BLOCKCHAIN}
               disabled={isCreating}
               onClick={() => setAddActionType("select-abi-function")}
             />
             <AddActionCard
-              title="Enter the function ABI"
-              disabled
-              icon={IconType.RICHTEXT_LIST_UNORDERED}
-              onClick={() => setAddActionType("custom-abi")}
-            />
-            <AddActionCard
-              title="Copy the calldata"
+              title="Add raw calldata"
               icon={IconType.COPY}
               disabled={isCreating}
               onClick={() => setAddActionType("calldata")}
             />
+            <AddActionCard
+              title="Import JSON actions"
+              disabled={isCreating}
+              icon={IconType.RICHTEXT_LIST_UNORDERED}
+              onClick={() => setAddActionType("import-json")}
+            />
           </div>
 
           {/* Dialog */}
 
           <NewActionDialog
             newActionType={addActionType}
-            onClose={(newAction) => handleNewActionDialogClose(newAction)}
+            onClose={(newActions) => handleNewActionDialogClose(newActions)}
           />
 
           {/* Submit */}

diff --git a/utils/download-as-file.ts b/utils/download-as-file.ts
@@ -0,0 +1,11 @@
+export function downloadAsFile(filename: string, body: string, mimeType = "text/plain") {
+  const dataBlob = new Blob([body], { type: mimeType + ";charset=utf-8" });
+  const blobUrl = URL.createObjectURL(dataBlob);
+
+  const anchor = document.createElement("a");
+  anchor.href = blobUrl;
+  anchor.download = filename;
+
+  anchor.click();
+  URL.revokeObjectURL(blobUrl);
+}