[HUMAN App] Operator "role" can't be selected

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx

@@ -121,7 +121,7 @@ export function MyJobsListMobile() {
         {allPages.map((d) => {
           return (
             <Paper
-              key={crypto.randomUUID()}
+              key={d.escrow_address}
               sx={{
                 px: '16px',
                 py: '32px',

packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-operator.tsx

@@ -25,5 +25,5 @@ export const operatorDrawerBottomMenuItems: MenuItem[] = [
       }
     },
   },
-  <DarkModeSwitch key={crypto.randomUUID()} />,
+  <DarkModeSwitch key="dark-mode-switch" />,
 ];

packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-worker.tsx

@@ -41,5 +41,5 @@ export const workerDrawerBottomMenuItems: MenuItem[] = [
       }
     },
   },
-  <DarkModeSwitch key={crypto.randomUUID()} />,
+  <DarkModeSwitch key="dark-mode-switch" />,
 ];

packages/apps/human-app/frontend/src/shared/components/data-entry/select.tsx

@@ -52,7 +52,7 @@ export function Select({
             }
           >
             {options.map((elem) => (
-              <MenuItem key={crypto.randomUUID().toString()} value={elem.value}>
+              <MenuItem key={elem.value} value={elem.value}>
                 {elem.name}
               </MenuItem>
             ))}

packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx

@@ -3,16 +3,15 @@ import { useColorMode } from '@/shared/contexts/color-mode';
 
 interface ChipProps {
   label: string | React.ReactElement;
-  key?: string;
   backgroundColor?: string;
 }
+
 export function Chip({ label, backgroundColor }: Readonly<ChipProps>) {
   const { colorPalette } = useColorMode();
 
   return (
     <Box
       component="span"
-      key={crypto.randomUUID()}
       sx={{
         backgroundColor: backgroundColor ?? colorPalette.chip.main,
         width: 'fit-content',

packages/apps/human-app/frontend/src/shared/components/ui/chips.tsx

@@ -9,7 +9,7 @@ export function Chips({ data }: ChipsProps) {
   return (
     <Grid container sx={{ flexWrap: 'wrap', gap: '0.5rem' }}>
       {data.map((chipLabel) => (
-        <Chip key={crypto.randomUUID()} label={chipLabel} />
+        <Chip key={chipLabel} label={chipLabel} />
       ))}
     </Grid>
   );

packages/apps/human-app/frontend/src/shared/contexts/wallet-connect/wallet-connect.tsx

@@ -52,11 +52,7 @@ export const WalletConnectContext = createContext<
   | null
 >(null);
 
-export function WalletConnectProvider({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+function AppKitWrapper({ children }: { children: React.ReactNode }) {
   const [initializing, setInitializing] = useState(true);
   const web3ProviderMutation = useWeb3Provider();
   const { open } = useAppKit();
@@ -70,7 +66,7 @@ export function WalletConnectProvider({
     ) {
       setInitializing(false);
     }
-  }, [web3ProviderMutation]);
+  }, [web3ProviderMutation.status]);
 
   const openModal = useCallback(async () => {
     await open();
@@ -122,11 +118,21 @@ export function WalletConnectProvider({
     initializing,
   ]);
 
+  return (
+    <WalletConnectContext.Provider value={contextValue}>
+      {children}
+    </WalletConnectContext.Provider>
+  );
+}
+
+export function WalletConnectProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <WagmiProvider config={wagmiAdapter.wagmiConfig}>
-      <WalletConnectContext.Provider value={contextValue}>
-        {children}
-      </WalletConnectContext.Provider>
+      <AppKitWrapper>{children}</AppKitWrapper>
     </WagmiProvider>
   );
 }