From 39c659163d8266290520ce8d3bd6975036abcb4e Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Wed, 12 Oct 2022 09:29:56 +0100 Subject: [PATCH 01/24] bugfix:selectCollateralUnfdeined --- src/components/selectors/AssetSelector.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/selectors/AssetSelector.tsx b/src/components/selectors/AssetSelector.tsx index 75555f620..c7a9d9856 100644 --- a/src/components/selectors/AssetSelector.tsx +++ b/src/components/selectors/AssetSelector.tsx @@ -128,7 +128,7 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) { name="assetSelect" placeholder="Select Asset" options={options} - value={selectCollateral ? selectedIlk! : selectedBase!} + value= { !selectCollateral ? selectedBase || undefined : selectedIlk || undefined } labelKey={(x: IAsset | undefined) => optionText(x)} valueLabel={ From 2461e8f6184b815dd0e1402408d2b89b6fd8caa7 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Wed, 12 Oct 2022 14:14:57 +0100 Subject: [PATCH 02/24] update CI --- .env.local | 4 +++- .github/workflows/main.yml | 8 ++++---- src/utils/appUtils.ts | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.env.local b/.env.local index 765d3a8ed..7c06cfa6d 100644 --- a/.env.local +++ b/.env.local @@ -20,4 +20,6 @@ ALCHEMY_ARBITRUM_KEY=vtMM4_eLnOvkjkdckprVw3cIa64EVkDZ ALCHEMY_ARBITRUM_RINKEBY_KEY=vtMM4_eLnOvkjkdckprVw3cIa64EVkDZ ALCHEMY_MAINNET_KEY=ZXDCq5iy0KrKR0XjsqC6E4QG7Z_FuXDv -GENERATE_SOURCEMAP=false \ No newline at end of file +GENERATE_SOURCEMAP=false + +GOOGLE_ANALYTICS_KEY= \ No newline at end of file diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 3d8c47f8c..c62d61a87 100644 --- 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/src/utils/appUtils.ts b/src/utils/appUtils.ts index fbbe4e163..3d1c96b89 100644 --- a/src/utils/appUtils.ts +++ b/src/utils/appUtils.ts @@ -247,7 +247,7 @@ export const numberWithCommas = (x: number) => x.toString().replace(/\B(?=(\d{3} export const formatValue = (x: string | number, decimals: number) => numberWithCommas(Number(cleanValue(x?.toString(), decimals))); -/* google analytics log event */ +/* Google analytics log event */ export const analyticsLogEvent = (eventName: string, eventParams: any, chainId: number) => { if (eventName && chainId === 1) { try { From 3351c5600eff6364ee4e4677bd82c8f60958a75c Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Wed, 12 Oct 2022 14:42:44 +0100 Subject: [PATCH 03/24] set anaylttics for prod only --- .env.local | 4 +--- src/components/Layout.tsx | 14 +++++--------- src/utils/appUtils.ts | 5 ++++- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/.env.local b/.env.local index 7c06cfa6d..765d3a8ed 100644 --- a/.env.local +++ b/.env.local @@ -20,6 +20,4 @@ ALCHEMY_ARBITRUM_KEY=vtMM4_eLnOvkjkdckprVw3cIa64EVkDZ ALCHEMY_ARBITRUM_RINKEBY_KEY=vtMM4_eLnOvkjkdckprVw3cIa64EVkDZ ALCHEMY_MAINNET_KEY=ZXDCq5iy0KrKR0XjsqC6E4QG7Z_FuXDv -GENERATE_SOURCEMAP=false - -GOOGLE_ANALYTICS_KEY= \ No newline at end of file +GENERATE_SOURCEMAP=false \ No newline at end of file diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index cfafe10a0..fa53b1506 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -28,19 +28,15 @@ const Layout = ({ children }: ILayout) => { return ( <> + gtag('config', 'G-QGLQ100R01');`} + } Yield Protocol App diff --git a/src/utils/appUtils.ts b/src/utils/appUtils.ts index 3d1c96b89..dd0bd4317 100644 --- a/src/utils/appUtils.ts +++ b/src/utils/appUtils.ts @@ -247,9 +247,11 @@ export const numberWithCommas = (x: number) => x.toString().replace(/\B(?=(\d{3} export const formatValue = (x: string | number, decimals: number) => numberWithCommas(Number(cleanValue(x?.toString(), decimals))); + + /* Google analytics log event */ export const analyticsLogEvent = (eventName: string, eventParams: any, chainId: number) => { - if (eventName && chainId === 1) { + if (eventName && process.env.ENV != 'development') { try { window?.gtag('event', eventName, eventParams); } catch (e) { @@ -257,4 +259,5 @@ export const analyticsLogEvent = (eventName: string, eventParams: any, chainId: console.log(e); } } + }; From 230f0507b943bf9cd010973e417523b270bd3a0a Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Thu, 13 Oct 2022 10:29:28 +0100 Subject: [PATCH 04/24] reorder GA_Events --- src/components/views/Borrow.tsx | 5 +++- src/types/analytics.ts | 43 +++++++++++++++++++++++++++++++++ src/utils/appUtils.ts | 5 ++-- 3 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 src/types/analytics.ts diff --git a/src/components/views/Borrow.tsx b/src/components/views/Borrow.tsx index c2e4c561a..5071e53e3 100644 --- a/src/components/views/Borrow.tsx +++ b/src/components/views/Borrow.tsx @@ -48,6 +48,7 @@ import VaultItem from '../positionItems/VaultItem'; import { useAssetPair } from '../../hooks/useAssetPair'; import Line from '../elements/Line'; import useTenderly from '../../hooks/useTenderly'; +import { GA_Event, GA_View } from '../../types/analytics'; const Borrow = () => { const mobile: boolean = useContext(ResponsiveContext) === 'small'; @@ -132,6 +133,7 @@ const Borrow = () => { const _vault = vaultToUse?.id ? vaultToUse : undefined; // if vaultToUse has id property, use it setBorrowDisabled(true); borrow(_vault, borrowInput, collatInput); + analyticsLogEvent(GA_Event.borrow_initiated, { flow: GA_View.BORROW, step_index: _stepPosition, renderId, chainId }); }; useEffect(() => { @@ -141,7 +143,8 @@ const Borrow = () => { const handleNavAction = (_stepPosition: number) => { _stepPosition === 0 && setSelectedIlk(assetMap.get('0x303000000000')!); setStepPosition(_stepPosition); - analyticsLogEvent('NAVIGATION', { screen: 'BORROW', step: _stepPosition, renderId }, chainId); + + analyticsLogEvent(GA_Event.next_step_clicked, { flow: GA_View.BORROW, step_index: _stepPosition, renderId, chainId }); }; const handleGaugeColorChange: any = (val: string) => { diff --git a/src/types/analytics.ts b/src/types/analytics.ts new file mode 100644 index 000000000..e396a304d --- /dev/null +++ b/src/types/analytics.ts @@ -0,0 +1,43 @@ + +export enum GA_Event { + + connect_wallet='connect_wallet', + autoConnect_wallet='auto_connect_wallet', + + view_changed = 'view_change', // from and to + + asset_selected='asset_selected', + collateral_selected='collateral_selected', + + max_clicked='max_clicked', + next_step_clicked = 'next_step_clicked', // flow|stepIndex + + transaction_initiated='transaction_initiated', + + transaction_failed='transaction_failed', + transaction_complete='transaction_complete', + transaction_rejected='transaction_rejected', + + safe_collateralization_clicked = 'safe_collateralization_clicked', + follow_on_clicked='follow_on_clicked', + + position_opened='position_opened', // flow | vaultId/seriesId + position_action_selected ='position_action_selected', + +} + +export enum GA_View { + + /* Views mostly represent the screens */ + BORROW = 'borrow_view', + LEND = 'lend_view', + POOL= 'pool_view', + DASHBOARD = 'dashboard_view', + + /* Non screen views */ + GENERAL = 'general' + } + +// export namespace GA_Event_Properties { +// export type connect_wallet = { asset: string, view: string, chain_id: number }; +// } \ No newline at end of file diff --git a/src/utils/appUtils.ts b/src/utils/appUtils.ts index dd0bd4317..99b57a27d 100644 --- a/src/utils/appUtils.ts +++ b/src/utils/appUtils.ts @@ -248,16 +248,15 @@ export const formatValue = (x: string | number, decimals: number) => numberWithCommas(Number(cleanValue(x?.toString(), decimals))); - /* Google analytics log event */ -export const analyticsLogEvent = (eventName: string, eventParams: any, chainId: number) => { +export const analyticsLogEvent = (eventName: string, eventParams: any) => { if (eventName && process.env.ENV != 'development') { try { + console.log(eventName, ' event logged'); window?.gtag('event', eventName, eventParams); } catch (e) { // eslint-disable-next-line no-console console.log(e); } } - }; From 4cd85bff2e095616d63b6a38bd7b407beb5a8939 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Thu, 13 Oct 2022 15:14:39 +0100 Subject: [PATCH 05/24] useAnalytics hooks rather --- src/components/views/Borrow.tsx | 19 +++++-- src/components/views/Lend.tsx | 8 +++ src/hooks/useAnalytics.ts | 30 +++++++++++ src/types/analytics.ts | 90 +++++++++++++++++++++------------ src/utils/appUtils.ts | 13 +---- 5 files changed, 111 insertions(+), 49 deletions(-) create mode 100644 src/hooks/useAnalytics.ts diff --git a/src/components/views/Borrow.tsx b/src/components/views/Borrow.tsx index 5071e53e3..b0a64750a 100644 --- 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, getVaultIdFromReceipt, nFormatter } from '../../utils/appUtils'; import YieldInfo from '../YieldInfo'; import BackButton from '../buttons/BackButton'; @@ -48,12 +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_View } from '../../types/analytics'; +import { GA_Event, GA_View, next_step_clicked } from '../../types/analytics'; +import useAnalytics from '../../hooks/useAnalytics'; const Borrow = () => { const mobile: boolean = useContext(ResponsiveContext) === 'small'; useTenderly(); + const {logAnalyticsEvent} = useAnalytics(); + /* STATE FROM CONTEXT */ const { chainState: { @@ -133,7 +136,11 @@ const Borrow = () => { const _vault = vaultToUse?.id ? vaultToUse : undefined; // if vaultToUse has id property, use it setBorrowDisabled(true); borrow(_vault, borrowInput, collatInput); - analyticsLogEvent(GA_Event.borrow_initiated, { flow: GA_View.BORROW, step_index: _stepPosition, renderId, chainId }); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.BORROW, + chain_id: chainId, + }); }; useEffect(() => { @@ -144,7 +151,11 @@ const Borrow = () => { _stepPosition === 0 && setSelectedIlk(assetMap.get('0x303000000000')!); setStepPosition(_stepPosition); - analyticsLogEvent(GA_Event.next_step_clicked, { flow: GA_View.BORROW, step_index: _stepPosition, renderId, chainId }); + logAnalyticsEvent(GA_Event.next_step_clicked, { + view: GA_View.BORROW, + step_index: _stepPosition, + chain_id: chainId, + } ) }; const handleGaugeColorChange: any = (val: string) => { diff --git a/src/components/views/Lend.tsx b/src/components/views/Lend.tsx index df876fc61..c8e208761 100644 --- a/src/components/views/Lend.tsx +++ b/src/components/views/Lend.tsx @@ -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_View } from '../../types/analytics'; +import useAnalytics from '../../hooks/useAnalytics'; const Lend = () => { const mobile: boolean = useContext(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,10 @@ const Lend = () => { if (lendDisabled) return; setLendDisabled(true); lend(lendInput, selectedSeries!); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.LEND, + } ); }; const resetInputs = useCallback(() => { diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts new file mode 100644 index 000000000..7097ee48d --- /dev/null +++ b/src/hooks/useAnalytics.ts @@ -0,0 +1,30 @@ +import { useContext } from 'react'; +import { ChainContext } from '../contexts/ChainContext'; +import { GA_Event } from '../types/analytics'; + +const useAnalytics = () => { + + const { + chainState: { + connection: { chainId }, + }, + } = useContext(ChainContext); + + /* Google analytics log event */ +const logAnalyticsEvent= (eventName: GA_Event, eventProps: any ) => { + if (eventName && process.env.ENV != 'development') { + try { + console.log(eventName, ' event logged'); + window?.gtag('event', eventName, { ...eventProps , chain_id: chainId} ); + } catch (e) { + // eslint-disable-next-line no-console + console.log(e); + } + } +}; + +return { logAnalyticsEvent }; + +}; + +export default useAnalytics; diff --git a/src/types/analytics.ts b/src/types/analytics.ts index e396a304d..3d989d703 100644 --- a/src/types/analytics.ts +++ b/src/types/analytics.ts @@ -1,43 +1,67 @@ - export enum GA_Event { + connect_wallet = 'connect_wallet', + autoConnect_wallet = 'auto_connect_wallet', + + view_changed = 'view_change', // from and to - connect_wallet='connect_wallet', - autoConnect_wallet='auto_connect_wallet', + asset_selected = 'asset_selected', + collateral_selected = 'collateral_selected', - view_changed = 'view_change', // from and to + max_clicked = 'max_clicked', + next_step_clicked = 'next_step_clicked', // flow|stepIndex - asset_selected='asset_selected', - collateral_selected='collateral_selected', - - max_clicked='max_clicked', - next_step_clicked = 'next_step_clicked', // flow|stepIndex - - transaction_initiated='transaction_initiated', - - transaction_failed='transaction_failed', - transaction_complete='transaction_complete', - transaction_rejected='transaction_rejected', + transaction_initiated = 'transaction_initiated', - safe_collateralization_clicked = 'safe_collateralization_clicked', - follow_on_clicked='follow_on_clicked', + transaction_failed = 'transaction_failed', + transaction_complete = 'transaction_complete', + transaction_rejected = 'transaction_rejected', - position_opened='position_opened', // flow | vaultId/seriesId - position_action_selected ='position_action_selected', + safe_collateralization_clicked = 'safe_collateralization_clicked', + follow_on_clicked = 'follow_on_clicked', + position_opened = 'position_opened', // flow | vaultId/seriesId + position_action_selected = 'position_action_selected', } export enum GA_View { - - /* Views mostly represent the screens */ - BORROW = 'borrow_view', - LEND = 'lend_view', - POOL= 'pool_view', - DASHBOARD = 'dashboard_view', - - /* Non screen views */ - GENERAL = 'general' - } - -// export namespace GA_Event_Properties { -// export type connect_wallet = { asset: string, view: string, chain_id: number }; -// } \ No newline at end of file + /* Views - mostly represent the screens */ + BORROW = 'borrow_view', + LEND = 'lend_view', + POOL = 'pool_view', + DASHBOARD = 'dashboard_view', + + /* Non-screen views */ + GENERAL = 'general', +} + + +/* Properties on events */ + + export type connect_wallet = { view: GA_View}; + export type autoConnect_wallet = { view: GA_View}; + + export type view_changed = { fromView: GA_View; toView: GA_View}; + + export type asset_selected = { asset: string; view: GA_View}; + export type collateral_selected = { asset: string; view: GA_View}; + + export type max_clicked = { view: GA_View}; + export type next_step_clicked = { step_index: number; view: GA_View}; + + export type transaction_initiated = { + txCode: string; + seriesId: string; + view: GA_View; + supporting_collateral?: string; + }; + + export type transaction_failed = { view: GA_View; txCode: string }; + export type transaction_complete = { view: GA_View; txCode: string }; + export type transaction_rejected = { view: GA_View; txCode: string }; + + export type safe_collateralization_clicked = { view: GA_View}; + export type follow_on_clicked = { view: GA_View}; + + export type position_opened = { id: string; view: GA_View }; + export type position_action_selected = { id: string; action: string; view: GA_View }; + diff --git a/src/utils/appUtils.ts b/src/utils/appUtils.ts index 99b57a27d..fcd546cf4 100644 --- a/src/utils/appUtils.ts +++ b/src/utils/appUtils.ts @@ -248,15 +248,4 @@ export const formatValue = (x: string | number, decimals: number) => numberWithCommas(Number(cleanValue(x?.toString(), decimals))); -/* Google analytics log event */ -export const analyticsLogEvent = (eventName: string, eventParams: any) => { - if (eventName && process.env.ENV != 'development') { - try { - console.log(eventName, ' event logged'); - window?.gtag('event', eventName, eventParams); - } catch (e) { - // eslint-disable-next-line no-console - console.log(e); - } - } -}; + From 5aeebc62d70ce6f36bb88ce5afeb866ef6217427 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Thu, 13 Oct 2022 15:34:37 +0100 Subject: [PATCH 06/24] events on all actions --- src/components/views/Borrow.tsx | 13 ++++++----- src/components/views/Lend.tsx | 9 +++++--- src/components/views/LendPosition.tsx | 19 +++++++++++++++- src/components/views/Pool.tsx | 13 ++++++++++- src/components/views/PoolPosition.tsx | 13 ++++++++++- src/components/views/VaultPosition.tsx | 31 +++++++++++++++++++++++++- src/types/analytics.ts | 5 ++--- 7 files changed, 87 insertions(+), 16 deletions(-) diff --git a/src/components/views/Borrow.tsx b/src/components/views/Borrow.tsx index b0a64750a..25254bc21 100644 --- 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 { cleanValue, getVaultIdFromReceipt, nFormatter } from '../../utils/appUtils'; +import { cleanValue, getTxCode, getVaultIdFromReceipt, nFormatter } from '../../utils/appUtils'; import YieldInfo from '../YieldInfo'; import BackButton from '../buttons/BackButton'; @@ -48,7 +48,7 @@ import VaultItem from '../positionItems/VaultItem'; import { useAssetPair } from '../../hooks/useAssetPair'; import Line from '../elements/Line'; import useTenderly from '../../hooks/useTenderly'; -import { GA_Event, GA_View, next_step_clicked } from '../../types/analytics'; +import { GA_Event, GA_Properties, GA_View } from '../../types/analytics'; import useAnalytics from '../../hooks/useAnalytics'; const Borrow = () => { @@ -139,8 +139,10 @@ const Borrow = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, - chain_id: chainId, - }); + seriesId: selectedSeries?.id!, + txCode: getTxCode(ActionCodes.BORROW, selectedSeries?.id!) + } as GA_Properties.transaction_initiated ); + }; useEffect(() => { @@ -154,8 +156,7 @@ const Borrow = () => { logAnalyticsEvent(GA_Event.next_step_clicked, { view: GA_View.BORROW, step_index: _stepPosition, - chain_id: chainId, - } ) + } as GA_Properties.next_step_clicked ) }; const handleGaugeColorChange: any = (val: string) => { diff --git a/src/components/views/Lend.tsx b/src/components/views/Lend.tsx index c8e208761..0029c17d3 100644 --- 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,7 +40,7 @@ import InputInfoWrap from '../wraps/InputInfoWrap'; import SeriesOrStrategySelectorModal from '../selectors/SeriesOrStrategySelectorModal'; import YieldNavigation from '../YieldNavigation'; import Line from '../elements/Line'; -import { GA_Event, GA_View } from '../../types/analytics'; +import { GA_Event, GA_Properties, GA_View } from '../../types/analytics'; import useAnalytics from '../../hooks/useAnalytics'; const Lend = () => { @@ -77,7 +77,10 @@ const Lend = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.LEND, - } ); + seriesId: selectedSeries.id, + txCode: getTxCode(ActionCodes.LEND, selectedSeries?.id!) + } as GA_Properties.transaction_initiated ); + }; const resetInputs = useCallback(() => { diff --git a/src/components/views/LendPosition.tsx b/src/components/views/LendPosition.tsx index 0b5d45275..0e81edb60 100644 --- a/src/components/views/LendPosition.tsx +++ b/src/components/views/LendPosition.tsx @@ -6,7 +6,7 @@ import { FiArrowRight, FiChevronDown, FiClock, FiTool, FiTrendingUp } from 'reac import ActionButtonGroup from '../wraps/ActionButtonWrap'; import InputWrap from '../wraps/InputWrap'; import SeriesSelector from '../selectors/SeriesSelector'; -import { abbreviateHash, cleanValue, nFormatter } from '../../utils/appUtils'; +import { abbreviateHash, cleanValue, getTxCode, nFormatter } from '../../utils/appUtils'; import SectionWrap from '../wraps/SectionWrap'; import { UserContext } from '../../contexts/UserContext'; @@ -29,6 +29,8 @@ import { useProcess } from '../../hooks/useProcess'; import InputInfoWrap from '../wraps/InputInfoWrap'; import ExitButton from '../buttons/ExitButton'; import Logo from '../logos/Logo'; +import { GA_Event, GA_Properties, GA_View } from '../../types/analytics'; +import useAnalytics from '../../hooks/useAnalytics'; const LendPosition = () => { const mobile: boolean = useContext(ResponsiveContext) === 'small'; @@ -75,6 +77,8 @@ const LendPosition = () => { const closePosition = useClosePosition(); const rollPosition = useRollPosition(); + const {logAnalyticsEvent} = useAnalytics(); + /* Processes to watch */ const { txProcess: closeProcess, resetProcess: resetCloseProcess } = useProcess( ActionCodes.CLOSE_POSITION, @@ -117,12 +121,25 @@ const LendPosition = () => { if (closeDisabled) return; setCloseDisabled(true); closePosition(closeInput, selectedSeries!); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.LEND, + seriesId: selectedSeries.id, + txCode: getTxCode(ActionCodes.CLOSE_POSITION, selectedSeries?.id!) + } as GA_Properties.transaction_initiated ); }; const handleRollPosition = () => { if (rollDisabled) return; setRollDisabled(true); rollPosition(rollInput, selectedSeries!, rollToSeries); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.LEND, + seriesId: selectedSeries.id, + txCode: getTxCode(ActionCodes.ROLL_POSITION, selectedSeries?.id!) + } as GA_Properties.transaction_initiated ); + }; const resetInputs = useCallback( diff --git a/src/components/views/Pool.tsx b/src/components/views/Pool.tsx index fc9ae5b50..a08f9cc93 100644 --- a/src/components/views/Pool.tsx +++ b/src/components/views/Pool.tsx @@ -3,7 +3,7 @@ import { Box, RadioButtonGroup, ResponsiveContext, Text, TextInput, CheckBox, Ti import { FiInfo, FiPercent, FiZap } from 'react-icons/fi'; import { BiMessageSquareAdd } from 'react-icons/bi'; import { MdAutorenew } from 'react-icons/md'; -import { cleanValue, nFormatter } from '../../utils/appUtils'; +import { cleanValue, getTxCode, nFormatter } from '../../utils/appUtils'; import AssetSelector from '../selectors/AssetSelector'; import MainViewWrap from '../wraps/MainViewWrap'; import InputWrap from '../wraps/InputWrap'; @@ -33,6 +33,8 @@ import StrategyItem from '../positionItems/StrategyItem'; import YieldNavigation from '../YieldNavigation'; import Line from '../elements/Line'; +import { GA_Event, GA_View, GA_Properties } from '../../types/analytics'; +import useAnalytics from '../../hooks/useAnalytics'; function Pool() { const mobile: boolean = useContext(ResponsiveContext) === 'small'; @@ -54,6 +56,8 @@ function Pool() { const addLiquidity = useAddLiquidity(); const { maxPool, poolPercentPreview, canBuyAndPool, matchingVault } = usePoolHelpers(poolInput); + const {logAnalyticsEvent} = useAnalytics(); + /* input validation hooks */ const { inputError: poolError } = useInputValidation( poolInput, @@ -75,6 +79,13 @@ function Pool() { canBuyAndPool ? AddLiquidityType.BUY : AddLiquidityType.BORROW, matchingVault ); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.POOL, + seriesId: selectedStrategy?.currentSeries.id, + txCode: getTxCode(ActionCodes.ADD_LIQUIDITY, selectedStrategy!.id) + } as GA_Properties.transaction_initiated ); + }; /* ACTION DISABLING LOGIC - if ANY conditions are met: block action */ diff --git a/src/components/views/PoolPosition.tsx b/src/components/views/PoolPosition.tsx index 555554967..bcef6e57f 100644 --- a/src/components/views/PoolPosition.tsx +++ b/src/components/views/PoolPosition.tsx @@ -5,7 +5,7 @@ import { FiArrowRight, FiChevronDown, FiClock, FiPercent, FiSlash, FiZap } from import ActionButtonGroup from '../wraps/ActionButtonWrap'; import InputWrap from '../wraps/InputWrap'; -import { abbreviateHash, cleanValue, formatStrategyName, nFormatter } from '../../utils/appUtils'; +import { abbreviateHash, cleanValue, formatStrategyName, getTxCode, nFormatter } from '../../utils/appUtils'; import SectionWrap from '../wraps/SectionWrap'; import { UserContext } from '../../contexts/UserContext'; @@ -28,6 +28,8 @@ import { useProcess } from '../../hooks/useProcess'; import { usePoolHelpers } from '../../hooks/viewHelperHooks/usePoolHelpers'; import InputInfoWrap from '../wraps/InputInfoWrap'; import ExitButton from '../buttons/ExitButton'; +import useAnalytics from '../../hooks/useAnalytics'; +import { GA_Event, GA_Properties, GA_View } from '../../types/analytics'; const PoolPosition = () => { const mobile: boolean = useContext(ResponsiveContext) === 'small'; @@ -68,6 +70,8 @@ const PoolPosition = () => { usePoolHelpers(removeInput, true); const { removeBaseReceived_: removeBaseReceivedMax_ } = usePoolHelpers(_selectedStrategy?.accountBalance_, true); + const {logAnalyticsEvent} = useAnalytics(); + /* TX data */ const { txProcess: removeProcess, resetProcess: resetRemoveProcess } = useProcess( ActionCodes.REMOVE_LIQUIDITY, @@ -101,6 +105,13 @@ const PoolPosition = () => { if (removeDisabled) return; setRemoveDisabled(true); removeLiquidity(removeInput!, selectedSeries, matchingVault); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.POOL, + seriesId: selectedStrategy?.currentSeries.id, + txCode: getTxCode(ActionCodes.REMOVE_LIQUIDITY, selectedStrategy!.id) + } as GA_Properties.transaction_initiated ); + }; const resetInputs = useCallback( diff --git a/src/components/views/VaultPosition.tsx b/src/components/views/VaultPosition.tsx index abccee131..e2cb981c9 100644 --- a/src/components/views/VaultPosition.tsx +++ b/src/components/views/VaultPosition.tsx @@ -6,7 +6,7 @@ import { Box, CheckBox, ResponsiveContext, Select, Text, TextInput } from 'gromm import { FiClock, FiTrendingUp, FiAlertTriangle, FiArrowRight, FiActivity, FiChevronDown } from 'react-icons/fi'; import { GiMedalSkull } from 'react-icons/gi'; -import { abbreviateHash, cleanValue, nFormatter } from '../../utils/appUtils'; +import { abbreviateHash, cleanValue, getTxCode, nFormatter } from '../../utils/appUtils'; import { UserContext } from '../../contexts/UserContext'; import InputWrap from '../wraps/InputWrap'; import InfoBite from '../InfoBite'; @@ -48,6 +48,8 @@ import ExitButton from '../buttons/ExitButton'; import { ZERO_BN } from '../../utils/constants'; import { useAssetPair } from '../../hooks/useAssetPair'; import Logo from '../logos/Logo'; +import useAnalytics from '../../hooks/useAnalytics'; +import { GA_Event, GA_View, GA_Properties } from '../../types/analytics'; const VaultPosition = () => { const mobile: boolean = useContext(ResponsiveContext) === 'small'; @@ -124,6 +126,8 @@ const VaultPosition = () => { /* HOOK FNS */ const repay = useRepayDebt(); const rollDebt = useRollDebt(); + + const {logAnalyticsEvent} = useAnalytics(); const { addCollateral } = useAddCollateral(); const { removeCollateral } = useRemoveCollateral(); @@ -210,12 +214,24 @@ const VaultPosition = () => { if (repayDisabled) return; setRepayDisabled(true); repay(_selectedVault, repayInput?.toString(), reclaimCollateral); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.BORROW, + seriesId: vaultSeries?.id!, + txCode: getTxCode(ActionCodes.REPAY, vaultSeries?.id!) + } as GA_Properties.transaction_initiated ); }; const handleRoll = () => { if (rollDisabled) return; setRollDisabled(true); rollDebt(_selectedVault, rollToSeries); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.BORROW, + seriesId: vaultSeries?.id!, + txCode: getTxCode(ActionCodes.ROLL_DEBT, vaultSeries?.id!) + } as GA_Properties.transaction_initiated ); }; const handleCollateral = (action: 'ADD' | 'REMOVE') => { @@ -223,10 +239,23 @@ const VaultPosition = () => { if (removeCollateralDisabled) return; setRemoveCollateralDisabled(true); removeCollateral(_selectedVault, removeCollatInput); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.BORROW, + seriesId: vaultSeries?.id!, + txCode: getTxCode(ActionCodes.REMOVE_COLLATERAL, vaultSeries?.id!) + } as GA_Properties.transaction_initiated ); + } else { if (addCollateralDisabled) return; setAddCollateralDisabled(true); addCollateral(_selectedVault, addCollatInput); + + logAnalyticsEvent(GA_Event.transaction_initiated, { + view: GA_View.BORROW, + seriesId: vaultSeries?.id!, + txCode: getTxCode(ActionCodes.ADD_COLLATERAL, vaultSeries?.id!) + } as GA_Properties.transaction_initiated ); } }; diff --git a/src/types/analytics.ts b/src/types/analytics.ts index 3d989d703..c75f235d6 100644 --- a/src/types/analytics.ts +++ b/src/types/analytics.ts @@ -34,9 +34,8 @@ export enum GA_View { GENERAL = 'general', } - /* Properties on events */ - +export namespace GA_Properties { export type connect_wallet = { view: GA_View}; export type autoConnect_wallet = { view: GA_View}; @@ -64,4 +63,4 @@ export enum GA_View { export type position_opened = { id: string; view: GA_View }; export type position_action_selected = { id: string; action: string; view: GA_View }; - +} From 5e01c5cf2046399fac653276d599594146b8cbe9 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Thu, 13 Oct 2022 15:39:15 +0100 Subject: [PATCH 07/24] add in naviagetion events --- src/components/views/Borrow.tsx | 4 ++-- src/components/views/Lend.tsx | 12 ++++++++++-- src/components/views/Pool.tsx | 13 +++++++++++-- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/views/Borrow.tsx b/src/components/views/Borrow.tsx index 25254bc21..fb27b2ac0 100644 --- a/src/components/views/Borrow.tsx +++ b/src/components/views/Borrow.tsx @@ -140,7 +140,8 @@ const Borrow = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: selectedSeries?.id!, - txCode: getTxCode(ActionCodes.BORROW, selectedSeries?.id!) + txCode: getTxCode(ActionCodes.BORROW, selectedSeries?.id!), + supporting_collateral: selectedIlk.symbol, } as GA_Properties.transaction_initiated ); }; @@ -152,7 +153,6 @@ const Borrow = () => { const handleNavAction = (_stepPosition: number) => { _stepPosition === 0 && setSelectedIlk(assetMap.get('0x303000000000')!); setStepPosition(_stepPosition); - logAnalyticsEvent(GA_Event.next_step_clicked, { view: GA_View.BORROW, step_index: _stepPosition, diff --git a/src/components/views/Lend.tsx b/src/components/views/Lend.tsx index 0029c17d3..eb6b06c54 100644 --- a/src/components/views/Lend.tsx +++ b/src/components/views/Lend.tsx @@ -83,6 +83,14 @@ const Lend = () => { }; + 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 resetInputs = useCallback(() => { setLendInput(undefined); setStepPosition(0); @@ -204,7 +212,7 @@ const Lend = () => { gap="large" > {lendProcess?.stage !== ProcessStage.PROCESS_COMPLETE ? ( - setStepPosition(0)} /> + handleNavAction(0)} /> ) : ( )} @@ -262,7 +270,7 @@ const Lend = () => { disabled={stepDisabled} label={Next Step} key="ONE" - onClick={() => setStepPosition(stepPosition + 1)} + onClick={() => handleNavAction(stepPosition + 1)} errorLabel={lendError} /> )} diff --git a/src/components/views/Pool.tsx b/src/components/views/Pool.tsx index a08f9cc93..122eb0895 100644 --- a/src/components/views/Pool.tsx +++ b/src/components/views/Pool.tsx @@ -94,6 +94,15 @@ function Pool() { !poolInput || poolError || !selectedStrategy ? setStepDisabled(true) : setStepDisabled(false); }, [poolInput, activeAccount, poolError, selectedStrategy]); + + const handleNavAction = (_stepPosition: number) => { + setStepPosition(_stepPosition); + logAnalyticsEvent(GA_Event.next_step_clicked, { + view: GA_View.POOL, + step_index: _stepPosition, + } as GA_Properties.next_step_clicked ) + }; + const resetInputs = useCallback(() => { setPoolInput(undefined); setStepPosition(0); @@ -182,7 +191,7 @@ function Pool() { > {poolProcess?.stage !== ProcessStage.PROCESS_COMPLETE ? ( - setStepPosition(0)} /> + handleNavAction(0)} /> ) : ( )} @@ -254,7 +263,7 @@ function Pool() { Next Step} - onClick={() => setStepPosition(stepPosition + 1)} + onClick={() => handleNavAction(stepPosition + 1)} disabled={stepDisabled || !selectedStrategy} errorLabel={poolError} /> From f7667fa4e5797e67e5482a60b85a5276f95521da Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 10:53:49 +0100 Subject: [PATCH 08/24] Borrow lend lend position events --- src/components/views/Borrow.tsx | 26 ++++++++++++++++++++++---- src/components/views/Lend.tsx | 16 ++++++++++++---- src/components/views/LendPosition.tsx | 19 ++++++++++++++----- src/hooks/useAnalytics.ts | 1 + src/types/analytics.ts | 16 +++++++++------- 5 files changed, 58 insertions(+), 20 deletions(-) diff --git a/src/components/views/Borrow.tsx b/src/components/views/Borrow.tsx index fb27b2ac0..ac0afe06a 100644 --- a/src/components/views/Borrow.tsx +++ b/src/components/views/Borrow.tsx @@ -140,7 +140,7 @@ const Borrow = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: selectedSeries?.id!, - txCode: getTxCode(ActionCodes.BORROW, selectedSeries?.id!), + actionCode: ActionCodes.BORROW, supporting_collateral: selectedIlk.symbol, } as GA_Properties.transaction_initiated ); @@ -150,6 +150,8 @@ const Borrow = () => { setRenderId(new Date().getTime().toString(36)); }, []); + + /** Interaction handlers */ const handleNavAction = (_stepPosition: number) => { _stepPosition === 0 && setSelectedIlk(assetMap.get('0x303000000000')!); setStepPosition(_stepPosition); @@ -159,6 +161,22 @@ const Borrow = () => { } 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) => { setCurrentGaugeColor(val); }; @@ -319,7 +337,7 @@ const Borrow = () => { {!borrowInputError && borrowInput && !borrowPossible && selectedSeries && ( - setBorrowInput(selectedSeries?.sharesReserves_!)}> + handleMaxAction(ActionCodes.BORROW)}> Max borrow is{' '} @@ -416,7 +434,7 @@ const Borrow = () => { disabled={!selectedSeries || selectedSeries.seriesIsMature} /> maxCollateral && setCollatInput(maxCollateral)} + action={() => maxCollateral && handleMaxAction(ActionCodes.ADD_COLLATERAL)} disabled={ !selectedSeries || collatInput === maxCollateral || selectedSeries.seriesIsMature } @@ -449,7 +467,7 @@ const Borrow = () => { {borrowInput && minSafeCollateral && ( setCollatInput(cleanValue(minSafeCollateral, selectedIlk?.decimals))} + action={() => handleUseSafeCollateral()} > Use Safe Collateralization{': '} diff --git a/src/components/views/Lend.tsx b/src/components/views/Lend.tsx index eb6b06c54..c0dc849b4 100644 --- a/src/components/views/Lend.tsx +++ b/src/components/views/Lend.tsx @@ -74,15 +74,15 @@ const Lend = () => { if (lendDisabled) return; setLendDisabled(true); lend(lendInput, selectedSeries!); - logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.LEND, seriesId: selectedSeries.id, - txCode: getTxCode(ActionCodes.LEND, selectedSeries?.id!) + actionCode: ActionCodes.LEND, } as GA_Properties.transaction_initiated ); }; + /* Event handlers */ const handleNavAction = (_stepPosition: number) => { setStepPosition(_stepPosition); logAnalyticsEvent(GA_Event.next_step_clicked, { @@ -91,6 +91,14 @@ const Lend = () => { } 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(() => { setLendInput(undefined); setStepPosition(0); @@ -155,7 +163,7 @@ const Lend = () => { disabled={selectedSeries?.seriesIsMature} /> setLendInput(maxLend_)} + action={() => handleMaxAction()} disabled={maxLend_ === '0' || selectedSeries?.seriesIsMature} clearAction={() => setLendInput('')} showingMax={!!lendInput && (lendInput === maxLend_ || !!lendError)} @@ -189,7 +197,7 @@ const Lend = () => { {selectedBase && selectedSeries && protocolLimited && ( - setLendInput(maxLend_)}> + handleMaxAction()}> Max lend is{' '} diff --git a/src/components/views/LendPosition.tsx b/src/components/views/LendPosition.tsx index 0e81edb60..4c4005a9f 100644 --- a/src/components/views/LendPosition.tsx +++ b/src/components/views/LendPosition.tsx @@ -125,7 +125,7 @@ const LendPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.LEND, seriesId: selectedSeries.id, - txCode: getTxCode(ActionCodes.CLOSE_POSITION, selectedSeries?.id!) + actionCode: ActionCodes.CLOSE_POSITION, } as GA_Properties.transaction_initiated ); }; @@ -137,11 +137,20 @@ const LendPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.LEND, seriesId: selectedSeries.id, - txCode: getTxCode(ActionCodes.ROLL_POSITION, selectedSeries?.id!) + actionCode: ActionCodes.ROLL_POSITION, } as GA_Properties.transaction_initiated ); }; + const handleMaxAction = (actionCode: ActionCodes) => { + actionCode === ActionCodes.ROLL_POSITION && maxRoll_ && setRollInput(maxRoll_) + actionCode === ActionCodes.CLOSE_POSITION && maxClose_ && setCloseInput(maxClose_) + logAnalyticsEvent(GA_Event.max_clicked, { + view: GA_View.LEND, + actionCode, + } as GA_Properties.max_clicked) + } + const resetInputs = useCallback( (actionCode: ActionCodes) => { resetStepper(actionCode); @@ -288,7 +297,7 @@ const LendPosition = () => { icon={} /> setCloseInput(maxClose_)} + action={() => handleMaxAction(ActionCodes.CLOSE_POSITION)} disabled={maxClose_ === '0.0' || !selectedSeries} clearAction={() => setCloseInput('')} showingMax={!!closeInput && closeInput === maxClose_} @@ -296,7 +305,7 @@ const LendPosition = () => { {maxClose.lt(selectedSeries?.fyTokenBalance!) && ( - setCloseInput(maxClose_)}> + handleMaxAction(ActionCodes.CLOSE_POSITION)}> Max redeemable is {cleanValue(maxClose_, 2)} {selectedBase?.displaySymbol} {selectedSeries.sharesReserves.eq(maxClose) && ' (limited by protocol)'} @@ -351,7 +360,7 @@ const LendPosition = () => { icon={} /> setRollInput(maxRoll_)} + action={() => handleMaxAction(ActionCodes.ROLL_POSITION)} disabled={maxRoll_ === '0.0' || !selectedSeries || !rollToSeries} clearAction={() => setRollInput('')} showingMax={!!rollInput && rollInput === maxRoll_} diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index 7097ee48d..2841d1f26 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -12,6 +12,7 @@ const useAnalytics = () => { /* Google analytics log event */ const logAnalyticsEvent= (eventName: GA_Event, eventProps: any ) => { + if (eventName && process.env.ENV != 'development') { try { console.log(eventName, ' event logged'); diff --git a/src/types/analytics.ts b/src/types/analytics.ts index c75f235d6..8a45a0aa5 100644 --- a/src/types/analytics.ts +++ b/src/types/analytics.ts @@ -1,3 +1,5 @@ +import { ActionCodes } from "."; + export enum GA_Event { connect_wallet = 'connect_wallet', autoConnect_wallet = 'auto_connect_wallet', @@ -44,21 +46,21 @@ export namespace GA_Properties { export type asset_selected = { asset: string; view: GA_View}; export type collateral_selected = { asset: string; view: GA_View}; - export type max_clicked = { view: GA_View}; + export type max_clicked = { view: GA_View; actionCode: ActionCodes }; export type next_step_clicked = { step_index: number; view: GA_View}; + export type safe_collateralization_clicked = { view: GA_View}; export type transaction_initiated = { - txCode: string; - seriesId: string; view: GA_View; + actionCode: ActionCodes; + seriesId: string; supporting_collateral?: string; }; - export type transaction_failed = { view: GA_View; txCode: string }; - export type transaction_complete = { view: GA_View; txCode: string }; - export type transaction_rejected = { view: GA_View; txCode: string }; + export type transaction_failed = { view: GA_View; actionCode: ActionCodes, seriesId:string }; + export type transaction_complete = { view: GA_View; actionCode: ActionCodes, seriesId:string }; + export type transaction_rejected = { view: GA_View; actionCode: ActionCodes, seriesId:string }; - export type safe_collateralization_clicked = { view: GA_View}; export type follow_on_clicked = { view: GA_View}; export type position_opened = { id: string; view: GA_View }; From 4377dd8d6aef03d8ae50783358b15d2bbb02e616 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 11:09:36 +0100 Subject: [PATCH 09/24] pool, poolpostion and vaultPsotion maxes --- src/components/views/Pool.tsx | 12 ++++++++++-- src/components/views/PoolPosition.tsx | 12 ++++++++++-- src/components/views/VaultPosition.tsx | 26 ++++++++++++++++++-------- 3 files changed, 38 insertions(+), 12 deletions(-) diff --git a/src/components/views/Pool.tsx b/src/components/views/Pool.tsx index 122eb0895..4b5e6d386 100644 --- a/src/components/views/Pool.tsx +++ b/src/components/views/Pool.tsx @@ -83,7 +83,7 @@ function Pool() { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.POOL, seriesId: selectedStrategy?.currentSeries.id, - txCode: getTxCode(ActionCodes.ADD_LIQUIDITY, selectedStrategy!.id) + actionCode:ActionCodes.ADD_LIQUIDITY, } as GA_Properties.transaction_initiated ); }; @@ -103,6 +103,14 @@ function Pool() { } as GA_Properties.next_step_clicked ) }; + const handleMaxAction = () => { + maxPool && setPoolInput(maxPool) + logAnalyticsEvent(GA_Event.max_clicked, { + view: GA_View.POOL, + actionCode: ActionCodes.ADD_LIQUIDITY, + } as GA_Properties.max_clicked) + } + const resetInputs = useCallback(() => { setPoolInput(undefined); setStepPosition(0); @@ -152,7 +160,7 @@ function Pool() { onChange={(event: any) => setPoolInput(cleanValue(event.target.value, selectedBase?.decimals))} /> setPoolInput(maxPool)} + action={() => handleMaxAction()} disabled={maxPool === '0'} clearAction={() => setPoolInput('')} showingMax={!!poolInput && poolInput === maxPool} diff --git a/src/components/views/PoolPosition.tsx b/src/components/views/PoolPosition.tsx index bcef6e57f..893fd667c 100644 --- a/src/components/views/PoolPosition.tsx +++ b/src/components/views/PoolPosition.tsx @@ -109,11 +109,19 @@ const PoolPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.POOL, seriesId: selectedStrategy?.currentSeries.id, - txCode: getTxCode(ActionCodes.REMOVE_LIQUIDITY, selectedStrategy!.id) + actionCode: ActionCodes.REMOVE_LIQUIDITY, } as GA_Properties.transaction_initiated ); }; + const handleMaxAction = () => { + maxRemove && setRemoveInput(maxRemove) + logAnalyticsEvent(GA_Event.max_clicked, { + view: GA_View.POOL, + actionCode: ActionCodes.REMOVE_LIQUIDITY, + } as GA_Properties.max_clicked) + } + const resetInputs = useCallback( (actionCode: ActionCodes) => { resetStepper(actionCode); @@ -255,7 +263,7 @@ const PoolPosition = () => { icon={} /> setRemoveInput(maxRemove)} + action={() => handleMaxAction()} disabled={maxRemove === '0.0'} clearAction={() => setRemoveInput('')} showingMax={!!removeInput && removeInput === maxRemove} diff --git a/src/components/views/VaultPosition.tsx b/src/components/views/VaultPosition.tsx index e2cb981c9..599192188 100644 --- a/src/components/views/VaultPosition.tsx +++ b/src/components/views/VaultPosition.tsx @@ -218,7 +218,7 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - txCode: getTxCode(ActionCodes.REPAY, vaultSeries?.id!) + actionCode: ActionCodes.REPAY } as GA_Properties.transaction_initiated ); }; @@ -230,7 +230,7 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - txCode: getTxCode(ActionCodes.ROLL_DEBT, vaultSeries?.id!) + actionCode: ActionCodes.ROLL_DEBT } as GA_Properties.transaction_initiated ); }; @@ -243,7 +243,7 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - txCode: getTxCode(ActionCodes.REMOVE_COLLATERAL, vaultSeries?.id!) + actionCode: ActionCodes.REMOVE_COLLATERAL } as GA_Properties.transaction_initiated ); } else { @@ -254,11 +254,21 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - txCode: getTxCode(ActionCodes.ADD_COLLATERAL, vaultSeries?.id!) + actionCode: ActionCodes.ADD_COLLATERAL } as GA_Properties.transaction_initiated ); } }; + const handleMaxAction = (actionCode: ActionCodes) => { + actionCode === ActionCodes.REPAY && setRepayInput(maxRepay.gt(minRepayable) ? maxRepay_ : minRepayable_) + actionCode === ActionCodes.ADD_COLLATERAL && setAddCollatInput(maxCollateral) + actionCode === ActionCodes.REMOVE_COLLATERAL && setRemoveCollatInput(maxRemovableCollateral) + logAnalyticsEvent(GA_Event.max_clicked, { + view: GA_View.BORROW, + actionCode, + } as GA_Properties.max_clicked) + } + const resetInputs = useCallback( (actionCode: ActionCodes) => { resetStepper(actionCode); @@ -507,7 +517,7 @@ const VaultPosition = () => { icon={} /> setRepayInput(maxRepay.gt(minRepayable) ? maxRepay_ : minRepayable_)} + action={() => handleMaxAction(ActionCodes.REPAY) } clearAction={() => setRepayInput('')} showingMax={!!repayInput && repayInput === maxRepay_} /> @@ -666,7 +676,7 @@ const VaultPosition = () => { /> setAddCollatInput(maxCollateral)} + action={() => handleMaxAction(ActionCodes.ADD_COLLATERAL) } clearAction={() => setAddCollatInput('')} showingMax={!!addCollatInput && addCollatInput === maxCollateral} /> @@ -722,14 +732,14 @@ const VaultPosition = () => { icon={} /> setRemoveCollatInput(maxRemovableCollateral)} + action={() => handleMaxAction(ActionCodes.REMOVE_COLLATERAL)} clearAction={() => setRemoveCollatInput('')} showingMax={!!removeCollatInput && maxRemovableCollateral === removeCollatInput} /> {!removeCollatInput ? ( - setRemoveCollatInput(maxRemovableCollateral)}> + handleMaxAction(ActionCodes.REMOVE_COLLATERAL)}> Remove all collateral ({cleanValue(maxRemovableCollateral, 6)} {vaultIlk?.displaySymbol!}) From 635d6e25f2f47fc2b68f01f40fd0d32e6948caab Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 11:58:00 +0100 Subject: [PATCH 10/24] make view optional --- src/components/selectors/AssetSelector.tsx | 9 ++++ src/hooks/useAnalytics.ts | 50 ++++++++++++++-------- src/types/analytics.ts | 30 ++++++------- 3 files changed, 57 insertions(+), 32 deletions(-) diff --git a/src/components/selectors/AssetSelector.tsx b/src/components/selectors/AssetSelector.tsx index c7a9d9856..5fe608b5b 100644 --- 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([]); const [modalOpen, toggleModal] = useState(false); + const {logAnalyticsEvent} = useAnalytics(); + const optionText = (asset: IAsset | undefined) => asset ? ( @@ -60,10 +64,15 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) { if (selectCollateral) { diagnostics && console.log('Collateral selected: ', asset.id); setSelectedIlk(asset); + } else { diagnostics && console.log('Base selected: ', asset.id); setSelectedBase(asset); setSelectedSeries(null); + + logAnalyticsEvent(GA_Event.asset_selected, { + view: GA_View.BORROW, + } as GA_Properties.asset_selected) } }; diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index 2841d1f26..cbd603664 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -1,31 +1,47 @@ import { useContext } from 'react'; import { ChainContext } from '../contexts/ChainContext'; -import { GA_Event } from '../types/analytics'; - -const useAnalytics = () => { +import { GA_Event, GA_View } from '../types/analytics'; +import { useRouter } from 'next/router'; +const useAnalytics = () => { + /* get the chainId */ const { chainState: { connection: { chainId }, }, } = useContext(ChainContext); - - /* Google analytics log event */ -const logAnalyticsEvent= (eventName: GA_Event, eventProps: any ) => { - if (eventName && process.env.ENV != 'development') { - try { - console.log(eventName, ' event logged'); - window?.gtag('event', eventName, { ...eventProps , chain_id: chainId} ); - } catch (e) { - // eslint-disable-next-line no-console - console.log(e); - } - } -}; + /* get path from router */ + const { asPath } = useRouter(); + const viewArr = asPath.substring(1).split('/', 2); -return { logAnalyticsEvent }; + const getView = () => { + if (viewArr[0] === 'pool' || viewArr[0] === 'poolposition') return GA_View.POOL; + if (viewArr[0] === 'borrow' || viewArr[0] === 'vaultposition') return GA_View.BORROW; + if (viewArr[0] === 'lend' || viewArr[0] === 'lendposition') return GA_View.LEND; + if (viewArr[0] === 'dashboard') return GA_View.DASHBOARD; + return GA_View.GENERAL; + }; + + /* Google analytics log event */ + const logAnalyticsEvent = (eventName: GA_Event, eventProps: any) => { + if (eventName && process.env.ENV != 'development') { + try { + console.log(eventName, ' event logged'); + window?.gtag('event', eventName, { + ...eventProps, + chain_id: chainId, + view: eventProps.view || getView(), // if no view is provided, try to get it + view_id: viewArr[1] || 'none', + }); + } catch (e) { + // eslint-disable-next-line no-console + console.log(e); + } + } + }; + return { logAnalyticsEvent }; }; export default useAnalytics; diff --git a/src/types/analytics.ts b/src/types/analytics.ts index 8a45a0aa5..dec396ed6 100644 --- a/src/types/analytics.ts +++ b/src/types/analytics.ts @@ -38,31 +38,31 @@ export enum GA_View { /* Properties on events */ export namespace GA_Properties { - export type connect_wallet = { view: GA_View}; - export type autoConnect_wallet = { view: GA_View}; + export type connect_wallet = { view?: GA_View}; + export type autoConnect_wallet = { view?: GA_View}; - export type view_changed = { fromView: GA_View; toView: GA_View}; + export type view_changed = { toView: GA_View, fromView?: GA_View;}; - export type asset_selected = { asset: string; view: GA_View}; - export type collateral_selected = { asset: string; view: GA_View}; + export type asset_selected = { asset: string; view?: GA_View}; + export type collateral_selected = { asset: string; view?: GA_View}; - export type max_clicked = { view: GA_View; actionCode: ActionCodes }; - export type next_step_clicked = { step_index: number; view: GA_View}; - export type safe_collateralization_clicked = { view: GA_View}; + export type max_clicked = { actionCode: ActionCodes, view?: GA_View; }; + export type next_step_clicked = { step_index: number; view?: GA_View}; + export type safe_collateralization_clicked = { view?: GA_View}; export type transaction_initiated = { - view: GA_View; actionCode: ActionCodes; seriesId: string; supporting_collateral?: string; + }; - export type transaction_failed = { view: GA_View; actionCode: ActionCodes, seriesId:string }; - export type transaction_complete = { view: GA_View; actionCode: ActionCodes, seriesId:string }; - export type transaction_rejected = { view: GA_View; actionCode: ActionCodes, seriesId:string }; + export type transaction_failed = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; + export type transaction_complete = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; + export type transaction_rejected = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; - export type follow_on_clicked = { view: GA_View}; + export type follow_on_clicked = { view?: GA_View}; - export type position_opened = { id: string; view: GA_View }; - export type position_action_selected = { id: string; action: string; view: GA_View }; + export type position_opened = { id: string; view?: GA_View }; + export type position_action_selected = {action: string; id: string; view?: GA_View }; } From 56197eecc581cb50c1ed42ffd20833728bd3eea0 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 12:41:36 +0100 Subject: [PATCH 11/24] asset selction --- src/components/selectors/AssetSelector.tsx | 11 +++++++---- src/hooks/useAnalytics.ts | 6 ++++-- src/types/analytics.ts | 1 - 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/selectors/AssetSelector.tsx b/src/components/selectors/AssetSelector.tsx index 5fe608b5b..c4d038570 100644 --- a/src/components/selectors/AssetSelector.tsx +++ b/src/components/selectors/AssetSelector.tsx @@ -46,7 +46,7 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) { const [options, setOptions] = useState([]); const [modalOpen, toggleModal] = useState(false); - const {logAnalyticsEvent} = useAnalytics(); + const { logAnalyticsEvent } = useAnalytics(); const optionText = (asset: IAsset | undefined) => asset ? ( @@ -64,6 +64,9 @@ 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); @@ -71,8 +74,8 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) { setSelectedSeries(null); logAnalyticsEvent(GA_Event.asset_selected, { - view: GA_View.BORROW, - } as GA_Properties.asset_selected) + asset: asset.symbol, + } as GA_Properties.asset_selected); } }; @@ -137,7 +140,7 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) { name="assetSelect" placeholder="Select Asset" options={options} - value= { !selectCollateral ? selectedBase || undefined : selectedIlk || undefined } + value={!selectCollateral ? selectedBase || undefined : selectedIlk || undefined} labelKey={(x: IAsset | undefined) => optionText(x)} valueLabel={ diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index cbd603664..52bb9a903 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -27,17 +27,19 @@ const useAnalytics = () => { const logAnalyticsEvent = (eventName: GA_Event, eventProps: any) => { if (eventName && process.env.ENV != 'development') { try { - console.log(eventName, ' event logged'); + // console.log(eventName, ' event logged'); window?.gtag('event', eventName, { ...eventProps, chain_id: chainId, - view: eventProps.view || getView(), // if no view is provided, try to get it + view: eventProps.view || getView(), // if no view is provided, try to get it view_id: viewArr[1] || 'none', }); } catch (e) { // eslint-disable-next-line no-console console.log(e); } + } else { + console.log('DEV_MODE:::', eventName, ' event logged: ', eventProps, ' ', eventProps.view || getView(), ' ', viewArr[1] || 'none'); } }; diff --git a/src/types/analytics.ts b/src/types/analytics.ts index dec396ed6..7bf60e2fa 100644 --- a/src/types/analytics.ts +++ b/src/types/analytics.ts @@ -54,7 +54,6 @@ export namespace GA_Properties { actionCode: ActionCodes; seriesId: string; supporting_collateral?: string; - }; export type transaction_failed = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; From ba666be1f26f119cf96bcf4c4d6a9e40936f0816 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 14:48:57 +0100 Subject: [PATCH 12/24] view_change logging --- src/components/YieldNavigation.tsx | 17 +++++++++++++++-- src/hooks/useAnalytics.ts | 4 ++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/YieldNavigation.tsx b/src/components/YieldNavigation.tsx index f7c6793bb..12f792a72 100644 --- 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(ResponsiveContext) === 'small'; const router = useRouter(); + const { logAnalyticsEvent } = useAnalytics(); + const [height] = useWindowSize(); const { chainState: { @@ -65,9 +69,18 @@ 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 }) => ( - - callbackFn() } style={router.pathname.includes(link.to) ? activelinkStyle : { color: 'gray' }}> + + handleViewChange(link.to) } style={router.pathname.includes(link.to) ? activelinkStyle : { color: 'gray' }}> {link.label} diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index 52bb9a903..af157d97e 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -1,6 +1,6 @@ -import { useContext } from 'react'; +import { useContext, useEffect, useMemo } from 'react'; import { ChainContext } from '../contexts/ChainContext'; -import { GA_Event, GA_View } from '../types/analytics'; +import { GA_Event, GA_Properties, GA_View } from '../types/analytics'; import { useRouter } from 'next/router'; const useAnalytics = () => { From 863c7b6d06b6587adfe3e6f9c7ae088dbcec2452 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 15:04:26 +0100 Subject: [PATCH 13/24] log postions opened --- src/components/positionItems/LendItem.tsx | 6 ++++++ src/components/positionItems/StrategyItem.tsx | 6 ++++++ src/components/positionItems/VaultItem.tsx | 6 ++++++ src/hooks/useAnalytics.ts | 7 ++++--- 4 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/positionItems/LendItem.tsx b/src/components/positionItems/LendItem.tsx index 5d1ca6317..5b2b31cfa 100644 --- 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 index 4048aa62d..911579d5b 100644 --- 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 index 44c68bccb..47b024bac 100644 --- 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/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index af157d97e..4c0fd858a 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -27,19 +27,20 @@ const useAnalytics = () => { const logAnalyticsEvent = (eventName: GA_Event, eventProps: any) => { if (eventName && process.env.ENV != 'development') { try { - // console.log(eventName, ' event logged'); window?.gtag('event', eventName, { ...eventProps, chain_id: chainId, view: eventProps.view || getView(), // if no view is provided, try to get it - view_id: viewArr[1] || 'none', + view_id: viewArr[1] || '-', }); } catch (e) { // eslint-disable-next-line no-console console.log(e); } } else { - console.log('DEV_MODE:::', eventName, ' event logged: ', eventProps, ' ', eventProps.view || getView(), ' ', viewArr[1] || 'none'); + console.log( + ' DEV_ANALYTICS ::: ', [ eventName, eventProps,eventProps.view || getView(), viewArr[1] || '-' ] + ); } }; From 61e8a5a694b34027b32a13ba2d77f74643d1a4f7 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 15:22:19 +0100 Subject: [PATCH 14/24] position_action change evetns --- src/components/views/LendPosition.tsx | 9 +++++- src/components/views/PoolPosition.tsx | 11 +++++-- src/components/views/VaultPosition.tsx | 45 ++++++++++++++------------ 3 files changed, 42 insertions(+), 23 deletions(-) diff --git a/src/components/views/LendPosition.tsx b/src/components/views/LendPosition.tsx index 4c4005a9f..851b63b00 100644 --- a/src/components/views/LendPosition.tsx +++ b/src/components/views/LendPosition.tsx @@ -151,6 +151,13 @@ const LendPosition = () => { } as GA_Properties.max_clicked) } + const handleSetActionActive = (option: { text: string; index: number }) => { + setActionActive(option); + logAnalyticsEvent(GA_Event.position_action_selected, { + action: option.text, + } as GA_Properties.position_action_selected); + }; + const resetInputs = useCallback( (actionCode: ActionCodes) => { resetStepper(actionCode); @@ -268,7 +275,7 @@ const LendPosition = () => { labelKey="text" valueKey="index" value={actionActive} - onChange={({ option }) => setActionActive(option)} + onChange={({ option }) => handleSetActionActive(option)} disabled={[3]} /> diff --git a/src/components/views/PoolPosition.tsx b/src/components/views/PoolPosition.tsx index 893fd667c..8d37451f8 100644 --- a/src/components/views/PoolPosition.tsx +++ b/src/components/views/PoolPosition.tsx @@ -122,6 +122,13 @@ const PoolPosition = () => { } as GA_Properties.max_clicked) } + const handleSetActionActive = (option: { text: string; index: number }) => { + setActionActive(option); + logAnalyticsEvent(GA_Event.position_action_selected, { + action: option.text, + } as GA_Properties.position_action_selected); + }; + const resetInputs = useCallback( (actionCode: ActionCodes) => { resetStepper(actionCode); @@ -241,9 +248,9 @@ const PoolPosition = () => { labelKey="text" valueKey="index" value={actionActive} - onChange={({ option }) => setActionActive(option)} + onChange={({ option }) => handleSetActionActive(option)} /> - + {actionActive.index === 0 && ( diff --git a/src/components/views/VaultPosition.tsx b/src/components/views/VaultPosition.tsx index 599192188..20927ee3e 100644 --- a/src/components/views/VaultPosition.tsx +++ b/src/components/views/VaultPosition.tsx @@ -126,8 +126,8 @@ const VaultPosition = () => { /* HOOK FNS */ const repay = useRepayDebt(); const rollDebt = useRollDebt(); - - const {logAnalyticsEvent} = useAnalytics(); + + const { logAnalyticsEvent } = useAnalytics(); const { addCollateral } = useAddCollateral(); const { removeCollateral } = useRemoveCollateral(); @@ -218,8 +218,8 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - actionCode: ActionCodes.REPAY - } as GA_Properties.transaction_initiated ); + actionCode: ActionCodes.REPAY, + } as GA_Properties.transaction_initiated); }; const handleRoll = () => { @@ -230,8 +230,8 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - actionCode: ActionCodes.ROLL_DEBT - } as GA_Properties.transaction_initiated ); + actionCode: ActionCodes.ROLL_DEBT, + } as GA_Properties.transaction_initiated); }; const handleCollateral = (action: 'ADD' | 'REMOVE') => { @@ -243,9 +243,8 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - actionCode: ActionCodes.REMOVE_COLLATERAL - } as GA_Properties.transaction_initiated ); - + actionCode: ActionCodes.REMOVE_COLLATERAL, + } as GA_Properties.transaction_initiated); } else { if (addCollateralDisabled) return; setAddCollateralDisabled(true); @@ -254,20 +253,26 @@ const VaultPosition = () => { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.BORROW, seriesId: vaultSeries?.id!, - actionCode: ActionCodes.ADD_COLLATERAL - } as GA_Properties.transaction_initiated ); + actionCode: ActionCodes.ADD_COLLATERAL, + } as GA_Properties.transaction_initiated); } }; const handleMaxAction = (actionCode: ActionCodes) => { - actionCode === ActionCodes.REPAY && setRepayInput(maxRepay.gt(minRepayable) ? maxRepay_ : minRepayable_) - actionCode === ActionCodes.ADD_COLLATERAL && setAddCollatInput(maxCollateral) - actionCode === ActionCodes.REMOVE_COLLATERAL && setRemoveCollatInput(maxRemovableCollateral) + actionCode === ActionCodes.REPAY && setRepayInput(maxRepay.gt(minRepayable) ? maxRepay_ : minRepayable_); + actionCode === ActionCodes.ADD_COLLATERAL && setAddCollatInput(maxCollateral); + actionCode === ActionCodes.REMOVE_COLLATERAL && setRemoveCollatInput(maxRemovableCollateral); logAnalyticsEvent(GA_Event.max_clicked, { - view: GA_View.BORROW, actionCode, - } as GA_Properties.max_clicked) - } + } as GA_Properties.max_clicked); + }; + + const handleSetActionActive = (option: { text: string; index: number }) => { + setActionActive(option); + logAnalyticsEvent(GA_Event.position_action_selected, { + action: option.text, + } as GA_Properties.position_action_selected); + }; const resetInputs = useCallback( (actionCode: ActionCodes) => { @@ -493,7 +498,7 @@ const VaultPosition = () => { labelKey="text" valueKey="index" value={actionActive} - onChange={({ option }) => setActionActive(option)} + onChange={({ option }) => handleSetActionActive(option)} disabled={_selectedVault?.isActive ? undefined : [0, 1, 2, 4, 5]} /> @@ -517,7 +522,7 @@ const VaultPosition = () => { icon={} /> handleMaxAction(ActionCodes.REPAY) } + action={() => handleMaxAction(ActionCodes.REPAY)} clearAction={() => setRepayInput('')} showingMax={!!repayInput && repayInput === maxRepay_} /> @@ -676,7 +681,7 @@ const VaultPosition = () => { /> handleMaxAction(ActionCodes.ADD_COLLATERAL) } + action={() => handleMaxAction(ActionCodes.ADD_COLLATERAL)} clearAction={() => setAddCollatInput('')} showingMax={!!addCollatInput && addCollatInput === maxCollateral} /> From eecb1bf0c6e5f6455fcee35c8068e5a686b9c556 Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 15:22:43 +0100 Subject: [PATCH 15/24] version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9a1c47706..b48a7f34a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "app-v2", - "version": "2.4.12", + "version": "2.4.16", "private": true, "dependencies": { "@ethersproject/providers": "^5.6.8", From 7f96bc5402a1dfdf3e87df629616e5d7fa15fc0f Mon Sep 17 00:00:00 2001 From: brucedonovan Date: Fri, 14 Oct 2022 15:45:05 +0100 Subject: [PATCH 16/24] trnasction loggins --- src/contexts/TxContext.tsx | 37 +++++++++++++++++++++++++++++++------ src/types/analytics.ts | 6 ++++-- src/utils/appUtils.ts | 2 +- 3 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/contexts/TxContext.tsx b/src/contexts/TxContext.tsx index 866797951..0d800cb0a 100644 --- a/src/contexts/TxContext.tsx +++ b/src/contexts/TxContext.tsx @@ -2,8 +2,9 @@ import React, { useReducer, useEffect, useContext } from 'react'; import { ethers, ContractTransaction, providers } from 'ethers'; import { toast } from 'react-toastify'; import { ApprovalType, ISignData, TxState, ProcessStage, IYieldProcess } from '../types'; -import { analyticsLogEvent } from '../utils/appUtils'; import { ChainContext } from './ChainContext'; +import useAnalytics from '../hooks/useAnalytics'; +import { GA_Event, GA_Properties } from '../types/analytics'; enum TxStateItem { TRANSACTIONS = 'transactions', @@ -126,6 +127,8 @@ const TxProvider = ({ children }: any) => { connection: { chainId, provider }, } = chainState; + const {logAnalyticsEvent} = useAnalytics(); + const _resetProcess = (txCode: string) => updateState({ type: TxStateItem.RESET_PROCESS, payload: txCode }); const _startProcessTimer = async (txCode: string) => { @@ -149,6 +152,14 @@ const TxProvider = ({ children }: any) => { console.log('Something went wrong: ', err); } } + + // analyticsLogEvent('TX_REJECTED', { txCode }, chainId); + logAnalyticsEvent(GA_Event.transaction_rejected, { + actionCode: txCode.split('_')[0], + seriesId: txCode.split('_')[1], + error: err.code === 4001 ? 'rejected by user': 'rejected by wallet' + } as GA_Properties.transaction_rejected ); + }; /* handle an error from a tx that was successfully submitted */ @@ -161,7 +172,12 @@ const TxProvider = ({ children }: any) => { updateState({ type: TxStateItem.TRANSACTIONS, payload: _tx }); console.log('txHash: ', tx?.hash); - analyticsLogEvent('TX_FAILED', { txCode }, chainId); + // analyticsLogEvent('TX_FAILED', { txCode }, chainId); + logAnalyticsEvent(GA_Event.transaction_failed, { + actionCode: txCode.split('_')[0], + seriesId: txCode.split('_')[1], + error: msg, + } as GA_Properties.transaction_failed ); }; const handleTxWillFail = async (error: any, txCode?: string | undefined, transaction?: any) => { @@ -179,7 +195,12 @@ const TxProvider = ({ children }: any) => { txCode && updateState({ type: TxStateItem.RESET_PROCESS, payload: txCode }); } else { updateState({ type: TxStateItem.TX_WILL_FAIL, payload: false }); - analyticsLogEvent('TX_WILL_FAIL', { txCode }, chainId); + + logAnalyticsEvent(GA_Event.transaction_will_fail, { + actionCode: txCode.split('_')[0], + seriesId: txCode.split('_')[1], + error, + } as GA_Properties.transaction_will_fail ); } }; @@ -208,10 +229,8 @@ const TxProvider = ({ children }: any) => { _isfallback ? ProcessStage.SIGNING_TRANSACTION_PENDING : ProcessStage.TRANSACTION_PENDING ); } catch (e) { - console.log( 'failed aarg') /* this case is when user rejects tx OR wallet rejects tx */ _handleTxRejection(e, txCode); - analyticsLogEvent('TX_REJECTED', { txCode }, chainId); return null; } @@ -227,7 +246,13 @@ const TxProvider = ({ children }: any) => { if (_isfallback === false) { /* transaction completion : success OR failure */ _setProcessStage(txCode, ProcessStage.PROCESS_COMPLETE); - analyticsLogEvent('TX_COMPLETE', { txCode }, chainId); + + // analyticsLogEvent('TX_COMPLETE', { txCode }, chainId); + logAnalyticsEvent(GA_Event.transaction_complete, { + actionCode: txCode.split('_')[0], + seriesId: txCode.split('_')[1], + } as GA_Properties.transaction_complete ); + return res; } /* this is the case when the tx was a fallback from a permit/allowance tx */ diff --git a/src/types/analytics.ts b/src/types/analytics.ts index 7bf60e2fa..4743f4d56 100644 --- a/src/types/analytics.ts +++ b/src/types/analytics.ts @@ -15,6 +15,7 @@ export enum GA_Event { transaction_initiated = 'transaction_initiated', transaction_failed = 'transaction_failed', + transaction_will_fail = 'transaction_will_fail', transaction_complete = 'transaction_complete', transaction_rejected = 'transaction_rejected', @@ -56,9 +57,10 @@ export namespace GA_Properties { supporting_collateral?: string; }; - export type transaction_failed = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; + export type transaction_failed = { actionCode: ActionCodes, seriesId:string, error: string, view?: GA_View; }; + export type transaction_will_fail = { actionCode: ActionCodes, seriesId:string, error: string, view?: GA_View; }; + export type transaction_rejected = { actionCode: ActionCodes, seriesId:string, error: string, view?: GA_View; }; export type transaction_complete = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; - export type transaction_rejected = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; export type follow_on_clicked = { view?: GA_View}; diff --git a/src/utils/appUtils.ts b/src/utils/appUtils.ts index fcd546cf4..9059940a3 100644 --- a/src/utils/appUtils.ts +++ b/src/utils/appUtils.ts @@ -37,7 +37,7 @@ export const toLog = (message: string, type: string = 'info') => { }; /* creates internal tracking code of a transaction type */ -export const getTxCode = (txType: ActionCodes, vaultOrSeriesId: string | null) => `${txType}_${vaultOrSeriesId}`; +export const getTxCode = (txType: ActionCodes, SeriesId: string | null) => `${txType}_${SeriesId}`; export const generateVaultName = (id: string) => { const vaultNameConfig: Config = { From 0e68c5cda629d7c4aef38de4dfa256ba1a93e9be Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:20:51 -0700 Subject: [PATCH 17/24] chore: format --- src/components/Layout.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index fa53b1506..8dd8bb7f3 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -28,15 +28,16 @@ const Layout = ({ children }: ILayout) => { return ( <> } + + )} Yield Protocol App From dd746c1700695023bb5c9e2458d14ab6429e672a Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:22:29 -0700 Subject: [PATCH 18/24] chore: format --- src/components/YieldNavigation.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/YieldNavigation.tsx b/src/components/YieldNavigation.tsx index 12f792a72..e6fabf9e7 100644 --- a/src/components/YieldNavigation.tsx +++ b/src/components/YieldNavigation.tsx @@ -69,18 +69,19 @@ const YieldNavigation = ({ sideNavigation, callbackFn }: IYieldNavigationProps) { label: 'DASHBOARD', to: '/dashboard', disabled: !account }, ]; - const handleViewChange = (toView:string) => { - console.log( toView.slice(1) ); + const handleViewChange = (toView: string) => { + console.log(toView.slice(1)); logAnalyticsEvent(GA_Event.view_changed, { - toView: toView.slice(1) + toView: toView.slice(1), } as GA_Properties.view_changed); - } + }; const NavLink = ({ link }: { link: any }) => ( - - handleViewChange(link.to) } style={router.pathname.includes(link.to) ? activelinkStyle : { color: 'gray' }}> + + handleViewChange(link.to)} + style={router.pathname.includes(link.to) ? activelinkStyle : { color: 'gray' }} + > {link.label} From 2b60c04ebb596905fddf48666775c109e97641a9 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:24:18 -0700 Subject: [PATCH 19/24] chore: format --- src/types/analytics.ts | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/types/analytics.ts b/src/types/analytics.ts index 4743f4d56..ad6461700 100644 --- a/src/types/analytics.ts +++ b/src/types/analytics.ts @@ -1,4 +1,4 @@ -import { ActionCodes } from "."; +import { ActionCodes } from '.'; export enum GA_Event { connect_wallet = 'connect_wallet', @@ -39,17 +39,17 @@ export enum GA_View { /* Properties on events */ export namespace GA_Properties { - export type connect_wallet = { view?: GA_View}; - export type autoConnect_wallet = { view?: GA_View}; + export type connect_wallet = { view?: GA_View }; + export type autoConnect_wallet = { view?: GA_View }; - export type view_changed = { toView: GA_View, fromView?: GA_View;}; + export type view_changed = { toView: GA_View; fromView?: GA_View }; - export type asset_selected = { asset: string; view?: GA_View}; - export type collateral_selected = { asset: string; view?: GA_View}; + export type asset_selected = { asset: string; view?: GA_View }; + export type collateral_selected = { asset: string; view?: GA_View }; - export type max_clicked = { actionCode: ActionCodes, view?: GA_View; }; - export type next_step_clicked = { step_index: number; view?: GA_View}; - export type safe_collateralization_clicked = { view?: GA_View}; + export type max_clicked = { actionCode: ActionCodes; view?: GA_View }; + export type next_step_clicked = { step_index: number; view?: GA_View }; + export type safe_collateralization_clicked = { view?: GA_View }; export type transaction_initiated = { actionCode: ActionCodes; @@ -57,13 +57,13 @@ export namespace GA_Properties { supporting_collateral?: string; }; - export type transaction_failed = { actionCode: ActionCodes, seriesId:string, error: string, view?: GA_View; }; - export type transaction_will_fail = { actionCode: ActionCodes, seriesId:string, error: string, view?: GA_View; }; - export type transaction_rejected = { actionCode: ActionCodes, seriesId:string, error: string, view?: GA_View; }; - export type transaction_complete = { actionCode: ActionCodes, seriesId:string, view?: GA_View; }; + export type transaction_failed = { actionCode: ActionCodes; seriesId: string; error: string; view?: GA_View }; + export type transaction_will_fail = { actionCode: ActionCodes; seriesId: string; error: string; view?: GA_View }; + export type transaction_rejected = { actionCode: ActionCodes; seriesId: string; error: string; view?: GA_View }; + export type transaction_complete = { actionCode: ActionCodes; seriesId: string; view?: GA_View }; - export type follow_on_clicked = { view?: GA_View}; + export type follow_on_clicked = { view?: GA_View }; export type position_opened = { id: string; view?: GA_View }; - export type position_action_selected = {action: string; id: string; view?: GA_View }; + export type position_action_selected = { action: string; id: string; view?: GA_View }; } From b072aca5a1681aef500cbce586b1c01d886ad1e5 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:29:58 -0700 Subject: [PATCH 20/24] chore: format --- src/hooks/useAnalytics.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index 4c0fd858a..cbe0a27c9 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -38,9 +38,7 @@ const useAnalytics = () => { console.log(e); } } else { - console.log( - ' DEV_ANALYTICS ::: ', [ eventName, eventProps,eventProps.view || getView(), viewArr[1] || '-' ] - ); + console.log(' DEV_ANALYTICS ::: ', [eventName, eventProps, eventProps.view || getView(), viewArr[1] || '-']); } }; From 199767cd55765dacd49eca6805d732d3371b0bd2 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:31:25 -0700 Subject: [PATCH 21/24] fix: chain context type --- src/hooks/useAnalytics.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index cbe0a27c9..2c7c29a25 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -2,6 +2,7 @@ import { useContext, useEffect, useMemo } from 'react'; import { ChainContext } from '../contexts/ChainContext'; import { GA_Event, GA_Properties, GA_View } from '../types/analytics'; import { useRouter } from 'next/router'; +import { IChainContext } from '../types/index'; const useAnalytics = () => { /* get the chainId */ @@ -9,7 +10,7 @@ const useAnalytics = () => { chainState: { connection: { chainId }, }, - } = useContext(ChainContext); + } = useContext(ChainContext) as IChainContext; /* get path from router */ const { asPath } = useRouter(); From fd21ee87173183d31aee32ebbd1c71fa3f648caa Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:31:42 -0700 Subject: [PATCH 22/24] chore: remove unused imports --- src/hooks/useAnalytics.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index 2c7c29a25..5e0549ead 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -1,6 +1,6 @@ -import { useContext, useEffect, useMemo } from 'react'; +import { useContext } from 'react'; import { ChainContext } from '../contexts/ChainContext'; -import { GA_Event, GA_Properties, GA_View } from '../types/analytics'; +import { GA_Event, GA_View } from '../types/analytics'; import { useRouter } from 'next/router'; import { IChainContext } from '../types/index'; From 429d4c6971c19ba09db82173e2766eaf5c8d5048 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:36:49 -0700 Subject: [PATCH 23/24] chore: format --- src/components/positionItems/LendItem.tsx | 2 +- src/components/positionItems/StrategyItem.tsx | 2 +- src/components/positionItems/VaultItem.tsx | 2 +- src/components/selectors/AssetSelector.tsx | 1 - src/components/views/Borrow.tsx | 24 ++++++++----------- src/components/views/Lend.tsx | 17 +++++++------ src/components/views/LendPosition.tsx | 15 ++++++------ src/components/views/Pool.tsx | 16 ++++++------- src/components/views/PoolPosition.tsx | 15 ++++++------ src/components/views/VaultPosition.tsx | 3 +++ src/utils/appUtils.ts | 3 --- 11 files changed, 45 insertions(+), 55 deletions(-) diff --git a/src/components/positionItems/LendItem.tsx b/src/components/positionItems/LendItem.tsx index 5b2b31cfa..4d8ef2fce 100644 --- a/src/components/positionItems/LendItem.tsx +++ b/src/components/positionItems/LendItem.tsx @@ -38,7 +38,7 @@ function LendItem({ userActions.setSelectedSeries(_series); router.push(`/${actionType.toLowerCase()}position/${_series.id}`); logAnalyticsEvent(GA_Event.position_opened, { - id: selectedSeries.id + id: selectedSeries.id, } as GA_Properties.position_opened); }; diff --git a/src/components/positionItems/StrategyItem.tsx b/src/components/positionItems/StrategyItem.tsx index 911579d5b..b9ea94ba7 100644 --- a/src/components/positionItems/StrategyItem.tsx +++ b/src/components/positionItems/StrategyItem.tsx @@ -30,7 +30,7 @@ function StrategyItem({ strategy, index, condensed }: { strategy: IStrategy; ind userActions.setSelectedStrategy(strategy); router.push(`/poolposition/${strategy.address}`); logAnalyticsEvent(GA_Event.position_opened, { - id: strategy.id + id: strategy.id, } as GA_Properties.position_opened); }; diff --git a/src/components/positionItems/VaultItem.tsx b/src/components/positionItems/VaultItem.tsx index 47b024bac..3ba3cd5ba 100644 --- a/src/components/positionItems/VaultItem.tsx +++ b/src/components/positionItems/VaultItem.tsx @@ -28,7 +28,7 @@ function VaultItem({ vault, index, condensed }: { vault: IVault; index: number; setSelectedVault(_vault); router.push(`/vaultposition/${_vault.id}`); logAnalyticsEvent(GA_Event.position_opened, { - id: _vault.id + id: _vault.id, } as GA_Properties.position_opened); }; const vaultBase = assetMap.get(vault.baseId); diff --git a/src/components/selectors/AssetSelector.tsx b/src/components/selectors/AssetSelector.tsx index 80e46e3ac..328fa25ee 100644 --- a/src/components/selectors/AssetSelector.tsx +++ b/src/components/selectors/AssetSelector.tsx @@ -67,7 +67,6 @@ function AssetSelector({ selectCollateral, isModal }: IAssetSelectorProps) { logAnalyticsEvent(GA_Event.collateral_selected, { asset: asset.symbol, } as GA_Properties.collateral_selected); - } else { diagnostics && console.log('Base selected: ', asset.id); setSelectedBase(asset); diff --git a/src/components/views/Borrow.tsx b/src/components/views/Borrow.tsx index ac0afe06a..58957f769 100644 --- a/src/components/views/Borrow.tsx +++ b/src/components/views/Borrow.tsx @@ -55,7 +55,7 @@ const Borrow = () => { const mobile: boolean = useContext(ResponsiveContext) === 'small'; useTenderly(); - const {logAnalyticsEvent} = useAnalytics(); + const { logAnalyticsEvent } = useAnalytics(); /* STATE FROM CONTEXT */ const { @@ -142,15 +142,13 @@ const Borrow = () => { seriesId: selectedSeries?.id!, actionCode: ActionCodes.BORROW, supporting_collateral: selectedIlk.symbol, - } as GA_Properties.transaction_initiated ); - + } as GA_Properties.transaction_initiated); }; useEffect(() => { setRenderId(new Date().getTime().toString(36)); }, []); - /** Interaction handlers */ const handleNavAction = (_stepPosition: number) => { _stepPosition === 0 && setSelectedIlk(assetMap.get('0x303000000000')!); @@ -158,24 +156,24 @@ const Borrow = () => { logAnalyticsEvent(GA_Event.next_step_clicked, { view: GA_View.BORROW, step_index: _stepPosition, - } as GA_Properties.next_step_clicked ) + } as GA_Properties.next_step_clicked); }; const handleMaxAction = (actionCode: ActionCodes) => { actionCode === ActionCodes.ADD_COLLATERAL && setCollatInput(maxCollateral); - actionCode === ActionCodes.BORROW && selectedSeries && setBorrowInput(selectedSeries.sharesReserves_!) + actionCode === ActionCodes.BORROW && selectedSeries && setBorrowInput(selectedSeries.sharesReserves_!); logAnalyticsEvent(GA_Event.max_clicked, { view: GA_View.BORROW, - actionCode - } as GA_Properties.max_clicked) - } + 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) - } + } as GA_Properties.safe_collateralization_clicked); + }; const handleGaugeColorChange: any = (val: string) => { setCurrentGaugeColor(val); @@ -466,9 +464,7 @@ const Borrow = () => { {borrowInput && minSafeCollateral && ( - handleUseSafeCollateral()} - > + handleUseSafeCollateral()}> Use Safe Collateralization{': '} {cleanValue(minSafeCollateral, selectedIlk?.digitFormat)} {selectedIlk?.displaySymbol} diff --git a/src/components/views/Lend.tsx b/src/components/views/Lend.tsx index c0dc849b4..f8ac0471e 100644 --- a/src/components/views/Lend.tsx +++ b/src/components/views/Lend.tsx @@ -62,7 +62,7 @@ const Lend = () => { const { maxLend_, apy, protocolLimited, valueAtMaturity_ } = useLendHelpers(selectedSeries, lendInput); const lend = useLend(); - const {logAnalyticsEvent} = useAnalytics(); + const { logAnalyticsEvent } = useAnalytics(); const { txProcess: lendProcess, resetProcess: resetLendProcess } = useProcess(ActionCodes.LEND, selectedSeries?.id!); @@ -78,26 +78,25 @@ const Lend = () => { view: GA_View.LEND, seriesId: selectedSeries.id, actionCode: ActionCodes.LEND, - } as GA_Properties.transaction_initiated ); - + } as GA_Properties.transaction_initiated); }; - /* Event handlers */ + /* 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 ) + } as GA_Properties.next_step_clicked); }; - const handleMaxAction= () => { + const handleMaxAction = () => { maxLend_ && setLendInput(maxLend_); logAnalyticsEvent(GA_Event.max_clicked, { view: GA_View.LEND, - actionCode: ActionCodes.LEND - } as GA_Properties.max_clicked) - } + actionCode: ActionCodes.LEND, + } as GA_Properties.max_clicked); + }; const resetInputs = useCallback(() => { setLendInput(undefined); diff --git a/src/components/views/LendPosition.tsx b/src/components/views/LendPosition.tsx index 851b63b00..5f8b31892 100644 --- a/src/components/views/LendPosition.tsx +++ b/src/components/views/LendPosition.tsx @@ -77,7 +77,7 @@ const LendPosition = () => { const closePosition = useClosePosition(); const rollPosition = useRollPosition(); - const {logAnalyticsEvent} = useAnalytics(); + const { logAnalyticsEvent } = useAnalytics(); /* Processes to watch */ const { txProcess: closeProcess, resetProcess: resetCloseProcess } = useProcess( @@ -126,7 +126,7 @@ const LendPosition = () => { view: GA_View.LEND, seriesId: selectedSeries.id, actionCode: ActionCodes.CLOSE_POSITION, - } as GA_Properties.transaction_initiated ); + } as GA_Properties.transaction_initiated); }; const handleRollPosition = () => { @@ -138,18 +138,17 @@ const LendPosition = () => { view: GA_View.LEND, seriesId: selectedSeries.id, actionCode: ActionCodes.ROLL_POSITION, - } as GA_Properties.transaction_initiated ); - + } as GA_Properties.transaction_initiated); }; const handleMaxAction = (actionCode: ActionCodes) => { - actionCode === ActionCodes.ROLL_POSITION && maxRoll_ && setRollInput(maxRoll_) - actionCode === ActionCodes.CLOSE_POSITION && maxClose_ && setCloseInput(maxClose_) + actionCode === ActionCodes.ROLL_POSITION && maxRoll_ && setRollInput(maxRoll_); + actionCode === ActionCodes.CLOSE_POSITION && maxClose_ && setCloseInput(maxClose_); logAnalyticsEvent(GA_Event.max_clicked, { view: GA_View.LEND, actionCode, - } as GA_Properties.max_clicked) - } + } as GA_Properties.max_clicked); + }; const handleSetActionActive = (option: { text: string; index: number }) => { setActionActive(option); diff --git a/src/components/views/Pool.tsx b/src/components/views/Pool.tsx index 4b5e6d386..01cb105a8 100644 --- a/src/components/views/Pool.tsx +++ b/src/components/views/Pool.tsx @@ -56,7 +56,7 @@ function Pool() { const addLiquidity = useAddLiquidity(); const { maxPool, poolPercentPreview, canBuyAndPool, matchingVault } = usePoolHelpers(poolInput); - const {logAnalyticsEvent} = useAnalytics(); + const { logAnalyticsEvent } = useAnalytics(); /* input validation hooks */ const { inputError: poolError } = useInputValidation( @@ -83,9 +83,8 @@ function Pool() { logAnalyticsEvent(GA_Event.transaction_initiated, { view: GA_View.POOL, seriesId: selectedStrategy?.currentSeries.id, - actionCode:ActionCodes.ADD_LIQUIDITY, - } as GA_Properties.transaction_initiated ); - + actionCode: ActionCodes.ADD_LIQUIDITY, + } as GA_Properties.transaction_initiated); }; /* ACTION DISABLING LOGIC - if ANY conditions are met: block action */ @@ -94,22 +93,21 @@ function Pool() { !poolInput || poolError || !selectedStrategy ? setStepDisabled(true) : setStepDisabled(false); }, [poolInput, activeAccount, poolError, selectedStrategy]); - const handleNavAction = (_stepPosition: number) => { setStepPosition(_stepPosition); logAnalyticsEvent(GA_Event.next_step_clicked, { view: GA_View.POOL, step_index: _stepPosition, - } as GA_Properties.next_step_clicked ) + } as GA_Properties.next_step_clicked); }; const handleMaxAction = () => { - maxPool && setPoolInput(maxPool) + maxPool && setPoolInput(maxPool); logAnalyticsEvent(GA_Event.max_clicked, { view: GA_View.POOL, actionCode: ActionCodes.ADD_LIQUIDITY, - } as GA_Properties.max_clicked) - } + } as GA_Properties.max_clicked); + }; const resetInputs = useCallback(() => { setPoolInput(undefined); diff --git a/src/components/views/PoolPosition.tsx b/src/components/views/PoolPosition.tsx index 8d37451f8..d077e2e72 100644 --- a/src/components/views/PoolPosition.tsx +++ b/src/components/views/PoolPosition.tsx @@ -70,8 +70,8 @@ const PoolPosition = () => { usePoolHelpers(removeInput, true); const { removeBaseReceived_: removeBaseReceivedMax_ } = usePoolHelpers(_selectedStrategy?.accountBalance_, true); - const {logAnalyticsEvent} = useAnalytics(); - + const { logAnalyticsEvent } = useAnalytics(); + /* TX data */ const { txProcess: removeProcess, resetProcess: resetRemoveProcess } = useProcess( ActionCodes.REMOVE_LIQUIDITY, @@ -110,17 +110,16 @@ const PoolPosition = () => { view: GA_View.POOL, seriesId: selectedStrategy?.currentSeries.id, actionCode: ActionCodes.REMOVE_LIQUIDITY, - } as GA_Properties.transaction_initiated ); - + } as GA_Properties.transaction_initiated); }; const handleMaxAction = () => { - maxRemove && setRemoveInput(maxRemove) + maxRemove && setRemoveInput(maxRemove); logAnalyticsEvent(GA_Event.max_clicked, { view: GA_View.POOL, actionCode: ActionCodes.REMOVE_LIQUIDITY, - } as GA_Properties.max_clicked) - } + } as GA_Properties.max_clicked); + }; const handleSetActionActive = (option: { text: string; index: number }) => { setActionActive(option); @@ -250,7 +249,7 @@ const PoolPosition = () => { value={actionActive} onChange={({ option }) => handleSetActionActive(option)} /> - + {actionActive.index === 0 && ( diff --git a/src/components/views/VaultPosition.tsx b/src/components/views/VaultPosition.tsx index 20927ee3e..2fdc4d435 100644 --- a/src/components/views/VaultPosition.tsx +++ b/src/components/views/VaultPosition.tsx @@ -79,14 +79,17 @@ const VaultPosition = () => { ActionCodes.REPAY, _selectedVault?.id! ); + const { txProcess: rollProcess, resetProcess: resetRollProcess } = useProcess( ActionCodes.ROLL_DEBT, _selectedVault?.id! ); + const { txProcess: addCollateralProcess, resetProcess: resetAddCollateralProcess } = useProcess( ActionCodes.ADD_COLLATERAL, _selectedVault?.id! ); + const { txProcess: removeCollateralProcess, resetProcess: resetRemoveCollateralProcess } = useProcess( ActionCodes.REMOVE_COLLATERAL, _selectedVault?.id! diff --git a/src/utils/appUtils.ts b/src/utils/appUtils.ts index 9059940a3..2d3253e22 100644 --- a/src/utils/appUtils.ts +++ b/src/utils/appUtils.ts @@ -246,6 +246,3 @@ export const numberWithCommas = (x: number) => x.toString().replace(/\B(?=(\d{3} export const formatValue = (x: string | number, decimals: number) => numberWithCommas(Number(cleanValue(x?.toString(), decimals))); - - - From 55d1aecabe7eb16e109bc1a38c97efef3c3fda77 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Fri, 14 Oct 2022 08:44:43 -0700 Subject: [PATCH 24/24] chore: format --- src/contexts/TxContext.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/contexts/TxContext.tsx b/src/contexts/TxContext.tsx index 0d800cb0a..7745326d8 100644 --- a/src/contexts/TxContext.tsx +++ b/src/contexts/TxContext.tsx @@ -127,7 +127,7 @@ const TxProvider = ({ children }: any) => { connection: { chainId, provider }, } = chainState; - const {logAnalyticsEvent} = useAnalytics(); + const { logAnalyticsEvent } = useAnalytics(); const _resetProcess = (txCode: string) => updateState({ type: TxStateItem.RESET_PROCESS, payload: txCode }); @@ -157,9 +157,8 @@ const TxProvider = ({ children }: any) => { logAnalyticsEvent(GA_Event.transaction_rejected, { actionCode: txCode.split('_')[0], seriesId: txCode.split('_')[1], - error: err.code === 4001 ? 'rejected by user': 'rejected by wallet' - } as GA_Properties.transaction_rejected ); - + error: err.code === 4001 ? 'rejected by user' : 'rejected by wallet', + } as GA_Properties.transaction_rejected); }; /* handle an error from a tx that was successfully submitted */ @@ -177,7 +176,7 @@ const TxProvider = ({ children }: any) => { actionCode: txCode.split('_')[0], seriesId: txCode.split('_')[1], error: msg, - } as GA_Properties.transaction_failed ); + } as GA_Properties.transaction_failed); }; const handleTxWillFail = async (error: any, txCode?: string | undefined, transaction?: any) => { @@ -195,12 +194,12 @@ const TxProvider = ({ children }: any) => { txCode && updateState({ type: TxStateItem.RESET_PROCESS, payload: txCode }); } else { updateState({ type: TxStateItem.TX_WILL_FAIL, payload: false }); - + logAnalyticsEvent(GA_Event.transaction_will_fail, { actionCode: txCode.split('_')[0], seriesId: txCode.split('_')[1], error, - } as GA_Properties.transaction_will_fail ); + } as GA_Properties.transaction_will_fail); } }; @@ -251,7 +250,7 @@ const TxProvider = ({ children }: any) => { logAnalyticsEvent(GA_Event.transaction_complete, { actionCode: txCode.split('_')[0], seriesId: txCode.split('_')[1], - } as GA_Properties.transaction_complete ); + } as GA_Properties.transaction_complete); return res; }