[#546] init usersnap in project

govtool/frontend/package.json

@@ -30,6 +30,7 @@
     "@types/jsonld": "^1.5.13",
     "@types/react": "^18.2.12",
     "@types/react-gtm-module": "^2.0.2",
+    "@usersnap/browser": "^0.0.5",
     "axios": "^1.4.0",
     "bech32": "^2.0.0",
     "blakejs": "^1.2.1",

govtool/frontend/src/components/organisms/Footer.tsx

@@ -2,6 +2,7 @@ import { Box, Link } from "@mui/material";
 
 import { Button, Typography } from "@atoms";
 import { ICONS } from "@consts";
+import { useUsersnapApi } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
@@ -30,6 +31,7 @@ const FooterLink = ({ label, onClick }: FooterLinkProps) => (
 export const Footer = () => {
   const { screenWidth } = useScreenDimension();
   const { t } = useTranslation();
+  const { openFeedbackWindow } = useUsersnapApi();
 
   const onClickHelp = () =>
     openInNewTab("https://docs.sanchogov.tools/support/get-help-in-discord");
@@ -41,8 +43,7 @@ export const Footer = () => {
   const onClickTermOfService = () =>
     openInNewTab("https://docs.sanchogov.tools/legal/privacy-policy");
 
-  // TODO: add feedback action
-  const onClickFeedback = () => {};
+  const onClickFeedback = () => openFeedbackWindow();
 
   return (
     <Box

govtool/frontend/src/components/organisms/Modal/StatusModal.tsx

@@ -2,7 +2,7 @@ import { Button, Link, Typography } from "@mui/material";
 
 import { ModalContents, ModalHeader, ModalWrapper } from "@atoms";
 import { ICONS, IMAGES } from "@consts";
-import { useModal } from "@context";
+import { useModal, useUsersnapApi } from "@context";
 import { openInNewTab } from "@utils";
 import { useScreenDimension, useTranslation } from "@hooks";
 
@@ -26,6 +26,12 @@ export const StatusModal = () => {
   const { state, closeModal } = useModal<StatusModalState>();
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
+  const { openFeedbackWindow } = useUsersnapApi();
+
+  const onClickFeedback = () => {
+    openFeedbackWindow();
+    closeModal();
+  };
 
   return (
     <ModalWrapper dataTestId={state ? state.dataTestId : "status-modal"}>
@@ -95,7 +101,7 @@ export const StatusModal = () => {
       {state?.feedbackText && (
         <Button
           data-testid="feedback-button"
-          onClick={state?.onFeedback ? state?.onFeedback : closeModal}
+          onClick={state?.onFeedback ? state?.onFeedback : onClickFeedback}
           sx={{
             borderRadius: 50,
             margin: "0 auto",

govtool/frontend/src/context/index.ts

@@ -2,4 +2,5 @@ export * from "./contextProviders";
 export * from "./modal";
 export * from "./pendingTransaction";
 export * from "./snackbar";
+export * from "./usersnapContext";
 export * from "./wallet";

govtool/frontend/src/context/usersnapContext.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState, useContext, useCallback } from "react";
+import { InitOptions, WidgetApi, loadSpace } from "@usersnap/browser";
+import {
+  SpaceEventCallback,
+  SpaceEventName,
+} from "node_modules/@usersnap/browser/dist/types";
+
+const API_KEY = import.meta.env.VITE_USERSNAP_SPACE_API_KEY;
+
+const defaultValues = {
+  openFeedbackWindow: () => {},
+};
+
+export const UsersnapContext = React.createContext(defaultValues);
+
+type API = {
+  init: (params?: InitOptions | undefined) => Promise<void>;
+  logEvent: (eventName: string) => Promise<void>;
+  show: (apiKey: string) => Promise<WidgetApi>;
+  hide: (apiKey: string) => Promise<void>;
+  destroy: () => Promise<void>;
+  on: (eventName: SpaceEventName, callback: SpaceEventCallback) => void;
+  off: (eventName: SpaceEventName, callback: SpaceEventCallback) => void;
+};
+
+export const UsersnapProvider = ({
+  initParams,
+  children,
+}: {
+  initParams?: InitOptions;
+  children?: React.ReactNode;
+}) => {
+  const [usersnapApi, setUsersnapApi] = useState<API | null>(null);
+
+  const openFeedbackWindow = useCallback(() => {
+    if (usersnapApi) {
+      usersnapApi.logEvent("open_feedback");
+    }
+  }, [usersnapApi]);
+
+  useEffect(() => {
+    loadSpace(API_KEY).then((api) => {
+      api.init(initParams);
+      setUsersnapApi(api);
+    });
+  }, [initParams]);
+
+  return (
+    <UsersnapContext.Provider value={{ openFeedbackWindow }}>
+      {children}
+    </UsersnapContext.Provider>
+  );
+};
+
+export function useUsersnapApi() {
+  return useContext(UsersnapContext);
+}

govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts

@@ -223,7 +223,6 @@ export const useCreateGovernanceActionForm = (
               ],
               onSubmit: backToForm,
               onCancel: backToDashboard,
-              onFeedback: backToDashboard,
             },
           });
         } else {
@@ -233,7 +232,7 @@ export const useCreateGovernanceActionForm = (
         setIsLoading(false);
       }
     },
-    [hash],
+    [hash, buildTransaction, buildSignSubmitConwayCertTx],
   );
 
   return {

govtool/frontend/src/hooks/forms/useEditDRepInfoForm.ts

@@ -170,8 +170,6 @@ export const useEditDRepInfoForm = (
               ],
               onSubmit: backToForm,
               onCancel: backToDashboard,
-              // TODO: Open usersnap feedback
-              onFeedback: backToDashboard,
             },
           });
         } else {

govtool/frontend/src/hooks/forms/useRegisterAsdRepForm.tsx

@@ -196,8 +196,6 @@ export const useRegisterAsdRepForm = (
               ],
               onSubmit: backToForm,
               onCancel: backToDashboard,
-              // TODO: Open usersnap feedback
-              onFeedback: backToDashboard,
             },
           });
         } else {

govtool/frontend/src/main.tsx

@@ -13,7 +13,7 @@ import TagManager from "react-gtm-module";
 import { ThemeProvider } from "@emotion/react";
 import * as Sentry from "@sentry/react";
 
-import { ContextProviders } from "@context";
+import { ContextProviders, UsersnapProvider } from "@context";
 
 import App from "./App.tsx";
 import { theme } from "./theme.ts";
@@ -84,11 +84,13 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
-        <BrowserRouter>
-          <ContextProviders>
-            <App />
-          </ContextProviders>
-        </BrowserRouter>
+        <UsersnapProvider>
+          <BrowserRouter>
+            <ContextProviders>
+              <App />
+            </ContextProviders>
+          </BrowserRouter>
+        </UsersnapProvider>
       </ThemeProvider>
       {import.meta.env.VITE_IS_DEV && (
         <ReactQueryDevtools initialIsOpen={false} />

govtool/frontend/yarn.lock

@@ -3926,6 +3926,11 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@usersnap/browser@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@usersnap/browser/-/browser-0.0.5.tgz#95e7ce2ede41448fdee252304922d37467a1bfde"
+  integrity sha512-EG6SOy63lKqqwgS03Olj7iQkptuCIYd2T/o9dM5KYa518F+jycWxlNFVY0Yd5uvzyIRoEAs9TN0goaBHXPBJ3w==
+
 "@vitejs/plugin-react@^3.0.1":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz"