Extend vouchers page (#1521)

Co-authored-by: Dmitriy <128726599+Magorsky@users.noreply.github.com>
Co-authored-by: magorsky <di@gear.foundation>

.github/workflows/CI-CD-k8s-gear-js-stage.yml

@@ -14,7 +14,7 @@ on:
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
-  
+
 env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}
@@ -25,7 +25,7 @@ env:
 
 
 jobs:
-          
+
   build-frontend-image-staging:
     runs-on: ubuntu-latest
     environment: staging
@@ -53,9 +53,10 @@ jobs:
           build-args: |
             VITE_NODE_ADDRESS=${{ secrets.REACT_APP_NODE_ADDRESS }}
             VITE_API_URL=${{ secrets.REACT_APP_API_URL }}
-            VITE_DEFAULT_NODES_URL=${{ secrets.REACT_APP_DEFAULT_NODES_URL }}
             VITE_DEFAULT_TRANSFER_BALANCE_VALUE=${{ secrets.REACT_APP_DEFAULT_TRANSFER_BALANCE_VALUE }}
             VITE_HCAPTCHA_SITE_KEY=${{ secrets.REACT_APP_HCAPTCHA_SITE_KEY }}
+            VITE_NODES_API_URL= ${{ secrets.REACT_APP_DEFAULT_NODES_URL }}
+            VITE_VOUCHERS_API_URL=${{ secrets.VITE_VOUCHERS_API_URL }}
 
   build-indexer-image-staging:
     runs-on: ubuntu-latest
@@ -131,7 +132,7 @@ jobs:
           file: idea/test-balance/Dockerfile
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-test-balance:qa
-  
+
   build-and-push-meta-storage-image:
     if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest

.github/workflows/CI-CD-k8s-release-deploy.yml

@@ -61,10 +61,11 @@ jobs:
           build-args: |
             VITE_NODE_ADDRESS=${{ secrets.REACT_APP_NODE_ADDRESS }}
             VITE_API_URL=${{ secrets.REACT_APP_API_URL }}
-            VITE_DEFAULT_NODES_URL=${{ secrets.REACT_APP_DEFAULT_NODES_URL }}
             VITE_DEFAULT_TRANSFER_BALANCE_VALUE=${{ secrets.REACT_APP_DEFAULT_TRANSFER_BALANCE_VALUE }}
             VITE_HCAPTCHA_SITE_KEY=${{ secrets.REACT_APP_HCAPTCHA_SITE_KEY }}
-            
+            VITE_NODES_API_URL=${{ secrets.REACT_APP_DEFAULT_NODES_URL }}
+            VITE_VOUCHERS_API_URL=${{ secrets.VITE_VOUCHERS_API_URL }}
+
   build-indexer-image-prod:
     runs-on: ubuntu-latest
     needs: [tag-prod-version]

idea/frontend/.env.example

@@ -1,5 +1,6 @@
-VITE_API_URL=https://idea.gear-tech.io/api
-VITE_NODE_ADDRESS=wss://testnet.vara-network.io
-VITE_HCAPTCHA_SITE_KEY=xxxx-xxxx-xxxx-xxxx-xxxx
-VITE_DEFAULT_TRANSFER_BALANCE_VALUE=250000000000
-VITE_DEFAULT_NODES_URL=https://idea.gear-tech.io/gear-nodes
+VITE_API_URL=
+VITE_VOUCHERS_API_URL=
+VITE_NODES_API_URL=
+VITE_NODE_ADDRESS=
+VITE_HCAPTCHA_SITE_KEY=
+VITE_DEFAULT_TRANSFER_BALANCE_VALUE=

idea/frontend/Dockerfile

@@ -16,12 +16,14 @@ RUN yarn install --mode=skip-build
 
 ARG VITE_NODE_ADDRESS \
     VITE_API_URL \
-    VITE_DEFAULT_NODES_URL \
+    VITE_NODES_API_URL \
     VITE_DEFAULT_TRANSFER_BALANCE_VALUE \
-    VITE_HCAPTCHA_SITE_KEY
+    VITE_HCAPTCHA_SITE_KEY \
+    VITE_VOUCHERS_API_URL
 ENV VITE_NODE_ADDRESS=${VITE_NODE_ADDRESS} \
+    VITE_VOUCHERS_API_URL=${VITE_VOUCHERS_API_URL} \
     VITE_API_URL=${VITE_API_URL} \
-    VITE_DEFAULT_NODES_URL=${VITE_DEFAULT_NODES_URL} \
+    VITE_NODES_API_URL=${VITE_NODES_API_URL} \
     VITE_DEFAULT_TRANSFER_BALANCE_VALUE=${VITE_DEFAULT_TRANSFER_BALANCE_VALUE} \
     VITE_HCAPTCHA_SITE_KEY=${VITE_HCAPTCHA_SITE_KEY}
 

idea/frontend/package.json

@@ -20,6 +20,7 @@
     "@polkadot/types": "10.11.2",
     "@polkadot/util": "12.6.2",
     "@react-aria/utils": "3.21.0",
+    "@tanstack/react-query": "5.29.0",
     "bignumber.js": "9.1.2",
     "clsx": "2.0.0",
     "ky": "1.0.1",

idea/frontend/src/api/index.ts

@@ -1,5 +1,5 @@
 import { NodeSection } from '@/entities/node';
-import { DEFAULT_NODES_URL } from '@/shared/config';
+import { NODES_API_URL } from '@/shared/config';
 import { fetchCode, fetchCodes, addCodeName } from './code';
 import { fetchProgram, fetchPrograms, addProgramName } from './program';
 import { fetchTestBalance } from './balance';
@@ -8,7 +8,7 @@ import { fetchMetadata, addMetadata } from './metadata';
 import { getLocalMetadata, PROGRAMS_LOCAL_FORAGE } from './LocalDB';
 import { addState, fetchStates, fetchState } from './state';
 
-const getNodes = (): Promise<NodeSection[]> => fetch(DEFAULT_NODES_URL).then((result) => result.json());
+const getNodes = (): Promise<NodeSection[]> => fetch(NODES_API_URL).then((result) => result.json());
 
 export {
   getNodes,

idea/frontend/src/app/providers/query/index.tsx

@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 0,
+      staleTime: Infinity,
+    },
+  },
+});
+
+type Props = {
+  children: ReactNode;
+};
+
+const QueryProvider = ({ children }: Props) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+export { QueryProvider };

idea/frontend/src/app/providers/withProviders.tsx

@@ -9,6 +9,7 @@ import { ModalProvider } from './modal';
 import { EventsProvider } from './events';
 import { ChainProvider } from './chain';
 import { OnboardingProvider } from './onboarding';
+import { QueryProvider } from './query';
 
 const providers = [
   BrowserRouter,
@@ -20,6 +21,7 @@ const providers = [
   ModalProvider,
   EventsProvider,
   BlocksProvider,
+  QueryProvider,
 ];
 
 const withProviders = (Component: ComponentType) => () =>

idea/frontend/src/features/explorer/index.ts

@@ -1,7 +1,7 @@
-import { ExplorerSearch, Events, Block } from './ui';
+import { Events, Block } from './ui';
 import { Section, Method } from './consts';
 import { EventRecords } from './types';
 import { IdeaEvent } from './idea-event';
 
-export { Section, Method, IdeaEvent, ExplorerSearch, Events, Block };
+export { Section, Method, IdeaEvent, Events, Block };
 export type { EventRecords };

idea/frontend/src/features/explorer/ui/index.ts

@@ -1,5 +1,4 @@
-import { ExplorerSearch } from './explorer-search';
 import { Events } from './events';
 import { Block } from './block';
 
-export { ExplorerSearch, Events, Block };
+export { Events, Block };

idea/frontend/src/features/filters/index.ts

@@ -2,5 +2,6 @@ import { Radio } from './ui/radio';
 import { Filters } from './ui/Filters';
 import { FilterGroup } from './ui/filterGroup';
 import { StatusCheckbox } from './ui/statusCheckbox';
+import { StatusRadio } from './ui/status-radio';
 
-export { Filters, Radio, FilterGroup, StatusCheckbox };
+export { Filters, Radio, FilterGroup, StatusCheckbox, StatusRadio };

idea/frontend/src/features/filters/ui/radio/Radio.tsx

@@ -1,10 +1,7 @@
 import { Radio as UIRadio, RadioProps } from '@gear-js/ui';
-import clsx from 'clsx';
 import { FieldValues, Path, PathValue, useFormContext } from 'react-hook-form';
 
-import styles from './Radio.module.scss';
-
-type Props<T> = Omit<RadioProps, 'name' | 'onChange' | 'onSubmit'> & {
+type Props<T> = Omit<RadioProps, 'name' | 'value' | 'onChange' | 'onSubmit'> & {
   onSubmit: (values: T) => void;
   name: Path<T>;
   value: PathValue<T, Path<T>>;
@@ -15,9 +12,7 @@ const Radio = <T extends FieldValues>({ name, value, label, className, onSubmit
 
   const onChange = () => handleSubmit(onSubmit)();
 
-  return (
-    <UIRadio label={label} className={clsx(styles.radio, className)} value={value} {...register(name, { onChange })} />
-  );
+  return <UIRadio label={label} className={className} value={value} {...register(name, { onChange })} />;
 };
 
 export { Radio };

idea/frontend/src/features/filters/ui/status-radio/index.ts

@@ -0,0 +1,3 @@
+import { StatusRadio } from './status-radio';
+
+export { StatusRadio };

idea/frontend/src/features/filters/ui/status-radio/status-radio.tsx

@@ -0,0 +1,33 @@
+import { RadioProps, radioStyles } from '@gear-js/ui';
+import clsx from 'clsx';
+import { FieldValues, Path, PathValue, useFormContext } from 'react-hook-form';
+
+import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock';
+
+type Props<T> = Omit<RadioProps, 'name' | 'value' | 'onChange' | 'onSubmit'> & {
+  onSubmit: (values: T) => void;
+  name: Path<T>;
+  value: PathValue<T, Path<T>>;
+  status: BulbStatus;
+};
+
+const StatusRadio = <T extends FieldValues>({ name, label, value, status, onSubmit }: Props<T>) => {
+  const { register, handleSubmit } = useFormContext<T>();
+
+  const onChange = () => handleSubmit(onSubmit)();
+
+  return (
+    <label className={radioStyles.label}>
+      <input
+        type="radio"
+        value={value}
+        className={clsx(radioStyles.input, radioStyles.radio)}
+        {...register(name, { onChange })}
+      />
+
+      <BulbBlock size="large" color="primary" weight="normal" status={status} text={label} />
+    </label>
+  );
+};
+
+export { StatusRadio };

idea/frontend/src/features/filters/ui/statusCheckbox/StatusCheckbox.tsx

@@ -5,9 +5,7 @@ import { FieldValues, Path, PathValue, useFormContext } from 'react-hook-form';
 
 import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock';
 
-import styles from './StatusCheckbox.module.scss';
-
-type Props<T> = Omit<CheckboxProps, 'name' | 'value' | 'onChange'> & {
+type Props<T> = Omit<CheckboxProps, 'name' | 'value' | 'onChange' | 'onSubmit'> & {
   onSubmit: (values: T) => void;
   name: Path<T>;
   value: PathValue<T, Path<T>>;
@@ -20,12 +18,17 @@ const StatusCheckbox = <T extends FieldValues>({ name, label, value, status, onS
 
   const onChange = () => handleSubmit(onSubmit)();
 
-  const inputClasses = clsx(checkboxStyles.input, checkboxStyles.checkbox);
-
   return (
     <label htmlFor={id} className={checkboxStyles.label}>
-      <input type="checkbox" id={id} value={value} className={inputClasses} {...register(name, { onChange })} />
-      <BulbBlock size="large" color="primary" status={status} text={label} className={styles.status} />
+      <input
+        type="checkbox"
+        id={id}
+        value={value}
+        className={clsx(checkboxStyles.input, checkboxStyles.checkbox)}
+        {...register(name, { onChange })}
+      />
+
+      <BulbBlock size="large" color="primary" weight="normal" status={status} text={label} />
     </label>
   );
 };

idea/frontend/src/features/program/ui/programs-search/programs-search.tsx

@@ -1,30 +1,29 @@
-import { Input } from '@gear-js/ui';
 import { CSSTransition } from 'react-transition-group';
-import { useForm } from 'react-hook-form';
 
 import { Filters, FilterGroup, Radio, StatusCheckbox } from '@/features/filters';
 import { AnimationTimeout } from '@/shared/config';
 import { BulbStatus } from '@/shared/ui/bulbBlock';
+import { SearchForm } from '@/shared/ui';
 
 import { ProgramStatus, PROGRAM_STATUS_NAME } from '../../consts';
 import { FiltersValues, RequestParams } from '../../types';
 import styles from './programs-search.module.scss';
 
 type Props = {
-  initQuery: string;
   isLoggedIn: boolean;
   initialValues: FiltersValues;
   onSubmit: (values: RequestParams) => void;
 };
 
-const ProgramsSearch = ({ initQuery, isLoggedIn, initialValues, onSubmit }: Props) => {
-  const form = useForm({ defaultValues: { query: initQuery } });
-
+const ProgramsSearch = ({ isLoggedIn, initialValues, onSubmit }: Props) => {
   return (
     <section className={styles.searchSettings}>
-      <form className={styles.searchForm} onSubmit={form.handleSubmit(({ query }) => onSubmit({ query }))}>
-        <Input type="search" placeholder="Search by name, code hash, id..." {...form.register('query')} />
-      </form>
+      <SearchForm
+        placeholder="Search by name, code hash, id..."
+        className={styles.searchForm}
+        onSubmit={(query) => onSubmit({ query })}
+      />
+
       <Filters initialValues={initialValues} onSubmit={onSubmit}>
         <FilterGroup name="owner" onSubmit={onSubmit}>
           <Radio name="owner" value="all" label="All programs" onSubmit={onSubmit} />

idea/frontend/src/features/voucher/hooks/index.ts

@@ -1,7 +1,19 @@
-import { useIssueVoucher } from './use-issue-voucher';
 import { useBalanceSchema } from './use-balance-schema';
 import { useDurationSchema } from './use-duration-schema';
 import { useProgramIdSchema } from './use-program-id-schema';
 import { useVoucherType } from './use-voucher-type';
+import { useModal } from './use-modal';
+import { useLoading } from './use-loading';
+import { useVouchers } from './use-vouchers';
+import { useVoucherFilters } from './use-voucher-filters';
 
-export { useIssueVoucher, useBalanceSchema, useDurationSchema, useProgramIdSchema, useVoucherType };
+export {
+  useBalanceSchema,
+  useDurationSchema,
+  useProgramIdSchema,
+  useVoucherType,
+  useModal,
+  useLoading,
+  useVouchers,
+  useVoucherFilters,
+};