[Human App FE] Staking Requirements UI (#3725)

Co-authored-by: Dmitry Nechay <lelekkofe@gmail.com>

Author: KirillKirill

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/assets/icons-dark-mode/content-copy.svg

@@ -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/assets/icons-dark-mode/delete-icon.svg

@@ -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/assets/icons-dark-mode/edit-icon.svg

@@ -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,
+};