Merge pull request #1016 from yieldprotocol/improvement/analytics

Improvement/analytics
yieldprotocol · Oct 15, 2022 · 67cc47f · 67cc47f
2 parents 7bd50ba + 55d1aec
commit 67cc47f
Show file tree

Hide file tree

Showing 18 changed files with 419 additions and 64 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -25,12 +25,12 @@ jobs:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
 
-      - name: Audit for vulnerabilities
-        run: npx audit-ci --high
+     # - name: Audit for vulnerabilities
+      #  run: npx audit-ci --high
 
       # Runs a single command using the runners shell
-#       - name: Run a one-line script
-#         run: echo Hello, world!
+       - name: Run a one-line script
+         run: echo CI pre-run
 
 # Runs a set of commands using the runners shell
 #       - name: Run a multi-line script

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-v2",
-  "version": "2.4.14",
+  "version": "2.4.15",
   "private": true,
   "dependencies": {
     "@ethersproject/providers": "^5.6.8",

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -28,19 +28,16 @@ const Layout = ({ children }: ILayout) => {
   return (
     <>
       <Script src="https://www.googletagmanager.com/gtag/js?id=G-QGLQ100R01" strategy="afterInteractive" />
-      <Script id="google-analytics" strategy="afterInteractive">
-        {`if ('%NODE_ENV%' !== 'development') {
-            console.log('PRODUCTION MODE');
-            window.dataLayer = window.dataLayer || [];
+      {process.env.ENV != 'development' && (
+        <Script id="google-analytics" strategy="afterInteractive">
+          {`window.dataLayer = window.dataLayer || [];
           function gtag() {
             dataLayer.push(arguments);
           }
           gtag('js', new Date());
-          gtag('config', 'G-QGLQ100R01');
-        } else {
-          console.log('%NODE_ENV% mode'.toUpperCase()) // development
-        }`}
-      </Script>
+          gtag('config', 'G-QGLQ100R01');`}
+        </Script>
+      )}
       <Head>
         <title>Yield Protocol App</title>
         <meta charSet="utf-8" />

diff --git a/src/components/YieldNavigation.tsx b/src/components/YieldNavigation.tsx
@@ -8,6 +8,8 @@ import { ChainContext } from '../contexts/ChainContext';
 import { useWindowSize } from '../hooks/generalHooks';
 import { SettingsContext } from '../contexts/SettingsContext';
 import { ISettingsContext } from '../types';
+import useAnalytics from '../hooks/useAnalytics';
+import { GA_Event, GA_Properties } from '../types/analytics';
 
 const StyledLink = styled.div`
   text-decoration: none;
@@ -39,6 +41,8 @@ interface IYieldNavigationProps {
 const YieldNavigation = ({ sideNavigation, callbackFn }: IYieldNavigationProps) => {
   const mobile: boolean = useContext<any>(ResponsiveContext) === 'small';
   const router = useRouter();
+  const { logAnalyticsEvent } = useAnalytics();
+
   const [height] = useWindowSize();
   const {
     chainState: {
@@ -65,9 +69,19 @@ const YieldNavigation = ({ sideNavigation, callbackFn }: IYieldNavigationProps)
     { label: 'DASHBOARD', to: '/dashboard', disabled: !account },
   ];
 
+  const handleViewChange = (toView: string) => {
+    console.log(toView.slice(1));
+    logAnalyticsEvent(GA_Event.view_changed, {
+      toView: toView.slice(1),
+    } as GA_Properties.view_changed);
+  };
+
   const NavLink = ({ link }: { link: any }) => (
     <Link href={link.to} passHref>
-      <StyledLink onClick={()=>callbackFn() } style={router.pathname.includes(link.to) ? activelinkStyle : { color: 'gray' }}>
+      <StyledLink
+        onClick={() => handleViewChange(link.to)}
+        style={router.pathname.includes(link.to) ? activelinkStyle : { color: 'gray' }}
+      >
         <NavText size={mobile ? 'medium' : 'small'}>{link.label}</NavText>
       </StyledLink>
     </Link>

diff --git a/src/components/positionItems/LendItem.tsx b/src/components/positionItems/LendItem.tsx
@@ -8,6 +8,8 @@ import PositionAvatar from '../PositionAvatar';
 import ItemWrap from '../wraps/ItemWrap';
 import { useLendHelpers } from '../../hooks/viewHelperHooks/useLendHelpers';
 import SkeletonWrap from '../wraps/SkeletonWrap';
+import useAnalytics from '../../hooks/useAnalytics';
+import { GA_Event, GA_Properties } from '../../types/analytics';
 
 function LendItem({
   series,
@@ -21,6 +23,7 @@ function LendItem({
   condensed?: boolean;
 }) {
   const router = useRouter();
+  const { logAnalyticsEvent } = useAnalytics();
 
   const {
     userState: { assetMap, seriesLoading, selectedSeries, selectedBase },
@@ -34,6 +37,9 @@ function LendItem({
     userActions.setSelectedBase(selectedBase);
     userActions.setSelectedSeries(_series);
     router.push(`/${actionType.toLowerCase()}position/${_series.id}`);
+    logAnalyticsEvent(GA_Event.position_opened, {
+      id: selectedSeries.id,
+    } as GA_Properties.position_opened);
   };
 
   return (

diff --git a/src/components/positionItems/StrategyItem.tsx b/src/components/positionItems/StrategyItem.tsx
@@ -8,9 +8,12 @@ import { formatStrategyName, nFormatter } from '../../utils/appUtils';
 import PositionAvatar from '../PositionAvatar';
 import ItemWrap from '../wraps/ItemWrap';
 import SkeletonWrap from '../wraps/SkeletonWrap';
+import useAnalytics from '../../hooks/useAnalytics';
+import { GA_Event, GA_Properties } from '../../types/analytics';
 
 function StrategyItem({ strategy, index, condensed }: { strategy: IStrategy; index: number; condensed?: boolean }) {
   const router = useRouter();
+  const { logAnalyticsEvent } = useAnalytics();
 
   const {
     userState: { assetMap, seriesMap, strategiesLoading, selectedStrategy },
@@ -26,6 +29,9 @@ function StrategyItem({ strategy, index, condensed }: { strategy: IStrategy; ind
     userActions.setSelectedSeries(series);
     userActions.setSelectedStrategy(strategy);
     router.push(`/poolposition/${strategy.address}`);
+    logAnalyticsEvent(GA_Event.position_opened, {
+      id: strategy.id,
+    } as GA_Properties.position_opened);
   };
 
   return (

diff --git a/src/components/positionItems/VaultItem.tsx b/src/components/positionItems/VaultItem.tsx
@@ -11,9 +11,12 @@ import SkeletonWrap from '../wraps/SkeletonWrap';
 import { useBorrowHelpers } from '../../hooks/viewHelperHooks/useBorrowHelpers';
 import { useAssetPair } from '../../hooks/useAssetPair';
 import { cleanValue } from '../../utils/appUtils';
+import { GA_Event, GA_Properties } from '../../types/analytics';
+import useAnalytics from '../../hooks/useAnalytics';
 
 function VaultItem({ vault, index, condensed }: { vault: IVault; index: number; condensed?: boolean }) {
   const router = useRouter();
+  const { logAnalyticsEvent } = useAnalytics();
 
   const {
     userState: { seriesMap, vaultsLoading, selectedVault, assetMap },
@@ -24,6 +27,9 @@ function VaultItem({ vault, index, condensed }: { vault: IVault; index: number;
   const handleSelect = (_vault: IVault) => {
     setSelectedVault(_vault);
     router.push(`/vaultposition/${_vault.id}`);
+    logAnalyticsEvent(GA_Event.position_opened, {
+      id: _vault.id,
+    } as GA_Properties.position_opened);
   };
   const vaultBase = assetMap.get(vault.baseId);
   const vaultIlk = assetMap.get(vault.ilkId);

diff --git a/src/components/selectors/AssetSelector.tsx b/src/components/selectors/AssetSelector.tsx
@@ -12,6 +12,8 @@ import { WETH, USDC, IGNORE_BASE_ASSETS } from '../../config/assets';
 import { SettingsContext } from '../../contexts/SettingsContext';
 import AssetSelectModal from './AssetSelectModal';
 import Logo from '../logos/Logo';
+import { GA_Event, GA_Properties, GA_View } from '../../types/analytics';
+import useAnalytics from '../../hooks/useAnalytics';
 
 interface IAssetSelectorProps {
   selectCollateral?: boolean;
@@ -44,6 +46,8 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) {
   const [options, setOptions] = useState<IAsset[]>([]);
   const [modalOpen, toggleModal] = useState<boolean>(false);
 
+  const { logAnalyticsEvent } = useAnalytics();
+
   const optionText = (asset: IAsset | undefined) =>
     asset ? (
       <Box direction="row" align="center" gap="small">
@@ -60,10 +64,17 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) {
     if (selectCollateral) {
       diagnostics && console.log('Collateral selected: ', asset.id);
       setSelectedIlk(asset);
+      logAnalyticsEvent(GA_Event.collateral_selected, {
+        asset: asset.symbol,
+      } as GA_Properties.collateral_selected);
     } else {
       diagnostics && console.log('Base selected: ', asset.id);
       setSelectedBase(asset);
       setSelectedSeries(null);
+
+      logAnalyticsEvent(GA_Event.asset_selected, {
+        asset: asset.symbol,
+      } as GA_Properties.asset_selected);
     }
   };
 

diff --git a/src/components/views/Borrow.tsx b/src/components/views/Borrow.tsx
@@ -19,7 +19,7 @@ import CenterPanelWrap from '../wraps/CenterPanelWrap';
 import VaultSelector from '../selectors/VaultPositionSelector';
 import ActiveTransaction from '../ActiveTransaction';
 
-import { analyticsLogEvent, cleanValue, getVaultIdFromReceipt, nFormatter } from '../../utils/appUtils';
+import { cleanValue, getTxCode, getVaultIdFromReceipt, nFormatter } from '../../utils/appUtils';
 
 import YieldInfo from '../YieldInfo';
 import BackButton from '../buttons/BackButton';
@@ -48,11 +48,15 @@ import VaultItem from '../positionItems/VaultItem';
 import { useAssetPair } from '../../hooks/useAssetPair';
 import Line from '../elements/Line';
 import useTenderly from '../../hooks/useTenderly';
+import { GA_Event, GA_Properties, GA_View } from '../../types/analytics';
+import useAnalytics from '../../hooks/useAnalytics';
 
 const Borrow = () => {
   const mobile: boolean = useContext<any>(ResponsiveContext) === 'small';
   useTenderly();
 
+  const { logAnalyticsEvent } = useAnalytics();
+
   /* STATE FROM CONTEXT */
   const {
     chainState: {
@@ -132,16 +136,43 @@ const Borrow = () => {
     const _vault = vaultToUse?.id ? vaultToUse : undefined; // if vaultToUse has id property, use it
     setBorrowDisabled(true);
     borrow(_vault, borrowInput, collatInput);
+
+    logAnalyticsEvent(GA_Event.transaction_initiated, {
+      view: GA_View.BORROW,
+      seriesId: selectedSeries?.id!,
+      actionCode: ActionCodes.BORROW,
+      supporting_collateral: selectedIlk.symbol,
+    } as GA_Properties.transaction_initiated);
   };
 
   useEffect(() => {
     setRenderId(new Date().getTime().toString(36));
   }, []);
 
+  /** Interaction handlers */
   const handleNavAction = (_stepPosition: number) => {
     _stepPosition === 0 && setSelectedIlk(assetMap.get('0x303000000000')!);
     setStepPosition(_stepPosition);
-    analyticsLogEvent('NAVIGATION', { screen: 'BORROW', step: _stepPosition, renderId }, chainId);
+    logAnalyticsEvent(GA_Event.next_step_clicked, {
+      view: GA_View.BORROW,
+      step_index: _stepPosition,
+    } as GA_Properties.next_step_clicked);
+  };
+
+  const handleMaxAction = (actionCode: ActionCodes) => {
+    actionCode === ActionCodes.ADD_COLLATERAL && setCollatInput(maxCollateral);
+    actionCode === ActionCodes.BORROW && selectedSeries && setBorrowInput(selectedSeries.sharesReserves_!);
+    logAnalyticsEvent(GA_Event.max_clicked, {
+      view: GA_View.BORROW,
+      actionCode,
+    } as GA_Properties.max_clicked);
+  };
+
+  const handleUseSafeCollateral = () => {
+    selectedIlk && setCollatInput(cleanValue(minSafeCollateral, selectedIlk.decimals));
+    logAnalyticsEvent(GA_Event.safe_collateralization_clicked, {
+      view: GA_View.BORROW,
+    } as GA_Properties.safe_collateralization_clicked);
   };
 
   const handleGaugeColorChange: any = (val: string) => {
@@ -304,7 +335,7 @@ const Borrow = () => {
                 </Box>
 
                 {!borrowInputError && borrowInput && !borrowPossible && selectedSeries && (
-                  <InputInfoWrap action={() => setBorrowInput(selectedSeries?.sharesReserves_!)}>
+                  <InputInfoWrap action={() => handleMaxAction(ActionCodes.BORROW)}>
                     <Text size="xsmall" color="text-weak">
                       Max borrow is{' '}
                       <Text size="small" color="text-weak">
@@ -401,7 +432,7 @@ const Borrow = () => {
                               disabled={!selectedSeries || selectedSeries.seriesIsMature}
                             />
                             <MaxButton
-                              action={() => maxCollateral && setCollatInput(maxCollateral)}
+                              action={() => maxCollateral && handleMaxAction(ActionCodes.ADD_COLLATERAL)}
                               disabled={
                                 !selectedSeries || collatInput === maxCollateral || selectedSeries.seriesIsMature
                               }
@@ -433,9 +464,7 @@ const Borrow = () => {
 
                     {borrowInput && minSafeCollateral && (
                       <Box margin={{ top: 'small' }}>
-                        <InputInfoWrap
-                          action={() => setCollatInput(cleanValue(minSafeCollateral, selectedIlk?.decimals))}
-                        >
+                        <InputInfoWrap action={() => handleUseSafeCollateral()}>
                           <Text size="small" color="text-weak">
                             Use Safe Collateralization{': '}
                             {cleanValue(minSafeCollateral, selectedIlk?.digitFormat)} {selectedIlk?.displaySymbol}

diff --git a/src/components/views/Lend.tsx b/src/components/views/Lend.tsx
@@ -8,7 +8,7 @@ import AssetSelector from '../selectors/AssetSelector';
 import InputWrap from '../wraps/InputWrap';
 import MainViewWrap from '../wraps/MainViewWrap';
 import SeriesSelector from '../selectors/SeriesSelector';
-import { cleanValue, nFormatter } from '../../utils/appUtils';
+import { cleanValue, getTxCode, nFormatter } from '../../utils/appUtils';
 import SectionWrap from '../wraps/SectionWrap';
 
 import { UserContext } from '../../contexts/UserContext';
@@ -40,6 +40,8 @@ import InputInfoWrap from '../wraps/InputInfoWrap';
 import SeriesOrStrategySelectorModal from '../selectors/SeriesOrStrategySelectorModal';
 import YieldNavigation from '../YieldNavigation';
 import Line from '../elements/Line';
+import { GA_Event, GA_Properties, GA_View } from '../../types/analytics';
+import useAnalytics from '../../hooks/useAnalytics';
 
 const Lend = () => {
   const mobile: boolean = useContext<any>(ResponsiveContext) === 'small';
@@ -60,6 +62,8 @@ const Lend = () => {
   const { maxLend_, apy, protocolLimited, valueAtMaturity_ } = useLendHelpers(selectedSeries, lendInput);
   const lend = useLend();
 
+  const { logAnalyticsEvent } = useAnalytics();
+
   const { txProcess: lendProcess, resetProcess: resetLendProcess } = useProcess(ActionCodes.LEND, selectedSeries?.id!);
 
   /* input validation hooks */
@@ -70,6 +74,28 @@ const Lend = () => {
     if (lendDisabled) return;
     setLendDisabled(true);
     lend(lendInput, selectedSeries!);
+    logAnalyticsEvent(GA_Event.transaction_initiated, {
+      view: GA_View.LEND,
+      seriesId: selectedSeries.id,
+      actionCode: ActionCodes.LEND,
+    } as GA_Properties.transaction_initiated);
+  };
+
+  /* Event handlers */
+  const handleNavAction = (_stepPosition: number) => {
+    setStepPosition(_stepPosition);
+    logAnalyticsEvent(GA_Event.next_step_clicked, {
+      view: GA_View.LEND,
+      step_index: _stepPosition,
+    } as GA_Properties.next_step_clicked);
+  };
+
+  const handleMaxAction = () => {
+    maxLend_ && setLendInput(maxLend_);
+    logAnalyticsEvent(GA_Event.max_clicked, {
+      view: GA_View.LEND,
+      actionCode: ActionCodes.LEND,
+    } as GA_Properties.max_clicked);
   };
 
   const resetInputs = useCallback(() => {
@@ -136,7 +162,7 @@ const Lend = () => {
                             disabled={selectedSeries?.seriesIsMature}
                           />
                           <MaxButton
-                            action={() => setLendInput(maxLend_)}
+                            action={() => handleMaxAction()}
                             disabled={maxLend_ === '0' || selectedSeries?.seriesIsMature}
                             clearAction={() => setLendInput('')}
                             showingMax={!!lendInput && (lendInput === maxLend_ || !!lendError)}
@@ -170,7 +196,7 @@ const Lend = () => {
                 </Box>
 
                 {selectedBase && selectedSeries && protocolLimited && (
-                  <InputInfoWrap action={() => setLendInput(maxLend_)}>
+                  <InputInfoWrap action={() => handleMaxAction()}>
                     <Text size="xsmall" color="text-weak">
                       Max lend is{' '}
                       <Text size="small" color="text-weak">
@@ -193,7 +219,7 @@ const Lend = () => {
                 gap="large"
               >
                 {lendProcess?.stage !== ProcessStage.PROCESS_COMPLETE ? (
-                  <BackButton action={() => setStepPosition(0)} />
+                  <BackButton action={() => handleNavAction(0)} />
                 ) : (
                   <Box pad="1em" />
                 )}
@@ -251,7 +277,7 @@ const Lend = () => {
               disabled={stepDisabled}
               label={<Text size={mobile ? 'small' : undefined}>Next Step</Text>}
               key="ONE"
-              onClick={() => setStepPosition(stepPosition + 1)}
+              onClick={() => handleNavAction(stepPosition + 1)}
               errorLabel={lendError}
             />
           )}