add utils provider

react-ui/src/index.tsx

 import { MenuProvider } from '@provider/menu/menu.provider'
+import { UtilsProvider } from '@provider/utils.provider'
 import i18next from 'i18next'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -26,10 +27,12 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         <Provider store={store}>
             <PersistGate loading={null} persistor={persistor}>
                 <I18nextProvider i18n={i18next}>
-                    <MenuProvider>
-                        {installToastify()}
-                        <RouterProvider router={router} />
-                    </MenuProvider>
+                    <UtilsProvider>
+                        <MenuProvider>
+                            {installToastify()}
+                            <RouterProvider router={router} />
+                        </MenuProvider>
+                    </UtilsProvider>
                 </I18nextProvider>
             </PersistGate>
         </Provider>

react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx

 import { faAlignRight, faCopy, faPenToSquare, faTrashCan } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useMenu } from "@provider/menu/menu.provider"
-import { toClipboard } from "@utils/functions"
+import { useUtils } from "@provider/utils.provider"
 import React, { Suspense, useEffect, useMemo, useRef } from "react"
 import { Table } from "react-bootstrap"
 import { useTranslation } from "react-i18next"
@@ -17,6 +17,7 @@ export const JsonViewer = ({ json }: JsonViewerProbs) => {
     const { subscribe } = useMenu();
     const htmlContainer = useRef(null);
     const { t } = useTranslation('common');
+    const { toClipboard } = useUtils();
 
     useEffect(() => {
         if (htmlContainer.current) {

react-ui/src/shared/provider/utils.provider.tsx

+import { createContext, useContext, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+
+interface UtilsProviderType {
+    toClipboard: (text: string) => void
+}
+
+const UtilsContext = createContext<UtilsProviderType>({
+    toClipboard: function (text: string): void {
+        throw new Error("Function not implemented.");
+    }
+})
+
+export const UtilsProvider = ({ children }) => {
+    const { t } = useTranslation('common');
+
+    const value = useMemo<UtilsProviderType>(() => {
+        return {
+            toClipboard(text) {
+                navigator.clipboard.writeText(text);
+                toast.info(t('global.toast.copied'))
+            },
+        } as UtilsProviderType
+    }, [])
+
+    return (
+        <UtilsContext.Provider value={value}>
+            {children}
+        </UtilsContext.Provider>
+    )
+}
+
+export const useUtils = () => {
+    return useContext(UtilsContext)
+}
\ No newline at end of file

react-ui/src/shared/utils/functions.ts

-import { t } from "i18next";
-import { toast } from "react-toastify";
-
-
-export const toClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-    toast.info(t('global.toast.copied'))
-}
\ No newline at end of file