feat(vara-eth-idea): improve program init and balance top up UX

eslint.config.mjs

@@ -44,13 +44,13 @@ export default [
   ...frontendEslintConfig({
     tsConfigs: [
       'idea/{gear,vara-eth}/frontend/tsconfig.json',
-      'utils/{gear-hooks,gear-ui,vara-ui,wallet-connect}/tsconfig.json',
+      'utils/{gear-hooks,gear-ui,vara-ui,wallet-connect,sails-payload-form}/tsconfig.json',
     ],
   }).map((conf) => ({
     ...conf,
     files: [
       'idea/{gear,vara-eth}/frontend/src/**/*.{ts,js,tsx,jsx}',
-      'utils/{gear-hooks,gear-ui,vara-ui,wallet-connect}/src/**/*.{ts,js,tsx,jsx}',
+      'utils/{gear-hooks,gear-ui,vara-ui,wallet-connect,sails-payload-form}/src/**/*.{ts,js,tsx,jsx}',
     ],
   })),
   ...storybook.configs['flat/recommended'].map((conf) => ({

idea/gear/frontend/Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /src
 
 COPY . .
 
-RUN yarn workspaces focus gear-idea-frontend @gear-js/api @gear-js/react-hooks @gear-js/ui @gear-js/wallet-connect @gear-js/vara-ui gear-js
+RUN yarn workspaces focus gear-idea-frontend @gear-js/api @gear-js/react-hooks @gear-js/ui @gear-js/wallet-connect @gear-js/vara-ui @gear-js/sails-payload-form gear-js
 
 ARG VITE_NODE_ADDRESS \
     VITE_NODES_API_URL \

idea/gear/frontend/package.json

@@ -13,6 +13,7 @@
     "@base-ui/react": "1.0.0",
     "@gear-js/api": "0.44.2",
     "@gear-js/react-hooks": "*",
+    "@gear-js/sails-payload-form": "*",
     "@gear-js/ui": "*",
     "@gear-js/wallet-connect": "*",
     "@hcaptcha/react-hcaptcha": "1.12.1",

idea/gear/frontend/src/features/sails/hooks/index.ts

@@ -1,6 +1,6 @@
-import { useConstructor, useService, useSetPayloadValue } from './payload';
+import { useConstructor, useService } from './payload';
 import { useAddIdl } from './use-add-idl';
 import { useSails } from './use-sails';
 import { useSailsWithFile } from './use-sails-with-file';
 
-export { useConstructor, useService, useSetPayloadValue, useSails, useSailsWithFile, useAddIdl };
+export { useConstructor, useService, useSails, useSailsWithFile, useAddIdl };

idea/gear/frontend/src/features/sails/hooks/payload/index.ts

@@ -1,5 +1,4 @@
 import { useConstructor } from './use-constructor';
 import { useService } from './use-service';
-import { useSetPayloadValue } from './use-set-payload-value';
 
-export { useConstructor, useService, useSetPayloadValue };
+export { useConstructor, useService };

idea/gear/frontend/src/features/sails/hooks/payload/use-constructor.tsx

@@ -1,8 +1,7 @@
+import { getDefaultPayloadValue, getPayloadSchema } from '@gear-js/sails-payload-form';
 import { useMemo } from 'react';
 import { Sails } from 'sails-js';
 
-import { getDefaultPayloadValue, getPayloadSchema } from '../../utils';
-
 import { useSelect } from './use-select';
 
 function useConstructor(sails: Sails) {

idea/gear/frontend/src/features/sails/hooks/payload/use-service.tsx

@@ -1,10 +1,9 @@
+import { getDefaultPayloadValue, getPayloadSchema } from '@gear-js/sails-payload-form';
 import { ChangeEvent, useMemo } from 'react';
 import { Sails } from 'sails-js';
 
 import { isAnyKey } from '@/shared/helpers';
 
-import { getDefaultPayloadValue, getPayloadSchema } from '../../utils';
-
 import { useSelect } from './use-select';
 
 function useService(sails: Sails, key: 'functions' | 'queries') {

idea/gear/frontend/src/features/sails/index.ts

@@ -1,7 +1,6 @@
 import { useSails, useSailsWithFile, useConstructor, useService, useAddIdl } from './hooks';
-import { PayloadValue, PayloadValueSchema } from './types';
 import { PayloadForm, SailsPreview, ProgramEvents, SailsFilter } from './ui';
-import { getResetPayloadValue, getParsedSailsFilterValue, getValidSailsFilterValue } from './utils';
+import { getParsedSailsFilterValue, getValidSailsFilterValue } from './utils';
 
 export {
   PayloadForm,
@@ -11,11 +10,8 @@ export {
   useSailsWithFile,
   useConstructor,
   useService,
-  getResetPayloadValue,
   useAddIdl,
   getParsedSailsFilterValue,
   getValidSailsFilterValue,
   SailsFilter,
 };
-
-export type { PayloadValue, PayloadValueSchema };

idea/gear/frontend/src/features/sails/types.ts

@@ -1,10 +1,5 @@
 import { Sails } from 'sails-js';
 
-import { RESULT } from './consts';
-import { getPayloadSchema } from './utils';
-
-// TODO: import from sails-js
-type ISailsFuncArg = InstanceType<typeof Sails>['services'][string]['functions'][string]['args'][number];
 type Ctors = InstanceType<typeof Sails>['ctors'];
 type Services = InstanceType<typeof Sails>['services'];
 
@@ -15,20 +10,12 @@ type SailsServiceFunc = SailsService['functions'][string];
 type SailsServiceQuery = SailsService['queries'][string];
 type SailsServiceEvent = SailsService['events'][string];
 
-type Result = (typeof RESULT)[keyof typeof RESULT];
-type PayloadValue = string | boolean | null | Array<PayloadValue> | { [key: string]: PayloadValue };
-type PayloadValueSchema = ReturnType<typeof getPayloadSchema>;
-
 export type {
-  ISailsFuncArg,
-  Result,
-  PayloadValue,
-  PayloadValueSchema,
   Ctors,
   Services,
+  SailsService,
   Functions,
   ISailsCtorFuncParams,
-  SailsService,
   SailsServiceFunc,
   SailsServiceQuery,
   SailsServiceEvent,