Merge remote-tracking branch 'origin' into feat/notifications-push

gatsby-browser.js

@@ -32,6 +32,7 @@ import { SEGMENT_KEY, SSO_URL } from "./src/constants"
 import { flattenMessages } from "./src/utils/intl"
 import en from "./src/intl/en.json"
 import SnapshotStatus from "./src/components/Debug/SnapshotStatus"
+import SNAPSHOT_STATUS_ENABLED from "./src/constants"
 
 const queryClient = new QueryClient()
 
@@ -50,7 +51,7 @@ export const wrapPageElement = ({ element, props }) => {
       <IntlProvider defaultLocale='en' locale='en' messages={flattenMessages(en)}>
         <IdentityModalContextProvider>
           <BurgerMenuStatusContextProvider>
-            <SnapshotStatus />
+            {SNAPSHOT_STATUS_ENABLED && <SnapshotStatus />}
             <Layout {...props} rightMenu={<Navbar />}>
               {element}
             </Layout>

package.json

@@ -61,11 +61,14 @@
     "@tanstack/react-query": "^4.29.7",
     "autoprefixer": "^10.4.4",
     "chalk": "^4.1.2",
-    "chart.js": "^3.8.2",
+    "chart.js": "^4.4.0",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
+    "chartjs-plugin-annotation": "^3.0.1",
     "classnames": "^2.3.2",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.21.1",
     "cssnano": "^6.0.1",
+    "dayjs": "^1.11.9",
     "dayjs-precise-range": "^1.0.1",
     "dcl-catalyst-client": "^21.5.0",
     "decentraland-gatsby": "^5.86.3",
@@ -98,7 +101,7 @@
     "pg-tsquery": "^8.3.0",
     "postcss": "^8.4.12",
     "react": "^17.0.2",
-    "react-chartjs-2": "^4.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^17.0.2",
     "react-flickity-component": "^3.6.2",
     "react-hook-form": "^7.43.5",

src/back/jobs/PingSnapshot.ts

@@ -1,5 +1,8 @@
+import { SNAPSHOT_STATUS_ENABLED } from '../../constants'
 import { SnapshotService } from '../../services/SnapshotService'
 
 export async function pingSnapshot() {
-  await SnapshotService.ping()
+  if (SNAPSHOT_STATUS_ENABLED) {
+    await SnapshotService.ping()
+  }
 }

src/components/Charts/LineChart.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { Chart } from 'react-chartjs-2'
 import { useIntl } from 'react-intl'
 
-import { ChartArea, ChartData, Chart as ChartJS } from 'chart.js'
+import type { ChartArea, ChartData, Chart as ChartJS } from 'chart.js'
 import 'chart.js/auto'
 
 import useAbbreviatedFormatter from '../../hooks/useAbbreviatedFormatter'

src/components/Charts/ProposalVPChart.css

@@ -0,0 +1,49 @@
+#ProposalVPChartTooltip {
+  --padding-size: 9px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: rgba(22, 20, 26, 0.9);
+  border-radius: 5px;
+  color: var(--white-900);
+  opacity: 1;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, 0);
+  transition: all 0.1s ease;
+  width: max-content;
+  padding: var(--padding-size);
+  z-index: 100;
+}
+
+#ProposalVPChartTooltip .avatar {
+  --size: 40px;
+  min-width: var(--size) !important;
+  max-width: var(--size) !important;
+  min-height: var(--size) !important;
+  max-height: var(--size) !important;
+  border-radius: 100%;
+  background-color: var(--black-600);
+  vertical-align: middle;
+  margin: 0;
+}
+
+#ProposalVPChartTooltip .container {
+  margin: 0;
+  margin-left: var(--padding-size);
+}
+
+#ProposalVPChartTooltip .title {
+  font-size: 13px;
+  font-style: normal;
+  line-height: 18px;
+  max-width: 160px;
+}
+
+#ProposalVPChartTooltip .details {
+  font-size: 10px;
+  font-style: normal;
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  opacity: 0.6;
+}