Get dependency on uuid package back to fix error on non-secure contexts

src/servers/CreateServer.tsx

@@ -8,6 +8,7 @@ import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { useGoBack } from '../utils/helpers/hooks';
+import { randomUUID } from '../utils/utils';
 import type { ServerData, ServersMap, ServerWithId } from './data';
 import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
@@ -44,7 +45,7 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
   const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
   const [serverData, setServerData] = useState<ServerData>();
   const saveNewServer = useCallback((theServerData: ServerData) => {
-    const id = crypto.randomUUID();
+    const id = randomUUID();
 
     createServers([{ ...theServerData, id }]);
     navigate(`/server/${id}`);

src/servers/reducers/servers.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import { randomUUID } from '../../utils/utils';
 import type { ServerData, ServersMap, ServerWithId } from '../data';
 
 interface EditServer {
@@ -19,7 +20,7 @@ const serverWithId = (server: ServerWithId | ServerData): ServerWithId => {
     return server;
   }
 
-  return { ...server, id: crypto.randomUUID() };
+  return { ...server, id: randomUUID() };
 };
 
 const serversListToMap = (servers: ServerWithId[]): ServersMap => servers.reduce<ServersMap>(

src/utils/utils.ts

@@ -1,6 +1,9 @@
 import type { SyntheticEvent } from 'react';
+import { v4 } from 'uuid';
 
 export const handleEventPreventingDefault = <T>(handler: () => T) => (e: SyntheticEvent) => {
   e.preventDefault();
   handler();
 };
+
+export const randomUUID = () => v4();