fix: add logger service and logger hook

src/App.tsx

@@ -15,6 +15,7 @@ import MainScrollManagerProvider from "./hooks/main-scroll-manager";
 import EnvsMonitoring from "./components/EnvsMonitoring";
 import { ServicesFactory } from "./services/services-factory";
 import AnalyticsProvider from "./hooks/analytics/Provider";
+import { LoggerProvider } from "./hooks/logger";
 
 const FONTS_LIST = [
  "BebasNeuePro-Regular",
@@ -29,6 +30,8 @@ const FONTS_LIST = [
 const services = ServicesFactory.init({
  env,
 });
+const logger = services.getLoggerService();
+const vaultClient = services.getVaultClient();
 
 // TODO REFACTOR THIS TO AVOID THIS GLOBAL VARIABLE AND USE A CONTEXT INSTEAD WITH HOOKS TO ACCESS SERVICES
 const isImpersonated = services.getVaultConfigParser().get()?.vault?.impersonate?.length > 0;
@@ -40,61 +43,60 @@ const removeHexadecimalNumbers = (event: Sentry.Event) => {
  return JSON.parse(eventHexadecimalNumbers);
 };
 
-!env.disabledSentry &&
- Sentry.init({
- dsn: "https://[email protected]/4504838094323712",
- integrations: [
- new Sentry.Integrations.Breadcrumbs({
- fetch: false,
- xhr: false,
- }),
- ],
- release: env.sentryReleaseName,
- ignoreErrors: [
- // Random plugins/extensions
- "top.GLOBALS",
- // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
- "originalCreateNotification",
- "canvas.contentDocument",
- "MyApp_RemoveAllHighlights",
- "http://tt.epicplay.com",
- "Can't find variable: ZiteReader",
- "jigsaw is not defined",
- "ComboSearch is not defined",
- "http://loading.retry.widdit.com/",
- "atomicFindClose",
- // Facebook borked
- "fb_xd_fragment",
- // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
- // reduce this. (thanks @acdha)
- // See http://stackoverflow.com/questions/4113268
- "bmi_SafeAddOnload",
- "EBCallBackMessageReceived",
- // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
- "conduitPage",
- ],
- denyUrls: [
- // Facebook flakiness
- /graph\.facebook\.com/i,
- // Facebook blocked
- /connect\.facebook\.net\/en_US\/all\.js/i,
- // Woopra flakiness
- /eatdifferent\.com\.woopra-ns\.com/i,
- /static\.woopra\.com\/js\/woopra\.js/i,
- // Chrome extensions
- /extensions\//i,
- /^chrome:\/\//i,
- // Other plugins
- /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
- /webappstoolbarba\.texthelp\.com\//i,
- /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
- ],
- environment: env.name,
- tracesSampleRate: 1.0,
- beforeSend(event) {
- return removeHexadecimalNumbers(event);
- },
- });
+Sentry.init({
+ dsn: "https://[email protected]/4504838094323712",
+ integrations: [
+ new Sentry.Integrations.Breadcrumbs({
+ fetch: false,
+ xhr: false,
+ }),
+ ],
+ release: env.sentryReleaseName,
+ ignoreErrors: [
+ // Random plugins/extensions
+ "top.GLOBALS",
+ // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
+ "originalCreateNotification",
+ "canvas.contentDocument",
+ "MyApp_RemoveAllHighlights",
+ "http://tt.epicplay.com",
+ "Can't find variable: ZiteReader",
+ "jigsaw is not defined",
+ "ComboSearch is not defined",
+ "http://loading.retry.widdit.com/",
+ "atomicFindClose",
+ // Facebook borked
+ "fb_xd_fragment",
+ // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
+ // reduce this. (thanks @acdha)
+ // See http://stackoverflow.com/questions/4113268
+ "bmi_SafeAddOnload",
+ "EBCallBackMessageReceived",
+ // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
+ "conduitPage",
+ ],
+ denyUrls: [
+ // Facebook flakiness
+ /graph\.facebook\.com/i,
+ // Facebook blocked
+ /connect\.facebook\.net\/en_US\/all\.js/i,
+ // Woopra flakiness
+ /eatdifferent\.com\.woopra-ns\.com/i,
+ /static\.woopra\.com\/js\/woopra\.js/i,
+ // Chrome extensions
+ /extensions\//i,
+ /^chrome:\/\//i,
+ // Other plugins
+ /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
+ /webappstoolbarba\.texthelp\.com\//i,
+ /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+ ],
+ environment: env.name,
+ tracesSampleRate: 1.0,
+ beforeSend(event) {
+ return removeHexadecimalNumbers(event);
+ },
+});
 
 function App() {
  useEffect(() => {
@@ -112,26 +114,26 @@ function App() {
  Promise.all(FONTS_LIST.map((font) => loadFonts(font)));
  }, []);
 
- // services from the factoryService to SismoProvider and vaultProvider
-
  return (
  <AnalyticsProvider>
  <MainScrollManagerProvider>
  <WalletProvider>
  <NotificationsProvider>
  <SismoVaultProvider services={services} isImpersonated={isImpersonated}>
  <SismoProvider services={services}>
- <GenerateRecoveryKeyModalProvider>
- <MyVaultModalProvider>
- <ImportAccountModalProvider>
- <EnvsMonitoring isImpersonated={isImpersonated}>
- <Theme>
- <Pages isImpersonated={isImpersonated} />
- </Theme>
- </EnvsMonitoring>
- </ImportAccountModalProvider>
- </MyVaultModalProvider>
- </GenerateRecoveryKeyModalProvider>
+ <LoggerProvider logger={logger} vaultClient={vaultClient}>
+ <GenerateRecoveryKeyModalProvider>
+ <MyVaultModalProvider>
+ <ImportAccountModalProvider>
+ <EnvsMonitoring isImpersonated={isImpersonated}>
+ <Theme>
+ <Pages isImpersonated={isImpersonated} />
+ </Theme>
+ </EnvsMonitoring>
+ </ImportAccountModalProvider>
+ </MyVaultModalProvider>
+ </GenerateRecoveryKeyModalProvider>
+ </LoggerProvider>
  </SismoProvider>
  </SismoVaultProvider>
  </NotificationsProvider>

src/components/EnvsMonitoring/index.tsx

@@ -1,10 +1,10 @@
-import * as Sentry from "@sentry/react";
 import axios from "axios";
 import React, { useEffect } from "react";
 import env from "../../environment";
 import { useVault } from "../../hooks/vault";
 import packageJson from "../../../package.json";
 import { getMainMinified } from "../../utils/getMain";
+import { useLogger } from "../../hooks/logger";
 
 const COMMITMENT_MAPPER_PUBKEY = env.sismoDestination.commitmentMapperPubKey;
 
@@ -16,6 +16,7 @@ export default function EnvsMonitoring({
  children: React.ReactNode;
 }): JSX.Element {
  const vault = useVault();
+ const logger = useLogger();
 
  useEffect(() => {
  const logEnvironment = async () => {
@@ -54,7 +55,7 @@ export default function EnvsMonitoring({
  if (!vault.importedAccounts) return;
  if (env.name === "DEMO") return;
  if (isImpersonated) return;
- const test = () => {
+ const testCommitmentMapper = () => {
  for (let account of [...vault.importedAccounts]) {
  if (
  COMMITMENT_MAPPER_PUBKEY[0] !== account.commitmentMapperPubKey[0] ||
@@ -65,13 +66,15 @@ export default function EnvsMonitoring({
  )}\nenv pubKey = [${(window as any).env.commitmentMapperPubKey}]\nvault pubKey = [${
  account.commitmentMapperPubKey
  }]`;
- console.error(msg);
- Sentry.captureMessage(msg);
+ logger.error({
+ error: new Error(msg),
+ sourceId: "app-EnvsMonitoring-testCommitmentMapper",
+ });
  }
  }
  };
- test();
- }, [vault.importedAccounts, isImpersonated]);
+ testCommitmentMapper();
+ }, [vault.importedAccounts, isImpersonated, logger]);
 
  return <div>{children}</div>;
 }

src/components/Notifications/index.tsx

@@ -2,18 +2,19 @@ import styled from "styled-components";
 import Icon from "../Icon";
 import colors from "../../theme/colors";
 import { useNotifications } from "./provider";
+import { CircleWavyWarning } from "phosphor-react";
 
 const Container = styled.div`
  position: fixed;
  bottom: 60px;
  right: 60px;
- z-index: 4000;
+ z-index: 40000;
 `;
 
-const Notification = styled.div<{ backgroundColor: string }>`
+const Notification = styled.div<{ backgroundColor: string; withCode: boolean }>`
  max-width: 290px;
  min-width: 100px;
- padding: 10px 20px;
+ padding: 10px 25px 10px 10px;
  background-color: ${(props) => props.backgroundColor};
  border-radius: 5px;
  margin-top: 10px;
@@ -22,6 +23,7 @@ const Notification = styled.div<{ backgroundColor: string }>`
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
+ gap: 10px;
 
  transition: all 0.3s;
 
@@ -35,21 +37,35 @@ const Notification = styled.div<{ backgroundColor: string }>`
  transform: translate3d(0, 0, 0);
  }
  }
+ ${(props) =>
+ props.withCode &&
+ `
+ padding-bottom: 20px;
+ `}
 `;
 
 const NotificationText = styled.div`
  font-size: 14px;
  color: ${(props) => props.color};
- margin-left: 10px;
- padding-right: 10px;
+`;
+
+const NotificationCode = styled.div`
+ position: absolute;
+ bottom: 5px;
+ right: 20px;
+ font-size: 9px;
+ color: ${(props) => props.color};
 `;
 
 const Close = styled.div`
  position: absolute;
- right: 12px;
+ right: 5px;
+ top: 2px;
  cursor: pointer;
 `;
 
+const IconContainer = styled.div``;
+
 export default function Notifications(): JSX.Element {
  const color = "#13203D";
  const { notifications, notificationDeleted } = useNotifications();
@@ -63,13 +79,21 @@ export default function Notifications(): JSX.Element {
  backgroundColor = colors.error;
  }
  return (
- <Notification backgroundColor={backgroundColor} key={"notif" + notif.id}>
- {notif.type === "success" && (
- <Icon name={"confirmNotif-outline-blue"} style={{ marginTop: 5 }} />
- )}
+ <Notification
+ backgroundColor={backgroundColor}
+ key={"notif" + notif.id}
+ withCode={Boolean(notif.code)}
+ >
+ <IconContainer>
+ {notif.type === "success" && (
+ <Icon name={"confirmNotif-outline-blue"} style={{ marginTop: 5, width: 17 }} />
+ )}
+ {notif.type === "error" && <CircleWavyWarning size="21" color={color} />}
+ </IconContainer>
  <NotificationText color={color}>{notif.text}</NotificationText>
+ <NotificationCode color={color}>{notif.code}</NotificationCode>
  <Close onClick={() => notificationDeleted(notif.id)}>
- <Icon name={"cross-outline-blue"} />
+ <Icon name={"cross-outline-blue"} style={{ width: 12, height: 12 }} />
  </Close>
  </Notification>
  );

src/components/Notifications/provider/index.tsx

@@ -9,6 +9,7 @@ export type NotificationsState = {
 export type Notification = {
  type: "error" | "info" | "warning" | "success";
  text: string;
+ code?: string;
  id?: number;
 };
 
@@ -49,6 +50,7 @@ export default function NotificationsProvider({
  return _notifications;
  });
  }, []);
+
  const notificationDeleted = (id: number) => {
  setNotifications((currentNotifications) => {
  const _notifications = [...currentNotifications];