Support Option type in Contract Tab

src/pages/Account/Tabs/ModulesTab/Contract.tsx

@@ -106,24 +106,27 @@ function Contract({address, isRead}: {address: string; isRead: boolean}) {
     return <EmptyTabContent />;
   }
 
-  const moduleAndFnsGroup = modules.reduce((acc, module) => {
-    if (module.abi === undefined) {
-      return acc;
-    }
+  const moduleAndFnsGroup = modules.reduce(
+    (acc, module) => {
+      if (module.abi === undefined) {
+        return acc;
+      }
 
-    const fns = module.abi.exposed_functions.filter((fn) =>
-      isRead ? fn.is_view : fn.is_entry,
-    );
-    if (fns.length === 0) {
-      return acc;
-    }
+      const fns = module.abi.exposed_functions.filter((fn) =>
+        isRead ? fn.is_view : fn.is_entry,
+      );
+      if (fns.length === 0) {
+        return acc;
+      }
 
-    const moduleName = module.abi.name;
-    return {
-      ...acc,
-      [moduleName]: fns,
-    } as Record<string, Types.MoveFunction[]>;
-  }, {} as Record<string, Types.MoveFunction[]>);
+      const moduleName = module.abi.name;
+      return {
+        ...acc,
+        [moduleName]: fns,
+      } as Record<string, Types.MoveFunction[]>;
+    },
+    {} as Record<string, Types.MoveFunction[]>,
+  );
 
   const module = modules.find((m) => m.abi?.name === selectedModuleName)?.abi;
   const fn = selectedModuleName
@@ -309,6 +312,8 @@ function RunContractForm({
                 x.toString(),
               )
             : deserializeVector(arg);
+        } else if (type.startsWith("0x1::option::Option")) {
+          arg ? {vec: [arg]} : undefined;
         } else return arg;
       }),
     };
@@ -683,16 +688,18 @@ function ContractForm({
                 <TextField label="signer" disabled fullWidth />
               ))}
             {fnParams.map((param, i) => {
+              // TODO: Need a nice way to differenciate between option and empty string
+              const isOption = param.startsWith("0x1::option::Option");
               return (
                 <Controller
                   key={`args-${i}`}
                   name={`args.${i}`}
                   control={control}
-                  rules={{required: true}}
+                  rules={{required: !isOption}}
                   render={({field: {onChange, value}}) => (
                     <TextField
                       onChange={onChange}
-                      value={value ?? ""}
+                      value={isOption ? value : value ?? ""}
                       label={`arg${i}: ${param}`}
                       fullWidth
                     />

src/utils.ts

@@ -12,8 +12,8 @@ export function assertNever(x: never): never {
 }
 
 /*
-If the transaction doesn't have a version property, 
-that means it's a pending transaction (and thus it's expected version will be higher than any existing versions). 
+If the transaction doesn't have a version property,
+that means it's a pending transaction (and thus it's expected version will be higher than any existing versions).
 We can consider the version to be Infinity for this case.
 */
 export function sortTransactions(
@@ -174,6 +174,8 @@ export function encodeInputArgsForViewRequest(type: string, value: string) {
     return value === "true" ? true : false;
   } else if (["u8", "u16", "u32"].includes(type)) {
     return ensureNumber(value);
+  } else if (type.startsWith("0x1::option::Option")) {
+    return {vec: [...(value ? [value] : [])]};
   } else return value;
 }