[Human App FE] Staking Requirements

packages/apps/human-app/frontend/.env.example

@@ -25,6 +25,7 @@ VITE_H_CAPTCHA_ORACLE_TASK_TYPES=image_points,image_boxes
 # Other
 VITE_HUMAN_PROTOCOL_HELP_URL=https://docs.humanprotocol.org/
 VITE_HUMAN_PROTOCOL_URL=https://humanprotocol.org/
+VITE_STAKING_DASHBOARD_URL=https://staking.humanprotocol.org/
 VITE_HUMAN_SUPPORT_EMAIL=support@local.app
 VITE_NAVBAR__LINK__HOW_IT_WORK_URL=https://humanprotocol.org/
 VITE_NAVBAR__LINK__PROTOCOL_URL=https://humanprotocol.org/

packages/apps/human-app/frontend/src/main.tsx

@@ -23,6 +23,7 @@ import { HomePageStateProvider } from '@/shared/contexts/homepage-state';
 import { NotificationProvider } from '@/shared/providers/notifications-provider';
 import { ModalProvider } from './shared/contexts/modal-context';
 import { GlobalModal } from './shared/components/ui/modal/global-modal';
+import { UiConfigProvider } from './shared/providers/ui-config-provider';
 
 const root = document.getElementById('root');
 if (!root) throw Error('root element is undefined');
@@ -39,25 +40,30 @@ createRoot(root).render(
     <ColorModeProvider>
       <CssBaseline />
       <QueryClientProvider client={queryClient}>
-        <NotificationProvider>
-          <BrowserRouter>
-            <WalletConnectProvider>
-              <HomePageStateProvider>
-                <ModalProvider>
-                  <Web3AuthProvider>
-                    <AuthProvider>
-                      <GlobalModal />
-                      <JWTExpirationCheck>
-                        <Router />
-                      </JWTExpirationCheck>
-                    </AuthProvider>
-                  </Web3AuthProvider>
-                </ModalProvider>
-              </HomePageStateProvider>
-              <ReactQueryDevtools client={queryClient} initialIsOpen={false} />
-            </WalletConnectProvider>
-          </BrowserRouter>
-        </NotificationProvider>
+        <UiConfigProvider>
+          <NotificationProvider>
+            <BrowserRouter>
+              <WalletConnectProvider>
+                <HomePageStateProvider>
+                  <ModalProvider>
+                    <Web3AuthProvider>
+                      <AuthProvider>
+                        <GlobalModal />
+                        <JWTExpirationCheck>
+                          <Router />
+                        </JWTExpirationCheck>
+                      </AuthProvider>
+                    </Web3AuthProvider>
+                  </ModalProvider>
+                </HomePageStateProvider>
+                <ReactQueryDevtools
+                  client={queryClient}
+                  initialIsOpen={false}
+                />
+              </WalletConnectProvider>
+            </BrowserRouter>
+          </NotificationProvider>
+        </UiConfigProvider>
       </QueryClientProvider>
     </ColorModeProvider>
   </StrictMode>

packages/apps/human-app/frontend/src/modules/auth/context/auth-context.tsx

@@ -11,6 +11,7 @@ const userDataSchema = z.object({
   user_id: z.number(),
   reputation_network: z.string(),
   exp: z.number(),
+  is_stake_eligible: z.boolean(),
 });
 
 export type UserData = z.infer<typeof userDataSchema>;

packages/apps/human-app/frontend/src/modules/worker/hooks/use-exchange-api-keys.ts

@@ -0,0 +1,58 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  deleteExchangeApiKeys,
+  enrollExchangeApiKeys,
+  getExchangeApiKeys,
+  getSupportedExchanges,
+} from '../services/exchangeApiKeys.service';
+
+function useGetSupportedExchanges() {
+  return useQuery({
+    queryKey: ['supported-exchanges'],
+    queryFn: () => getSupportedExchanges(),
+  });
+}
+
+function useGetExchangeApiKeys() {
+  return useQuery({
+    queryKey: ['exchange-api-keys'],
+    queryFn: () => getExchangeApiKeys(),
+  });
+}
+
+function useEnrollExchangeApiKeys() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['enroll-exchange-api-keys'],
+    mutationFn: (data: {
+      exchange: string;
+      apiKey: string;
+      secretKey: string;
+    }) => enrollExchangeApiKeys(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['exchange-api-keys'] });
+      queryClient.invalidateQueries({ queryKey: ['staking-summary'] });
+    },
+  });
+}
+
+function useDeleteExchangeApiKeys() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['delete-exchange-api-keys'],
+    mutationFn: () => deleteExchangeApiKeys(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['exchange-api-keys'] });
+      queryClient.invalidateQueries({ queryKey: ['staking-summary'] });
+    },
+  });
+}
+
+export {
+  useGetSupportedExchanges,
+  useDeleteExchangeApiKeys,
+  useGetExchangeApiKeys,
+  useEnrollExchangeApiKeys,
+};

packages/apps/human-app/frontend/src/modules/worker/hooks/use-staking.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { getStakingSummary } from '../services/staking.service';
+
+function useGetStakingSummary() {
+  return useQuery({
+    queryKey: ['staking-summary'],
+    queryFn: () => getStakingSummary(),
+  });
+}
+
+export { useGetStakingSummary };

packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/helpers/should-navigate-to-registration.ts

@@ -8,7 +8,5 @@ export const shouldNavigateToRegistration = (
   oracle: Oracle,
   registrationData?: RegistrationResult
 ): boolean =>
-  Boolean(
-    oracle.registrationNeeded &&
-    !registrationData?.oracle_addresses.includes(oracle.address)
-  );
+  !!oracle.registrationNeeded &&
+  !registrationData?.oracle_addresses.includes(oracle.address);

packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/hooks/use-available-jobs-filter-modal.tsx

@@ -1,17 +1,17 @@
 import { useModal } from '@/shared/contexts/modal-context';
-import { useGetUiConfig } from '@/shared/hooks';
+import { useUiConfig } from '@/shared/providers/ui-config-provider';
 import { AvailableJobsFilterModal } from '../available-jobs-filter-modal';
 
 export function useAvailableJobsFilterModal() {
   const { openModal, closeModal } = useModal();
-  const { data: uiConfigData } = useGetUiConfig();
+  const { uiConfig } = useUiConfig();
 
   return {
     openModal: () => {
       openModal({
         content: (
           <AvailableJobsFilterModal
-            chainIdsEnabled={uiConfigData?.chainIdsEnabled ?? []}
+            chainIdsEnabled={uiConfig?.chainIdsEnabled ?? []}
             close={closeModal}
           />
         ),

packages/apps/human-app/frontend/src/modules/worker/jobs/jobs.page.tsx

@@ -7,7 +7,7 @@ import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { NoRecords } from '@/shared/components/ui/no-records';
 import { PageCardLoader } from '@/shared/components/ui/page-card';
-import { useGetUiConfig } from '@/shared/hooks';
+import { useUiConfig } from '@/shared/providers/ui-config-provider';
 import { useGetOracles } from '../hooks';
 import { useGetOraclesNotifications } from '../hooks/use-get-oracles-notifications';
 import { TabPanel } from './components';
@@ -30,19 +30,15 @@ export function JobsPage() {
     error,
   } = useGetOracles();
 
-  const {
-    data: uiConfigData,
-    isPending: isPendingUiConfig,
-    isError: isErrorUiConfig,
-  } = useGetUiConfig();
+  const { uiConfig, isUiConfigLoading, isUiConfigError } = useUiConfig();
 
   const { address: oracle_address } = useParams<{ address: string }>();
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState(0);
   const isMobile = useIsMobile();
 
-  const isError = isErrorGetOracles || isErrorUiConfig;
-  const isPending = isPendingGetOracles || isPendingUiConfig;
+  const isError = isErrorGetOracles || isUiConfigError;
+  const isPending = isPendingGetOracles || isUiConfigLoading;
   const { onError } = useGetOraclesNotifications();
 
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
@@ -119,7 +115,7 @@ export function JobsPage() {
                     <NoRecords />
                   ) : (
                     <AvailableJobsView
-                      chainIdsEnabled={uiConfigData.chainIdsEnabled}
+                      chainIdsEnabled={uiConfig?.chainIdsEnabled ?? []}
                     />
                   )}
                 </TabPanel>
@@ -128,7 +124,7 @@ export function JobsPage() {
                     <NoRecords />
                   ) : (
                     <MyJobsView
-                      chainIdsEnabled={uiConfigData.chainIdsEnabled}
+                      chainIdsEnabled={uiConfig?.chainIdsEnabled ?? []}
                     />
                   )}
                 </TabPanel>

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/hooks/use-my-jobs-filter-modal.tsx

@@ -1,17 +1,17 @@
 import { useModal } from '@/shared/contexts/modal-context';
-import { useGetUiConfig } from '@/shared/hooks';
 import { MyJobsFilterModal } from '../components/mobile/my-jobs-filter-modal';
+import { useUiConfig } from '@/shared/providers/ui-config-provider';
 
 export function useMyJobFilterModal() {
   const { openModal, closeModal } = useModal();
-  const { data: uiConfigData } = useGetUiConfig();
+  const { uiConfig } = useUiConfig();
 
   return {
     openModal: () => {
       openModal({
         content: (
           <MyJobsFilterModal
-            chainIdsEnabled={uiConfigData?.chainIdsEnabled ?? []}
+            chainIdsEnabled={uiConfig?.chainIdsEnabled ?? []}
             close={closeModal}
           />
         ),