Feature/enable tracking (#64)

* feat: Enable event tracking * update event tracking to use DefinePlugin * refactor: Remove interface I prefixes, enable eslint rule Co-authored-by: Hank Stoever <hstove@gmail.com>
leather-io · Jan 24, 2020 · aa466c5 · aa466c5
1 parent 6a34531
commit aa466c5
Show file tree

Hide file tree

Showing 21 changed files with 426 additions and 62 deletions.
diff --git a/packages/app/.eslintrc.js b/packages/app/.eslintrc.js
@@ -64,7 +64,7 @@ module.exports = {
     '@typescript-eslint/class-name-casing': 'off',
     '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/interface-name-prefix': [2],
     'react/jsx-uses-vars': [2],
     'react/jsx-key': [0],
     'react/prop-types': [0],

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -27,6 +27,8 @@
     "@blockstack/keychain": "^0.1.2",
     "@blockstack/prettier-config": "^0.0.5",
     "@blockstack/ui": "^1.0.0-alpha.24",
+    "@segment/analytics.js-core": "^3.10.1",
+    "@types/segment-analytics": "^0.0.32",
     "formik": "^2.0.3",
     "mdi-react": "^6.6.0",
     "react": "^16.12.0",

diff --git a/packages/app/public/html/actions.html b/packages/app/public/html/actions.html
@@ -4,6 +4,14 @@
 <head>
   <meta charset="UTF-8">
   <title><%= htmlWebpackPlugin.options.title %></title>
+  <script>
+    !function () {
+        var analytics = window.analytics = window.analytics || []; if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); else {
+        analytics.invoked = !0; analytics.methods = ["trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on"]; analytics.factory = function (t) { return function () { var e = Array.prototype.slice.call(arguments); e.unshift(t); analytics.push(e); return analytics } }; for (var t = 0; t < analytics.methods.length; t++) { var e = analytics.methods[t]; analytics[e] = analytics.factory(e) } analytics.load = function (t, e) { var n = document.createElement("script"); n.type = "text/javascript"; n.async = !0; n.src = "https://cdn.segment.com/analytics.js/v1/" + t + "analytics.min.js"; var a = document.getElementsByTagName("script")[0]; a.parentNode.insertBefore(n, a); analytics._loadOptions = e }; analytics.SNIPPET_VERSION = "4.1.0";
+          analytics.load("<%= SEGMENT_KEY %>");
+        }
+      }();
+  </script>
 </head>
 
 <body>

diff --git a/packages/app/src/common/track.ts b/packages/app/src/common/track.ts
@@ -38,11 +38,8 @@ const SIGN_IN_FORGOT = 'auth_existing_forgot_secret_key'; // was not specified i
 const SIGN_IN_INCORRECT = 'auth_existing_entered_incorrect_secret_key';
 
 const doTrack = (type: string, payload?: string | object) => {
-  // if (process.browser) {
-  //   console.log('tracking: ', { type, payload });
-  //   window.analytics.track(type, payload);
-  // }
   console.log('Tracking:', { type, payload });
+  window.analytics.track(type, payload);
 };
 
 export {

diff --git a/packages/app/src/components/seed.tsx b/packages/app/src/components/seed.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { validateMnemonic } from 'bip39';
 import { useSelector, useDispatch } from 'react-redux';
 import { Box, Input, Text, Button, FormControl, FormLabel } from '@blockstack/ui';
-import { IAppState } from '../store';
+import { AppState } from '../store';
 import { doStoreSeed, doGenerateWallet } from '../store/wallet';
 import { Formik, FormikErrors } from 'formik';
 import { selectCurrentWallet, selectIsRestoringWallet } from '../store/wallet/selectors';
@@ -13,7 +13,7 @@ interface FormValues {
 }
 
 const Seed = () => {
-  const { wallet, restoring } = useSelector((state: IAppState) => ({
+  const { wallet, restoring } = useSelector((state: AppState) => ({
     wallet: selectCurrentWallet(state),
     restoring: selectIsRestoringWallet(state),
   }));

diff --git a/packages/app/src/components/sign-up/app-icon/index.tsx b/packages/app/src/components/sign-up/app-icon/index.tsx
@@ -5,12 +5,12 @@ import { Image } from '../../image';
 
 import { useSelector } from 'react-redux';
 
-import { IAppState } from '../../../store';
+import { AppState } from '../../../store';
 import { selectAppName, selectAppIcon } from '../../../store/onboarding/selectors';
 
 const AppIcon: React.FC = ({ ...rest }) => {
-  const appIcon = useSelector((state: IAppState) => selectAppIcon(state));
-  const appName = useSelector((state: IAppState) => selectAppName(state));
+  const appIcon = useSelector((state: AppState) => selectAppIcon(state));
+  const appName = useSelector((state: AppState) => selectAppName(state));
   return (
     <Box size={['48px', '78px']} mx="auto" {...rest}>
       <Image src={appIcon} alt={appName} />

diff --git a/packages/app/src/components/sign-up/modal/index.tsx b/packages/app/src/components/sign-up/modal/index.tsx
@@ -49,15 +49,15 @@ const AppIcon: React.FC<AppIconProps> = ({ src, name, ...rest }) => (
   </Box>
 );
 
-interface IModalHeader {
+interface ModalHeader {
   appIcon?: string;
   appName?: string;
   title: string;
   close: () => void;
   hideIcon?: boolean;
 }
 
-const ModalHeader = ({ appIcon, close, title, hideIcon, appName, ...rest }: IModalHeader) => {
+const ModalHeader = ({ appIcon, close, title, hideIcon, appName, ...rest }: ModalHeader) => {
   return (
     <Flex
       p={[4, 5]}

diff --git a/packages/app/src/components/sign-up/onboarding/index.tsx b/packages/app/src/components/sign-up/onboarding/index.tsx
@@ -3,15 +3,15 @@ import { Create, SecretKey, Connect, SaveKey, SignIn } from './screens';
 import { DecryptRecoveryCode } from './screens/decrypt-recovery-code';
 import { doChangeScreen, doSaveAuthRequest } from '../../../store/onboarding/actions';
 import { useSelector, useDispatch } from 'react-redux';
-import { IAppState } from '../../../store';
+import { AppState } from '../../../store';
 import { ScreenName } from '../../../store/onboarding/types';
 import { selectCurrentWallet } from '../../../store/wallet/selectors';
 import { selectCurrentScreen, selectDecodedAuthRequest, selectAuthRequest } from '../../../store/onboarding/selectors';
 import { authenticationInit, finalizeAuthResponse } from '../../../common/utils';
 
 const RenderScreen = ({ ...rest }) => {
   const dispatch = useDispatch();
-  const { screen, wallet, decodedAuthRequest, authRequest } = useSelector((state: IAppState) => ({
+  const { screen, wallet, decodedAuthRequest, authRequest } = useSelector((state: AppState) => ({
     screen: selectCurrentScreen(state),
     wallet: selectCurrentWallet(state),
     decodedAuthRequest: selectDecodedAuthRequest(state),

diff --git a/packages/app/src/components/sign-up/onboarding/screens/connect.tsx b/packages/app/src/components/sign-up/onboarding/screens/connect.tsx
@@ -4,7 +4,7 @@ import { AppIcon } from '../../app-icon';
 import { Link } from '../../../link';
 import { doTrack, CONNECT_SAVED, CONNECT_INCORRECT, CONNECT_BACK } from '../../../../common/track';
 import { useSelector } from 'react-redux';
-import { IAppState } from '../../../../store';
+import { AppState } from '../../../../store';
 import { selectAppName, selectSecretKey } from '../../../../store/onboarding/selectors';
 import { ScreenHeader } from '../../header';
 import { ScreenBody, ScreenActions, ScreenFooter, Screen } from '../../screen';
@@ -21,7 +21,7 @@ interface ConnectProps {
 }
 
 export const Connect: React.FC<ConnectProps> = props => {
-  const { appName, seed } = useSelector((state: IAppState) => ({
+  const { appName, seed } = useSelector((state: AppState) => ({
     appName: selectAppName(state),
     seed: selectSecretKey(state),
   }));

diff --git a/packages/app/src/components/sign-up/onboarding/screens/decrypt-recovery-code.tsx b/packages/app/src/components/sign-up/onboarding/screens/decrypt-recovery-code.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Box, Input, Text } from '@blockstack/ui';
 import { decrypt } from '@blockstack/keychain';
 import { useSelector, useDispatch } from 'react-redux';
-import { IAppState } from '../../../../store';
+import { AppState } from '../../../../store';
 import { selectMagicRecoveryCode } from '../../../../store/onboarding/selectors';
 import { doTrack, SIGN_IN_CORRECT } from '../../../../common/track';
 import { doStoreSeed } from '../../../../store/wallet/actions';
@@ -20,7 +20,7 @@ export const DecryptRecoveryCode: React.FC<RecoveryProps> = ({ next }) => {
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
 
-  const recoveryCode = useSelector((state: IAppState) => selectMagicRecoveryCode(state) as string);
+  const recoveryCode = useSelector((state: AppState) => selectMagicRecoveryCode(state) as string);
   return (
     <Screen isLoading={loading}>
       <ScreenHeader appIcon />

diff --git a/packages/app/src/components/sign-up/onboarding/screens/final.tsx b/packages/app/src/components/sign-up/onboarding/screens/final.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AppIcon } from '../../app-icon';
 
 import { useSelector } from 'react-redux';
-import { IAppState } from '../../../../store';
+import { AppState } from '../../../../store';
 import { selectAppName } from '../../../../store/onboarding/selectors';
 import { Wallet } from '@blockstack/keychain';
 import { Screen, ScreenBody, ScreenActions } from '../../screen';
@@ -13,7 +13,7 @@ interface FinalProps {
 }
 
 export const Final: React.FC<FinalProps> = props => {
-  const appName = useSelector((state: IAppState) => selectAppName(state));
+  const appName = useSelector((state: AppState) => selectAppName(state));
   return (
     <Screen textAlign="center">
       <AppIcon />

diff --git a/packages/app/src/components/sign-up/onboarding/screens/save-key.tsx b/packages/app/src/components/sign-up/onboarding/screens/save-key.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { Collapse } from '../../collapse';
-import { IAppState } from '../../../../store';
+import { AppState } from '../../../../store';
 
 import { selectAppName } from '../../../../store/onboarding/selectors';
 import { faqs } from '../data';
@@ -17,7 +17,7 @@ interface SaveKeyProps {
 }
 
 export const SaveKey: React.FC<SaveKeyProps> = ({ next }) => {
-  const appName = useSelector((state: IAppState) => selectAppName(state));
+  const appName = useSelector((state: AppState) => selectAppName(state));
   return (
     <Screen>
       <ScreenHeader appIcon />

diff --git a/packages/app/src/components/sign-up/onboarding/screens/secret-key.tsx b/packages/app/src/components/sign-up/onboarding/screens/secret-key.tsx
@@ -7,7 +7,7 @@ import { SeedTextarea } from '../../seed-textarea';
 
 import { doTrack, SECRET_KEY_INTRO_COPIED } from '../../../../common/track';
 
-import { IAppState } from '../../../../store';
+import { AppState } from '../../../../store';
 import { selectSecretKey } from '../../../../store/onboarding/selectors';
 import { ScreenHeader } from '../../header';
 import { Screen, ScreenBody, ScreenActions } from '../../screen';
@@ -17,7 +17,7 @@ interface SecretKeyProps {
 }
 
 export const SecretKey: React.FC<SecretKeyProps> = props => {
-  const { secretKey } = useSelector((state: IAppState) => ({
+  const { secretKey } = useSelector((state: AppState) => ({
     secretKey: selectSecretKey(state),
   }));
   const [copied, setCopiedState] = React.useState(false);

diff --git a/packages/app/src/components/sign-up/onboarding/screens/sign-in.tsx b/packages/app/src/components/sign-up/onboarding/screens/sign-in.tsx
@@ -5,7 +5,7 @@ import { doTrack, SIGN_IN_CORRECT, SIGN_IN_CREATE, SIGN_IN_INCORRECT } from '../
 import { doChangeScreen, doSetMagicRecoveryCode } from '../../../../store/onboarding/actions';
 import { useDispatch, useSelector } from 'react-redux';
 import { ScreenName, DEFAULT_PASSWORD } from '../../../../store/onboarding/types';
-import { IAppState } from '../../../../store';
+import { AppState } from '../../../../store';
 import { selectAppName } from '../../../../store/onboarding/selectors';
 import { doStoreSeed } from '../../../../store/wallet';
 import { ScreenHeader } from '../../header';
@@ -21,7 +21,7 @@ export const SignIn: React.FC<SignInProps> = props => {
   const [seed, setSeed] = useState('');
   const [seedError, setSeedError] = useState<null | string>(null);
   const dispatch = useDispatch();
-  const appName = useSelector((state: IAppState) => selectAppName(state));
+  const appName = useSelector((state: AppState) => selectAppName(state));
 
   return (
     <Screen isLoading={isLoading} textAlign="center">

diff --git a/packages/app/src/pages/onboarding.tsx b/packages/app/src/pages/onboarding.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Onboarding } from '../components/sign-up/onboarding';
 import { ThemeProvider, theme, CSSReset } from '@blockstack/ui';
 
+import { Onboarding } from '../components/sign-up/onboarding';
+
 export const OnboardingApp: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>

diff --git a/packages/app/src/store/index.ts b/packages/app/src/store/index.ts
@@ -8,13 +8,13 @@ import { WalletTransform } from './transforms';
 import { onboardingReducer } from './onboarding/reducer';
 import { OnboardingState } from './onboarding/types';
 
-export interface IAppState {
+export interface AppState {
   wallet: WalletState;
   permissions: PermissionsState;
   onboarding: OnboardingState;
 }
 
-const reducers = combineReducers<IAppState>({
+const reducers = combineReducers<AppState>({
   wallet: walletReducer,
   permissions: permissionsReducer,
   onboarding: onboardingReducer,
@@ -38,7 +38,7 @@ const middleware = compose(
 
 export const middlewareComponents = [thunk];
 
-export const store: Store<IAppState> = createStore(persistedReducer, undefined, middleware);
+export const store: Store<AppState> = createStore(persistedReducer, undefined, middleware);
 
 export const persistor = persistStore(store);
 

diff --git a/packages/app/src/store/onboarding/selectors.ts b/packages/app/src/store/onboarding/selectors.ts
@@ -1,15 +1,15 @@
-import { IAppState } from '..';
+import { AppState } from '..';
 
-export const selectCurrentScreen = (state: IAppState) => state.onboarding.screen;
+export const selectCurrentScreen = (state: AppState) => state.onboarding.screen;
 
-export const selectSecretKey = (state: IAppState) => state.onboarding.secretKey;
+export const selectSecretKey = (state: AppState) => state.onboarding.secretKey;
 
-export const selectDecodedAuthRequest = (state: IAppState) => state.onboarding.decodedAuthRequest;
+export const selectDecodedAuthRequest = (state: AppState) => state.onboarding.decodedAuthRequest;
 
-export const selectAuthRequest = (state: IAppState) => state.onboarding.authRequest;
+export const selectAuthRequest = (state: AppState) => state.onboarding.authRequest;
 
-export const selectAppName = (state: IAppState) => state.onboarding.appName;
+export const selectAppName = (state: AppState) => state.onboarding.appName;
 
-export const selectAppIcon = (state: IAppState) => state.onboarding.appIcon;
+export const selectAppIcon = (state: AppState) => state.onboarding.appIcon;
 
-export const selectMagicRecoveryCode = (state: IAppState) => state.onboarding.magicRecoveryCode;
+export const selectMagicRecoveryCode = (state: AppState) => state.onboarding.magicRecoveryCode;
diff --git a/packages/app/src/store/permissions/selectors.ts b/packages/app/src/store/permissions/selectors.ts
@@ -1,5 +1,5 @@
-import { IAppState } from '..';
+import { AppState } from '..';
 
-export const selectAuthRequest = (state: IAppState) => state.permissions.authRequest;
+export const selectAuthRequest = (state: AppState) => state.permissions.authRequest;
 
-export const selectDecodedAuthRequest = (state: IAppState) => state.permissions.decodedAuthRequest;
+export const selectDecodedAuthRequest = (state: AppState) => state.permissions.decodedAuthRequest;
diff --git a/packages/app/src/store/wallet/selectors.ts b/packages/app/src/store/wallet/selectors.ts
@@ -1,9 +1,9 @@
-import { IAppState } from '..';
+import { AppState } from '..';
 
-export const selectCurrentWallet = (state: IAppState) => {
+export const selectCurrentWallet = (state: AppState) => {
   return state.wallet.currentWallet;
 };
 
-export const selectSeed = (state: IAppState) => state.wallet.seed;
+export const selectSeed = (state: AppState) => state.wallet.seed;
 
-export const selectIsRestoringWallet = (state: IAppState) => state.wallet.isRestoringWallet;
+export const selectIsRestoringWallet = (state: AppState) => state.wallet.isRestoringWallet;
diff --git a/packages/app/webpack.config.js b/packages/app/webpack.config.js
@@ -15,6 +15,7 @@ const distRootPath = path.join(__dirname, 'dist');
 const nodeEnv = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';
 const webBrowser = process.env.WEB_BROWSER ? process.env.WEB_BROWSER : 'chrome';
 const isDevelopment = process.env.NODE_ENV !== 'production';
+const segmentKey = process.env.SEGMENT_KEY || '';
 
 module.exports = {
   entry: {
@@ -110,6 +111,7 @@ module.exports = {
       NODE_ENV: JSON.stringify(nodeEnv),
       WEB_BROWSER: JSON.stringify(webBrowser),
       EXT_ENV: JSON.stringify(process.env.EXT_ENV || 'web'),
+      SEGMENT_KEY: JSON.stringify(segmentKey),
     }),
     isDevelopment && new ReactRefreshWebpackPlugin({ disableRefreshCheck: true }),
   ].filter(Boolean),