From 83434bc03f8b9afaeebb5d10e5d1a828243c883e Mon Sep 17 00:00:00 2001
From: Nikita Yutanov <nikitayutanov@gmail.com>
Date: Tue, 30 Jan 2024 18:46:54 +0300
Subject: [PATCH] [idea] 1100 release (#1478)

---
 idea/frontend/package.json                    |  11 +-
 .../transfer-balance-modal.tsx                |   4 +-
 .../features/formPayload/ui/FormPayload.tsx   |  16 +-
 .../program/ui/program-card/program-card.tsx  |   2 +-
 idea/frontend/src/features/voucher/consts.ts  |  19 ++
 .../src/features/voucher/hooks/index.ts       |   4 +-
 .../voucher/hooks/use-balance-schema.ts       |  28 ++
 .../voucher/hooks/use-duration-schema.ts      |  18 ++
 .../voucher/hooks/use-issue-voucher.ts        |  34 ++-
 idea/frontend/src/features/voucher/index.ts   |  18 +-
 .../frontend/src/features/voucher/ui/index.ts |  14 +-
 .../{index.ts => index.tsx}                   |   0
 .../issue-voucher-modal-deprecated.tsx        |  63 +++++
 .../issue-voucher-modal.tsx                   |  76 +++---
 .../use-voucher-checkbox-deprecated/index.ts  |   3 +
 ...e-voucher-checkbox-deprecated.module.scss} |   0
 .../use-voucher-checkbox-deprecated.tsx       |  40 +++
 .../voucher/ui/use-voucher-checkbox/index.ts  |   3 -
 .../use-voucher-checkbox.tsx                  |  27 --
 .../voucher-badge-deprecated.tsx              |  19 ++
 .../ui/voucher-badge/voucher-badge.tsx        |  17 +-
 .../voucher/ui/voucher-select/index.ts        |   3 +
 .../ui/voucher-select/voucher-option.tsx      |  23 ++
 .../ui/voucher-select/voucher-select.tsx      |  45 ++++
 .../voucher/ui/voucher-table/index.ts         |   3 +-
 .../voucher-table-deprecated.tsx              |  42 +++
 .../voucher-table/voucher-table.module.scss   |  40 ++-
 .../ui/voucher-table/voucher-table.tsx        |  81 ++++--
 .../src/hooks/useMessageActions/types.ts      |  27 +-
 .../useMessageActions/useMessageActions.ts    | 110 ++++++--
 .../useProgramActions/useProgramActions.tsx   |   8 +-
 idea/frontend/src/pages/index.tsx             |   3 +
 .../src/pages/program/program-deprecated.tsx  | 111 ++++++++
 .../src/pages/program/program.module.scss     |   6 +
 idea/frontend/src/pages/program/program.tsx   |  39 ++-
 .../assets/voucher-card-placeholder.svg       |   7 +
 idea/frontend/src/pages/vouchers/index.ts     |   3 +
 idea/frontend/src/pages/vouchers/ui/index.ts  |   3 +
 .../pages/vouchers/ui/voucher-card/index.ts   |   3 +
 .../ui/voucher-card/voucher-card.module.scss  |  51 ++++
 .../vouchers/ui/voucher-card/voucher-card.tsx |  45 ++++
 .../src/pages/vouchers/vouchers.module.scss   |  13 +
 idea/frontend/src/pages/vouchers/vouchers.tsx |  53 ++++
 .../shared/assets/images/menu/vouchers.svg    |   3 +
 idea/frontend/src/shared/config/routes.ts     |   1 +
 idea/frontend/src/shared/helpers/form.ts      |   3 +-
 idea/frontend/src/shared/helpers/index.ts     |   8 +-
 .../src/shared/ui/form/Form.module.scss       |   6 -
 .../src/shared/ui/form/checkbox/checkbox.tsx  |  14 +
 .../src/shared/ui/form/checkbox/index.ts      |   3 +
 .../frontend/src/shared/ui/form/form/form.tsx |  43 +++
 .../frontend/src/shared/ui/form/form/index.ts |   3 +
 .../shared/ui/form/formInput/FormInput.tsx    |  26 --
 .../src/shared/ui/form/formInput/index.ts     |   3 -
 idea/frontend/src/shared/ui/form/index.ts     |  10 +-
 .../src/shared/ui/form/input/index.ts         |   3 +
 .../src/shared/ui/form/input/input.tsx        |  18 ++
 .../src/shared/ui/form/radio/index.ts         |   3 +
 .../src/shared/ui/form/radio/radio.tsx        |  14 +
 .../src/shared/ui/form/select/index.ts        |   3 +
 .../src/shared/ui/form/select/select.tsx      |  15 ++
 idea/frontend/src/shared/ui/index.ts          |   4 +-
 .../ui/timestampBlock/TimestampBlock.tsx      |   7 +-
 .../shared/ui/with-account/with-account.tsx   |   1 -
 .../ui/with-deprecated-fallback/index.ts      |   3 +
 .../with-deprecated-fallback.tsx              |  13 +
 .../frontend/src/widgets/menu/model/consts.ts |   8 +-
 .../widgets/menu/ui/navigation/Navigation.tsx |  57 ++--
 .../frontend/src/widgets/messageForm/index.ts |   2 +-
 .../src/widgets/messageForm/model/const.ts    |  13 +-
 .../src/widgets/messageForm/model/index.ts    |   8 +-
 .../src/widgets/messageForm/model/types.ts    |   8 +-
 .../src/widgets/messageForm/ui/index.ts       |   3 +
 .../ui/message-form-deprecated.tsx            | 189 +++++++++++++
 ...m.module.scss => message-form.module.scss} |   0
 .../ui/{MessageForm.tsx => message-form.tsx}  |  36 ++-
 .../widgets/programForm/ui/ProgramForm.tsx    |  17 +-
 utils/gear-hooks/package.json                 |  14 +-
 utils/gear-hooks/src/context/Api.tsx          |  10 +-
 utils/gear-hooks/src/hooks/api/block/index.ts |   3 +
 .../api/block/use-approx-block-timestamp.ts   |  40 +++
 utils/gear-hooks/src/hooks/api/index.ts       |  24 +-
 .../src/hooks/api/useProgram/types.ts         |   8 +-
 .../src/hooks/api/useSendMessage.ts           |  85 ++----
 .../gear-hooks/src/hooks/api/voucher/index.ts |  22 +-
 .../voucher/use-account-voucher-balance.ts    |  12 -
 .../hooks/api/voucher/use-account-voucher.ts  |  12 -
 .../voucher/use-is-account-voucher-exists.ts  |  12 -
 .../api/voucher/use-is-voucher-exists.ts      |  13 +-
 .../voucher/use-voucher-balance-deprecated.ts |  22 ++
 .../hooks/api/voucher/use-voucher-balance.ts  |  13 -
 .../api/voucher/use-voucher-deprecated.ts     |  24 ++
 .../hooks/api/voucher/use-voucher-status.ts   |  13 +
 .../src/hooks/api/voucher/use-voucher.ts      |  36 ++-
 .../src/hooks/api/voucher/use-vouchers.ts     |  47 ++++
 .../handlers/use-send-message-handler.ts      |  10 +-
 utils/gear-hooks/src/hooks/index.ts           |  20 +-
 utils/gear-hooks/src/index.ts                 |  25 +-
 utils/gear-hooks/src/types/index.ts           |   7 +
 utils/gear-hooks/src/utils/index.ts           |  11 +-
 utils/gear-ui/package.json                    |   2 +-
 .../src/components/FileInput/FileInput.tsx    |   4 +-
 .../gear-ui/src/components/Select/Select.tsx  |  16 +-
 utils/gear-ui/src/hooks/index.ts              |   3 +-
 utils/gear-ui/src/hooks/useChangeEffect.ts    |  25 ++
 yarn.lock                                     | 252 +++---------------
 106 files changed, 1769 insertions(+), 699 deletions(-)
 create mode 100644 idea/frontend/src/features/voucher/consts.ts
 create mode 100644 idea/frontend/src/features/voucher/hooks/use-balance-schema.ts
 create mode 100644 idea/frontend/src/features/voucher/hooks/use-duration-schema.ts
 rename idea/frontend/src/features/voucher/ui/issue-voucher-modal/{index.ts => index.tsx} (100%)
 create mode 100644 idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal-deprecated.tsx
 create mode 100644 idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/index.ts
 rename idea/frontend/src/features/voucher/ui/{use-voucher-checkbox/use-voucher-checkbox.module.scss => use-voucher-checkbox-deprecated/use-voucher-checkbox-deprecated.module.scss} (100%)
 create mode 100644 idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/use-voucher-checkbox-deprecated.tsx
 delete mode 100644 idea/frontend/src/features/voucher/ui/use-voucher-checkbox/index.ts
 delete mode 100644 idea/frontend/src/features/voucher/ui/use-voucher-checkbox/use-voucher-checkbox.tsx
 create mode 100644 idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge-deprecated.tsx
 create mode 100644 idea/frontend/src/features/voucher/ui/voucher-select/index.ts
 create mode 100644 idea/frontend/src/features/voucher/ui/voucher-select/voucher-option.tsx
 create mode 100644 idea/frontend/src/features/voucher/ui/voucher-select/voucher-select.tsx
 create mode 100644 idea/frontend/src/features/voucher/ui/voucher-table/voucher-table-deprecated.tsx
 create mode 100644 idea/frontend/src/pages/program/program-deprecated.tsx
 create mode 100644 idea/frontend/src/pages/vouchers/assets/voucher-card-placeholder.svg
 create mode 100644 idea/frontend/src/pages/vouchers/index.ts
 create mode 100644 idea/frontend/src/pages/vouchers/ui/index.ts
 create mode 100644 idea/frontend/src/pages/vouchers/ui/voucher-card/index.ts
 create mode 100644 idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.module.scss
 create mode 100644 idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.tsx
 create mode 100644 idea/frontend/src/pages/vouchers/vouchers.module.scss
 create mode 100644 idea/frontend/src/pages/vouchers/vouchers.tsx
 create mode 100644 idea/frontend/src/shared/assets/images/menu/vouchers.svg
 create mode 100644 idea/frontend/src/shared/ui/form/checkbox/checkbox.tsx
 create mode 100644 idea/frontend/src/shared/ui/form/checkbox/index.ts
 create mode 100644 idea/frontend/src/shared/ui/form/form/form.tsx
 create mode 100644 idea/frontend/src/shared/ui/form/form/index.ts
 delete mode 100644 idea/frontend/src/shared/ui/form/formInput/FormInput.tsx
 delete mode 100644 idea/frontend/src/shared/ui/form/formInput/index.ts
 create mode 100644 idea/frontend/src/shared/ui/form/input/index.ts
 create mode 100644 idea/frontend/src/shared/ui/form/input/input.tsx
 create mode 100644 idea/frontend/src/shared/ui/form/radio/index.ts
 create mode 100644 idea/frontend/src/shared/ui/form/radio/radio.tsx
 create mode 100644 idea/frontend/src/shared/ui/form/select/index.ts
 create mode 100644 idea/frontend/src/shared/ui/form/select/select.tsx
 create mode 100644 idea/frontend/src/shared/ui/with-deprecated-fallback/index.ts
 create mode 100644 idea/frontend/src/shared/ui/with-deprecated-fallback/with-deprecated-fallback.tsx
 create mode 100644 idea/frontend/src/widgets/messageForm/ui/index.ts
 create mode 100644 idea/frontend/src/widgets/messageForm/ui/message-form-deprecated.tsx
 rename idea/frontend/src/widgets/messageForm/ui/{MessageForm.module.scss => message-form.module.scss} (100%)
 rename idea/frontend/src/widgets/messageForm/ui/{MessageForm.tsx => message-form.tsx} (81%)
 create mode 100644 utils/gear-hooks/src/hooks/api/block/index.ts
 create mode 100644 utils/gear-hooks/src/hooks/api/block/use-approx-block-timestamp.ts
 delete mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-account-voucher-balance.ts
 delete mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-account-voucher.ts
 delete mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-is-account-voucher-exists.ts
 create mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance-deprecated.ts
 delete mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance.ts
 create mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-voucher-deprecated.ts
 create mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-voucher-status.ts
 create mode 100644 utils/gear-hooks/src/hooks/api/voucher/use-vouchers.ts
 create mode 100644 utils/gear-ui/src/hooks/useChangeEffect.ts

diff --git a/idea/frontend/package.json b/idea/frontend/package.json
index 071f90796c..32349dcd86 100644
--- a/idea/frontend/package.json
+++ b/idea/frontend/package.json
@@ -3,21 +3,21 @@
   "version": "0.1.2",
   "private": true,
   "scripts": {
-    "start": "vite --open",
+    "start": "vite --open --port 3000",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@gear-js/api": "0.35.2",
+    "@gear-js/api": "0.36.2",
     "@gear-js/react-hooks": "workspace:^",
     "@gear-js/ui": "workspace:^",
     "@hcaptcha/react-hcaptcha": "1.8.1",
     "@hookform/resolvers": "3.3.2",
-    "@polkadot/api": "10.10.1",
+    "@polkadot/api": "10.11.2",
     "@polkadot/extension-dapp": "0.46.5",
     "@polkadot/react-identicon": "3.6.3",
-    "@polkadot/types": "10.10.1",
+    "@polkadot/types": "10.11.2",
     "@polkadot/util": "12.5.1",
     "@react-aria/utils": "3.21.0",
     "bignumber.js": "9.1.2",
@@ -38,7 +38,8 @@
     "react-router-dom": "6.16.0",
     "react-transition-group": "4.4.5",
     "simplebar-react": "3.2.4",
-    "yup": "1.3.2"
+    "yup": "1.3.2",
+    "zod": "3.22.4"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",
diff --git a/idea/frontend/src/features/balance/ui/transfer-balance-modal/transfer-balance-modal.tsx b/idea/frontend/src/features/balance/ui/transfer-balance-modal/transfer-balance-modal.tsx
index 1cb9f91b92..c90df4a1b6 100644
--- a/idea/frontend/src/features/balance/ui/transfer-balance-modal/transfer-balance-modal.tsx
+++ b/idea/frontend/src/features/balance/ui/transfer-balance-modal/transfer-balance-modal.tsx
@@ -6,7 +6,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
 import CloseSVG from '@/shared/assets/images/actions/close.svg?react';
-import { FormInput, ValueField } from '@/shared/ui/form';
+import { Input, ValueField } from '@/shared/ui/form';
 import { isAccountAddressValid } from '@/shared/helpers';
 import { useBalanceTransfer } from '@/hooks';
 
@@ -53,7 +53,7 @@ const TransferBalanceModal = ({ close }: Props) => {
       <FormProvider {...methods}>
         <form onSubmit={methods.handleSubmit(handleSubmit)}>
           <div className={styles.inputs}>
-            <FormInput name="address" label="Address" direction="y" block />
+            <Input name="address" label="Address" direction="y" block />
             <ValueField name="value" label="Value:" direction="y" block />
             <Checkbox label="Keep Alive" {...register('keepAlive')} />
           </div>
diff --git a/idea/frontend/src/features/formPayload/ui/FormPayload.tsx b/idea/frontend/src/features/formPayload/ui/FormPayload.tsx
index 42beed12c3..a9bb560a46 100644
--- a/idea/frontend/src/features/formPayload/ui/FormPayload.tsx
+++ b/idea/frontend/src/features/formPayload/ui/FormPayload.tsx
@@ -21,9 +21,20 @@ type Props = {
   values?: FormPayloadValues;
 };
 
+// TODO: temp solution to unregister manual payload on unmount,
+// since on metadata change it's messing with default payload values
+function ManualPayloadTextarea({ name }: { name: string }) {
+  const { register, unregister } = useFormContext();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => () => unregister(name), []);
+
+  return <Textarea id={name} rows={15} placeholder="// Enter your payload here" block {...register(name)} />;
+}
+
 const FormPayload = ({ name, label, values, direction = 'x', gap }: Props) => {
   const alert = useAlert();
-  const { setValue, register } = useFormContext();
+  const { setValue } = useFormContext();
 
   const jsonManualPayload = useRef<string>();
 
@@ -101,7 +112,8 @@ const FormPayload = ({ name, label, values, direction = 'x', gap }: Props) => {
           <PayloadStructure levelName={name} typeStructure={values.typeStructure} />
         ) : (
           <>
-            <Textarea id={name} rows={15} placeholder="// Enter your payload here" block {...register(name)} />
+            <ManualPayloadTextarea name={name} />
+
             {values && (
               <FileInput
                 value={manualPayloadFile}
diff --git a/idea/frontend/src/features/program/ui/program-card/program-card.tsx b/idea/frontend/src/features/program/ui/program-card/program-card.tsx
index 1cef0d67a5..e1264eaa60 100644
--- a/idea/frontend/src/features/program/ui/program-card/program-card.tsx
+++ b/idea/frontend/src/features/program/ui/program-card/program-card.tsx
@@ -19,7 +19,7 @@ import styles from './program-card.module.scss';
 
 type Props = {
   program: IProgram | LocalProgram;
-  vertical?: Boolean;
+  vertical?: boolean;
 };
 
 const ProgramCard = memo(({ program, vertical }: Props) => {
diff --git a/idea/frontend/src/features/voucher/consts.ts b/idea/frontend/src/features/voucher/consts.ts
new file mode 100644
index 0000000000..cf7e952829
--- /dev/null
+++ b/idea/frontend/src/features/voucher/consts.ts
@@ -0,0 +1,19 @@
+import { isAccountAddressValid } from '@/shared/helpers';
+import { decodeAddress } from '@gear-js/api';
+import { z } from 'zod';
+
+const DEFAULT_VALUES = {
+  address: '',
+  value: '',
+  duration: '',
+  isCodeUploadEnabled: false,
+};
+
+const ADDRESS_SCHEMA = z
+  .string()
+  .trim()
+  .min(0)
+  .refine((value) => isAccountAddressValid(value), 'Invalid address')
+  .transform((value) => decodeAddress(value));
+
+export { DEFAULT_VALUES, ADDRESS_SCHEMA };
diff --git a/idea/frontend/src/features/voucher/hooks/index.ts b/idea/frontend/src/features/voucher/hooks/index.ts
index fbea87c67a..9a80382874 100644
--- a/idea/frontend/src/features/voucher/hooks/index.ts
+++ b/idea/frontend/src/features/voucher/hooks/index.ts
@@ -1,3 +1,5 @@
 import { useIssueVoucher } from './use-issue-voucher';
+import { useBalanceSchema } from './use-balance-schema';
+import { useDurationSchema } from './use-duration-schema';
 
-export { useIssueVoucher };
+export { useIssueVoucher, useBalanceSchema, useDurationSchema };
diff --git a/idea/frontend/src/features/voucher/hooks/use-balance-schema.ts b/idea/frontend/src/features/voucher/hooks/use-balance-schema.ts
new file mode 100644
index 0000000000..956a6dc65e
--- /dev/null
+++ b/idea/frontend/src/features/voucher/hooks/use-balance-schema.ts
@@ -0,0 +1,28 @@
+import { useApi, useBalanceFormat } from '@gear-js/react-hooks';
+import { z } from 'zod';
+
+function useBalanceSchema() {
+  const { api } = useApi();
+  const { getChainBalanceValue, getFormattedBalanceValue } = useBalanceFormat();
+
+  const getBalanceSchema = () => {
+    if (!api) throw new Error('API is not initialized');
+
+    const decimals = api.registry.chainDecimals.toString();
+    const existentialDeposit = api.existentialDeposit.toString();
+
+    const minValueMessage = `Minimum value is ${getFormattedBalanceValue(existentialDeposit).toFixed()}`;
+    const integerMessage = `Maximum amount of decimal places is ${decimals}`;
+
+    return z
+      .string()
+      .transform((value) => getChainBalanceValue(value))
+      .refine((value) => value.isGreaterThanOrEqualTo(existentialDeposit), minValueMessage)
+      .refine((value) => value.isInteger(), integerMessage)
+      .transform((value) => value.toFixed());
+  };
+
+  return getBalanceSchema();
+}
+
+export { useBalanceSchema };
diff --git a/idea/frontend/src/features/voucher/hooks/use-duration-schema.ts b/idea/frontend/src/features/voucher/hooks/use-duration-schema.ts
new file mode 100644
index 0000000000..bde29ae2a6
--- /dev/null
+++ b/idea/frontend/src/features/voucher/hooks/use-duration-schema.ts
@@ -0,0 +1,18 @@
+import { useApi } from '@gear-js/react-hooks';
+import { z } from 'zod';
+
+function useDurationSchema() {
+  const { api } = useApi();
+
+  const getDurationSchema = () => {
+    if (!api) throw new Error('API is not initialized');
+
+    const { minDuration, maxDuration } = api.voucher;
+
+    return z.coerce.number().min(minDuration).max(maxDuration).int();
+  };
+
+  return getDurationSchema();
+}
+
+export { useDurationSchema };
diff --git a/idea/frontend/src/features/voucher/hooks/use-issue-voucher.ts b/idea/frontend/src/features/voucher/hooks/use-issue-voucher.ts
index 9103d500f7..f28ac7ab1c 100644
--- a/idea/frontend/src/features/voucher/hooks/use-issue-voucher.ts
+++ b/idea/frontend/src/features/voucher/hooks/use-issue-voucher.ts
@@ -35,11 +35,39 @@ function useIssueVoucher() {
     if (status.isInvalid) alert.error(PROGRAM_ERRORS.INVALID_TRANSACTION);
   };
 
-  const issueVoucher = async (address: HexString, programId: HexString, value: string, onSuccess: () => void) => {
+  const issueVoucher = async (
+    address: HexString,
+    programId: HexString,
+    value: string,
+    duration: number,
+    isCodeUploadEnabled: boolean,
+    onSuccess: () => void,
+  ) => {
     if (!isApiReady || !account) return;
 
     try {
-      const { extrinsic } = api.voucher.issue(address, programId, value);
+      const programs = [programId];
+
+      const { extrinsic } = await api.voucher.issue(address, value, duration, programs, isCodeUploadEnabled);
+
+      const { signer } = await web3FromSource(account.meta.source);
+
+      extrinsic.signAndSend(account.address, { signer }, (events) => handleEvents(events, onSuccess));
+    } catch (error) {
+      if (error instanceof Error) alert.error(error.message);
+    }
+  };
+
+  const issueVoucherDeprecated = async (
+    address: HexString,
+    programId: HexString,
+    value: string,
+    onSuccess: () => void,
+  ) => {
+    if (!isApiReady || !account) return;
+
+    try {
+      const { extrinsic } = api.voucher.issueDeprecated(address, programId, value);
 
       const { signer } = await web3FromSource(account.meta.source);
 
@@ -49,7 +77,7 @@ function useIssueVoucher() {
     }
   };
 
-  return issueVoucher;
+  return { issueVoucher, issueVoucherDeprecated };
 }
 
 export { useIssueVoucher };
diff --git a/idea/frontend/src/features/voucher/index.ts b/idea/frontend/src/features/voucher/index.ts
index b87c81ac17..7e4bef8a36 100644
--- a/idea/frontend/src/features/voucher/index.ts
+++ b/idea/frontend/src/features/voucher/index.ts
@@ -1,3 +1,17 @@
-import { IssueVoucher, UseVoucherCheckbox, VoucherTable, VoucherBadge } from './ui';
+import {
+  IssueVoucher,
+  VoucherSelect,
+  VoucherTable,
+  VoucherBadge,
+  UseVoucherCheckboxDeprecated,
+  VoucherTableDeprecated,
+} from './ui';
 
-export { IssueVoucher, UseVoucherCheckbox, VoucherTable, VoucherBadge };
+export {
+  IssueVoucher,
+  VoucherSelect,
+  VoucherTable,
+  VoucherBadge,
+  UseVoucherCheckboxDeprecated,
+  VoucherTableDeprecated,
+};
diff --git a/idea/frontend/src/features/voucher/ui/index.ts b/idea/frontend/src/features/voucher/ui/index.ts
index 90f937a4e2..46405509ac 100644
--- a/idea/frontend/src/features/voucher/ui/index.ts
+++ b/idea/frontend/src/features/voucher/ui/index.ts
@@ -1,6 +1,14 @@
 import { IssueVoucher } from './issue-voucher';
-import { UseVoucherCheckbox } from './use-voucher-checkbox';
-import { VoucherTable } from './voucher-table';
+import { VoucherSelect } from './voucher-select';
+import { VoucherTable, VoucherTableDeprecated } from './voucher-table';
 import { VoucherBadge } from './voucher-badge';
+import { UseVoucherCheckboxDeprecated } from './use-voucher-checkbox-deprecated';
 
-export { IssueVoucher, UseVoucherCheckbox, VoucherTable, VoucherBadge };
+export {
+  IssueVoucher,
+  VoucherSelect,
+  VoucherTable,
+  VoucherBadge,
+  UseVoucherCheckboxDeprecated,
+  VoucherTableDeprecated,
+};
diff --git a/idea/frontend/src/features/voucher/ui/issue-voucher-modal/index.ts b/idea/frontend/src/features/voucher/ui/issue-voucher-modal/index.tsx
similarity index 100%
rename from idea/frontend/src/features/voucher/ui/issue-voucher-modal/index.ts
rename to idea/frontend/src/features/voucher/ui/issue-voucher-modal/index.tsx
diff --git a/idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal-deprecated.tsx b/idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal-deprecated.tsx
new file mode 100644
index 0000000000..6764b26df8
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal-deprecated.tsx
@@ -0,0 +1,63 @@
+import { Button, Modal } from '@gear-js/ui';
+import { HexString, decodeAddress } from '@gear-js/api';
+import { useBalanceFormat } from '@gear-js/react-hooks';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+
+import ApplySVG from '@/shared/assets/images/actions/apply.svg?react';
+import CloseSVG from '@/shared/assets/images/actions/close.svg?react';
+import { isAccountAddressValid } from '@/shared/helpers';
+import { Input, ValueField } from '@/shared/ui/form';
+
+import { useIssueVoucher } from '../../hooks';
+import styles from './issue-voucher-modal.module.scss';
+
+type Props = {
+  programId: HexString;
+  close: () => void;
+};
+
+const defaultValues = { address: '', value: '' };
+
+const schema = yup.object().shape({
+  address: yup
+    .string()
+    .test('is-address-valid', 'Invalid address', isAccountAddressValid)
+    .required('This field is required'),
+  value: yup.string().required('This field is required'),
+});
+
+const resolver = yupResolver(schema);
+
+const IssueVoucherModalDeprecated = ({ programId, close }: Props) => {
+  const { getChainBalanceValue } = useBalanceFormat();
+  const { issueVoucherDeprecated } = useIssueVoucher();
+
+  const methods = useForm({ defaultValues, resolver });
+
+  const handleSubmit = ({ address, value }: typeof defaultValues) => {
+    const decodedAddress = decodeAddress(address);
+    const chainValue = getChainBalanceValue(value).toFixed();
+
+    issueVoucherDeprecated(decodedAddress, programId, chainValue, close);
+  };
+
+  return (
+    <Modal heading="Create Voucher" size="large" close={close}>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit(handleSubmit)} className={styles.form}>
+          <Input name="address" label="Account address" direction="y" block />
+          <ValueField name="value" label="Tokens amount:" direction="y" block />
+
+          <div className={styles.buttons}>
+            <Button type="submit" icon={ApplySVG} size="large" text="Create" />
+            <Button icon={CloseSVG} color="light" size="large" text="Close" onClick={close} />
+          </div>
+        </form>
+      </FormProvider>
+    </Modal>
+  );
+};
+
+export { IssueVoucherModalDeprecated };
diff --git a/idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal.tsx b/idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal.tsx
index 51dcfedd7a..d2262baec2 100644
--- a/idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal.tsx
+++ b/idea/frontend/src/features/voucher/ui/issue-voucher-modal/issue-voucher-modal.tsx
@@ -1,16 +1,14 @@
 import { Button, Modal } from '@gear-js/ui';
-import { HexString, decodeAddress } from '@gear-js/api';
-import { useBalanceFormat } from '@gear-js/react-hooks';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { FormProvider, useForm } from 'react-hook-form';
-import * as yup from 'yup';
+import { HexString } from '@gear-js/api';
+import { z } from 'zod';
 
 import ApplySVG from '@/shared/assets/images/actions/apply.svg?react';
 import CloseSVG from '@/shared/assets/images/actions/close.svg?react';
-import { isAccountAddressValid } from '@/shared/helpers';
-import { FormInput, ValueField } from '@/shared/ui/form';
+import { Form, Input, ValueField, Checkbox, withDeprecatedFallback } from '@/shared/ui';
 
-import { useIssueVoucher } from '../../hooks';
+import { ADDRESS_SCHEMA, DEFAULT_VALUES } from '../../consts';
+import { useBalanceSchema, useDurationSchema, useIssueVoucher } from '../../hooks';
+import { IssueVoucherModalDeprecated } from './issue-voucher-modal-deprecated';
 import styles from './issue-voucher-modal.module.scss';
 
 type Props = {
@@ -18,46 +16,44 @@ type Props = {
   close: () => void;
 };
 
-const defaultValues = { address: '', value: '' };
+const IssueVoucherModal = withDeprecatedFallback(({ programId, close }: Props) => {
+  const { issueVoucher } = useIssueVoucher();
 
-const schema = yup.object().shape({
-  address: yup
-    .string()
-    .test('is-address-valid', 'Invalid address', isAccountAddressValid)
-    .required('This field is required'),
-  value: yup.string().required('This field is required'),
-});
+  const balanceSchema = useBalanceSchema();
+  const durationSchema = useDurationSchema();
 
-const resolver = yupResolver(schema);
+  const schema = z.object({
+    address: ADDRESS_SCHEMA,
+    value: balanceSchema,
+    duration: durationSchema,
+    isCodeUploadEnabled: z.boolean(),
+  });
 
-const IssueVoucherModal = ({ programId, close }: Props) => {
-  const { getChainBalanceValue } = useBalanceFormat();
-  const issueVoucher = useIssueVoucher();
+  type Values = typeof DEFAULT_VALUES;
+  type Schema = z.infer<typeof schema>;
 
-  const methods = useForm({ defaultValues, resolver });
-
-  const handleSubmit = ({ address, value }: typeof defaultValues) => {
-    const decodedAddress = decodeAddress(address);
-    const chainValue = getChainBalanceValue(value).toFixed();
-
-    issueVoucher(decodedAddress, programId, chainValue, close);
-  };
+  const handleSubmit = ({ address, value, duration, isCodeUploadEnabled }: Schema) =>
+    issueVoucher(address, programId, value, duration, isCodeUploadEnabled, close);
 
   return (
     <Modal heading="Create Voucher" size="large" close={close}>
-      <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(handleSubmit)} className={styles.form}>
-          <FormInput name="address" label="Account address" direction="y" block />
-          <ValueField name="value" label="Tokens amount:" direction="y" block />
-
-          <div className={styles.buttons}>
-            <Button type="submit" icon={ApplySVG} size="large" text="Create" />
-            <Button icon={CloseSVG} color="light" size="large" text="Close" onClick={close} />
-          </div>
-        </form>
-      </FormProvider>
+      <Form<Values, Schema>
+        defaultValues={DEFAULT_VALUES}
+        schema={schema}
+        onSubmit={handleSubmit}
+        className={styles.form}>
+        <Input name="address" label="Account address" direction="y" block />
+        <ValueField name="value" label="Tokens amount:" direction="y" block />
+        <Input type="number" name="duration" label="Duration (blocks)" direction="y" block />
+        <Checkbox name="isCodeUploadEnabled" label="Allow code upload" />
+
+        <div className={styles.buttons}>
+          <Button type="submit" icon={ApplySVG} size="large" text="Create" />
+          <Button icon={CloseSVG} color="light" size="large" text="Close" onClick={close} />
+        </div>
+      </Form>
     </Modal>
   );
-};
+}, IssueVoucherModalDeprecated);
 
 export { IssueVoucherModal };
diff --git a/idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/index.ts b/idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/index.ts
new file mode 100644
index 0000000000..fe34baafdb
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/index.ts
@@ -0,0 +1,3 @@
+import { UseVoucherCheckboxDeprecated } from './use-voucher-checkbox-deprecated';
+
+export { UseVoucherCheckboxDeprecated };
diff --git a/idea/frontend/src/features/voucher/ui/use-voucher-checkbox/use-voucher-checkbox.module.scss b/idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/use-voucher-checkbox-deprecated.module.scss
similarity index 100%
rename from idea/frontend/src/features/voucher/ui/use-voucher-checkbox/use-voucher-checkbox.module.scss
rename to idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/use-voucher-checkbox-deprecated.module.scss
diff --git a/idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/use-voucher-checkbox-deprecated.tsx b/idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/use-voucher-checkbox-deprecated.tsx
new file mode 100644
index 0000000000..aa1a4b93b6
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/use-voucher-checkbox-deprecated/use-voucher-checkbox-deprecated.tsx
@@ -0,0 +1,40 @@
+import { HexString } from '@gear-js/api';
+import { useAccountVoucherDeprecated, useBalanceFormat } from '@gear-js/react-hooks';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { LabeledCheckbox } from '@/shared/ui';
+
+import styles from './use-voucher-checkbox-deprecated.module.scss';
+
+type Props = {
+  programId: HexString | undefined;
+};
+
+const UseVoucherCheckboxDeprecated = ({ programId }: Props) => {
+  const { isVoucherExists, voucherBalance } = useAccountVoucherDeprecated(programId);
+  const { getFormattedBalance } = useBalanceFormat();
+
+  const formattedBalance = voucherBalance ? getFormattedBalance(voucherBalance) : undefined;
+
+  const name = 'withVoucher';
+
+  // TODO: should be done by react-hook-form's global shouldUnregister,
+  // however due to complications of current forms it's not possible yet.
+  // take a look at this problem after forms refactoring
+  const { resetField } = useFormContext();
+
+  useEffect(() => {
+    if (!isVoucherExists) resetField(name);
+  }, [isVoucherExists, resetField]);
+
+  return isVoucherExists ? (
+    <LabeledCheckbox name={name} label="Voucher funds:" inputLabel="Use voucher" gap="1/5">
+      <span className={styles.value}>
+        ( {formattedBalance?.value} {formattedBalance?.unit})
+      </span>
+    </LabeledCheckbox>
+  ) : null;
+};
+
+export { UseVoucherCheckboxDeprecated };
diff --git a/idea/frontend/src/features/voucher/ui/use-voucher-checkbox/index.ts b/idea/frontend/src/features/voucher/ui/use-voucher-checkbox/index.ts
deleted file mode 100644
index b25b4d01ad..0000000000
--- a/idea/frontend/src/features/voucher/ui/use-voucher-checkbox/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { UseVoucherCheckbox } from './use-voucher-checkbox';
-
-export { UseVoucherCheckbox };
diff --git a/idea/frontend/src/features/voucher/ui/use-voucher-checkbox/use-voucher-checkbox.tsx b/idea/frontend/src/features/voucher/ui/use-voucher-checkbox/use-voucher-checkbox.tsx
deleted file mode 100644
index dfc29df792..0000000000
--- a/idea/frontend/src/features/voucher/ui/use-voucher-checkbox/use-voucher-checkbox.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { HexString } from '@gear-js/api';
-import { useAccountVoucher, useBalanceFormat } from '@gear-js/react-hooks';
-
-import { LabeledCheckbox } from '@/shared/ui';
-
-import styles from './use-voucher-checkbox.module.scss';
-
-type Props = {
-  programId: HexString | undefined;
-};
-
-const UseVoucherCheckbox = ({ programId }: Props) => {
-  const { isVoucherExists, voucherBalance } = useAccountVoucher(programId);
-  const { getFormattedBalance } = useBalanceFormat();
-
-  const formattedBalance = voucherBalance ? getFormattedBalance(voucherBalance) : undefined;
-
-  return isVoucherExists ? (
-    <LabeledCheckbox name="withVoucher" label="Voucher funds:" inputLabel="Use voucher">
-      <span className={styles.value}>
-        ( {formattedBalance?.value} {formattedBalance?.unit})
-      </span>
-    </LabeledCheckbox>
-  ) : null;
-};
-
-export { UseVoucherCheckbox };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge-deprecated.tsx b/idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge-deprecated.tsx
new file mode 100644
index 0000000000..b1a603e29b
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge-deprecated.tsx
@@ -0,0 +1,19 @@
+import { HexString } from '@gear-js/api';
+import { useIsAccountVoucherExists } from '@gear-js/react-hooks';
+
+import { withAccount } from '@/shared/ui';
+
+import BadgeSVG from '../../assets/badge.svg?react';
+import styles from './voucher-badge.module.scss';
+
+type Props = {
+  programId: HexString;
+};
+
+const VoucherBadgeDeprecated = withAccount(({ programId }: Props) => {
+  const { isVoucherExists } = useIsAccountVoucherExists(programId);
+
+  return isVoucherExists ? <BadgeSVG className={styles.badge} /> : null;
+});
+
+export { VoucherBadgeDeprecated };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge.tsx b/idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge.tsx
index 5b2139751a..348674b19e 100644
--- a/idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge.tsx
+++ b/idea/frontend/src/features/voucher/ui/voucher-badge/voucher-badge.tsx
@@ -1,19 +1,24 @@
 import { HexString } from '@gear-js/api';
-import { useIsAccountVoucherExists } from '@gear-js/react-hooks';
+import { useAccountVouchers } from '@gear-js/react-hooks';
 
-import { withAccount } from '@/shared/ui';
+import { withAccount, withDeprecatedFallback } from '@/shared/ui';
 
 import BadgeSVG from '../../assets/badge.svg?react';
+import { VoucherBadgeDeprecated } from './voucher-badge-deprecated';
 import styles from './voucher-badge.module.scss';
 
 type Props = {
   programId: HexString;
 };
 
-const VoucherBadge = withAccount(({ programId }: Props) => {
-  const { isVoucherExists } = useIsAccountVoucherExists(programId);
+const VoucherBadge = withAccount(
+  withDeprecatedFallback(({ programId }: Props) => {
+    const { vouchers } = useAccountVouchers(programId);
+    const voucherEntries = Object.entries(vouchers || {});
+    const vouchersCount = voucherEntries.length;
 
-  return isVoucherExists ? <BadgeSVG className={styles.badge} /> : null;
-});
+    return vouchersCount ? <BadgeSVG className={styles.badge} /> : null;
+  }, VoucherBadgeDeprecated),
+);
 
 export { VoucherBadge };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-select/index.ts b/idea/frontend/src/features/voucher/ui/voucher-select/index.ts
new file mode 100644
index 0000000000..faf5fa110a
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/voucher-select/index.ts
@@ -0,0 +1,3 @@
+import { VoucherSelect } from './voucher-select';
+
+export { VoucherSelect };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-select/voucher-option.tsx b/idea/frontend/src/features/voucher/ui/voucher-select/voucher-option.tsx
new file mode 100644
index 0000000000..29d9b22e45
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/voucher-select/voucher-option.tsx
@@ -0,0 +1,23 @@
+import { HexString } from '@gear-js/api';
+import { useBalance, useBalanceFormat, useVoucherStatus } from '@gear-js/react-hooks';
+
+type Props = {
+  id: HexString;
+  expireBlock: number;
+};
+
+function VoucherOption({ id, expireBlock }: Props) {
+  const { expirationTimestamp, isVoucherActive } = useVoucherStatus(expireBlock);
+  const expirationDate = expirationTimestamp ? new Date(expirationTimestamp).toLocaleString() : '';
+
+  const { balance } = useBalance(id);
+  const { getFormattedBalance } = useBalanceFormat();
+
+  const formattedBalance = balance ? getFormattedBalance(balance) : undefined;
+
+  const label = `${formattedBalance?.value} ${formattedBalance?.unit}. Expires: ${expirationDate} (#${expireBlock})`;
+
+  return <option label={label} value={id} disabled={!isVoucherActive} />;
+}
+
+export { VoucherOption };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-select/voucher-select.tsx b/idea/frontend/src/features/voucher/ui/voucher-select/voucher-select.tsx
new file mode 100644
index 0000000000..f77629250b
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/voucher-select/voucher-select.tsx
@@ -0,0 +1,45 @@
+import { HexString } from '@gear-js/api';
+import { useAccountVouchers } from '@gear-js/react-hooks';
+import { InputWrapper } from '@gear-js/ui';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { Select } from '@/shared/ui';
+
+import { VoucherOption } from './voucher-option';
+
+type Props = {
+  programId: HexString | undefined;
+};
+
+const VoucherSelect = ({ programId }: Props) => {
+  const { vouchers } = useAccountVouchers(programId);
+  const voucherEntries = Object.entries(vouchers || {});
+  const vouchersCount = voucherEntries.length;
+
+  const name = 'voucherId';
+
+  const renderVouchers = () =>
+    voucherEntries.map(([id, { expiry }]) => <VoucherOption key={id} id={id as HexString} expireBlock={expiry} />);
+
+  // TODO: should be done by react-hook-form's global shouldUnregister,
+  // however due to complications of current forms it's not possible yet.
+  // take a look at this problem after forms refactoring
+  const { resetField } = useFormContext();
+
+  useEffect(() => {
+    if (!vouchersCount) resetField(name);
+  }, [vouchersCount, resetField]);
+
+  return vouchersCount ? (
+    <InputWrapper id={name} label="Voucher funds:" size="normal" direction="x" gap="1/5">
+      <Select name={name}>
+        <option value="" label="No voucher" />
+
+        {renderVouchers()}
+      </Select>
+    </InputWrapper>
+  ) : null;
+};
+
+export { VoucherSelect };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/index.ts b/idea/frontend/src/features/voucher/ui/voucher-table/index.ts
index 4720e9e599..de3257fe8d 100644
--- a/idea/frontend/src/features/voucher/ui/voucher-table/index.ts
+++ b/idea/frontend/src/features/voucher/ui/voucher-table/index.ts
@@ -1,3 +1,4 @@
 import { VoucherTable } from './voucher-table';
+import { VoucherTableDeprecated } from './voucher-table-deprecated';
 
-export { VoucherTable };
+export { VoucherTable, VoucherTableDeprecated };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table-deprecated.tsx b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table-deprecated.tsx
new file mode 100644
index 0000000000..d0921a68a2
--- /dev/null
+++ b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table-deprecated.tsx
@@ -0,0 +1,42 @@
+import { HexString } from '@gear-js/api';
+import { useAccountVoucherDeprecated, useBalanceFormat } from '@gear-js/react-hooks';
+
+import VoucherPlaceholderSVG from '@/features/voucher/assets/voucher-placeholder.svg?react';
+import { ContentLoader } from '@/shared/ui/contentLoader';
+import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock';
+import { withAccount } from '@/shared/ui';
+import { Table, TableRow } from '@/shared/ui/table';
+
+import styles from './voucher-table.module.scss';
+
+type Props = {
+  programId: HexString;
+};
+
+const VoucherTableDeprecated = withAccount(({ programId }: Props) => {
+  const { isVoucherReady, isVoucherExists, voucherBalance } = useAccountVoucherDeprecated(programId);
+  const { getFormattedBalance } = useBalanceFormat();
+
+  const status = isVoucherExists ? BulbStatus.Success : BulbStatus.Error;
+  const text = isVoucherExists ? 'Available' : 'Not available';
+  const balance = voucherBalance ? getFormattedBalance(voucherBalance) : undefined;
+
+  return isVoucherReady ? (
+    <Table>
+      <TableRow name="Status">
+        <BulbBlock status={status} text={text} size="large" />
+      </TableRow>
+
+      <TableRow name="Amount">
+        <span className={styles.highlight}>{balance?.value}</span>
+        <span>{balance?.unit}</span>
+      </TableRow>
+    </Table>
+  ) : (
+    <ContentLoader text="There's no voucher" isEmpty={false}>
+      <VoucherPlaceholderSVG />
+    </ContentLoader>
+  );
+});
+
+export { VoucherTableDeprecated };
diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss
index 521f1ae499..876409e555 100644
--- a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss
+++ b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss
@@ -1,4 +1,42 @@
-.balance {
+.highlight {
   margin-right: 8px;
   font-weight: 600;
 }
+
+.table {
+  display: flex;
+
+  > *:first-child {
+    flex: 1;
+  }
+}
+
+.openButton {
+  margin-left: 4px;
+  padding: 44px 0;
+
+  display: flex;
+  align-items: flex-start;
+
+  background-color: transparent;
+
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  svg {
+    transform: rotate(90deg);
+
+    path {
+      fill: #fff;
+    }
+  }
+
+  &.open {
+    svg {
+      transform: rotate(-90deg);
+    }
+  }
+}
diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx
index 9d54b7f802..6a47f0d30c 100644
--- a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx
+++ b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx
@@ -1,37 +1,80 @@
 import { HexString } from '@gear-js/api';
-import { useAccountVoucher, useBalanceFormat } from '@gear-js/react-hooks';
+import { useBalance, useBalanceFormat, useVoucherStatus } from '@gear-js/react-hooks';
+import { Button } from '@gear-js/ui';
+import { useState } from 'react';
+import clsx from 'clsx';
 
 import VoucherPlaceholderSVG from '@/features/voucher/assets/voucher-placeholder.svg?react';
 import { ContentLoader } from '@/shared/ui/contentLoader';
 import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock';
 import { withAccount } from '@/shared/ui';
 import { Table, TableRow } from '@/shared/ui/table';
+import { IdBlock } from '@/shared/ui/idBlock';
+import ArrowSVG from '@/shared/assets/images/actions/arrowRight.svg?react';
 
 import styles from './voucher-table.module.scss';
 
 type Props = {
-  programId: HexString;
+  id: HexString;
+  expireBlock: number;
+  owner: HexString;
+  isCodeUploadEnabled: boolean;
 };
 
-const VoucherTable = withAccount(({ programId }: Props) => {
-  const { isVoucherReady, isVoucherExists, voucherBalance } = useAccountVoucher(programId);
+const VoucherTable = withAccount(({ id, expireBlock, owner, isCodeUploadEnabled }: Props) => {
+  const { isVoucherActive, expirationTimestamp, isVoucherStatusReady } = useVoucherStatus(expireBlock);
+
+  const { balance, isBalanceReady } = useBalance(id);
   const { getFormattedBalance } = useBalanceFormat();
+  const formattedBalance = getFormattedBalance(balance || '0');
+
+  const getBulb = (value: boolean) => (value ? BulbStatus.Success : BulbStatus.Error);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen((prevValue) => !prevValue);
+
+  return isBalanceReady && isVoucherStatusReady ? (
+    <div className={styles.table}>
+      <Table>
+        <TableRow name="Status">
+          <BulbBlock status={getBulb(isVoucherActive)} text={isVoucherActive ? 'Available' : 'Expired'} size="large" />
+        </TableRow>
+        <TableRow name="Amount">
+          <span className={styles.highlight}>{formattedBalance.value}</span>
+          <span>{formattedBalance.unit}</span>
+        </TableRow>
+
+        {isOpen && (
+          <>
+            <TableRow name="Issued by">
+              <IdBlock id={owner} size="big" />
+            </TableRow>
+
+            {expirationTimestamp && (
+              <TableRow name="Expire at">
+                <span className={styles.highlight}>{new Date(expirationTimestamp).toLocaleString()}</span>
+                <span>(#{expireBlock})</span>
+              </TableRow>
+            )}
+
+            <TableRow name="Allow code upload">
+              <BulbBlock
+                status={getBulb(isCodeUploadEnabled)}
+                text={isCodeUploadEnabled ? 'Enabled' : 'Disabled'}
+                size="large"
+              />
+            </TableRow>
+          </>
+        )}
+      </Table>
 
-  const status = isVoucherExists ? BulbStatus.Success : BulbStatus.Error;
-  const text = isVoucherExists ? 'Available' : 'Not available';
-  const balance = voucherBalance ? getFormattedBalance(voucherBalance) : undefined;
-
-  return isVoucherReady ? (
-    <Table>
-      <TableRow name="Status">
-        <BulbBlock status={status} text={text} size="large" />
-      </TableRow>
-
-      <TableRow name="Amount">
-        <span className={styles.balance}>{balance?.value}</span>
-        <span>{balance?.unit}</span>
-      </TableRow>
-    </Table>
+      <Button
+        icon={ArrowSVG}
+        color="transparent"
+        onClick={toggle}
+        className={clsx(styles.openButton, isOpen && styles.open)}
+      />
+    </div>
   ) : (
     <ContentLoader text="There's no voucher" isEmpty={false}>
       <VoucherPlaceholderSVG />
diff --git a/idea/frontend/src/hooks/useMessageActions/types.ts b/idea/frontend/src/hooks/useMessageActions/types.ts
index ce329aacb9..7d62e0c56b 100644
--- a/idea/frontend/src/hooks/useMessageActions/types.ts
+++ b/idea/frontend/src/hooks/useMessageActions/types.ts
@@ -1,32 +1,35 @@
-import {
-  ProgramMetadata,
-  IMessageSendOptions,
-  IMessageSendReplyOptions,
-  VaraMessageSendOptions,
-  VaraMessageSendReplyOptions,
-} from '@gear-js/api';
+import { ProgramMetadata, MessageSendOptions, MessageSendReplyOptions } from '@gear-js/api';
 import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { ISubmittableResult } from '@polkadot/types/types';
 
 import { OperationCallbacks, ParamsToSignAndSend as CommonParamsToSignAndSend } from '@/entities/hooks';
 
 type ParamsToSendMessage = OperationCallbacks & {
-  message: IMessageSendOptions | VaraMessageSendOptions;
-  withVoucher: boolean;
+  message: MessageSendOptions;
+  voucherId: string;
   metadata?: ProgramMetadata;
   payloadType?: string;
 };
 
 type ParamsToReplyMessage = OperationCallbacks & {
-  reply: IMessageSendReplyOptions | VaraMessageSendReplyOptions;
-  withVoucher: boolean;
+  reply: MessageSendReplyOptions;
+  voucherId: string;
   metadata?: ProgramMetadata;
   payloadType?: string;
 };
 
+type ParamsToSendMessageDeprecated = Omit<ParamsToSendMessage, 'voucherId'> & { withVoucher: boolean };
+type ParamsToReplyMessageDeprecated = Omit<ParamsToReplyMessage, 'voucherId'> & { withVoucher: boolean };
+
 type ParamsToSignAndSend = CommonParamsToSignAndSend & {
   extrinsic: SubmittableExtrinsic<'promise', ISubmittableResult>;
   title?: string;
 };
 
-export type { ParamsToSendMessage, ParamsToReplyMessage, ParamsToSignAndSend };
+export type {
+  ParamsToSendMessage,
+  ParamsToReplyMessage,
+  ParamsToSignAndSend,
+  ParamsToSendMessageDeprecated,
+  ParamsToReplyMessageDeprecated,
+};
diff --git a/idea/frontend/src/hooks/useMessageActions/useMessageActions.ts b/idea/frontend/src/hooks/useMessageActions/useMessageActions.ts
index 0ce9217594..40d9b474a4 100644
--- a/idea/frontend/src/hooks/useMessageActions/useMessageActions.ts
+++ b/idea/frontend/src/hooks/useMessageActions/useMessageActions.ts
@@ -1,9 +1,7 @@
-import { useCallback } from 'react';
+import { useApi, useAlert, useAccount, DEFAULT_ERROR_OPTIONS, DEFAULT_SUCCESS_OPTIONS } from '@gear-js/react-hooks';
 import { web3FromSource } from '@polkadot/extension-dapp';
 import { EventRecord } from '@polkadot/types/interfaces';
-import { SubmittableExtrinsic } from '@polkadot/api/types';
-import { ISubmittableResult } from '@polkadot/types/types';
-import { useApi, useAlert, useAccount, DEFAULT_ERROR_OPTIONS, DEFAULT_SUCCESS_OPTIONS } from '@gear-js/react-hooks';
+import { useCallback } from 'react';
 
 import { useModal } from '@/hooks';
 import { Method } from '@/features/explorer';
@@ -11,10 +9,16 @@ import { OperationCallbacks } from '@/entities/hooks';
 import { checkWallet, getExtrinsicFailedMessage } from '@/shared/helpers';
 import { PROGRAM_ERRORS, TransactionStatus, TransactionName } from '@/shared/config';
 
-import { ParamsToSendMessage, ParamsToSignAndSend, ParamsToReplyMessage } from './types';
+import {
+  ParamsToSendMessage,
+  ParamsToSignAndSend,
+  ParamsToReplyMessage,
+  ParamsToSendMessageDeprecated,
+  ParamsToReplyMessageDeprecated,
+} from './types';
 
 const useMessageActions = () => {
-  const { api, isApiReady, isVaraVersion } = useApi();
+  const { api, isApiReady } = useApi();
   const { account } = useAccount();
   const alert = useAlert();
   const { showModal } = useModal();
@@ -74,7 +78,7 @@ const useMessageActions = () => {
   };
 
   const sendMessage = useCallback(
-    async ({ metadata, message, payloadType, withVoucher, reject, resolve }: ParamsToSendMessage) => {
+    async ({ metadata, message, payloadType, voucherId, reject, resolve }: ParamsToSendMessage) => {
       try {
         if (!isApiReady) throw new Error('API is not initialized');
         checkWallet(account);
@@ -82,13 +86,8 @@ const useMessageActions = () => {
         const { meta, address } = account!;
 
         const sendExtrinsic = api.message.send(message, metadata, payloadType);
-        let extrinsic: SubmittableExtrinsic<'promise', ISubmittableResult>;
 
-        if (isVaraVersion) {
-          extrinsic = sendExtrinsic;
-        } else {
-          extrinsic = withVoucher ? api.voucher.call({ SendMessage: sendExtrinsic }) : sendExtrinsic;
-        }
+        const extrinsic = voucherId ? api.voucher.call(voucherId, { SendMessage: sendExtrinsic }) : sendExtrinsic;
 
         const { signer } = await web3FromSource(meta.source);
         const { partialFee } = await api.message.paymentInfo(address, { signer });
@@ -116,7 +115,7 @@ const useMessageActions = () => {
   );
 
   const replyMessage = useCallback(
-    async ({ reply, metadata, payloadType, withVoucher, reject, resolve }: ParamsToReplyMessage) => {
+    async ({ reply, metadata, payloadType, voucherId, reject, resolve }: ParamsToReplyMessage) => {
       try {
         if (!isApiReady) throw new Error('API is not initialized');
         checkWallet(account);
@@ -124,13 +123,82 @@ const useMessageActions = () => {
         const { meta, address } = account!;
 
         const replyExtrinsic = await api.message.sendReply(reply, metadata, payloadType);
-        let extrinsic: SubmittableExtrinsic<'promise', ISubmittableResult>;
 
-        if (isVaraVersion) {
-          extrinsic = replyExtrinsic;
-        } else {
-          extrinsic = withVoucher ? api.voucher.call({ SendReply: replyExtrinsic }) : replyExtrinsic;
-        }
+        const extrinsic = voucherId ? api.voucher.call(voucherId, { SendReply: replyExtrinsic }) : replyExtrinsic;
+
+        const { signer } = await web3FromSource(meta.source);
+        const { partialFee } = await api.message.paymentInfo(address, { signer });
+
+        const handleConfirm = () =>
+          signAndSend({ extrinsic, signer, title: TransactionName.SendReply, reject, resolve });
+
+        showModal('transaction', {
+          fee: partialFee.toHuman(),
+          name: TransactionName.SendReply,
+          addressTo: reply.replyToId,
+          addressFrom: address,
+          onAbort: reject,
+          onConfirm: handleConfirm,
+        });
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+
+        alert.error(errorMessage);
+
+        if (reject) reject();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [api, account],
+  );
+
+  const sendMessageDeprecated = useCallback(
+    async ({ metadata, message, payloadType, withVoucher, reject, resolve }: ParamsToSendMessageDeprecated) => {
+      try {
+        if (!isApiReady) throw new Error('API is not initialized');
+        checkWallet(account);
+
+        const { meta, address } = account!;
+
+        const sendExtrinsic = api.message.send(message, metadata, payloadType);
+        const extrinsic = withVoucher ? api.voucher.callDeprecated({ SendMessage: sendExtrinsic }) : sendExtrinsic;
+
+        const { signer } = await web3FromSource(meta.source);
+        const { partialFee } = await api.message.paymentInfo(address, { signer });
+
+        const handleConfirm = () => signAndSend({ extrinsic, signer, reject, resolve });
+
+        showModal('transaction', {
+          fee: partialFee.toHuman(),
+          name: TransactionName.SendMessage,
+          addressTo: message.destination as string,
+          addressFrom: address,
+          onAbort: reject,
+          onConfirm: handleConfirm,
+        });
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+
+        alert.error(errorMessage);
+
+        if (reject) reject();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [api, account],
+  );
+
+  const replyMessageDeprecated = useCallback(
+    async ({ reply, metadata, payloadType, withVoucher, reject, resolve }: ParamsToReplyMessageDeprecated) => {
+      try {
+        if (!isApiReady) throw new Error('API is not initialized');
+        checkWallet(account);
+
+        const { meta, address } = account!;
+
+        const replyExtrinsic = await api.message.sendReply(reply, metadata, payloadType);
+
+        const extrinsic = withVoucher ? api.voucher.callDeprecated({ SendReply: replyExtrinsic }) : replyExtrinsic;
 
         const { signer } = await web3FromSource(meta.source);
         const { partialFee } = await api.message.paymentInfo(address, { signer });
@@ -158,7 +226,7 @@ const useMessageActions = () => {
     [api, account],
   );
 
-  return { sendMessage, replyMessage };
+  return { sendMessage, replyMessage, sendMessageDeprecated, replyMessageDeprecated };
 };
 
 export { useMessageActions };
diff --git a/idea/frontend/src/hooks/useProgramActions/useProgramActions.tsx b/idea/frontend/src/hooks/useProgramActions/useProgramActions.tsx
index 36edc2e0ee..807cb3ddb1 100644
--- a/idea/frontend/src/hooks/useProgramActions/useProgramActions.tsx
+++ b/idea/frontend/src/hooks/useProgramActions/useProgramActions.tsx
@@ -29,7 +29,7 @@ import { Payload, ParamsToCreate, ParamsToUpload, ParamsToSignAndUpload } from '
 
 const useProgramActions = () => {
   const alert = useAlert();
-  const { api, isApiReady, isVaraVersion } = useApi();
+  const { api, isApiReady } = useApi();
   const { account } = useAccount();
   const { isDevChain } = useChain();
 
@@ -48,8 +48,7 @@ const useProgramActions = () => {
 
     const { gasLimit, value, initPayload, metadata, payloadType, keepAlive } = payload;
 
-    const baseProgram = { value, codeId, gasLimit, initPayload };
-    const program = isVaraVersion ? baseProgram : { ...baseProgram, keepAlive };
+    const program = { value, codeId, gasLimit, initPayload, keepAlive };
 
     const result = api.program.create(program, metadata, payloadType);
 
@@ -61,8 +60,7 @@ const useProgramActions = () => {
 
     const { gasLimit, value, initPayload, metadata, payloadType, keepAlive } = payload;
 
-    const baseProgram = { code: optBuffer, value, gasLimit, initPayload };
-    const program = isVaraVersion ? baseProgram : { ...baseProgram, keepAlive };
+    const program = { code: optBuffer, value, gasLimit, initPayload, keepAlive };
 
     return api.program.upload(program, metadata, payloadType);
   };
diff --git a/idea/frontend/src/pages/index.tsx b/idea/frontend/src/pages/index.tsx
index 5c9dbba4e0..694bf5d940 100644
--- a/idea/frontend/src/pages/index.tsx
+++ b/idea/frontend/src/pages/index.tsx
@@ -18,6 +18,7 @@ import * as State from './state';
 import { Explorer } from './explorer';
 import { Code } from './code';
 import { UploadCode } from './uploadCode';
+import { Vouchers } from './vouchers';
 
 const Routing = () => {
   const events = useEvents();
@@ -61,6 +62,8 @@ const Routing = () => {
       <Route path={routes.code} element={<Code />} />
       <Route path={routes.uploadCode} element={<UploadCode />} />
 
+      <Route path={routes.vouchers} element={<Vouchers />} />
+
       <Route path="*" element={<NotFound />} />
       <Route path="/" element={<Navigate to={routes.programs} replace />} />
     </Routes>
diff --git a/idea/frontend/src/pages/program/program-deprecated.tsx b/idea/frontend/src/pages/program/program-deprecated.tsx
new file mode 100644
index 0000000000..59be22d2eb
--- /dev/null
+++ b/idea/frontend/src/pages/program/program-deprecated.tsx
@@ -0,0 +1,111 @@
+import { HexString } from '@polkadot/util/types';
+import { Button } from '@gear-js/ui';
+import { ProgramMetadata } from '@gear-js/api';
+import { useAccount } from '@gear-js/react-hooks';
+import { generatePath, useParams } from 'react-router-dom';
+
+import { useMetadataUpload, useModal, useProgram } from '@/hooks';
+import { ProgramStatus, ProgramTable } from '@/features/program';
+import { ProgramMessages } from '@/widgets/programMessages';
+import { PathParams } from '@/shared/types';
+import { getShortName } from '@/shared/helpers';
+import { Subheader } from '@/shared/ui/subheader';
+import { absoluteRoutes, routes } from '@/shared/config';
+import { UILink } from '@/shared/ui/uiLink';
+import SendSVG from '@/shared/assets/images/actions/send.svg?react';
+import ReadSVG from '@/shared/assets/images/actions/read.svg?react';
+import AddMetaSVG from '@/shared/assets/images/actions/addMeta.svg?react';
+import { useMetadata, MetadataTable } from '@/features/metadata';
+import { VoucherTableDeprecated, IssueVoucher } from '@/features/voucher';
+
+import styles from './program.module.scss';
+
+const ProgramDeprecated = () => {
+  const { account } = useAccount();
+
+  const { programId } = useParams() as PathParams;
+  const { showModal, closeModal } = useModal();
+  const uploadMetadata = useMetadataUpload();
+
+  const { program, isProgramReady, setProgramName } = useProgram(programId);
+  const { metadata, isMetadataReady, setMetadata } = useMetadata(program?.metahash);
+
+  const handleUploadMetadataSubmit = ({ metaHex, name }: { metaHex: HexString; name: string }) => {
+    const codeHash = program?.code?.id;
+    if (!codeHash) return;
+
+    const resolve = () => {
+      setMetadata(ProgramMetadata.from(metaHex));
+      setProgramName(name);
+
+      closeModal();
+    };
+
+    uploadMetadata({ codeHash, metaHex, name, programId, resolve });
+  };
+
+  const openUploadMetadataModal = () => showModal('metadata', { onSubmit: handleUploadMetadataSubmit });
+
+  return (
+    <div>
+      <header className={styles.header}>
+        {program && <h2 className={styles.programName}>{getShortName(program.name)}</h2>}
+
+        {program?.status === ProgramStatus.Active && (
+          <div className={styles.links}>
+            <UILink
+              to={generatePath(absoluteRoutes.sendMessage, { programId })}
+              icon={SendSVG}
+              text="Send Message"
+              color="secondary"
+              className={styles.fixWidth}
+            />
+
+            {program.hasState && (
+              <UILink
+                to={generatePath(routes.state, { programId })}
+                icon={ReadSVG}
+                text="Read State"
+                color="secondary"
+                className={styles.fixWidth}
+              />
+            )}
+
+            {isMetadataReady && !metadata && (
+              <Button text="Add metadata" icon={AddMetaSVG} color="light" onClick={openUploadMetadataModal} />
+            )}
+          </div>
+        )}
+      </header>
+
+      <div className={styles.content}>
+        <div className={styles.leftSide}>
+          <div>
+            <Subheader title="Program details" />
+            <ProgramTable program={program} isProgramReady={isProgramReady} />
+          </div>
+
+          <div>
+            {/* TODO: WithAccount HoC? or move inside VoucherTable? */}
+            {account && (
+              <Subheader title="Voucher details">
+                <IssueVoucher programId={programId} />
+              </Subheader>
+            )}
+
+            <VoucherTableDeprecated programId={programId} />
+          </div>
+
+          <div>
+            <Subheader title="Metadata" />
+            <MetadataTable metadata={metadata} isLoading={!isMetadataReady} />
+          </div>
+        </div>
+
+        <ProgramMessages programId={programId} />
+      </div>
+    </div>
+  );
+};
+
+export { ProgramDeprecated };
diff --git a/idea/frontend/src/pages/program/program.module.scss b/idea/frontend/src/pages/program/program.module.scss
index 39e194cb5f..1660f1d85b 100644
--- a/idea/frontend/src/pages/program/program.module.scss
+++ b/idea/frontend/src/pages/program/program.module.scss
@@ -49,3 +49,9 @@
     flex: 1 1;
   }
 }
+
+.vouchersList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
diff --git a/idea/frontend/src/pages/program/program.tsx b/idea/frontend/src/pages/program/program.tsx
index 8a39dfae82..55f916f0a4 100644
--- a/idea/frontend/src/pages/program/program.tsx
+++ b/idea/frontend/src/pages/program/program.tsx
@@ -1,7 +1,7 @@
 import { HexString } from '@polkadot/util/types';
 import { Button } from '@gear-js/ui';
 import { ProgramMetadata } from '@gear-js/api';
-import { useAccount } from '@gear-js/react-hooks';
+import { useAccount, useAccountVouchers } from '@gear-js/react-hooks';
 import { generatePath, useParams } from 'react-router-dom';
 
 import { useMetadataUpload, useModal, useProgram } from '@/hooks';
@@ -17,10 +17,12 @@ import ReadSVG from '@/shared/assets/images/actions/read.svg?react';
 import AddMetaSVG from '@/shared/assets/images/actions/addMeta.svg?react';
 import { useMetadata, MetadataTable } from '@/features/metadata';
 import { IssueVoucher, VoucherTable } from '@/features/voucher';
+import { withDeprecatedFallback } from '@/shared/ui';
 
+import { ProgramDeprecated } from './program-deprecated';
 import styles from './program.module.scss';
 
-const Program = () => {
+const Program = withDeprecatedFallback(() => {
   const { account } = useAccount();
 
   const { programId } = useParams() as PathParams;
@@ -46,6 +48,17 @@ const Program = () => {
 
   const openUploadMetadataModal = () => showModal('metadata', { onSubmit: handleUploadMetadataSubmit });
 
+  const { vouchers } = useAccountVouchers(programId);
+  const voucherEntries = Object.entries(vouchers || {});
+  const vouchersCount = voucherEntries.length;
+
+  const renderVouchers = () =>
+    voucherEntries.map(([id, { expiry, owner, codeUploading }]) => (
+      <li key={id}>
+        <VoucherTable id={id as HexString} expireBlock={expiry} owner={owner} isCodeUploadEnabled={codeUploading} />
+      </li>
+    ));
+
   return (
     <div>
       <header className={styles.header}>
@@ -85,16 +98,18 @@ const Program = () => {
             <ProgramTable program={program} isProgramReady={isProgramReady} />
           </div>
 
-          <div>
-            {/* TODO: WithAccount HoC? or move inside VoucherTable? */}
-            {account && (
-              <Subheader title="Voucher details">
-                <IssueVoucher programId={programId} />
-              </Subheader>
-            )}
+          {vouchersCount > 0 && (
+            <div>
+              {/* TODO: WithAccount HoC? or move inside VoucherTable? */}
+              {account && (
+                <Subheader title={`Vouchers: ${vouchersCount}`}>
+                  <IssueVoucher programId={programId} />
+                </Subheader>
+              )}
 
-            <VoucherTable programId={programId} />
-          </div>
+              <ul className={styles.vouchersList}>{renderVouchers()}</ul>
+            </div>
+          )}
 
           <div>
             <Subheader title="Metadata" />
@@ -106,6 +121,6 @@ const Program = () => {
       </div>
     </div>
   );
-};
+}, ProgramDeprecated);
 
 export { Program };
diff --git a/idea/frontend/src/pages/vouchers/assets/voucher-card-placeholder.svg b/idea/frontend/src/pages/vouchers/assets/voucher-card-placeholder.svg
new file mode 100644
index 0000000000..a4f92445ca
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/assets/voucher-card-placeholder.svg
@@ -0,0 +1,7 @@
+<svg width="646" height="63" viewBox="0 0 646 63" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" >
+<rect width="646" height="63" rx="16" fill="white" fill-opacity="0.05"/>
+<rect x="24" y="14" width="176" height="16" rx="8" fill="white" fill-opacity="0.1"/>
+<rect x="24" y="42.5" width="104" height="5" rx="2.5" fill="white" fill-opacity="0.1"/>
+<rect x="168" y="42.5" width="136" height="5" rx="2.5" fill="white" fill-opacity="0.1"/>
+<rect x="344" y="42.5" width="136" height="5" rx="2.5" fill="white" fill-opacity="0.1"/>
+</svg>
diff --git a/idea/frontend/src/pages/vouchers/index.ts b/idea/frontend/src/pages/vouchers/index.ts
new file mode 100644
index 0000000000..349ce5bdf4
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/index.ts
@@ -0,0 +1,3 @@
+import { Vouchers } from './vouchers';
+
+export { Vouchers };
diff --git a/idea/frontend/src/pages/vouchers/ui/index.ts b/idea/frontend/src/pages/vouchers/ui/index.ts
new file mode 100644
index 0000000000..f32b0024cb
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/ui/index.ts
@@ -0,0 +1,3 @@
+import { VoucherCard } from './voucher-card';
+
+export { VoucherCard };
diff --git a/idea/frontend/src/pages/vouchers/ui/voucher-card/index.ts b/idea/frontend/src/pages/vouchers/ui/voucher-card/index.ts
new file mode 100644
index 0000000000..f32b0024cb
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/ui/voucher-card/index.ts
@@ -0,0 +1,3 @@
+import { VoucherCard } from './voucher-card';
+
+export { VoucherCard };
diff --git a/idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.module.scss b/idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.module.scss
new file mode 100644
index 0000000000..3a00c9470f
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.module.scss
@@ -0,0 +1,51 @@
+.card {
+  padding: 12px 24px;
+
+  background-color: #222225;
+  border-radius: 16px;
+
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    opacity: 0;
+    transition: opacity 0.25s;
+
+    background-image: radial-gradient(75% 75% at 0% 100%, rgba(43, 208, 113, 0.1) 0, rgba(24, 24, 27, 0) 100%);
+  }
+
+  &:hover {
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.balance {
+  margin-bottom: 8px;
+
+  font-family: Kanit;
+  font-size: 12px;
+  font-weight: 300;
+
+  .value {
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+.footer {
+  padding-right: 25%;
+
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.tsx b/idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.tsx
new file mode 100644
index 0000000000..bd9ed5cddc
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/ui/voucher-card/voucher-card.tsx
@@ -0,0 +1,45 @@
+import { useBalance, useBalanceFormat, useVoucherStatus } from '@gear-js/react-hooks';
+
+import { TimestampBlock } from '@/shared/ui/timestampBlock';
+import { IdBlock } from '@/shared/ui/idBlock';
+import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock';
+
+import styles from './voucher-card.module.scss';
+
+type Props = {
+  id: string;
+  expireBlock: number;
+};
+
+function VoucherCard({ id, expireBlock }: Props) {
+  const { balance } = useBalance(id);
+  const { getFormattedBalance } = useBalanceFormat();
+
+  const formattedBalance = balance ? getFormattedBalance(balance) : undefined;
+
+  const { expirationTimestamp, isVoucherStatusReady, isVoucherActive } = useVoucherStatus(expireBlock);
+
+  return (
+    <div className={styles.card}>
+      <h3 className={styles.balance}>
+        <span className={styles.value}>{formattedBalance?.value}</span>
+        &nbsp;{formattedBalance?.unit}
+      </h3>
+
+      <footer className={styles.footer}>
+        {expirationTimestamp && <TimestampBlock timestamp={expirationTimestamp} withIcon />}
+
+        <IdBlock id={id} withIcon />
+
+        {isVoucherStatusReady && (
+          <BulbBlock
+            status={isVoucherActive ? BulbStatus.Success : BulbStatus.Error}
+            text={isVoucherActive ? 'Active' : 'Expired'}
+          />
+        )}
+      </footer>
+    </div>
+  );
+}
+
+export { VoucherCard };
diff --git a/idea/frontend/src/pages/vouchers/vouchers.module.scss b/idea/frontend/src/pages/vouchers/vouchers.module.scss
new file mode 100644
index 0000000000..ed3c8a6f30
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/vouchers.module.scss
@@ -0,0 +1,13 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  position: relative;
+}
diff --git a/idea/frontend/src/pages/vouchers/vouchers.tsx b/idea/frontend/src/pages/vouchers/vouchers.tsx
new file mode 100644
index 0000000000..1652daeddf
--- /dev/null
+++ b/idea/frontend/src/pages/vouchers/vouchers.tsx
@@ -0,0 +1,53 @@
+import { useAccountVouchers } from '@gear-js/react-hooks';
+import { Navigate } from 'react-router-dom';
+
+import { Placeholder } from '@/entities/placeholder';
+import { routes } from '@/shared/config';
+import { Subheader } from '@/shared/ui/subheader';
+import { withDeprecatedFallback } from '@/shared/ui';
+
+import VoucherCardPlaceholder from './assets/voucher-card-placeholder.svg?react';
+import { VoucherCard } from './ui';
+import styles from './vouchers.module.scss';
+
+const Vouchers = withDeprecatedFallback(
+  () => {
+    const { vouchers, isEachVoucherReady } = useAccountVouchers();
+
+    const voucherEntries = Object.entries(vouchers || {});
+    const vouchersCount = voucherEntries.length;
+
+    const isEmpty = isEachVoucherReady && !vouchersCount;
+    const isPlaceholderVisible = isEmpty || !isEachVoucherReady;
+
+    const renderVouchers = () =>
+      voucherEntries.map(([id, { expiry }]) => (
+        <li key={id}>
+          <VoucherCard id={id} expireBlock={expiry} />
+        </li>
+      ));
+
+    return (
+      <>
+        <Subheader title={`Vouchers: ${vouchersCount}`} size="big" />
+
+        {!isPlaceholderVisible ? (
+          <ul className={styles.list}>{renderVouchers()}</ul>
+        ) : (
+          <div className={styles.placeholder}>
+            <Placeholder
+              block={<VoucherCardPlaceholder />}
+              title="There are no vouchers yet"
+              description="Wait until someone will issue a voucher for you"
+              isEmpty={isEmpty}
+              blocksCount={5}
+            />
+          </div>
+        )}
+      </>
+    );
+  },
+  () => <Navigate to={routes.home} replace />,
+);
+
+export { Vouchers };
diff --git a/idea/frontend/src/shared/assets/images/menu/vouchers.svg b/idea/frontend/src/shared/assets/images/menu/vouchers.svg
new file mode 100644
index 0000000000..d769463cc3
--- /dev/null
+++ b/idea/frontend/src/shared/assets/images/menu/vouchers.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7643 9.431L8.52867 0.195333C8.40367 0.0703333 8.234 0 8.05733 0H0.666667C0.298667 0 0 0.298667 0 0.666667V8.05733C0 8.234 0.0703333 8.40367 0.195333 8.52867L9.431 17.7643C9.582 17.9153 9.78633 18 10 18C10.2137 18 10.418 17.9153 10.569 17.7643L17.7643 10.569C17.915 10.418 18 10.2137 18 10C18 9.78633 17.915 9.582 17.7643 9.431ZM3.66667 5C2.93033 5 2.33333 4.403 2.33333 3.66667C2.33333 2.93033 2.93033 2.33333 3.66667 2.33333C4.403 2.33333 5 2.93033 5 3.66667C5 4.403 4.403 5 3.66667 5Z" fill="white"/>
+</svg>
diff --git a/idea/frontend/src/shared/config/routes.ts b/idea/frontend/src/shared/config/routes.ts
index e8682fd08d..f977644951 100644
--- a/idea/frontend/src/shared/config/routes.ts
+++ b/idea/frontend/src/shared/config/routes.ts
@@ -21,6 +21,7 @@ const routes = {
   reply: 'reply/:messageId',
   meta: '/meta/:programId',
   block: ':blockId',
+  vouchers: '/vouchers',
 };
 
 const absoluteRoutes = {
diff --git a/idea/frontend/src/shared/helpers/form.ts b/idea/frontend/src/shared/helpers/form.ts
index 5702113e68..c0af093d08 100644
--- a/idea/frontend/src/shared/helpers/form.ts
+++ b/idea/frontend/src/shared/helpers/form.ts
@@ -10,12 +10,11 @@ const isDecimal = (value: string) => {
   return decimalRegex.test(value);
 };
 
-// yup
 const isAccountAddressValid = (value = '') => {
   try {
     decodeAddress(value);
     return true;
-  } catch (error) {
+  } catch {
     return false;
   }
 };
diff --git a/idea/frontend/src/shared/helpers/index.ts b/idea/frontend/src/shared/helpers/index.ts
index 8de6dec82d..d38e5c46d0 100644
--- a/idea/frontend/src/shared/helpers/index.ts
+++ b/idea/frontend/src/shared/helpers/index.ts
@@ -1,7 +1,6 @@
 import type { Event } from '@polkadot/types/interfaces';
 import { GearApi } from '@gear-js/api';
 import { Account, AlertContainerFactory } from '@gear-js/react-hooks';
-import { AnySchema, ValidationError } from 'yup';
 import isString from 'lodash.isstring';
 
 import { ACCOUNT_ERRORS, NODE_ADRESS_URL_PARAM, FileTypes } from '@/shared/config';
@@ -15,7 +14,7 @@ const checkWallet = (account?: Account) => {
   }
 };
 
-const formatDate = (rawDate: string) => {
+const formatDate = (rawDate: string | number) => {
   const date = new Date(rawDate);
   const time = date.toLocaleTimeString('en-GB');
   const formatedDate = date.toLocaleDateString('en-US').replace(/\//g, '-');
@@ -81,10 +80,9 @@ const getShortName = (filename: string, maxLength = 24) => {
 const getPreformattedText = (data: unknown) => JSON.stringify(data, null, 4);
 
 const getExtrinsicFailedMessage = (api: GearApi, event: Event) => {
-  const { docs, method: errorMethod } = api.getExtrinsicFailedError(event);
-  const formattedDocs = docs.filter(Boolean).join('. ');
+  const { docs, method } = api.getExtrinsicFailedError(event);
 
-  return `${errorMethod}: ${formattedDocs}`;
+  return `${method}: ${docs}`;
 };
 
 const isNodeAddressValid = (address: string) => {
diff --git a/idea/frontend/src/shared/ui/form/Form.module.scss b/idea/frontend/src/shared/ui/form/Form.module.scss
index eca9e230d8..9255f54f80 100644
--- a/idea/frontend/src/shared/ui/form/Form.module.scss
+++ b/idea/frontend/src/shared/ui/form/Form.module.scss
@@ -16,12 +16,6 @@
   }
 }
 
-.field {
-  label {
-    @extend %labelStyles;
-  }
-}
-
 .text {
   @extend %labelStyles;
 
diff --git a/idea/frontend/src/shared/ui/form/checkbox/checkbox.tsx b/idea/frontend/src/shared/ui/form/checkbox/checkbox.tsx
new file mode 100644
index 0000000000..54158e6b4f
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/checkbox/checkbox.tsx
@@ -0,0 +1,14 @@
+import { Checkbox as GearCheckbox, CheckboxProps } from '@gear-js/ui';
+import { useFormContext } from 'react-hook-form';
+
+type Props = Omit<CheckboxProps, 'onChange' | 'onBlur'> & {
+  name: string;
+};
+
+function Checkbox({ name, ...props }: Props) {
+  const { register } = useFormContext();
+
+  return <GearCheckbox {...props} {...register(name)} />;
+}
+
+export { Checkbox };
diff --git a/idea/frontend/src/shared/ui/form/checkbox/index.ts b/idea/frontend/src/shared/ui/form/checkbox/index.ts
new file mode 100644
index 0000000000..505ad33749
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/checkbox/index.ts
@@ -0,0 +1,3 @@
+import { Checkbox } from './checkbox';
+
+export { Checkbox };
diff --git a/idea/frontend/src/shared/ui/form/form/form.tsx b/idea/frontend/src/shared/ui/form/form/form.tsx
new file mode 100644
index 0000000000..6a9ad5bfef
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/form/form.tsx
@@ -0,0 +1,43 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ReactNode } from 'react';
+import { DefaultValues, FieldValues, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { ZodType } from 'zod';
+
+type FormProps<TFieldValues extends FieldValues, TTransformedValues extends FieldValues | undefined = undefined> = {
+  children: ReactNode;
+  className?: string;
+  onSubmit: TTransformedValues extends FieldValues ? SubmitHandler<TTransformedValues> : SubmitHandler<TFieldValues>;
+};
+
+type UseFormProps<TFieldValues extends FieldValues> = {
+  defaultValues: DefaultValues<TFieldValues>;
+  schema?: ZodType;
+};
+
+type Props<
+  TFieldValues extends FieldValues,
+  TTransformedValues extends FieldValues | undefined = undefined,
+> = FormProps<TFieldValues, TTransformedValues> & UseFormProps<TFieldValues>;
+
+const Form = <TFieldValues extends FieldValues, TTransformedValues extends FieldValues | undefined = undefined>({
+  defaultValues,
+  schema,
+  children,
+  className,
+  onSubmit,
+}: Props<TFieldValues, TTransformedValues>) => {
+  const resolver = schema ? zodResolver(schema) : undefined;
+
+  const methods = useForm<TFieldValues, unknown, TTransformedValues>({ defaultValues, resolver });
+  const { handleSubmit } = methods;
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)} className={className}>
+        {children}
+      </form>
+    </FormProvider>
+  );
+};
+
+export { Form };
diff --git a/idea/frontend/src/shared/ui/form/form/index.ts b/idea/frontend/src/shared/ui/form/form/index.ts
new file mode 100644
index 0000000000..2a2f8a9159
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/form/index.ts
@@ -0,0 +1,3 @@
+import { Form } from './form';
+
+export { Form };
diff --git a/idea/frontend/src/shared/ui/form/formInput/FormInput.tsx b/idea/frontend/src/shared/ui/form/formInput/FormInput.tsx
deleted file mode 100644
index 282b0246f3..0000000000
--- a/idea/frontend/src/shared/ui/form/formInput/FormInput.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Input, InputProps } from '@gear-js/ui';
-import clsx from 'clsx';
-import { useFormContext } from 'react-hook-form';
-
-import styles from '../Form.module.scss';
-
-type Props = InputProps & {
-  name: string;
-};
-
-const FormInput = ({ name, label, className, ...other }: Props) => {
-  const { register, getFieldState, formState } = useFormContext();
-  const { error } = getFieldState(name, formState);
-
-  return (
-    <Input
-      {...other}
-      {...register(name)}
-      label={label}
-      error={error?.message}
-      className={clsx(styles.field, className)}
-    />
-  );
-};
-
-export { FormInput };
diff --git a/idea/frontend/src/shared/ui/form/formInput/index.ts b/idea/frontend/src/shared/ui/form/formInput/index.ts
deleted file mode 100644
index c063d5f037..0000000000
--- a/idea/frontend/src/shared/ui/form/formInput/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { FormInput } from './FormInput';
-
-export { FormInput };
diff --git a/idea/frontend/src/shared/ui/form/index.ts b/idea/frontend/src/shared/ui/form/index.ts
index 2d52f69e62..4f61dde1d3 100644
--- a/idea/frontend/src/shared/ui/form/index.ts
+++ b/idea/frontend/src/shared/ui/form/index.ts
@@ -1,5 +1,9 @@
 import formStyles from './Form.module.scss';
-import { FormInput } from './formInput';
-import { ValueField } from './value-field/ValueField';
+import { Input } from './input';
+import { ValueField } from './value-field';
+import { Form } from './form';
+import { Checkbox } from './checkbox';
+import { Radio } from './radio';
+import { Select } from './select';
 
-export { formStyles, FormInput, ValueField };
+export { formStyles, Input, ValueField, Form, Checkbox, Radio, Select };
diff --git a/idea/frontend/src/shared/ui/form/input/index.ts b/idea/frontend/src/shared/ui/form/input/index.ts
new file mode 100644
index 0000000000..ab2fea2c11
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/input/index.ts
@@ -0,0 +1,3 @@
+import { Input } from './input';
+
+export { Input };
diff --git a/idea/frontend/src/shared/ui/form/input/input.tsx b/idea/frontend/src/shared/ui/form/input/input.tsx
new file mode 100644
index 0000000000..b5ef854eed
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/input/input.tsx
@@ -0,0 +1,18 @@
+import { Input as GearInput, InputProps } from '@gear-js/ui';
+import { useFormContext } from 'react-hook-form';
+
+// TODO: omit onChange and onBlur, direction types start to freak out
+type Props = InputProps & {
+  name: string;
+};
+
+const Input = ({ name, ...props }: Props) => {
+  const { register, formState } = useFormContext();
+  const { errors } = formState;
+
+  const error = errors[name]?.message?.toString();
+
+  return <GearInput {...props} {...register(name)} error={error} />;
+};
+
+export { Input };
diff --git a/idea/frontend/src/shared/ui/form/radio/index.ts b/idea/frontend/src/shared/ui/form/radio/index.ts
new file mode 100644
index 0000000000..cfef7c537f
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/radio/index.ts
@@ -0,0 +1,3 @@
+import { Radio } from './radio';
+
+export { Radio };
diff --git a/idea/frontend/src/shared/ui/form/radio/radio.tsx b/idea/frontend/src/shared/ui/form/radio/radio.tsx
new file mode 100644
index 0000000000..f2f1489ff5
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/radio/radio.tsx
@@ -0,0 +1,14 @@
+import { Radio as GearRadio, RadioProps } from '@gear-js/ui';
+import { useFormContext } from 'react-hook-form';
+
+type Props = Omit<RadioProps, 'onChange' | 'onBlur'> & {
+  name: string;
+};
+
+function Radio({ name, ...props }: Props) {
+  const { register } = useFormContext();
+
+  return <GearRadio {...props} {...register(name)} />;
+}
+
+export { Radio };
diff --git a/idea/frontend/src/shared/ui/form/select/index.ts b/idea/frontend/src/shared/ui/form/select/index.ts
new file mode 100644
index 0000000000..6ec3e6d9ee
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/select/index.ts
@@ -0,0 +1,3 @@
+import { Select } from './select';
+
+export { Select };
diff --git a/idea/frontend/src/shared/ui/form/select/select.tsx b/idea/frontend/src/shared/ui/form/select/select.tsx
new file mode 100644
index 0000000000..034fd1d1d5
--- /dev/null
+++ b/idea/frontend/src/shared/ui/form/select/select.tsx
@@ -0,0 +1,15 @@
+import { Select as GearSelect, SelectProps } from '@gear-js/ui';
+import { useFormContext } from 'react-hook-form';
+
+// TODO: omit onChange and onBlur, options types start to freak out
+type Props = SelectProps & {
+  name: string;
+};
+
+function Select({ name, ...props }: Props) {
+  const { register } = useFormContext();
+
+  return <GearSelect {...props} {...register(name)} />;
+}
+
+export { Select };
diff --git a/idea/frontend/src/shared/ui/index.ts b/idea/frontend/src/shared/ui/index.ts
index a0b13b3ed9..32bd379e9a 100644
--- a/idea/frontend/src/shared/ui/index.ts
+++ b/idea/frontend/src/shared/ui/index.ts
@@ -1,4 +1,6 @@
 import { withAccount } from './with-account';
 import { LabeledCheckbox } from './labeled-checkbox';
+import { Form, Input, ValueField, Checkbox, Radio, Select } from './form';
+import { withDeprecatedFallback } from './with-deprecated-fallback';
 
-export { LabeledCheckbox, withAccount };
+export { LabeledCheckbox, withAccount, Form, Input, ValueField, Checkbox, Radio, Select, withDeprecatedFallback };
diff --git a/idea/frontend/src/shared/ui/timestampBlock/TimestampBlock.tsx b/idea/frontend/src/shared/ui/timestampBlock/TimestampBlock.tsx
index 87a78ecfc3..870d2dfdf7 100644
--- a/idea/frontend/src/shared/ui/timestampBlock/TimestampBlock.tsx
+++ b/idea/frontend/src/shared/ui/timestampBlock/TimestampBlock.tsx
@@ -5,21 +5,20 @@ import { formatDate } from '../../helpers';
 import TimeSVG from '../../assets/images/indicators/time.svg?react';
 
 type Props = {
+  timestamp: string | number;
   size?: 'small' | 'medium' | 'large';
   color?: 'light' | 'primary';
   withIcon?: boolean;
-  timestamp: string;
   className?: string;
 };
 
-const TimestampBlock = (props: Props) => {
-  const { size = 'small', color = 'primary', withIcon = false, timestamp, className } = props;
-
+const TimestampBlock = ({ size = 'small', color = 'primary', withIcon = false, timestamp, className }: Props) => {
   const textClasses = clsx(styles.value, styles[size], styles[color]);
 
   return (
     <div className={clsx(styles.timestampBlock, className)}>
       {withIcon && <TimeSVG className={styles.icon} />}
+
       <span className={textClasses}>{formatDate(timestamp)}</span>
     </div>
   );
diff --git a/idea/frontend/src/shared/ui/with-account/with-account.tsx b/idea/frontend/src/shared/ui/with-account/with-account.tsx
index 78bc73f121..37f8c3f8c9 100644
--- a/idea/frontend/src/shared/ui/with-account/with-account.tsx
+++ b/idea/frontend/src/shared/ui/with-account/with-account.tsx
@@ -5,7 +5,6 @@ function withAccount<T>(Component: FunctionComponent<T>) {
   return (props: T & JSX.IntrinsicAttributes) => {
     const { account } = useAccount();
 
-    // eslint-disable-next-line react/jsx-props-no-spreading
     return account ? <Component {...props} /> : null;
   };
 }
diff --git a/idea/frontend/src/shared/ui/with-deprecated-fallback/index.ts b/idea/frontend/src/shared/ui/with-deprecated-fallback/index.ts
new file mode 100644
index 0000000000..3884ed5c4a
--- /dev/null
+++ b/idea/frontend/src/shared/ui/with-deprecated-fallback/index.ts
@@ -0,0 +1,3 @@
+import { withDeprecatedFallback } from './with-deprecated-fallback';
+
+export { withDeprecatedFallback };
diff --git a/idea/frontend/src/shared/ui/with-deprecated-fallback/with-deprecated-fallback.tsx b/idea/frontend/src/shared/ui/with-deprecated-fallback/with-deprecated-fallback.tsx
new file mode 100644
index 0000000000..f1ff85d4d1
--- /dev/null
+++ b/idea/frontend/src/shared/ui/with-deprecated-fallback/with-deprecated-fallback.tsx
@@ -0,0 +1,13 @@
+import { useApi } from '@gear-js/react-hooks';
+import { FunctionComponent } from 'react';
+
+function withDeprecatedFallback<T>(component: FunctionComponent<T>, deprecatedComponent: FunctionComponent<T>) {
+  return (props: T & JSX.IntrinsicAttributes) => {
+    const { isV110Runtime } = useApi();
+    const Component = isV110Runtime ? component : deprecatedComponent;
+
+    return <Component {...props} />;
+  };
+}
+
+export { withDeprecatedFallback };
diff --git a/idea/frontend/src/widgets/menu/model/consts.ts b/idea/frontend/src/widgets/menu/model/consts.ts
index eeeacad16a..86bbae570a 100644
--- a/idea/frontend/src/widgets/menu/model/consts.ts
+++ b/idea/frontend/src/widgets/menu/model/consts.ts
@@ -1,5 +1,3 @@
-import { VARA_GENESIS, VARA_TESTNET_GENESIS } from '@gear-js/api';
-
 import GearSVG from '@/shared/assets/images/logos/gear.svg?react';
 import ShortGearSVG from '@/shared/assets/images/logos/shortcut/gear.svg?react';
 import GearNetworkSVG from '@/shared/assets/images/logos/networks/gear.svg?react';
@@ -10,9 +8,8 @@ import NetworkVaraSVG from '@/shared/assets/images/logos/networks/vara.svg?react
 const DEVELOPMENT_SECTION = 'development';
 
 const GENESIS = {
-  VARA: VARA_GENESIS,
-  VARA_TESTNET: VARA_TESTNET_GENESIS,
-  VARA_VIT: '0x9b86ea7366584c5ddf67de243433fcc05732864933258de9467db46eb9bef8b5',
+  VARA: '0xfe1b4c55fd4d668101126434206571a7838a8b6b93a6d1b95d607e78e6c53763',
+  VARA_TESTNET: '0x525639f713f397dcf839bd022cd821f367ebcf179de7b9253531f8adbe5436d6',
 };
 
 // TODO: think about naming of ICON and LOGO, and overall structure
@@ -24,7 +21,6 @@ const ICON = {
 const LOGO = {
   [GENESIS.VARA]: ICON.vara,
   [GENESIS.VARA_TESTNET]: ICON.vara,
-  [GENESIS.VARA_VIT]: ICON.vara,
 };
 
 export { DEVELOPMENT_SECTION, ICON, LOGO };
diff --git a/idea/frontend/src/widgets/menu/ui/navigation/Navigation.tsx b/idea/frontend/src/widgets/menu/ui/navigation/Navigation.tsx
index 60691a6eb3..fe57287f1c 100644
--- a/idea/frontend/src/widgets/menu/ui/navigation/Navigation.tsx
+++ b/idea/frontend/src/widgets/menu/ui/navigation/Navigation.tsx
@@ -4,40 +4,53 @@ import MailboxSVG from '@/shared/assets/images/menu/mailbox.svg?react';
 import ProgramsSVG from '@/shared/assets/images/menu/programs.svg?react';
 import MessagesSVG from '@/shared/assets/images/menu/messages.svg?react';
 import ExplorerSVG from '@/shared/assets/images/menu/explorer.svg?react';
-
+import VouchersSVG from '@/shared/assets/images/menu/vouchers.svg?react';
 import { OnboardingTooltip } from '@/shared/ui/onboardingTooltip';
-import styles from './Navigation.module.scss';
+import { withDeprecatedFallback } from '@/shared/ui';
+
 import { NavigationItem } from '../navigationItem';
 import { AppExamplesLink } from '../appExamplesLink';
+import styles from './Navigation.module.scss';
 
 type Props = {
   isOpen: boolean;
 };
 
-const Navigation = ({ isOpen }: Props) => (
-  <nav className={styles.navigation}>
-    <NavigationItem to={routes.programs} icon={<ProgramsSVG />} text="Programs" isFullWidth={isOpen} />
+const VouchersLink = withDeprecatedFallback(
+  ({ isFullWidth }: { isFullWidth: boolean }) => (
+    <NavigationItem to={routes.vouchers} icon={<VouchersSVG />} text="Vouchers" isFullWidth={isFullWidth} />
+  ),
+  () => null,
+);
 
-    <OnboardingTooltip index={3}>
-      <NavigationItem to={routes.codes} icon={<CodesSVG />} text="Codes" isFullWidth={isOpen} />
-    </OnboardingTooltip>
+const Navigation = ({ isOpen }: Props) => {
+  return (
+    <nav className={styles.navigation}>
+      <NavigationItem to={routes.programs} icon={<ProgramsSVG />} text="Programs" isFullWidth={isOpen} />
 
-    <OnboardingTooltip index={5}>
-      <NavigationItem to={routes.messages} icon={<MessagesSVG />} text="Messages" isFullWidth={isOpen} />
-    </OnboardingTooltip>
+      <OnboardingTooltip index={3}>
+        <NavigationItem to={routes.codes} icon={<CodesSVG />} text="Codes" isFullWidth={isOpen} />
+      </OnboardingTooltip>
 
-    <OnboardingTooltip index={6}>
-      <NavigationItem to={routes.explorer} icon={<ExplorerSVG />} text="Explorer" isFullWidth={isOpen} />
-    </OnboardingTooltip>
+      <OnboardingTooltip index={5}>
+        <NavigationItem to={routes.messages} icon={<MessagesSVG />} text="Messages" isFullWidth={isOpen} />
+      </OnboardingTooltip>
 
-    <OnboardingTooltip index={7}>
-      <NavigationItem to={routes.mailbox} icon={<MailboxSVG />} text="Mailbox" isFullWidth={isOpen} />
-    </OnboardingTooltip>
+      <OnboardingTooltip index={6}>
+        <NavigationItem to={routes.explorer} icon={<ExplorerSVG />} text="Explorer" isFullWidth={isOpen} />
+      </OnboardingTooltip>
 
-    <OnboardingTooltip index={8}>
-      <AppExamplesLink isFullWidth={isOpen} />
-    </OnboardingTooltip>
-  </nav>
-);
+      <OnboardingTooltip index={7}>
+        <NavigationItem to={routes.mailbox} icon={<MailboxSVG />} text="Mailbox" isFullWidth={isOpen} />
+      </OnboardingTooltip>
+
+      <VouchersLink isFullWidth={isOpen} />
+
+      <OnboardingTooltip index={8}>
+        <AppExamplesLink isFullWidth={isOpen} />
+      </OnboardingTooltip>
+    </nav>
+  );
+};
 
 export { Navigation };
diff --git a/idea/frontend/src/widgets/messageForm/index.ts b/idea/frontend/src/widgets/messageForm/index.ts
index f766f9240e..cadc4c2484 100644
--- a/idea/frontend/src/widgets/messageForm/index.ts
+++ b/idea/frontend/src/widgets/messageForm/index.ts
@@ -1,3 +1,3 @@
-import { MessageForm } from './ui/MessageForm';
+import { MessageForm } from './ui';
 
 export { MessageForm };
diff --git a/idea/frontend/src/widgets/messageForm/model/const.ts b/idea/frontend/src/widgets/messageForm/model/const.ts
index 439a6de73e..b69cb35f8a 100644
--- a/idea/frontend/src/widgets/messageForm/model/const.ts
+++ b/idea/frontend/src/widgets/messageForm/model/const.ts
@@ -1,6 +1,15 @@
-import { FormValues } from './types';
+import { FormValues, FormValuesDeprecated } from './types';
 
 const INITIAL_VALUES: FormValues = {
+  value: '0',
+  payload: '0x',
+  gasLimit: '0',
+  payloadType: 'Bytes',
+  voucherId: '',
+  keepAlive: true,
+};
+
+const INITIAL_VALUES_DEPRECATED: FormValuesDeprecated = {
   value: '0',
   payload: '0x',
   gasLimit: '0',
@@ -9,4 +18,4 @@ const INITIAL_VALUES: FormValues = {
   keepAlive: true,
 };
 
-export { INITIAL_VALUES };
+export { INITIAL_VALUES, INITIAL_VALUES_DEPRECATED };
diff --git a/idea/frontend/src/widgets/messageForm/model/index.ts b/idea/frontend/src/widgets/messageForm/model/index.ts
index 5b34929f96..f0269e299d 100644
--- a/idea/frontend/src/widgets/messageForm/model/index.ts
+++ b/idea/frontend/src/widgets/messageForm/model/index.ts
@@ -1,5 +1,5 @@
-import { FormValues } from './types';
-import { INITIAL_VALUES } from './const';
+import { FormValues, FormValuesDeprecated } from './types';
+import { INITIAL_VALUES, INITIAL_VALUES_DEPRECATED } from './const';
 
-export type { FormValues };
-export { INITIAL_VALUES };
+export type { FormValues, FormValuesDeprecated };
+export { INITIAL_VALUES, INITIAL_VALUES_DEPRECATED };
diff --git a/idea/frontend/src/widgets/messageForm/model/types.ts b/idea/frontend/src/widgets/messageForm/model/types.ts
index 480bad04c5..5e2abab55e 100644
--- a/idea/frontend/src/widgets/messageForm/model/types.ts
+++ b/idea/frontend/src/widgets/messageForm/model/types.ts
@@ -5,8 +5,12 @@ type FormValues = {
   gasLimit: string;
   payload: PayloadValue;
   payloadType: string;
-  withVoucher: boolean;
+  voucherId: string;
   keepAlive: boolean;
 };
 
-export type { FormValues };
+type FormValuesDeprecated = Omit<FormValues, 'voucherId'> & {
+  withVoucher: boolean;
+};
+
+export type { FormValues, FormValuesDeprecated };
diff --git a/idea/frontend/src/widgets/messageForm/ui/index.ts b/idea/frontend/src/widgets/messageForm/ui/index.ts
new file mode 100644
index 0000000000..d9e438717a
--- /dev/null
+++ b/idea/frontend/src/widgets/messageForm/ui/index.ts
@@ -0,0 +1,3 @@
+import { MessageForm } from './message-form';
+
+export { MessageForm };
diff --git a/idea/frontend/src/widgets/messageForm/ui/message-form-deprecated.tsx b/idea/frontend/src/widgets/messageForm/ui/message-form-deprecated.tsx
new file mode 100644
index 0000000000..8551d3b8eb
--- /dev/null
+++ b/idea/frontend/src/widgets/messageForm/ui/message-form-deprecated.tsx
@@ -0,0 +1,189 @@
+import { ProgramMetadata } from '@gear-js/api';
+import { Button, Input, Textarea } from '@gear-js/ui';
+import { useBalanceFormat } from '@gear-js/react-hooks';
+import { HexString } from '@polkadot/util/types';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useMemo, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import sendSVG from '@/shared/assets/images/actions/send.svg?react';
+import { ValueField } from '@/shared/ui/form';
+import { Box } from '@/shared/ui/box';
+import { BackButton } from '@/shared/ui/backButton';
+import { GasMethod } from '@/shared/config';
+import { GasField } from '@/features/gasField';
+import { FormPayload, getPayloadFormValues, getResetPayloadValue, getSubmitPayload } from '@/features/formPayload';
+import { useGasCalculate, useMessageActions, useValidationSchema } from '@/hooks';
+import { Result } from '@/hooks/useGasCalculate/types';
+import { UseVoucherCheckboxDeprecated } from '@/features/voucher';
+import { LabeledCheckbox } from '@/shared/ui';
+
+import { FormValuesDeprecated, INITIAL_VALUES_DEPRECATED } from '../model';
+import styles from './message-form.module.scss';
+
+type Props = {
+  id: HexString;
+  programId: HexString | undefined;
+  isReply: boolean;
+  isLoading: boolean;
+  metadata?: ProgramMetadata | undefined;
+};
+
+const MessageFormDeprecated = ({ id, programId, isReply, metadata, isLoading }: Props) => {
+  const { getChainBalanceValue, getFormattedGasValue, getChainGasValue } = useBalanceFormat();
+  const schema = useValidationSchema();
+
+  // TODOFORM:
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const methods = useForm<FormValuesDeprecated>({
+    defaultValues: INITIAL_VALUES_DEPRECATED,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    resolver: yupResolver(schema),
+  });
+  const { getValues, reset, setValue, register, getFieldState, formState } = methods;
+  const { error: payloadTypeError } = getFieldState('payloadType', formState);
+
+  const calculateGas = useGasCalculate();
+  const { sendMessageDeprecated, replyMessageDeprecated } = useMessageActions();
+
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [isGasDisabled, setIsGasDisabled] = useState(false);
+  const [gasInfo, setGasInfo] = useState<Result>();
+
+  const method = isReply ? GasMethod.Reply : GasMethod.Handle;
+  const typeIndex = isReply ? metadata?.types.reply : metadata?.types.handle.input;
+  const isTypeIndex = typeIndex !== undefined && typeIndex !== null;
+
+  const payloadFormValues = useMemo(
+    () => (metadata && isTypeIndex ? getPayloadFormValues(metadata, typeIndex) : undefined),
+    [metadata, isTypeIndex, typeIndex],
+  );
+
+  const disableSubmitButton = () => setIsDisabled(true);
+  const enableSubmitButton = () => setIsDisabled(false);
+
+  const resetForm = () => {
+    const values = getValues();
+    const payload = getResetPayloadValue(values.payload);
+
+    reset({ ...INITIAL_VALUES_DEPRECATED, payload });
+    enableSubmitButton();
+    setGasInfo(undefined);
+  };
+
+  const handleSubmitForm = (values: FormValuesDeprecated) => {
+    disableSubmitButton();
+
+    const payloadType = metadata ? undefined : values.payloadType;
+    const { withVoucher, keepAlive } = values;
+
+    const baseValues = {
+      value: getChainBalanceValue(values.value).toFixed(),
+      payload: getSubmitPayload(values.payload),
+      gasLimit: getChainGasValue(values.gasLimit).toFixed(),
+      keepAlive,
+    };
+
+    if (isReply) {
+      const reply = { ...baseValues, replyToId: id };
+      replyMessageDeprecated({
+        reply,
+        metadata,
+        payloadType,
+        withVoucher,
+        reject: enableSubmitButton,
+        resolve: resetForm,
+      });
+    } else {
+      const message = { ...baseValues, destination: id };
+      sendMessageDeprecated({
+        message,
+        metadata,
+        payloadType,
+        withVoucher,
+        reject: enableSubmitButton,
+        resolve: resetForm,
+      });
+    }
+  };
+
+  const handleGasCalculate = () => {
+    setIsGasDisabled(true);
+
+    const values = getValues();
+
+    const preparedValues = {
+      ...values,
+      value: getChainBalanceValue(values.value).toFixed(),
+      payload: getSubmitPayload(values.payload),
+    };
+
+    calculateGas(method, preparedValues, null, metadata, id)
+      .then((info) => {
+        const limit = getFormattedGasValue(info.limit).toFixed();
+
+        setValue('gasLimit', limit, { shouldValidate: true });
+        setGasInfo(info);
+      })
+      .finally(() => setIsGasDisabled(false));
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(handleSubmitForm)}>
+        <Box className={styles.body}>
+          {isLoading ? (
+            <Input label="Destination:" gap="1/5" className={styles.loading} value="" readOnly />
+          ) : (
+            <Input label={isReply ? 'Message Id:' : 'Destination:'} gap="1/5" value={id} readOnly />
+          )}
+
+          {isLoading ? (
+            <Textarea label="Payload" gap="1/5" className={styles.loading} readOnly />
+          ) : (
+            <FormPayload name="payload" label="Payload" values={payloadFormValues} gap="1/5" />
+          )}
+
+          {!isLoading && !metadata && (
+            <Input label="Payload type" gap="1/5" {...register('payloadType')} error={payloadTypeError?.message} />
+          )}
+
+          {isLoading ? (
+            <Input label="Value:" gap="1/5" className={styles.loading} readOnly />
+          ) : (
+            <ValueField name="value" label="Value:" gap="1/5" />
+          )}
+
+          {isLoading ? (
+            <Input label="Gas info" gap="1/5" className={styles.loading} readOnly />
+          ) : (
+            <GasField
+              info={gasInfo}
+              disabled={isLoading || isGasDisabled}
+              onGasCalculate={handleGasCalculate}
+              gap="1/5"
+            />
+          )}
+
+          <LabeledCheckbox name="keepAlive" label="Account existence:" inputLabel="Keep alive" gap="1/5" />
+          <UseVoucherCheckboxDeprecated programId={programId} />
+        </Box>
+
+        <Button
+          type="submit"
+          text="Send Message"
+          icon={sendSVG}
+          size="large"
+          color="secondary"
+          className={styles.button}
+          disabled={isLoading || isDisabled}
+        />
+        <BackButton />
+      </form>
+    </FormProvider>
+  );
+};
+
+export { MessageFormDeprecated };
diff --git a/idea/frontend/src/widgets/messageForm/ui/MessageForm.module.scss b/idea/frontend/src/widgets/messageForm/ui/message-form.module.scss
similarity index 100%
rename from idea/frontend/src/widgets/messageForm/ui/MessageForm.module.scss
rename to idea/frontend/src/widgets/messageForm/ui/message-form.module.scss
diff --git a/idea/frontend/src/widgets/messageForm/ui/MessageForm.tsx b/idea/frontend/src/widgets/messageForm/ui/message-form.tsx
similarity index 81%
rename from idea/frontend/src/widgets/messageForm/ui/MessageForm.tsx
rename to idea/frontend/src/widgets/messageForm/ui/message-form.tsx
index 075e522cb0..462fea88bc 100644
--- a/idea/frontend/src/widgets/messageForm/ui/MessageForm.tsx
+++ b/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 { useAccount, useApi, useBalanceFormat } from '@gear-js/react-hooks';
+import { useBalanceFormat } from '@gear-js/react-hooks';
 import { HexString } from '@polkadot/util/types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useMemo, useState } from 'react';
@@ -15,11 +15,12 @@ import { GasField } from '@/features/gasField';
 import { FormPayload, getPayloadFormValues, getResetPayloadValue, getSubmitPayload } from '@/features/formPayload';
 import { useGasCalculate, useMessageActions, useValidationSchema } from '@/hooks';
 import { Result } from '@/hooks/useGasCalculate/types';
-import { UseVoucherCheckbox } from '@/features/voucher';
-import { LabeledCheckbox } from '@/shared/ui';
+import { VoucherSelect } from '@/features/voucher';
+import { LabeledCheckbox, withDeprecatedFallback } from '@/shared/ui';
 
 import { FormValues, INITIAL_VALUES } from '../model';
-import styles from './MessageForm.module.scss';
+import { MessageFormDeprecated } from './message-form-deprecated';
+import styles from './message-form.module.scss';
 
 type Props = {
   id: HexString;
@@ -29,9 +30,7 @@ type Props = {
   metadata?: ProgramMetadata | undefined;
 };
 
-const MessageForm = ({ id, programId, isReply, metadata, isLoading }: Props) => {
-  const { isVaraVersion } = useApi();
-  const { account } = useAccount();
+const MessageForm = withDeprecatedFallback(({ id, programId, isReply, metadata, isLoading }: Props) => {
   const { getChainBalanceValue, getFormattedGasValue, getChainGasValue } = useBalanceFormat();
   const schema = useValidationSchema();
 
@@ -74,24 +73,21 @@ const MessageForm = ({ id, programId, isReply, metadata, isLoading }: Props) =>
     disableSubmitButton();
 
     const payloadType = metadata ? undefined : values.payloadType;
-    const { withVoucher, keepAlive } = values;
+    const { voucherId, keepAlive } = values;
 
     const baseValues = {
       value: getChainBalanceValue(values.value).toFixed(),
       payload: getSubmitPayload(values.payload),
       gasLimit: getChainGasValue(values.gasLimit).toFixed(),
+      keepAlive,
     };
 
-    const commonValues = isVaraVersion
-      ? { ...baseValues, prepaid: withVoucher, account: withVoucher ? account?.decodedAddress : undefined }
-      : { ...baseValues, keepAlive };
-
     if (isReply) {
-      const reply = { ...commonValues, replyToId: id };
-      replyMessage({ reply, metadata, payloadType, withVoucher, reject: enableSubmitButton, resolve: resetForm });
+      const reply = { ...baseValues, replyToId: id };
+      replyMessage({ reply, metadata, payloadType, voucherId, reject: enableSubmitButton, resolve: resetForm });
     } else {
-      const message = { ...commonValues, destination: id };
-      sendMessage({ message, metadata, payloadType, withVoucher, reject: enableSubmitButton, resolve: resetForm });
+      const message = { ...baseValues, destination: id };
+      sendMessage({ message, metadata, payloadType, voucherId, reject: enableSubmitButton, resolve: resetForm });
     }
   };
 
@@ -153,10 +149,8 @@ const MessageForm = ({ id, programId, isReply, metadata, isLoading }: Props) =>
             />
           )}
 
-          {!isVaraVersion && (
-            <LabeledCheckbox name="keepAlive" label="Account existence:" inputLabel="Keep alive" gap="1/5" />
-          )}
-          <UseVoucherCheckbox programId={programId} />
+          <LabeledCheckbox name="keepAlive" label="Account existence:" inputLabel="Keep alive" gap="1/5" />
+          <VoucherSelect programId={programId} />
         </Box>
 
         <Button
@@ -172,6 +166,6 @@ const MessageForm = ({ id, programId, isReply, metadata, isLoading }: Props) =>
       </form>
     </FormProvider>
   );
-};
+}, MessageFormDeprecated);
 
 export { MessageForm };
diff --git a/idea/frontend/src/widgets/programForm/ui/ProgramForm.tsx b/idea/frontend/src/widgets/programForm/ui/ProgramForm.tsx
index fc2308b8ab..488368888b 100644
--- a/idea/frontend/src/widgets/programForm/ui/ProgramForm.tsx
+++ b/idea/frontend/src/widgets/programForm/ui/ProgramForm.tsx
@@ -1,6 +1,5 @@
 import { ProgramMetadata } from '@gear-js/api';
-import { useApi, useBalanceFormat } from '@gear-js/react-hooks';
-import { Input } from '@gear-js/ui';
+import { useBalanceFormat } from '@gear-js/react-hooks';
 import { HexString } from '@polkadot/util/types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useState, useMemo, ReactNode } from 'react';
@@ -12,8 +11,7 @@ import { Payload } from '@/hooks/useProgramActions/types';
 import { FormPayload, getSubmitPayload, getPayloadFormValues, getResetPayloadValue } from '@/features/formPayload';
 import { GasField } from '@/features/gasField';
 import { GasMethod } from '@/shared/config';
-import { FormInput, ValueField } from '@/shared/ui/form';
-import { LabeledCheckbox } from '@/shared/ui';
+import { Input, ValueField, LabeledCheckbox } from '@/shared/ui';
 
 import { INITIAL_VALUES, FormValues, RenderButtonsProps, SubmitHelpers } from '../model';
 import styles from './ProgramForm.module.scss';
@@ -31,7 +29,6 @@ type Props = {
 const ProgramForm = (props: Props) => {
   const { gasMethod, metaHex, metadata, source, fileName = '', renderButtons, onSubmit } = props;
 
-  const { isVaraVersion } = useApi();
   const { getChainBalanceValue, getFormattedGasValue, getChainGasValue } = useBalanceFormat();
   const schema = useValidationSchema();
 
@@ -40,7 +37,7 @@ const ProgramForm = (props: Props) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const methods = useForm<FormValues>({ defaultValues, resolver: yupResolver(schema) });
-  const { register, getValues, setValue, reset } = methods;
+  const { getValues, setValue, reset } = methods;
 
   const [gasInfo, setGasinfo] = useState<Result>();
   const [isDisabled, setIsDisables] = useState(false);
@@ -114,11 +111,11 @@ const ProgramForm = (props: Props) => {
     <FormProvider {...methods}>
       <form onSubmit={methods.handleSubmit(handleSubmitForm)}>
         <div className={styles.formContent}>
-          <FormInput name="programName" label="Name" direction="y" placeholder="Enter program name" block />
+          <Input name="programName" label="Name" direction="y" placeholder="Enter program name" block />
 
           <FormPayload name="payload" label="Initial payload" direction="y" values={payloadFormValues} />
 
-          {!metadata && <Input label="Initial payload type" direction="y" block {...register('payloadType')} />}
+          {!metadata && <Input name="payloadType" label="Initial payload type" direction="y" block />}
 
           <ValueField name="value" label="Initial value:" direction="y" block />
 
@@ -133,9 +130,7 @@ const ProgramForm = (props: Props) => {
             block
           />
 
-          {!isVaraVersion && (
-            <LabeledCheckbox name="keepAlive" label="Account existence:" inputLabel="Keep alive" direction="y" />
-          )}
+          <LabeledCheckbox name="keepAlive" label="Account existence:" inputLabel="Keep alive" direction="y" />
         </div>
 
         <div className={styles.buttons}>{renderButtons({ isDisabled })}</div>
diff --git a/utils/gear-hooks/package.json b/utils/gear-hooks/package.json
index ec62559823..9793b112e4 100644
--- a/utils/gear-hooks/package.json
+++ b/utils/gear-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/react-hooks",
-  "version": "0.9.7",
+  "version": "0.10.0",
   "description": "React hooks used across Gear applications",
   "author": "Gear Technologies",
   "license": "GPL-3.0",
@@ -21,14 +21,14 @@
     "prepare": "yarn build"
   },
   "peerDependencies": {
-    "@gear-js/api": "0.35.2",
-    "@polkadot/api": "10.10.1",
+    "@gear-js/api": "0.36.2",
+    "@polkadot/api": "10.11.2",
     "@polkadot/extension-dapp": "0.46.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@polkadot/api-derive": "10.10.1",
+    "@polkadot/api-derive": "10.11.2",
     "@polkadot/extension-inject": "0.46.5",
     "@polkadot/util": "12.5.1",
     "@substrate/connect": "0.7.33",
@@ -37,10 +37,10 @@
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
-    "@gear-js/api": "0.35.2",
-    "@polkadot/api": "10.10.1",
+    "@gear-js/api": "0.36.2",
+    "@polkadot/api": "10.11.2",
     "@polkadot/extension-dapp": "0.46.5",
-    "@polkadot/types": "10.10.1",
+    "@polkadot/types": "10.11.2",
     "@rollup/plugin-commonjs": "25.0.5",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@types/react": "18.2.28",
diff --git a/utils/gear-hooks/src/context/Api.tsx b/utils/gear-hooks/src/context/Api.tsx
index 33bf7b6a89..68fa846848 100644
--- a/utils/gear-hooks/src/context/Api.tsx
+++ b/utils/gear-hooks/src/context/Api.tsx
@@ -24,13 +24,13 @@ type Value = {
 } & (
   | {
       api: undefined;
-      isVaraVersion: false;
       isApiReady: false;
+      isV110Runtime: false;
     }
   | {
       api: GearApi;
-      isVaraVersion: boolean;
       isApiReady: true;
+      isV110Runtime: boolean;
     }
 );
 
@@ -41,7 +41,7 @@ type Props = ProviderProps & {
 const initialValue = {
   api: undefined,
   isApiReady: false as const,
-  isVaraVersion: false as const,
+  isV110Runtime: false as const,
   switchNetwork: () => Promise.resolve(),
 };
 
@@ -92,8 +92,8 @@ function ApiProvider({ initialArgs, children }: Props) {
   const value = useMemo(
     () =>
       api
-        ? { api, isApiReady: true as const, isVaraVersion: api.specVersion < 1010, switchNetwork }
-        : { api, isApiReady: false as const, isVaraVersion: false as const, switchNetwork },
+        ? { api, isApiReady: true as const, isV110Runtime: api.specVersion >= 1100, switchNetwork }
+        : { api, isApiReady: false as const, isV110Runtime: false as const, switchNetwork },
     [api],
   );
 
diff --git a/utils/gear-hooks/src/hooks/api/block/index.ts b/utils/gear-hooks/src/hooks/api/block/index.ts
new file mode 100644
index 0000000000..cc5924a476
--- /dev/null
+++ b/utils/gear-hooks/src/hooks/api/block/index.ts
@@ -0,0 +1,3 @@
+import { useApproxBlockTimestamp } from './use-approx-block-timestamp';
+
+export { useApproxBlockTimestamp };
diff --git a/utils/gear-hooks/src/hooks/api/block/use-approx-block-timestamp.ts b/utils/gear-hooks/src/hooks/api/block/use-approx-block-timestamp.ts
new file mode 100644
index 0000000000..b3da599eaa
--- /dev/null
+++ b/utils/gear-hooks/src/hooks/api/block/use-approx-block-timestamp.ts
@@ -0,0 +1,40 @@
+import { useContext, useEffect, useState } from 'react';
+
+import { AlertContext, ApiContext } from 'context';
+
+const useApproxBlockTimestamp = (blockNumber: number | undefined) => {
+  const { api, isApiReady } = useContext(ApiContext);
+  const alert = useContext(AlertContext);
+
+  const [blockTimestamp, setBlockTimestamp] = useState<number>();
+  const isBlockTimestampReady = blockTimestamp !== undefined;
+
+  const getBlockTimestamp = async (_blockNumber: number) => {
+    if (!isApiReady) throw new Error('API is not initialized');
+
+    const { block } = await api.rpc.chain.getBlock();
+    const currentBlockNumber = block.header.number.toNumber();
+
+    const blockTime = api.consts.babe.expectedBlockTime.toNumber();
+
+    const timeDifference = (_blockNumber - currentBlockNumber) * blockTime;
+
+    return Date.now() + timeDifference;
+  };
+
+  useEffect(() => {
+    setBlockTimestamp(undefined);
+
+    if (!isApiReady || blockNumber === undefined) return;
+
+    getBlockTimestamp(blockNumber)
+      .then((result) => setBlockTimestamp(result))
+      .catch(({ message }: Error) => alert.error(message));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isApiReady, blockNumber]);
+
+  return { blockTimestamp, isBlockTimestampReady, getBlockTimestamp };
+};
+
+export { useApproxBlockTimestamp };
diff --git a/utils/gear-hooks/src/hooks/api/index.ts b/utils/gear-hooks/src/hooks/api/index.ts
index e297a86496..c3c645966f 100644
--- a/utils/gear-hooks/src/hooks/api/index.ts
+++ b/utils/gear-hooks/src/hooks/api/index.ts
@@ -1,6 +1,6 @@
 import { useReadFullState, useReadWasmState } from './useReadState';
 
-import { useSendMessage, SendMessageOptions, UseSendMessageOptions, VaraSendMessageOptions } from './useSendMessage';
+import { useSendMessage, SendMessageOptions, UseSendMessageOptions } from './useSendMessage';
 
 import { useUploadProgram, useCreateProgram } from './useProgram';
 import {
@@ -12,15 +12,22 @@ import {
 
 import {
   useIsVoucherExists,
-  useVoucherBalance,
   useVoucher,
   useIsAccountVoucherExists,
-  useAccountVoucherBalance,
   useAccountVoucher,
+  useVouchers,
+  useAccountVouchers,
+  useVoucherStatus,
+  useVoucherBalanceDeprecated,
+  useVoucherDeprecated,
+  useAccountVoucherBalanceDeprecated,
+  useAccountVoucherDeprecated,
 } from './voucher';
 
 import { useBalance, useBalanceFormat, useDeriveBalancesAll, useAccountDeriveBalancesAll } from './balance';
 
+import { useApproxBlockTimestamp } from './block';
+
 export {
   useReadFullState,
   useReadWasmState,
@@ -32,16 +39,21 @@ export {
   useHandleCalculateGas,
   useReplyCalculateGas,
   useIsVoucherExists,
-  useVoucherBalance,
   useVoucher,
   useIsAccountVoucherExists,
-  useAccountVoucherBalance,
   useAccountVoucher,
+  useVouchers,
+  useAccountVouchers,
   useBalance,
   useBalanceFormat,
   useDeriveBalancesAll,
   useAccountDeriveBalancesAll,
+  useApproxBlockTimestamp,
+  useVoucherStatus,
+  useVoucherBalanceDeprecated,
+  useVoucherDeprecated,
+  useAccountVoucherBalanceDeprecated,
+  useAccountVoucherDeprecated,
   SendMessageOptions,
   UseSendMessageOptions,
-  VaraSendMessageOptions,
 };
diff --git a/utils/gear-hooks/src/hooks/api/useProgram/types.ts b/utils/gear-hooks/src/hooks/api/useProgram/types.ts
index 4fc8b9065c..a4f00a124e 100644
--- a/utils/gear-hooks/src/hooks/api/useProgram/types.ts
+++ b/utils/gear-hooks/src/hooks/api/useProgram/types.ts
@@ -1,5 +1,5 @@
-import { GasLimit, IProgramCreateOptions, IProgramUploadOptions, Value } from '@gear-js/api';
-import { AnyJson, ISubmittableResult, Signer } from '@polkadot/types/types';
+import { GasLimit, ProgramCreateOptions, ProgramUploadOptions, Value } from '@gear-js/api';
+import { AnyJson, ISubmittableResult } from '@polkadot/types/types';
 import { HexString } from '@polkadot/util/types';
 
 enum Method {
@@ -77,8 +77,8 @@ type Options = {
   salt?: HexString;
 };
 
-type Code = IProgramUploadOptions['code'];
-type CodeId = IProgramCreateOptions['codeId'];
+type Code = ProgramUploadOptions['code'];
+type CodeId = ProgramCreateOptions['codeId'];
 
 type UseProgram = (initPayload: AnyJson, gasLimit: GasLimit, options?: Options) => Promise<void>;
 
diff --git a/utils/gear-hooks/src/hooks/api/useSendMessage.ts b/utils/gear-hooks/src/hooks/api/useSendMessage.ts
index 3c3c43ea10..b462974d91 100644
--- a/utils/gear-hooks/src/hooks/api/useSendMessage.ts
+++ b/utils/gear-hooks/src/hooks/api/useSendMessage.ts
@@ -1,23 +1,14 @@
-import {
-  GasLimit,
-  IMessageSendOptions,
-  MessageQueued,
-  ProgramMetadata,
-  VaraMessageSendOptions,
-  decodeAddress,
-} from '@gear-js/api';
+import { GasLimit, MessageQueued, ProgramMetadata } from '@gear-js/api';
 import { web3FromSource } from '@polkadot/extension-dapp';
 import { EventRecord } from '@polkadot/types/interfaces';
 import { AnyJson, IKeyringPair, ISubmittableResult } from '@polkadot/types/types';
 import { HexString } from '@polkadot/util/types';
 import { SubmittableExtrinsic } from '@polkadot/api/types';
-import BigNumber from 'bignumber.js';
 import { useContext } from 'react';
+
 import { AccountContext, AlertContext, ApiContext } from 'context';
 import { DEFAULT_ERROR_OPTIONS, DEFAULT_SUCCESS_OPTIONS } from 'consts';
 import { getExtrinsicFailedMessage } from 'utils';
-import { useAccountDeriveBalancesAll, useBalanceFormat } from './balance';
-import { useAccountVoucherBalance } from './voucher';
 
 type UseSendMessageOptions = {
   disableAlerts?: boolean;
@@ -30,27 +21,21 @@ type SendMessageOptions = {
   gasLimit: GasLimit;
   value?: string | number;
   keepAlive?: boolean;
-  withVoucher?: boolean;
+  voucherId?: HexString;
   onSuccess?: (messageId: HexString) => void;
   onInBlock?: (messageId: HexString) => void;
   onError?: () => void;
 };
 
-type VaraSendMessageOptions = Omit<SendMessageOptions, 'keepAlive'>;
-
 function useSendMessage(
   destination: HexString,
   metadata: ProgramMetadata | undefined,
-  { disableAlerts, disableCheckBalance, pair }: UseSendMessageOptions = {},
+  { disableAlerts, pair }: UseSendMessageOptions = {},
 ) {
-  const { api, isApiReady, isVaraVersion } = useContext(ApiContext); // сircular dependency fix
+  const { api, isApiReady, isV110Runtime } = useContext(ApiContext); // сircular dependency fix
   const { account } = useContext(AccountContext);
   const alert = useContext(AlertContext);
 
-  const balances = useAccountDeriveBalancesAll();
-  const { voucherBalance } = useAccountVoucherBalance(destination);
-  const { getChainBalanceValue } = useBalanceFormat();
-
   const title = 'gear.sendMessage';
 
   const handleEventsStatus = (
@@ -115,73 +100,33 @@ function useSendMessage(
     }
   };
 
-  const isBalanceValid = (gasLimit: string, withVoucher: boolean) => {
-    if (disableCheckBalance) return true;
+  const getVoucherExtrinsic = (id: HexString, sendExtrinsic: SubmittableExtrinsic<'promise', ISubmittableResult>) => {
     if (!isApiReady) throw new Error('API is not initialized');
-    if (!balances || !voucherBalance) throw new Error('No balance for account');
-
-    const existentialDeposit = api.existentialDeposit.toString();
-
-    const { freeBalance } = balances;
-    const balance = (withVoucher ? voucherBalance : freeBalance).toString();
-
-    const valuePerGas = api.valuePerGas.toString();
-    const gasLimitValue = BigNumber(gasLimit).plus(gasLimit).multipliedBy(valuePerGas);
 
-    const extraCost = getChainBalanceValue(5);
-    const transactionCost = gasLimitValue.plus(existentialDeposit).plus(extraCost);
+    const args = { SendMessage: sendExtrinsic };
 
-    return BigNumber(balance).isGreaterThanOrEqualTo(transactionCost);
+    return isV110Runtime ? api.voucher.call(id, args) : api.voucher.callDeprecated(args);
   };
 
-  const sendMessage = async (args: SendMessageOptions | VaraSendMessageOptions) => {
+  const sendMessage = async (args: SendMessageOptions) => {
     if (!isApiReady) throw new Error('API is not initialized');
     if (!account) throw new Error('No account address');
     if (!metadata) throw new Error('Metadata not found');
 
     const alertId = disableAlerts ? '' : alert.loading('Sign In', { title });
 
-    const { payload, gasLimit, value = 0, withVoucher = false, onSuccess, onInBlock, onError } = args;
-    const { address, decodedAddress, meta } = account;
+    const { payload, gasLimit, value = 0, voucherId, onSuccess, onInBlock, onError } = args;
+    const { address, meta } = account;
     const { source } = meta;
 
-    if (!isBalanceValid(gasLimit.toString(), withVoucher)) {
-      if (onError) onError();
-
-      const message = withVoucher ? 'Low balance on voucher' : 'Low balance on account';
-
-      if (disableAlerts) {
-        alert.error(message);
-      } else {
-        alert.update(alertId, message, DEFAULT_ERROR_OPTIONS);
-      }
-
-      return;
-    }
-
     const baseMessage = { destination, payload, gasLimit, value };
 
-    let message: IMessageSendOptions | VaraMessageSendOptions;
-
-    if (isVaraVersion) {
-      const _account = pair ? decodeAddress(pair.address) : decodedAddress;
-
-      message = { ...baseMessage, prepaid: withVoucher, account: withVoucher ? _account : undefined };
-    } else {
-      const keepAlive = 'keepAlive' in args ? args.keepAlive : false;
-      message = { ...baseMessage, keepAlive };
-    }
+    const keepAlive = 'keepAlive' in args ? args.keepAlive : false;
+    const message = { ...baseMessage, keepAlive };
 
     try {
       const sendExtrinsic = api.message.send(message, metadata);
-      let extrinsic: SubmittableExtrinsic<'promise', ISubmittableResult>;
-
-      if (isVaraVersion) {
-        extrinsic = sendExtrinsic;
-      } else {
-        // TODO: voucher call into standalone hook?
-        extrinsic = withVoucher ? api.voucher.call({ SendMessage: sendExtrinsic }) : sendExtrinsic;
-      }
+      const extrinsic = voucherId ? getVoucherExtrinsic(voucherId, sendExtrinsic) : sendExtrinsic;
 
       const callback = (result: ISubmittableResult) => handleStatus(result, alertId, onSuccess, onInBlock, onError);
 
@@ -210,4 +155,4 @@ function useSendMessage(
   return sendMessage;
 }
 
-export { useSendMessage, SendMessageOptions, UseSendMessageOptions, VaraSendMessageOptions };
+export { useSendMessage, SendMessageOptions, UseSendMessageOptions };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/index.ts b/utils/gear-hooks/src/hooks/api/voucher/index.ts
index 219412fd49..6afbe1c67f 100644
--- a/utils/gear-hooks/src/hooks/api/voucher/index.ts
+++ b/utils/gear-hooks/src/hooks/api/voucher/index.ts
@@ -1,16 +1,20 @@
-import { useIsVoucherExists } from './use-is-voucher-exists';
-import { useVoucherBalance } from './use-voucher-balance';
-import { useVoucher } from './use-voucher';
-
-import { useIsAccountVoucherExists } from './use-is-account-voucher-exists';
-import { useAccountVoucherBalance } from './use-account-voucher-balance';
-import { useAccountVoucher } from './use-account-voucher';
+import { useIsVoucherExists, useIsAccountVoucherExists } from './use-is-voucher-exists';
+import { useVoucher, useAccountVoucher } from './use-voucher';
+import { useVouchers, useAccountVouchers } from './use-vouchers';
+import { useVoucherStatus } from './use-voucher-status';
+import { useAccountVoucherBalanceDeprecated, useVoucherBalanceDeprecated } from './use-voucher-balance-deprecated';
+import { useAccountVoucherDeprecated, useVoucherDeprecated } from './use-voucher-deprecated';
 
 export {
   useIsVoucherExists,
-  useVoucherBalance,
   useVoucher,
   useIsAccountVoucherExists,
-  useAccountVoucherBalance,
   useAccountVoucher,
+  useVouchers,
+  useAccountVouchers,
+  useVoucherStatus,
+  useVoucherBalanceDeprecated,
+  useVoucherDeprecated,
+  useAccountVoucherBalanceDeprecated,
+  useAccountVoucherDeprecated,
 };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-account-voucher-balance.ts b/utils/gear-hooks/src/hooks/api/voucher/use-account-voucher-balance.ts
deleted file mode 100644
index ebf19e7376..0000000000
--- a/utils/gear-hooks/src/hooks/api/voucher/use-account-voucher-balance.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AccountContext } from 'context';
-import { useContext } from 'react';
-import { useVoucherBalance } from './use-voucher-balance';
-import { HexString } from '@gear-js/api';
-
-function useAccountVoucherBalance(programId: HexString | undefined) {
-  const { account } = useContext(AccountContext);
-
-  return useVoucherBalance(programId, account?.decodedAddress);
-}
-
-export { useAccountVoucherBalance };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-account-voucher.ts b/utils/gear-hooks/src/hooks/api/voucher/use-account-voucher.ts
deleted file mode 100644
index 1ae7172d4b..0000000000
--- a/utils/gear-hooks/src/hooks/api/voucher/use-account-voucher.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { useVoucher } from './use-voucher';
-import { AccountContext } from 'context';
-import { HexString } from '@gear-js/api';
-
-function useAccountVoucher(programId: HexString | undefined) {
-  const { account } = useContext(AccountContext);
-
-  return useVoucher(programId, account?.decodedAddress);
-}
-
-export { useAccountVoucher };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-is-account-voucher-exists.ts b/utils/gear-hooks/src/hooks/api/voucher/use-is-account-voucher-exists.ts
deleted file mode 100644
index eed5c3ab91..0000000000
--- a/utils/gear-hooks/src/hooks/api/voucher/use-is-account-voucher-exists.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { HexString } from '@gear-js/api';
-import { useIsVoucherExists } from './use-is-voucher-exists';
-import { useContext } from 'react';
-import { AccountContext } from 'context';
-
-function useIsAccountVoucherExists(programId: HexString | undefined) {
-  const { account } = useContext(AccountContext);
-
-  return useIsVoucherExists(programId, account?.decodedAddress);
-}
-
-export { useIsAccountVoucherExists };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-is-voucher-exists.ts b/utils/gear-hooks/src/hooks/api/voucher/use-is-voucher-exists.ts
index e6cb2e290d..13b49b7c8f 100644
--- a/utils/gear-hooks/src/hooks/api/voucher/use-is-voucher-exists.ts
+++ b/utils/gear-hooks/src/hooks/api/voucher/use-is-voucher-exists.ts
@@ -1,7 +1,8 @@
 import { HexString } from '@gear-js/api';
-import { AlertContext, ApiContext } from 'context';
 import { useState, useEffect, useContext } from 'react';
 
+import { AccountContext, AlertContext, ApiContext } from 'context';
+
 function useIsVoucherExists(programId: HexString | undefined, accountAddress: HexString | undefined) {
   const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
   const alert = useContext(AlertContext);
@@ -15,7 +16,7 @@ function useIsVoucherExists(programId: HexString | undefined, accountAddress: He
     if (!programId || !isApiReady || !accountAddress) return;
 
     api.voucher
-      .exists(programId, accountAddress)
+      .exists(accountAddress, programId)
       .then((result) => setIsVoucherExists(result))
       .catch(({ message }: Error) => alert.error(message));
 
@@ -25,4 +26,10 @@ function useIsVoucherExists(programId: HexString | undefined, accountAddress: He
   return { isVoucherExists, isVoucherExistsReady };
 }
 
-export { useIsVoucherExists };
+function useIsAccountVoucherExists(programId: HexString | undefined) {
+  const { account } = useContext(AccountContext);
+
+  return useIsVoucherExists(programId, account?.decodedAddress);
+}
+
+export { useIsVoucherExists, useIsAccountVoucherExists };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance-deprecated.ts b/utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance-deprecated.ts
new file mode 100644
index 0000000000..f9f5929a8c
--- /dev/null
+++ b/utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance-deprecated.ts
@@ -0,0 +1,22 @@
+import { HexString, generateVoucherId } from '@gear-js/api';
+import { useContext } from 'react';
+
+import { AccountContext } from 'context';
+
+import { useBalance } from '../balance';
+
+function useVoucherBalanceDeprecated(programId: HexString | undefined, accountAddress: HexString | undefined) {
+  const { balance, isBalanceReady } = useBalance(
+    programId && accountAddress ? generateVoucherId(accountAddress, programId) : undefined,
+  );
+
+  return { voucherBalance: balance, isVoucherBalanceReady: isBalanceReady };
+}
+
+function useAccountVoucherBalanceDeprecated(programId: HexString | undefined) {
+  const { account } = useContext(AccountContext);
+
+  return useVoucherBalanceDeprecated(programId, account?.decodedAddress);
+}
+
+export { useVoucherBalanceDeprecated, useAccountVoucherBalanceDeprecated };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance.ts b/utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance.ts
deleted file mode 100644
index 598c9b536e..0000000000
--- a/utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { HexString, generateVoucherId } from '@gear-js/api';
-
-import { useBalance } from '../balance/use-balance';
-
-function useVoucherBalance(programId: HexString | undefined, accountAddress: HexString | undefined) {
-  const { balance, isBalanceReady } = useBalance(
-    programId && accountAddress ? generateVoucherId(accountAddress, programId) : undefined,
-  );
-
-  return { voucherBalance: balance, isVoucherBalanceReady: isBalanceReady };
-}
-
-export { useVoucherBalance };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-voucher-deprecated.ts b/utils/gear-hooks/src/hooks/api/voucher/use-voucher-deprecated.ts
new file mode 100644
index 0000000000..d1b63ed6f9
--- /dev/null
+++ b/utils/gear-hooks/src/hooks/api/voucher/use-voucher-deprecated.ts
@@ -0,0 +1,24 @@
+import { HexString } from '@polkadot/util/types';
+import { useContext } from 'react';
+
+import { AccountContext } from 'context';
+
+import { useVoucherBalanceDeprecated } from './use-voucher-balance-deprecated';
+import { useIsVoucherExists } from './use-is-voucher-exists';
+
+function useVoucherDeprecated(programId: HexString | undefined, accountAddress: HexString | undefined) {
+  const { isVoucherExists, isVoucherExistsReady } = useIsVoucherExists(programId, accountAddress);
+  const { voucherBalance, isVoucherBalanceReady } = useVoucherBalanceDeprecated(programId, accountAddress);
+
+  const isVoucherReady = isVoucherExistsReady && isVoucherBalanceReady;
+
+  return { isVoucherExists, voucherBalance, isVoucherReady };
+}
+
+function useAccountVoucherDeprecated(programId: HexString | undefined) {
+  const { account } = useContext(AccountContext);
+
+  return useVoucherDeprecated(programId, account?.decodedAddress);
+}
+
+export { useVoucherDeprecated, useAccountVoucherDeprecated };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-voucher-status.ts b/utils/gear-hooks/src/hooks/api/voucher/use-voucher-status.ts
new file mode 100644
index 0000000000..429e3adebf
--- /dev/null
+++ b/utils/gear-hooks/src/hooks/api/voucher/use-voucher-status.ts
@@ -0,0 +1,13 @@
+import { useApproxBlockTimestamp } from '../block';
+
+function useVoucherStatus(expirationBlock: number | undefined) {
+  const { blockTimestamp, isBlockTimestampReady } = useApproxBlockTimestamp(expirationBlock);
+
+  const expirationTimestamp = blockTimestamp;
+  const isVoucherStatusReady = isBlockTimestampReady;
+  const isVoucherActive = !!expirationTimestamp && expirationTimestamp > Date.now();
+
+  return { expirationTimestamp, isVoucherStatusReady, isVoucherActive };
+}
+
+export { useVoucherStatus };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-voucher.ts b/utils/gear-hooks/src/hooks/api/voucher/use-voucher.ts
index b5af30f55d..bccffe868c 100644
--- a/utils/gear-hooks/src/hooks/api/voucher/use-voucher.ts
+++ b/utils/gear-hooks/src/hooks/api/voucher/use-voucher.ts
@@ -1,15 +1,33 @@
-import { HexString } from '@polkadot/util/types';
+import { HexString, IVoucherDetails } from '@gear-js/api';
+import { useContext, useEffect, useState } from 'react';
 
-import { useIsVoucherExists } from './use-is-voucher-exists';
-import { useVoucherBalance } from './use-voucher-balance';
+import { AccountContext, AlertContext, ApiContext } from 'context';
 
-function useVoucher(programId: HexString | undefined, accountAddress: HexString | undefined) {
-  const { isVoucherExists, isVoucherExistsReady } = useIsVoucherExists(programId, accountAddress);
-  const { voucherBalance, isVoucherBalanceReady } = useVoucherBalance(programId, accountAddress);
+function useVoucher(voucherId: HexString | undefined, accountAddress: string | undefined) {
+  const { api } = useContext(ApiContext);
+  const alert = useContext(AlertContext);
 
-  const isVoucherReady = isVoucherExistsReady && isVoucherBalanceReady;
+  const [voucher, setVoucher] = useState<IVoucherDetails>();
+  const isVoucherReady = voucher !== undefined;
 
-  return { isVoucherExists, voucherBalance, isVoucherReady };
+  useEffect(() => {
+    setVoucher(undefined);
+
+    if (!api || !accountAddress || !voucherId) return;
+
+    api.voucher
+      .getDetails(accountAddress, voucherId)
+      .then((result) => setVoucher(result))
+      .catch(({ message }) => alert.error(message));
+  }, [api, accountAddress, voucherId]);
+
+  return { voucher, isVoucherReady };
+}
+
+function useAccountVoucher(voucherId: HexString | undefined) {
+  const { account } = useContext(AccountContext);
+
+  return useVoucher(voucherId, account?.address);
 }
 
-export { useVoucher };
+export { useVoucher, useAccountVoucher };
diff --git a/utils/gear-hooks/src/hooks/api/voucher/use-vouchers.ts b/utils/gear-hooks/src/hooks/api/voucher/use-vouchers.ts
new file mode 100644
index 0000000000..49395554bc
--- /dev/null
+++ b/utils/gear-hooks/src/hooks/api/voucher/use-vouchers.ts
@@ -0,0 +1,47 @@
+import { HexString, IVoucherDetails } from '@gear-js/api';
+import { useState, useEffect, useContext } from 'react';
+
+import { AccountContext, AlertContext, ApiContext } from 'context';
+
+function useVouchers(accountAddress: string | undefined, programId?: HexString | undefined) {
+  const { api, isApiReady } = useContext(ApiContext);
+  const alert = useContext(AlertContext);
+
+  const [vouchers, setVouchers] = useState<Record<HexString, IVoucherDetails>>();
+  const isEachVoucherReady = vouchers !== undefined;
+
+  const getVouchers = async (_accountAddress: string, _programId?: HexString) => {
+    if (!isApiReady) throw new Error('API is not initialized');
+
+    const _vouchers = await api.voucher.getAllForAccount(_accountAddress);
+
+    if (!_programId) return _vouchers;
+
+    const entries = Object.entries(_vouchers);
+    const entriesForProgram = entries.filter(([, { programs }]) => !programs.length || programs.includes(_programId));
+
+    return Object.fromEntries(entriesForProgram);
+  };
+
+  useEffect(() => {
+    setVouchers(undefined);
+
+    if (!api || !accountAddress) return;
+
+    getVouchers(accountAddress, programId)
+      .then((result) => setVouchers(result))
+      .catch(({ message }) => alert.error(message));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [api, accountAddress, programId]);
+
+  return { vouchers, isEachVoucherReady };
+}
+
+function useAccountVouchers(programId?: HexString | undefined) {
+  const { account } = useContext(AccountContext);
+
+  return useVouchers(account?.address, programId);
+}
+
+export { useVouchers, useAccountVouchers };
diff --git a/utils/gear-hooks/src/hooks/handlers/use-send-message-handler.ts b/utils/gear-hooks/src/hooks/handlers/use-send-message-handler.ts
index b3f672b9e6..87e5a97d13 100644
--- a/utils/gear-hooks/src/hooks/handlers/use-send-message-handler.ts
+++ b/utils/gear-hooks/src/hooks/handlers/use-send-message-handler.ts
@@ -3,13 +3,7 @@ import { HexString } from '@polkadot/util/types';
 import { useContext } from 'react';
 import { AlertContext, ApiContext } from 'context';
 import { getAutoGasLimit } from 'utils';
-import {
-  SendMessageOptions,
-  UseSendMessageOptions,
-  useHandleCalculateGas,
-  useSendMessage,
-  VaraSendMessageOptions,
-} from '../api';
+import { SendMessageOptions, UseSendMessageOptions, useHandleCalculateGas, useSendMessage } from '../api';
 
 function useSendMessageHandler(
   destination: HexString,
@@ -22,7 +16,7 @@ function useSendMessageHandler(
   const calculateGas = useHandleCalculateGas(destination, metadata);
   const sendMessage = useSendMessage(destination, metadata, options);
 
-  return (args: Omit<SendMessageOptions, 'gasLimit'> | Omit<VaraSendMessageOptions, 'gasLimit'>) => {
+  return (args: Omit<SendMessageOptions, 'gasLimit'>) => {
     if (!isApiReady) throw new Error('API is not initialized');
 
     const { payload, value } = args;
diff --git a/utils/gear-hooks/src/hooks/index.ts b/utils/gear-hooks/src/hooks/index.ts
index 36791f7e56..e2f6c4d0a8 100644
--- a/utils/gear-hooks/src/hooks/index.ts
+++ b/utils/gear-hooks/src/hooks/index.ts
@@ -9,13 +9,19 @@ import {
   useHandleCalculateGas,
   useReplyCalculateGas,
   useIsVoucherExists,
-  useVoucherBalance,
   useVoucher,
   useIsAccountVoucherExists,
-  useAccountVoucherBalance,
   useAccountVoucher,
+  useVouchers,
+  useAccountVouchers,
   useBalance,
   useBalanceFormat,
+  useApproxBlockTimestamp,
+  useVoucherStatus,
+  useVoucherBalanceDeprecated,
+  useVoucherDeprecated,
+  useAccountVoucherBalanceDeprecated,
+  useAccountVoucherDeprecated,
   useDeriveBalancesAll,
   useAccountDeriveBalancesAll,
   SendMessageOptions,
@@ -35,11 +41,11 @@ export {
   useHandleCalculateGas,
   useReplyCalculateGas,
   useIsVoucherExists,
-  useVoucherBalance,
   useVoucher,
   useIsAccountVoucherExists,
-  useAccountVoucherBalance,
   useAccountVoucher,
+  useVouchers,
+  useAccountVouchers,
   useBalance,
   useBalanceFormat,
   useDeriveBalancesAll,
@@ -49,6 +55,12 @@ export {
   useApi,
   useCreateHandler,
   useSendMessageHandler,
+  useApproxBlockTimestamp,
+  useVoucherStatus,
+  useVoucherBalanceDeprecated,
+  useVoucherDeprecated,
+  useAccountVoucherBalanceDeprecated,
+  useAccountVoucherDeprecated,
   SendMessageOptions,
   UseSendMessageOptions,
 };
diff --git a/utils/gear-hooks/src/index.ts b/utils/gear-hooks/src/index.ts
index 1fb2aa195c..ad3ff273ea 100644
--- a/utils/gear-hooks/src/index.ts
+++ b/utils/gear-hooks/src/index.ts
@@ -9,11 +9,11 @@ import {
   useHandleCalculateGas,
   useReplyCalculateGas,
   useIsVoucherExists,
-  useVoucherBalance,
   useVoucher,
   useIsAccountVoucherExists,
-  useAccountVoucherBalance,
   useAccountVoucher,
+  useVouchers,
+  useAccountVouchers,
   useBalance,
   useBalanceFormat,
   useDeriveBalancesAll,
@@ -23,11 +23,17 @@ import {
   useApi,
   useCreateHandler,
   useSendMessageHandler,
+  useApproxBlockTimestamp,
+  useVoucherStatus,
+  useVoucherBalanceDeprecated,
+  useVoucherDeprecated,
+  useAccountVoucherBalanceDeprecated,
+  useAccountVoucherDeprecated,
   SendMessageOptions,
   UseSendMessageOptions,
 } from './hooks';
 
-import { withoutCommas, getVaraAddress } from './utils';
+import { withoutCommas, getVaraAddress, getTypedEntries } from './utils';
 
 import { AccountProvider, ApiProvider, AlertProvider } from './context';
 
@@ -51,6 +57,7 @@ import {
   DefaultTemplateOptions,
   ProviderProps,
   Account,
+  Entries,
 } from './types';
 
 export {
@@ -64,11 +71,11 @@ export {
   useHandleCalculateGas,
   useReplyCalculateGas,
   useIsVoucherExists,
-  useVoucherBalance,
   useVoucher,
   useIsAccountVoucherExists,
-  useAccountVoucherBalance,
   useAccountVoucher,
+  useVouchers,
+  useAccountVouchers,
   useBalance,
   useBalanceFormat,
   useDeriveBalancesAll,
@@ -83,6 +90,13 @@ export {
   useSendMessageHandler,
   withoutCommas,
   getVaraAddress,
+  getTypedEntries,
+  useApproxBlockTimestamp,
+  useVoucherStatus,
+  useVoucherBalanceDeprecated,
+  useVoucherDeprecated,
+  useAccountVoucherBalanceDeprecated,
+  useAccountVoucherDeprecated,
   DEFAULT_OPTIONS,
   DEFAULT_INFO_OPTIONS,
   DEFAULT_ERROR_OPTIONS,
@@ -104,4 +118,5 @@ export type {
   Account,
   SendMessageOptions,
   UseSendMessageOptions,
+  Entries,
 };
diff --git a/utils/gear-hooks/src/types/index.ts b/utils/gear-hooks/src/types/index.ts
index 5aa7b4a9eb..91a8d98fea 100644
--- a/utils/gear-hooks/src/types/index.ts
+++ b/utils/gear-hooks/src/types/index.ts
@@ -17,6 +17,12 @@ type Account = InjectedAccountWithMeta & {
   decodedAddress: HexString;
 };
 
+// in case Object.entries return value is immutable
+// ref: https://stackoverflow.com/a/60142095
+type Entries<T> = {
+  [K in keyof T]: [K, T[K]];
+}[keyof T][];
+
 export { AlertType };
 export type {
   AlertOptions,
@@ -28,4 +34,5 @@ export type {
   DefaultTemplateOptions,
   ProviderProps,
   Account,
+  Entries,
 };
diff --git a/utils/gear-hooks/src/utils/index.ts b/utils/gear-hooks/src/utils/index.ts
index f0372ef4c9..cfea1e3ec1 100644
--- a/utils/gear-hooks/src/utils/index.ts
+++ b/utils/gear-hooks/src/utils/index.ts
@@ -2,6 +2,8 @@ import { GasInfo, GearApi } from '@gear-js/api';
 import { Keyring } from '@polkadot/api';
 import { Event } from '@polkadot/types/interfaces';
 import { bnToBn } from '@polkadot/util';
+
+import { Entries } from 'types';
 import { VARA_SS58_FORMAT } from 'consts';
 
 const getAutoGasLimit = ({ waited, min_limit }: GasInfo) =>
@@ -10,12 +12,13 @@ const getAutoGasLimit = ({ waited, min_limit }: GasInfo) =>
 const withoutCommas = (value: string) => value.replace(/,/g, '');
 
 const getExtrinsicFailedMessage = (api: GearApi, event: Event) => {
-  const { docs, method: errorMethod } = api.getExtrinsicFailedError(event);
-  const formattedDocs = docs.filter(Boolean).join('. ');
+  const { docs, method } = api.getExtrinsicFailedError(event);
 
-  return `${errorMethod}: ${formattedDocs}`;
+  return `${method}: ${docs}`;
 };
 
 const getVaraAddress = (address: string) => new Keyring().encodeAddress(address, VARA_SS58_FORMAT);
 
-export { getAutoGasLimit, withoutCommas, getExtrinsicFailedMessage, getVaraAddress };
+const getTypedEntries = <T extends object>(value: T) => Object.entries(value) as Entries<T>;
+
+export { getAutoGasLimit, withoutCommas, getExtrinsicFailedMessage, getVaraAddress, getTypedEntries };
diff --git a/utils/gear-ui/package.json b/utils/gear-ui/package.json
index 5fdcf391c2..952ae81fe9 100644
--- a/utils/gear-ui/package.json
+++ b/utils/gear-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/ui",
-  "version": "0.5.21",
+  "version": "0.5.22",
   "description": "React UI components used across Gear applications",
   "author": "Gear Technologies",
   "license": "GPL-3.0",
diff --git a/utils/gear-ui/src/components/FileInput/FileInput.tsx b/utils/gear-ui/src/components/FileInput/FileInput.tsx
index d7e4536c7d..4dec0f9806 100644
--- a/utils/gear-ui/src/components/FileInput/FileInput.tsx
+++ b/utils/gear-ui/src/components/FileInput/FileInput.tsx
@@ -17,6 +17,7 @@ import { InputWrapper } from '../utils';
 import { ReactComponent as RemoveSVG } from './images/remove.svg';
 import { ReactComponent as SelectSVG } from './images/select.svg';
 import styles from './FileInput.module.scss';
+import { useChangeEffect } from 'hooks';
 
 type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'accept'> &
   Omit<InputProps, 'color'> & {
@@ -86,8 +87,7 @@ const FileInput = forwardRef((props: Props, forwardedRef: ForwardedRef<HTMLInput
     setFile(eventFile);
   };
 
-  // TODO: replace w/ useChangeEffect
-  useEffect(() => {
+  useChangeEffect(() => {
     if (!value) reset();
   }, [value]);
 
diff --git a/utils/gear-ui/src/components/Select/Select.tsx b/utils/gear-ui/src/components/Select/Select.tsx
index 7953602ba3..9dd086e3aa 100644
--- a/utils/gear-ui/src/components/Select/Select.tsx
+++ b/utils/gear-ui/src/components/Select/Select.tsx
@@ -1,17 +1,20 @@
-import { OptionHTMLAttributes, SelectHTMLAttributes, forwardRef, ForwardedRef, useId } from 'react';
+import { OptionHTMLAttributes, SelectHTMLAttributes, forwardRef, ForwardedRef, useId, ReactNode } from 'react';
 import clsx from 'clsx';
 import { InputProps } from '../../types';
 import { InputWrapper } from '../utils';
 import styles from './Select.module.scss';
 
 type Props = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> &
-  InputProps & {
-    options: OptionHTMLAttributes<HTMLOptionElement>[];
-  };
+  InputProps &
+  (
+    | {
+        options: OptionHTMLAttributes<HTMLOptionElement>[];
+      }
+    | { children: ReactNode }
+  );
 
 const Select = forwardRef((props: Props, ref: ForwardedRef<HTMLSelectElement>) => {
   const {
-    options,
     label,
     className,
     error,
@@ -36,7 +39,8 @@ const Select = forwardRef((props: Props, ref: ForwardedRef<HTMLSelectElement>) =
 
   const id = useId();
 
-  const getOptions = () => options.map((option, index) => <option key={index} {...option} />);
+  const getOptions = () =>
+    'options' in props ? props.options.map((option, index) => <option key={index} {...option} />) : props.children;
 
   return (
     <InputWrapper
diff --git a/utils/gear-ui/src/hooks/index.ts b/utils/gear-ui/src/hooks/index.ts
index b26db3646d..b1b9644193 100644
--- a/utils/gear-ui/src/hooks/index.ts
+++ b/utils/gear-ui/src/hooks/index.ts
@@ -1,3 +1,4 @@
 import { useClearButton } from './useClearButton';
+import { useChangeEffect } from './useChangeEffect';
 
-export { useClearButton };
+export { useClearButton, useChangeEffect };
diff --git a/utils/gear-ui/src/hooks/useChangeEffect.ts b/utils/gear-ui/src/hooks/useChangeEffect.ts
new file mode 100644
index 0000000000..c917a93cec
--- /dev/null
+++ b/utils/gear-ui/src/hooks/useChangeEffect.ts
@@ -0,0 +1,25 @@
+import { EffectCallback, DependencyList, useRef, useEffect } from 'react';
+
+const useChangeEffect = (callback: EffectCallback, dependencies: DependencyList) => {
+  const mounted = useRef(false);
+
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (mounted.current) {
+      return callback();
+    }
+
+    mounted.current = true;
+    return undefined;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+};
+
+export { useChangeEffect };
diff --git a/yarn.lock b/yarn.lock
index c7dd8533d5..71c0d13ae7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2313,25 +2313,25 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@gear-js/api@npm:0.35.2":
-  version: 0.35.2
-  resolution: "@gear-js/api@npm:0.35.2"
+"@gear-js/api@npm:0.36.0":
+  version: 0.36.0
+  resolution: "@gear-js/api@npm:0.36.0"
   peerDependencies:
-    "@polkadot/api": 10.10.1
-    "@polkadot/wasm-crypto": 7.2.2
+    "@polkadot/api": 10.11.2
+    "@polkadot/wasm-crypto": 7.3.2
     rxjs: 7.8.1
-  checksum: de59f1dbd4a4cdd8fc5adf28d21b7b21b7d6d0de74c4bfa18435516b38e137c46fc78fb4db3a394c3b45d68426383e5aee0c8e3bba4c15d690c87d0ff8013514
+  checksum: 204f6314d995df88e5b964ecbd4410bec3773482d625a020d8ca2511867c856e0b7c2fa9b7664c6bcc98b39aa619caec3263c96414988b773150e52e11fe924a
   languageName: node
   linkType: hard
 
-"@gear-js/api@npm:0.36.0":
-  version: 0.36.0
-  resolution: "@gear-js/api@npm:0.36.0"
+"@gear-js/api@npm:0.36.2":
+  version: 0.36.2
+  resolution: "@gear-js/api@npm:0.36.2"
   peerDependencies:
     "@polkadot/api": 10.11.2
     "@polkadot/wasm-crypto": 7.3.2
     rxjs: 7.8.1
-  checksum: 204f6314d995df88e5b964ecbd4410bec3773482d625a020d8ca2511867c856e0b7c2fa9b7664c6bcc98b39aa619caec3263c96414988b773150e52e11fe924a
+  checksum: fcb73edcae08e33b95bc8e8701379529125180836d52af5e8bded11546a0eadb6e50e66fc9a5305fa1c9e3a63f9de8852b456bcc0fcf40596571528b680e3de1
   languageName: node
   linkType: hard
 
@@ -2350,15 +2350,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@gear-js/frontend@workspace:idea/frontend"
   dependencies:
-    "@gear-js/api": 0.35.2
+    "@gear-js/api": 0.36.2
     "@gear-js/react-hooks": "workspace:^"
     "@gear-js/ui": "workspace:^"
     "@hcaptcha/react-hcaptcha": 1.8.1
     "@hookform/resolvers": 3.3.2
-    "@polkadot/api": 10.10.1
+    "@polkadot/api": 10.11.2
     "@polkadot/extension-dapp": 0.46.5
     "@polkadot/react-identicon": 3.6.3
-    "@polkadot/types": 10.10.1
+    "@polkadot/types": 10.11.2
     "@polkadot/util": 12.5.1
     "@react-aria/utils": 3.21.0
     "@types/lodash.isequal": 4.5.6
@@ -2405,6 +2405,7 @@ __metadata:
     vite-plugin-node-polyfills: 0.15.0
     vite-plugin-svgr: 4.1.0
     yup: 1.3.2
+    zod: 3.22.4
   languageName: unknown
   linkType: soft
 
@@ -2451,12 +2452,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@gear-js/react-hooks@workspace:utils/gear-hooks"
   dependencies:
-    "@gear-js/api": 0.35.2
-    "@polkadot/api": 10.10.1
-    "@polkadot/api-derive": 10.10.1
+    "@gear-js/api": 0.36.2
+    "@polkadot/api": 10.11.2
+    "@polkadot/api-derive": 10.11.2
     "@polkadot/extension-dapp": 0.46.5
     "@polkadot/extension-inject": 0.46.5
-    "@polkadot/types": 10.10.1
+    "@polkadot/types": 10.11.2
     "@polkadot/util": 12.5.1
     "@rollup/plugin-commonjs": 25.0.5
     "@rollup/plugin-node-resolve": 15.2.3
@@ -2475,8 +2476,8 @@ __metadata:
     rollup-plugin-typescript2: 0.36.0
     typescript: 5.2.2
   peerDependencies:
-    "@gear-js/api": 0.35.2
-    "@polkadot/api": 10.10.1
+    "@gear-js/api": 0.36.2
+    "@polkadot/api": 10.11.2
     "@polkadot/extension-dapp": 0.46.5
     react: 18.2.0
     react-dom: 18.2.0
@@ -3101,21 +3102,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-augment@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/api-augment@npm:10.10.1"
-  dependencies:
-    "@polkadot/api-base": 10.10.1
-    "@polkadot/rpc-augment": 10.10.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/types-augment": 10.10.1
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/util": ^12.5.1
-    tslib: ^2.6.2
-  checksum: 16ca2d71215019faba506b6dc455ef15ea1eec8b97bd146aef49a04ae15dc9246405540219bfbea36027ee50c5dbb15885296c30ee98908afdd7a56626efd06c
-  languageName: node
-  linkType: hard
-
 "@polkadot/api-augment@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/api-augment@npm:10.11.2"
@@ -3131,19 +3117,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-base@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/api-base@npm:10.10.1"
-  dependencies:
-    "@polkadot/rpc-core": 10.10.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/util": ^12.5.1
-    rxjs: ^7.8.1
-    tslib: ^2.6.2
-  checksum: 374a4378484817b29c52908a9dac649b4d4f231db21a0b0b3d3ec3331c7b9b9c374c103b5e64d028c212b8ab3eb98244cd760d20e2fe5f46a8fdc1d923555047
-  languageName: node
-  linkType: hard
-
 "@polkadot/api-base@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/api-base@npm:10.11.2"
@@ -3157,24 +3130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/api-derive@npm:10.10.1"
-  dependencies:
-    "@polkadot/api": 10.10.1
-    "@polkadot/api-augment": 10.10.1
-    "@polkadot/api-base": 10.10.1
-    "@polkadot/rpc-core": 10.10.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/util": ^12.5.1
-    "@polkadot/util-crypto": ^12.5.1
-    rxjs: ^7.8.1
-    tslib: ^2.6.2
-  checksum: ff0f016d39aa73f55a881927e6ae3dd75c2a81fe4095cdda5e558f420d815a12c204e6a2082acbef2c74867b810d41ef349de2b7924d46957be7260b71fb1512
-  languageName: node
-  linkType: hard
-
 "@polkadot/api-derive@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/api-derive@npm:10.11.2"
@@ -3193,31 +3148,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/api@npm:10.10.1"
-  dependencies:
-    "@polkadot/api-augment": 10.10.1
-    "@polkadot/api-base": 10.10.1
-    "@polkadot/api-derive": 10.10.1
-    "@polkadot/keyring": ^12.5.1
-    "@polkadot/rpc-augment": 10.10.1
-    "@polkadot/rpc-core": 10.10.1
-    "@polkadot/rpc-provider": 10.10.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/types-augment": 10.10.1
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/types-create": 10.10.1
-    "@polkadot/types-known": 10.10.1
-    "@polkadot/util": ^12.5.1
-    "@polkadot/util-crypto": ^12.5.1
-    eventemitter3: ^5.0.1
-    rxjs: ^7.8.1
-    tslib: ^2.6.2
-  checksum: de1aa727b63fb921854840fe2d18b55b99f512f4d3e08d3b895fceea7891f6dd0febe6aa5fb7b1778494c78d6a6a7ebd17d426ba2e3df459aa974b7bb8fee19c
-  languageName: node
-  linkType: hard
-
 "@polkadot/api@npm:10.11.2, @polkadot/api@npm:^10.9.1":
   version: 10.11.2
   resolution: "@polkadot/api@npm:10.11.2"
@@ -3327,19 +3257,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-augment@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/rpc-augment@npm:10.10.1"
-  dependencies:
-    "@polkadot/rpc-core": 10.10.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/util": ^12.5.1
-    tslib: ^2.6.2
-  checksum: d19ff447fea298387e8af9b7ac44c8eb8438b0e939608414c0ddc642fbd5c2d657d199a66741d9e330f28aa587486a163238cdf058cc69994178b121a0d26738
-  languageName: node
-  linkType: hard
-
 "@polkadot/rpc-augment@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/rpc-augment@npm:10.11.2"
@@ -3353,20 +3270,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-core@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/rpc-core@npm:10.10.1"
-  dependencies:
-    "@polkadot/rpc-augment": 10.10.1
-    "@polkadot/rpc-provider": 10.10.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/util": ^12.5.1
-    rxjs: ^7.8.1
-    tslib: ^2.6.2
-  checksum: 5ab21029fbafa13e50bb48161a82c023f7015b633e258b76c2cff25bf648d7f69baf18efc291ebec8dd635b38da8223e853e15b53478268b1f6b40d2ab0b3e09
-  languageName: node
-  linkType: hard
-
 "@polkadot/rpc-core@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/rpc-core@npm:10.11.2"
@@ -3381,30 +3284,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/rpc-provider@npm:10.10.1"
-  dependencies:
-    "@polkadot/keyring": ^12.5.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/types-support": 10.10.1
-    "@polkadot/util": ^12.5.1
-    "@polkadot/util-crypto": ^12.5.1
-    "@polkadot/x-fetch": ^12.5.1
-    "@polkadot/x-global": ^12.5.1
-    "@polkadot/x-ws": ^12.5.1
-    "@substrate/connect": 0.7.33
-    eventemitter3: ^5.0.1
-    mock-socket: ^9.3.1
-    nock: ^13.3.4
-    tslib: ^2.6.2
-  dependenciesMeta:
-    "@substrate/connect":
-      optional: true
-  checksum: 44147ad7ce4bb0fccf5272bbe56b3b65c1e907f02109c8e18a5b5da8c658f84c1d7741c5e6878adacd06514254b0a7fb8254d5a222f55f25f7a573b2ba970449
-  languageName: node
-  linkType: hard
-
 "@polkadot/rpc-provider@npm:10.11.2, @polkadot/rpc-provider@npm:^10.9.1":
   version: 10.11.2
   resolution: "@polkadot/rpc-provider@npm:10.11.2"
@@ -3429,18 +3308,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-augment@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/types-augment@npm:10.10.1"
-  dependencies:
-    "@polkadot/types": 10.10.1
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/util": ^12.5.1
-    tslib: ^2.6.2
-  checksum: 40440fc2a9568c9e636f478c4f191cbb38f07256f4db7f1bb9bdbcf0b928280315afee2843090a006a3dfd16e000f22dd6a9bd5687dd6400a1fc3dcd6ee59a25
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-augment@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/types-augment@npm:10.11.2"
@@ -3453,17 +3320,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-codec@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/types-codec@npm:10.10.1"
-  dependencies:
-    "@polkadot/util": ^12.5.1
-    "@polkadot/x-bigint": ^12.5.1
-    tslib: ^2.6.2
-  checksum: 17ceb561e6a82784febd5c8b0219050a9b8aeeb766ffbae8255ab586120063ca9fea1c89df776047e861aba87e43048a8060d5c469bcd42c169830a69416d62f
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-codec@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/types-codec@npm:10.11.2"
@@ -3475,17 +3331,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-create@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/types-create@npm:10.10.1"
-  dependencies:
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/util": ^12.5.1
-    tslib: ^2.6.2
-  checksum: 1dedef441218a0786774033c2d587b8ccdf184a72da671c7da70ced9f765073bfec4a15d8937b00d5d50cb0eb1b4bd25886ace3f7e024c95b46f58a1c318efd1
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-create@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/types-create@npm:10.11.2"
@@ -3497,20 +3342,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/types-known@npm:10.10.1"
-  dependencies:
-    "@polkadot/networks": ^12.5.1
-    "@polkadot/types": 10.10.1
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/types-create": 10.10.1
-    "@polkadot/util": ^12.5.1
-    tslib: ^2.6.2
-  checksum: 25489967fcd6022f11a64c20884dd1ef49494f3b3e514034a08cc07f61267121adf8b96b307edc3381c445de58842d515aa8440ee888bc37120775deffae671a
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-known@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/types-known@npm:10.11.2"
@@ -3525,16 +3356,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-support@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/types-support@npm:10.10.1"
-  dependencies:
-    "@polkadot/util": ^12.5.1
-    tslib: ^2.6.2
-  checksum: 391857f39463fcc9bbc34a6bafd191e12eb3fd28f386d4094cc3cdcbcd0fcc8799c6e99a49b0e634c6a1b78d07188eb6e1e01299f55df2593c3f30fcb241631c
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-support@npm:10.11.2":
   version: 10.11.2
   resolution: "@polkadot/types-support@npm:10.11.2"
@@ -3545,22 +3366,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:10.10.1":
-  version: 10.10.1
-  resolution: "@polkadot/types@npm:10.10.1"
-  dependencies:
-    "@polkadot/keyring": ^12.5.1
-    "@polkadot/types-augment": 10.10.1
-    "@polkadot/types-codec": 10.10.1
-    "@polkadot/types-create": 10.10.1
-    "@polkadot/util": ^12.5.1
-    "@polkadot/util-crypto": ^12.5.1
-    rxjs: ^7.8.1
-    tslib: ^2.6.2
-  checksum: 58b8b026e25f8156f270bdd240a2e384b64db93a6abe7c15abe9acdc2ce06a724328a8bf4d5b3047f5e398eef3d4961447d8511c52105c082dddd1b9d8fb0cb4
-  languageName: node
-  linkType: hard
-
 "@polkadot/types@npm:10.11.2, @polkadot/types@npm:^10.9.1":
   version: 10.11.2
   resolution: "@polkadot/types@npm:10.11.2"
@@ -3746,7 +3551,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/x-bigint@npm:12.6.2, @polkadot/x-bigint@npm:^12.5.1, @polkadot/x-bigint@npm:^12.6.2":
+"@polkadot/x-bigint@npm:12.6.2, @polkadot/x-bigint@npm:^12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-bigint@npm:12.6.2"
   dependencies:
@@ -3756,7 +3561,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/x-fetch@npm:^12.5.1, @polkadot/x-fetch@npm:^12.6.2":
+"@polkadot/x-fetch@npm:^12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-fetch@npm:12.6.2"
   dependencies:
@@ -3776,7 +3581,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/x-global@npm:12.6.2, @polkadot/x-global@npm:^12.3.2, @polkadot/x-global@npm:^12.5.1, @polkadot/x-global@npm:^12.6.2":
+"@polkadot/x-global@npm:12.6.2, @polkadot/x-global@npm:^12.3.2, @polkadot/x-global@npm:^12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-global@npm:12.6.2"
   dependencies:
@@ -3838,7 +3643,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/x-ws@npm:^12.5.1, @polkadot/x-ws@npm:^12.6.2":
+"@polkadot/x-ws@npm:^12.6.2":
   version: 12.6.2
   resolution: "@polkadot/x-ws@npm:12.6.2"
   dependencies:
@@ -12362,7 +12167,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nock@npm:^13.3.4, nock@npm:^13.4.0":
+"nock@npm:^13.4.0":
   version: 13.5.0
   resolution: "nock@npm:13.5.0"
   dependencies:
@@ -17457,3 +17262,10 @@ __metadata:
   checksum: 08150c6e05b944b128dd27d423757d21a2b5dd3d000abd431c7f22349101d373b2ed5e5f66b5b308fe0579cd67ee788ed6935f810842d8c0fa46b0f7a1be0023
   languageName: node
   linkType: hard
+
+"zod@npm:3.22.4":
+  version: 3.22.4
+  resolution: "zod@npm:3.22.4"
+  checksum: 80bfd7f8039b24fddeb0718a2ec7c02aa9856e4838d6aa4864335a047b6b37a3273b191ef335bf0b2002e5c514ef261ffcda5a589fb084a48c336ffc4cdbab7f
+  languageName: node
+  linkType: hard