fix: distributor ux improvements and validations

apps/maestro/src/features/AddErc20/AddErc20.state.ts

@@ -11,17 +11,17 @@ import { z } from "zod";
 
 import { logger } from "~/lib/logger";
 import {
-  hex40Literal,
   hex64Literal,
   numericString,
+  optionalHexLiteral,
 } from "~/lib/utils/validation";
 
 const TOKEN_DETAILS_FORM_SCHEMA = z.object({
   tokenName: z.string().min(1).max(32),
   tokenSymbol: z.string().min(1).max(11),
   tokenDecimals: z.coerce.number().min(1).max(18),
   originTokenSupply: numericString(),
-  distributor: hex40Literal().optional(),
+  distributor: optionalHexLiteral(),
   salt: hex64Literal(),
 });
 

apps/maestro/src/features/AddErc20/hooks/useDeployAndRegisterRemoteInterchainTokenMutation.ts

@@ -116,7 +116,7 @@ export function useDeployAndRegisterRemoteInterchainTokenMutation(
 
   const multicallArgs = useMemo(() => {
     const distributorAddress =
-      input?.distributorAddress ?? input?.deployerAddress ?? deployerAddress;
+      input?.distributorAddress ?? input?.deployerAddress;
 
     if (!input || !distributorAddress || !tokenId) {
       return [];
@@ -193,7 +193,6 @@ export function useDeployAndRegisterRemoteInterchainTokenMutation(
     return [deployTxData, ...registerTxData, ...transferTxData];
   }, [
     input,
-    deployerAddress,
     tokenId,
     withDecimals,
     config.salt,

apps/maestro/src/features/AddErc20/steps/token-details/TokenDetails.tsx

@@ -4,8 +4,10 @@ import {
   EyeIcon,
   EyeOffIcon,
   FormControl,
+  HelpCircleIcon,
   Label,
   TextInput,
+  Tooltip,
 } from "@axelarjs/ui";
 import { useRef, useState, type FC } from "react";
 import { type SubmitHandler } from "react-hook-form";
@@ -111,7 +113,6 @@ const TokenDetails: FC = () => {
             })}
           />
         </FormControl>
-
         <div className="grid place-content-center pt-4 md:place-content-end">
           <Button size="sm" onClick={() => setShowAdvanced(!showAdvanced)}>
             advanced settings
@@ -126,20 +127,36 @@ const TokenDetails: FC = () => {
           {showAdvanced && (
             <>
               <FormControl>
-                <Label htmlFor="distributor">Mint tokens to</Label>
+                <Label htmlFor="distributor">
+                  <Label.Text className="inline-flex items-center gap-1">
+                    Token Distributor
+                    <Tooltip
+                      position="right"
+                      variant="info"
+                      tip="This address will receive the minted tokens. It will also be able to mint, burn tokens and tranfer distributorship."
+                    >
+                      <HelpCircleIcon className="text-info mr-1 h-[1em]" />
+                    </Tooltip>
+                  </Label.Text>
+                </Label>
                 <FormInput
                   id="distributor"
-                  placeholder="Enter account address to mint to"
+                  placeholder="Enter token distributor address"
                   onKeyDown={preventNonHexInput}
                   defaultValue={state.tokenDetailsForm.getValues("distributor")}
                   {...register("distributor", {
                     disabled: isReadonly,
                     validate(value) {
+                      if (!value) {
+                        return false;
+                      }
+
+                      // this field is optional, so we only validate if it's not empty
                       if (!isAddress(String(value))) {
                         return "Invalid address";
                       }
 
-                      return true;
+                      return false;
                     },
                   })}
                 />

apps/maestro/src/lib/utils/validation.ts

@@ -28,38 +28,35 @@ export const VALID_NON_NUMERIC_KEYS = [
   "End",
 ];
 
-/**
- * type guard for numeric keys
- *
- * @param key The key to check.
- * @returns true if the key is a valid numeric key.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
- */
-export const isValidNumericKey = (key: string) =>
-  VALID_NON_NUMERIC_KEYS.includes(key) || /^[0-9.]+$/.test(key);
-
 export const preventNonNumericInput = (
   e: React.KeyboardEvent<HTMLInputElement>
 ) => {
-  if (!isValidNumericKey(e.key)) {
+  if (VALID_NON_NUMERIC_KEYS.includes(e.key) || e.ctrlKey || e.metaKey) {
+    // allow valid non-numeric keys & ctrl shortcuts
+    return;
+  }
+  if (!/^[0-9.]+$/.test(e.key)) {
     e.preventDefault();
   }
 };
 
 export const preventNonHexInput = (
   e: React.KeyboardEvent<HTMLInputElement>
 ) => {
-  if (VALID_NON_NUMERIC_KEYS.includes(e.key)) {
-    // allow valid non-numeric keys
+  if (VALID_NON_NUMERIC_KEYS.includes(e.key) || e.ctrlKey || e.metaKey) {
+    // allow valid non-numeric keys & ctrl shortcuts
     return;
   }
-  if (!/^[0-9a-fA-F]+$/.test(e.key)) {
+  if (!/^[0-9a-fA-FxX]+$/.test(e.key)) {
     e.preventDefault();
   }
 };
 
 const asHexLiteral = <T extends string>(x: T) => x as `0x${T}`;
 
+const asHexLiteralOptional = <T extends string>(x: T | undefined) =>
+  x as `0x${T}` | undefined;
+
 /**
  * Zod schema to validate a variable length hex address
  */
@@ -69,6 +66,9 @@ export const hexLiteral = () =>
     .regex(/^0x[0-9a-fA-F]+$/)
     .transform(asHexLiteral);
 
+export const optionalHexLiteral = () =>
+  z.string().optional().transform(asHexLiteralOptional);
+
 /**
  * Zod schema to validate a 40 character hex address
  */