Add analytics, telemetry request dialog (#94)

.cspell.json

@@ -41,6 +41,7 @@
     "Locktime",
     "LSHIFT",
     "merkle",
+    "misclicks",
     "NOTIF",
     "NUMEQUALVERIFY",
     "OUTPOINTINDEX",
@@ -52,6 +53,7 @@
     "OUTPUTVALUE",
     "overscroll",
     "pako",
+    "posthog",
     "preauthorize",
     "preimages",
     "PUSHBYTES",

.env.production

@@ -0,0 +1,6 @@
+# Environment variables for testing production features locally
+VITE_PUBLIC_ANALYTICS_ENABLE=1
+# (A staging project for testing analytics locally)
+VITE_PUBLIC_POSTHOG_KEY=phc_xeUF3QojX8qFjOxo4MwiyMzCRyI1RiYL778warJL1ai
+VITE_PUBLIC_POSTHOG_API_HOST=https://app.posthog.com
+VITE_PUBLIC_POSTHOG_UI_HOST=https://app.posthog.com

.github/workflows/ci.yml

@@ -46,8 +46,8 @@ jobs:
       fail-fast: false
       matrix:
         environment: ['dev', 'prod']
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
     name: e2e-tests (${{ matrix.environment }}, ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
     steps:
       - name: Checkout without submodules

package.json

@@ -16,6 +16,7 @@
     "@types/react-redux": "^7.1.33",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
+    "@vercel/analytics": "^1.1.2",
     "@vite-pwa/assets-generator": "^0.2.3",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "cspell": "^8.3.2",
@@ -32,6 +33,7 @@
     "normalize.css": "^8.0.1",
     "nyc": "^15.1.0",
     "pako": "^2.1.0",
+    "posthog-js": "^1.101.0",
     "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -41,7 +43,7 @@
     "redux-devtools-extension": "^2.13.9",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vite-bundle-visualizer": "^1.0.0",
+    "vite-bundle-visualizer": "0.11.0",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-pwa": "^0.17.4",
     "workbox-window": "^7.0.0"
@@ -51,7 +53,7 @@
     "start": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "preview:prod": "yarn build && yarn preview --host",
+    "preview:prod": "NODE_ENV=production yarn build && yarn preview --host",
     "fix": "yarn fix:eslint && yarn fix:prettier",
     "fix:prettier": "prettier . --write",
     "fix:eslint": "yarn test:eslint --fix",
@@ -85,10 +87,10 @@
     "singleQuote": true
   },
   "dependenciesMeta": {
-    "@vite-pwa/assets-generator@0.0.10": {
+    "@vite-pwa/assets-generator@0.2.3": {
       "unplugged": true
     },
-    "vite-bundle-visualizer@0.10.0": {
+    "vite-bundle-visualizer@0.11.0": {
       "unplugged": true
     }
   },

src/editor/constants.ts

@@ -4,6 +4,23 @@ export const bitauthWalletTemplateSchema =
   'https://ide.bitauth.com/authentication-template-v0.schema.json';
 
 export const localStorageBackupPrefix = 'BITAUTH_IDE_BACKUP_';
+
 export const localStorageCorruptedBackupPrefix =
   'BITAUTH_IDE_CORRUPTED_BACKUP_';
+
 export const backupWarningLimit = 500;
+
+export const localStorageTrackingConsent = 'BITAUTH_IDE_TRACKING_CONSENT';
+
+export const localStorageDisableNotifier =
+  'BITAUTH_IDE_E2E_TESTING_DISABLE_NOTIFIER';
+
+export const notifierEnabled = () =>
+  localStorage.getItem(localStorageDisableNotifier) !== 'true';
+
+export const analyticsBuilt =
+  import.meta.env.VITE_PUBLIC_ANALYTICS_ENABLE === '1';
+
+export const analyticsEnabled = () =>
+  analyticsBuilt ||
+  localStorage.getItem('BITAUTH_IDE_E2E_TESTING_ANALYTICS_ENABLE') === 'true';

src/editor/evaluation-viewer/EvaluationViewer.tsx

@@ -262,7 +262,7 @@ const EvaluationLine = ({
       }`}
       onClick={() => {
         console.log(`ProgramState after line #${lineNumber}:`);
-        console.dir(line.state);
+        console.log(stringify(line.state));
       }}
     >
       {line.spacers?.slice(0, sliceSpacersAtIndex).map((type, index) => (

src/header/HeaderBar.css

@@ -87,6 +87,5 @@
   }
   & p {
     margin: 0;
-    font-size: 16px;
   }
 }

src/header/HeaderBar.tsx

@@ -2,10 +2,6 @@ import './HeaderBar.css';
 import { wrapInterfaceTooltip } from '../editor/common';
 import { GuideDialog } from '../editor/dialogs/guide-dialog/GuideDialog';
 import { workingOnWalletMode } from '../state/defaults';
-import {
-  localStorageEventHasNeverHappened,
-  LocalStorageEvents,
-} from '../state/local-storage';
 import { ActionCreators } from '../state/reducer';
 import {
   ActiveDialog,
@@ -23,7 +19,7 @@ import {
 } from '@blueprintjs/core';
 import { Chat, Manual, Notifications } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { connect } from 'react-redux';
 
 type IDESupportedModes = {
@@ -120,22 +116,13 @@ export const HeaderBar = connect(
   },
 )((props: HeaderProps) => {
   const [introPopoverVisible, setIntroPopoverVisible] = useState(false);
+  // TODO: hack to give Notifier control
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+  (window as any).setIntroPopoverVisible = setIntroPopoverVisible;
   const currentIDEMode = ideModes.find((mode) => mode.id === props.ideMode);
   if (currentIDEMode === undefined) {
     throw new Error('Invalid IDE Mode');
   }
-  useEffect(() => {
-    setTimeout(() => {
-      if (
-        localStorageEventHasNeverHappened(
-          LocalStorageEvents.GuidePopoverDismissed,
-        )
-      ) {
-        setIntroPopoverVisible(true);
-      }
-    }, 3000);
-  }, []);
-
   return (
     <div className="HeaderBar">
       <div className="left-section">
@@ -201,7 +188,7 @@ export const HeaderBar = connect(
         {wrapInterfaceTooltip(
           <a
             className="link"
-            href="https://twitter.com/bitauth"
+            href="https://twitter.com/BitauthIDE"
             target="_blank"
             rel="noopener noreferrer"
             tabIndex={4}

src/init/Notifier.css

@@ -0,0 +1,23 @@
+.notifier-request-source {
+  bottom: 1em;
+  left: 1em;
+  position: absolute;
+}
+
+.bp5-popover-content .notifier-request {
+  width: 350px;
+  padding: 1em;
+  background: var(--interface-background-color) !important;
+  line-height: 1.5em;
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1em;
+  }
+  .subtle {
+    margin-right: 10px;
+    background-color: var(--interface-background-color) !important;
+    color: #fffb;
+  }
+}