fix(idea/frontend): H160 types in payload form, disabled calculate ga…

…s button on error (#1624)

idea/frontend/src/features/sails/utils/type.ts

@@ -20,6 +20,13 @@ const getPrimitiveType = (def: PrimitiveDef) => {
   if (def.isMessageId) return 'MessageId';
   if (def.isH256) return 'H256';
   if (def.isU256) return 'U256';
+  if (def.isH160) return 'H160';
+  if (def.isNonZeroU8) return 'NonZeroU8';
+  if (def.isNonZeroU16) return 'NonZeroU16';
+  if (def.isNonZeroU32) return 'NonZeroU32';
+  if (def.isNonZeroU64) return 'NonZeroU64';
+  if (def.isNonZeroU128) return 'NonZeroU128';
+  if (def.isNonZeroU256) return 'NonZeroU256';
 
   throw new Error('Unknown primitive type');
 };

idea/frontend/src/hooks/useGasCalculate/useGasCalculate.ts

@@ -1,6 +1,6 @@
 import isPlainObject from 'lodash.isplainobject';
 import { ProgramMetadata, GasInfo } from '@gear-js/api';
-import { useApi, useAlert, useAccount } from '@gear-js/react-hooks';
+import { useApi, useAccount } from '@gear-js/react-hooks';
 import { HexString } from '@polkadot/util/types';
 
 import { GasMethod } from '@/shared/config';
@@ -11,7 +11,6 @@ import { preparedGasInfo } from './helpers';
 const useGasCalculate = () => {
   const { api, isApiReady } = useApi();
   const { account } = useAccount();
-  const alert = useAlert();
 
   const calculateGas = async <T extends GasMethod>(
     method: T,
@@ -81,10 +80,6 @@ const useGasCalculate = () => {
 
       return preparedGasInfo(estimatedGas);
     } catch (error) {
-      const message = (error as Error).message;
-
-      alert.error(message);
-
       return Promise.reject(error);
     }
   };

idea/frontend/src/widgets/messageForm/ui/message-form.tsx

@@ -1,6 +1,6 @@
 import { ProgramMetadata } from '@gear-js/api';
 import { Button, Input, Textarea } from '@gear-js/ui';
-import { useBalanceFormat } from '@gear-js/react-hooks';
+import { useAlert, useBalanceFormat } from '@gear-js/react-hooks';
 import { HexString } from '@polkadot/util/types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useMemo, useState } from 'react';
@@ -17,6 +17,7 @@ import { useGasCalculate, useMessageActions, useValidationSchema } from '@/hooks
 import { Result } from '@/hooks/useGasCalculate/types';
 import { ProgramVoucherSelect } from '@/features/voucher';
 import { LabeledCheckbox } from '@/shared/ui';
+import { getErrorMessage } from '@/shared/helpers';
 
 import { FormValues, INITIAL_VALUES } from '../model';
 import styles from './message-form.module.scss';
@@ -31,6 +32,7 @@ type Props = {
 
 const MessageForm = ({ id, programId, isReply, metadata, isLoading }: Props) => {
   const { getChainBalanceValue, getFormattedGasValue, getChainGasValue } = useBalanceFormat();
+  const alert = useAlert();
   const schema = useValidationSchema();
 
   // TODOFORM:
@@ -108,6 +110,7 @@ const MessageForm = ({ id, programId, isReply, metadata, isLoading }: Props) =>
         setValue('gasLimit', limit, { shouldValidate: true });
         setGasInfo(info);
       })
+      .catch((error) => alert.error(getErrorMessage(error)))
       .finally(() => setIsGasDisabled(false));
   };
 

idea/frontend/src/widgets/messageForm/ui/sails-message-form.tsx

@@ -1,4 +1,4 @@
-import { useBalanceFormat } from '@gear-js/react-hooks';
+import { useAlert, useBalanceFormat } from '@gear-js/react-hooks';
 import { Button, Input } from '@gear-js/ui';
 import { HexString } from '@polkadot/util/types';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -18,6 +18,7 @@ import { Result } from '@/hooks/useGasCalculate/types';
 import { ProgramVoucherSelect } from '@/features/voucher';
 import { LabeledCheckbox } from '@/shared/ui';
 import { PayloadForm, getResetPayloadValue, useService, PayloadValue, PayloadValueSchema } from '@/features/sails';
+import { getErrorMessage } from '@/shared/helpers';
 
 import styles from './message-form.module.scss';
 
@@ -60,6 +61,7 @@ type FormattedValues = z.infer<ReturnType<typeof useSchema>>;
 
 const SailsMessageForm = ({ id, programId, isReply, sails }: Props) => {
   const { getFormattedGasValue } = useBalanceFormat();
+  const alert = useAlert();
   const service = useService(sails, 'functions');
 
   const defaultValues = { ...DEFAULT_VALUES, payload: service.defaultValues };
@@ -99,19 +101,22 @@ const SailsMessageForm = ({ id, programId, isReply, sails }: Props) => {
     sendMessage({ message: { ...values, destination: id }, payloadType, voucherId, reject, resolve });
   });
 
-  const handleGasCalculate = () => {
+  const handleGasCalculate = async () => {
     setIsGasDisabled(true);
 
     const values = form.getValues();
 
-    calculateGas(method, schema.parse(values), null, undefined, id)
-      .then((info) => {
-        const limit = getFormattedGasValue(info.limit).toFixed();
-
-        form.setValue('gasLimit', limit, { shouldValidate: true });
-        setGasInfo(info);
-      })
-      .finally(() => setIsGasDisabled(false));
+    try {
+      const info = await calculateGas(method, schema.parse(values), null, undefined, id);
+      const limit = getFormattedGasValue(info.limit).toFixed();
+
+      form.setValue('gasLimit', limit, { shouldValidate: true });
+      setGasInfo(info);
+    } catch (error) {
+      alert.error(getErrorMessage(error));
+    } finally {
+      setIsGasDisabled(false);
+    }
   };
 
   return (

idea/frontend/src/widgets/programForm/ui/ProgramForm.tsx

@@ -1,5 +1,5 @@
 import { ProgramMetadata } from '@gear-js/api';
-import { useBalanceFormat } from '@gear-js/react-hooks';
+import { useAlert, useBalanceFormat } from '@gear-js/react-hooks';
 import { Input as GearInput } from '@gear-js/ui';
 import { HexString } from '@polkadot/util/types';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -12,7 +12,7 @@ import { FormPayload, getSubmitPayload, getPayloadFormValues, getResetPayloadVal
 import { GasField } from '@/features/gasField';
 import { GasMethod } from '@/shared/config';
 import { Input, ValueField, LabeledCheckbox, Box } from '@/shared/ui';
-import { isHex } from '@/shared/helpers';
+import { getErrorMessage, isHex } from '@/shared/helpers';
 
 import { INITIAL_VALUES, FormValues, SubmitHelpers } from '../model';
 import styles from './ProgramForm.module.scss';
@@ -27,6 +27,7 @@ type Props = {
 
 const ProgramForm = ({ gasMethod, metadata, source, fileName = '', onSubmit }: Props) => {
   const { getChainBalanceValue, getFormattedGasValue, getChainGasValue } = useBalanceFormat();
+  const alert = useAlert();
   const schema = useValidationSchema();
 
   const defaultValues = { ...INITIAL_VALUES, programName: fileName };
@@ -66,6 +67,8 @@ const ProgramForm = ({ gasMethod, metadata, source, fileName = '', onSubmit }: P
 
       setValue('gasLimit', limit, { shouldValidate: true });
       setGasinfo(info);
+    } catch (error) {
+      alert.error(getErrorMessage(error));
     } finally {
       setIsGasDisabled(false);
     }

idea/frontend/src/widgets/programForm/ui/sails-program-form.tsx

@@ -1,4 +1,4 @@
-import { useBalanceFormat } from '@gear-js/react-hooks';
+import { useAlert, useBalanceFormat } from '@gear-js/react-hooks';
 import { Input as GearInput } from '@gear-js/ui';
 import { HexString } from '@polkadot/util/types';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -13,7 +13,7 @@ import { GasField } from '@/features/gasField';
 import { GasMethod } from '@/shared/config';
 import { Input, ValueField, LabeledCheckbox, Box } from '@/shared/ui';
 import { PayloadForm, useConstructor, PayloadValue, PayloadValueSchema, getResetPayloadValue } from '@/features/sails';
-import { isHex } from '@/shared/helpers';
+import { getErrorMessage, isHex } from '@/shared/helpers';
 
 import { SubmitHelpers } from '../model';
 import styles from './ProgramForm.module.scss';
@@ -58,6 +58,7 @@ const DEFAULT_VALUES = {
 
 const SailsProgramForm = ({ gasMethod, sails, source, fileName = '', onSubmit }: Props) => {
   const { getFormattedGasValue } = useBalanceFormat();
+  const alert = useAlert();
 
   const constructor = useConstructor(sails);
   const defaultValues = { ...DEFAULT_VALUES, payload: constructor.defaultValues, programName: fileName };
@@ -88,6 +89,8 @@ const SailsProgramForm = ({ gasMethod, sails, source, fileName = '', onSubmit }:
 
       form.setValue('gasLimit', limit, { shouldValidate: true });
       setGasinfo(info);
+    } catch (error) {
+      alert.error(getErrorMessage(error));
     } finally {
       setIsGasDisabled(false);
     }