From c7bb54c3e593aba823f93c8d47b0685c89abbfc0 Mon Sep 17 00:00:00 2001 From: Lucas Magnus Date: Tue, 26 Dec 2023 22:39:21 -0300 Subject: [PATCH] feat: implement GA and fix delete vault --- frontend/package-lock.json | 11 ++++++++ frontend/package.json | 1 + frontend/src/app/core/App.tsx | 3 ++ .../src/app/core/pages/asset-home/index.tsx | 5 ++++ .../core/pages/authorize-account/index.tsx | 5 ++++ .../src/app/core/pages/burn-asset/index.tsx | 5 ++++ .../app/core/pages/clawback-asset/index.tsx | 5 ++++ .../src/app/core/pages/contracts/index.tsx | 5 ++++ .../src/app/core/pages/dashboards/index.tsx | 5 ++++ .../app/core/pages/distribute-asset/index.tsx | 5 ++++ .../app/core/pages/freeze-account/index.tsx | 5 ++++ frontend/src/app/core/pages/home/index.tsx | 5 ++++ .../src/app/core/pages/mint-asset/index.tsx | 5 ++++ frontend/src/app/core/pages/profile/index.tsx | 6 ++++ .../core/pages/publish-information/index.tsx | 5 ++++ .../src/app/core/pages/team-members/index.tsx | 5 ++++ .../app/core/pages/token-management/index.tsx | 5 ++++ .../src/app/core/pages/vault-create/index.tsx | 5 ++++ .../src/app/core/pages/vault-detail/index.tsx | 5 ++++ frontend/src/app/core/pages/vaults/index.tsx | 5 ++++ frontend/src/app/core/routes/index.tsx | 2 +- .../app/core/routes/module-routes/index.tsx | 8 +++++- .../templates/token-management/index.tsx | 11 +++++--- .../vault-detail/components/header/index.tsx | 28 ++++++++++--------- .../vaults/components/item-vault/index.tsx | 12 ++++---- .../src/components/templates/vaults/index.tsx | 7 ++++- frontend/src/utils/ga/index.tsx | 23 +++++++++++++++ 27 files changed, 166 insertions(+), 26 deletions(-) create mode 100644 frontend/src/utils/ga/index.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5b8052a1..d9374f56 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -43,6 +43,7 @@ "react-countdown": "^2.3.5", "react-dom": "~18.2.0", "react-feather": "^2.0.10", + "react-ga4": "^2.1.0", "react-hook-form": "~7.43.5", "react-intl": "^6.3.2", "react-joyride": "^2.5.5", @@ -30121,6 +30122,11 @@ } } }, + "node_modules/react-ga4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", + "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==" + }, "node_modules/react-hook-form": { "version": "7.43.9", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz", @@ -59107,6 +59113,11 @@ "use-sidecar": "^1.1.2" } }, + "react-ga4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", + "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==" + }, "react-hook-form": { "version": "7.43.9", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz", diff --git a/frontend/package.json b/frontend/package.json index 84422173..05eac890 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -39,6 +39,7 @@ "react-countdown": "^2.3.5", "react-dom": "~18.2.0", "react-feather": "^2.0.10", + "react-ga4": "^2.1.0", "react-hook-form": "~7.43.5", "react-intl": "^6.3.2", "react-joyride": "^2.5.5", diff --git a/frontend/src/app/core/App.tsx b/frontend/src/app/core/App.tsx index d92d466b..206bfb54 100644 --- a/frontend/src/app/core/App.tsx +++ b/frontend/src/app/core/App.tsx @@ -6,6 +6,9 @@ import { CoreRouter } from 'app/core/routes' import ErrorBoundary from './error-boundary' import theme from 'config/theme' +import ReactGA from "react-ga4"; + +ReactGA.initialize("G-BG0BH1YW4P"); const App = (): JSX.Element => ( diff --git a/frontend/src/app/core/pages/asset-home/index.tsx b/frontend/src/app/core/pages/asset-home/index.tsx index 686a084f..882b4e2a 100644 --- a/frontend/src/app/core/pages/asset-home/index.tsx +++ b/frontend/src/app/core/pages/asset-home/index.tsx @@ -14,6 +14,7 @@ import { useDashboards } from 'hooks/useDashboards' import { assetHomeHelper } from 'utils/constants/helpers' import { MessagesError } from 'utils/constants/messages-error' import { toBase64 } from 'utils/converter' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -41,6 +42,10 @@ export const AssetHome: React.FC = () => { const toast = useToast() + useEffect(() => { + GAService.GAPageView('Asset Home') + }, []) + useEffect(() => { if (id) { getAssetById(id).then(asset => setAsset(asset)) diff --git a/frontend/src/app/core/pages/authorize-account/index.tsx b/frontend/src/app/core/pages/authorize-account/index.tsx index 6760edee..8d315702 100644 --- a/frontend/src/app/core/pages/authorize-account/index.tsx +++ b/frontend/src/app/core/pages/authorize-account/index.tsx @@ -16,6 +16,7 @@ import { useVaults } from 'hooks/useVaults' import { havePermission } from 'utils' import { authorizeHelper } from 'utils/constants/helpers' import { MessagesError } from 'utils/constants/messages-error' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -46,6 +47,10 @@ export const AuthorizeAccount: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Authorize Account') + }, []) + const onSubmit = async ( data: FieldValues, setValue: UseFormSetValue, diff --git a/frontend/src/app/core/pages/burn-asset/index.tsx b/frontend/src/app/core/pages/burn-asset/index.tsx index c9a751bf..876d07b4 100644 --- a/frontend/src/app/core/pages/burn-asset/index.tsx +++ b/frontend/src/app/core/pages/burn-asset/index.tsx @@ -16,6 +16,7 @@ import { havePermission } from 'utils' import { burnHelper } from 'utils/constants/helpers' import { MessagesError } from 'utils/constants/messages-error' import { toFixedCrypto } from 'utils/formatter' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -45,6 +46,10 @@ export const BurnAsset: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Burn Asset') + }, []) + const onSubmit = async ( data: FieldValues, setValue: UseFormSetValue diff --git a/frontend/src/app/core/pages/clawback-asset/index.tsx b/frontend/src/app/core/pages/clawback-asset/index.tsx index 7fd20c5d..3d437b15 100644 --- a/frontend/src/app/core/pages/clawback-asset/index.tsx +++ b/frontend/src/app/core/pages/clawback-asset/index.tsx @@ -16,6 +16,7 @@ import { havePermission } from 'utils' import { clawbackHelper } from 'utils/constants/helpers' import { MessagesError } from 'utils/constants/messages-error' import { toFixedCrypto } from 'utils/formatter' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -39,6 +40,10 @@ export const ClawbackAsset: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Clawback Asset') + }, []) + const onSubmit = async ( data: FieldValues, setValue: UseFormSetValue, diff --git a/frontend/src/app/core/pages/contracts/index.tsx b/frontend/src/app/core/pages/contracts/index.tsx index 52b8219f..ed5d5d68 100644 --- a/frontend/src/app/core/pages/contracts/index.tsx +++ b/frontend/src/app/core/pages/contracts/index.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react' import { useAuth } from 'hooks/useAuth' import { useContracts } from 'hooks/useContracts' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Sidebar } from 'components/organisms/sidebar' @@ -18,6 +19,10 @@ export const Contracts: React.FC = () => { const LIMIT = 10 + useEffect(() => { + GAService.GAPageView('Contracts - COD') + }, []) + useEffect(() => { getPagedContracts({ page: currentPage, diff --git a/frontend/src/app/core/pages/dashboards/index.tsx b/frontend/src/app/core/pages/dashboards/index.tsx index 20774462..ca4eec7f 100644 --- a/frontend/src/app/core/pages/dashboards/index.tsx +++ b/frontend/src/app/core/pages/dashboards/index.tsx @@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react' import { useAssets } from 'hooks/useAssets' import { useDashboards } from 'hooks/useDashboards' import { useVaults } from 'hooks/useVaults' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { TChartPeriod } from 'components/molecules/chart-period' @@ -29,6 +30,10 @@ export const Dashboards: React.FC = () => { } = useDashboards() const { loadingAssets, getAssets, assets } = useAssets() + useEffect(() => { + GAService.GAPageView('Dashboards') + }, []) + useEffect(() => { getVaults().then(vaults => setVaults(vaults)) }, [getVaults]) diff --git a/frontend/src/app/core/pages/distribute-asset/index.tsx b/frontend/src/app/core/pages/distribute-asset/index.tsx index dd387290..ff7c36e7 100644 --- a/frontend/src/app/core/pages/distribute-asset/index.tsx +++ b/frontend/src/app/core/pages/distribute-asset/index.tsx @@ -17,6 +17,7 @@ import { havePermission } from 'utils' import { distributeHelper } from 'utils/constants/helpers' import { MessagesError } from 'utils/constants/messages-error' import { toFixedCrypto } from 'utils/formatter' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -44,6 +45,10 @@ export const DistributeAsset: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Distribute Asset') + }, []) + const onSubmit = async ( data: FieldValues, setValue: UseFormSetValue, diff --git a/frontend/src/app/core/pages/freeze-account/index.tsx b/frontend/src/app/core/pages/freeze-account/index.tsx index 9495a56b..ecb91446 100644 --- a/frontend/src/app/core/pages/freeze-account/index.tsx +++ b/frontend/src/app/core/pages/freeze-account/index.tsx @@ -16,6 +16,7 @@ import { useVaults } from 'hooks/useVaults' import { havePermission } from 'utils' import { freezeHelper } from 'utils/constants/helpers' import { MessagesError } from 'utils/constants/messages-error' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -44,6 +45,10 @@ export const FreezeAccount: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Freeze account') + }, []) + const onSubmit = async ( data: FieldValues, clearFlags: string[], diff --git a/frontend/src/app/core/pages/home/index.tsx b/frontend/src/app/core/pages/home/index.tsx index 15e441be..2c9c7fe3 100644 --- a/frontend/src/app/core/pages/home/index.tsx +++ b/frontend/src/app/core/pages/home/index.tsx @@ -3,6 +3,7 @@ import React, { useEffect } from 'react' import { useAssets } from 'hooks/useAssets' import { useAuth } from 'hooks/useAuth' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Sidebar } from 'components/organisms/sidebar' @@ -13,6 +14,10 @@ export const Home: React.FC = () => { const { userPermissions, loadingUserPermissions, getUserPermissions } = useAuth() + useEffect(() => { + GAService.GAPageView('Home') + }, []) + useEffect(() => { getAssets(true) }, [getAssets]) diff --git a/frontend/src/app/core/pages/mint-asset/index.tsx b/frontend/src/app/core/pages/mint-asset/index.tsx index 3c6d92a0..806e26c4 100644 --- a/frontend/src/app/core/pages/mint-asset/index.tsx +++ b/frontend/src/app/core/pages/mint-asset/index.tsx @@ -16,6 +16,7 @@ import { havePermission } from 'utils' import { mintHelper } from 'utils/constants/helpers' import { MessagesError } from 'utils/constants/messages-error' import { toFixedCrypto } from 'utils/formatter' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -45,6 +46,10 @@ export const MintAsset: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Mint Asset') + }, []) + const onSubmit = async ( data: FieldValues, setValue: UseFormSetValue diff --git a/frontend/src/app/core/pages/profile/index.tsx b/frontend/src/app/core/pages/profile/index.tsx index 347cc69c..86684c0f 100644 --- a/frontend/src/app/core/pages/profile/index.tsx +++ b/frontend/src/app/core/pages/profile/index.tsx @@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom' import { useAuth } from 'hooks/useAuth' import { useVaults } from 'hooks/useVaults' import { formatVaultName } from 'utils/formatter' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Sidebar } from 'components/organisms/sidebar' @@ -30,6 +31,10 @@ export const Profile: React.FC = () => { getUserPermissions() }, [getUserPermissions]) + useEffect(() => { + GAService.GAPageView('Profile') + }, []) + const handleSignOut = async (): Promise => { const isSuccess = await signOut() if (isSuccess) { @@ -42,6 +47,7 @@ export const Profile: React.FC = () => { navigate(`${PathRoute.VAULT_DETAIL}/${profile.vault_id}`) return } + GAService.GAEvent('create_wallet_click') const vault = { name: formatVaultName(profile?.name || ''), assets_id: [], diff --git a/frontend/src/app/core/pages/publish-information/index.tsx b/frontend/src/app/core/pages/publish-information/index.tsx index ad611641..abd4528e 100644 --- a/frontend/src/app/core/pages/publish-information/index.tsx +++ b/frontend/src/app/core/pages/publish-information/index.tsx @@ -7,6 +7,7 @@ import { useAssets } from 'hooks/useAssets' import { useAuth } from 'hooks/useAuth' import { havePermission } from 'utils' import { MessagesError } from 'utils/constants/messages-error' +import { GAService } from 'utils/ga' import { AssetActions } from 'components/enums/asset-actions' import { PathRoute } from 'components/enums/path-route' @@ -33,6 +34,10 @@ export const PublishInformation: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Publish Information Asset') + }, []) + const onSubmit = async ( data: FieldValues, isAssetAnchored: boolean, diff --git a/frontend/src/app/core/pages/team-members/index.tsx b/frontend/src/app/core/pages/team-members/index.tsx index e90a3993..abbdd864 100644 --- a/frontend/src/app/core/pages/team-members/index.tsx +++ b/frontend/src/app/core/pages/team-members/index.tsx @@ -2,6 +2,7 @@ import { Flex, VStack, useMediaQuery } from '@chakra-ui/react' import React, { useEffect } from 'react' import { useAuth } from 'hooks/useAuth' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { SettingsOptions } from 'components/enums/settings-options' @@ -25,6 +26,10 @@ export const TeamMembers: React.FC = () => { loadingUserPermissions, } = useAuth() + useEffect(() => { + GAService.GAPageView('Administration') + }, []) + const handleEditRole = async ( params: Hooks.UseAuthTypes.IUserRole ): Promise => { diff --git a/frontend/src/app/core/pages/token-management/index.tsx b/frontend/src/app/core/pages/token-management/index.tsx index 6e79e197..6485def1 100644 --- a/frontend/src/app/core/pages/token-management/index.tsx +++ b/frontend/src/app/core/pages/token-management/index.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react' import { useAssets } from 'hooks/useAssets' import { useAuth } from 'hooks/useAuth' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Sidebar } from 'components/organisms/sidebar' @@ -16,6 +17,10 @@ export const TokenManagement: React.FC = () => { const { userPermissions, getUserPermissions } = useAuth() const [page, setPage] = useState(1) + useEffect(() => { + GAService.GAPageView('Token Management') + }, []) + const LIMIT = 10 useEffect(() => { diff --git a/frontend/src/app/core/pages/vault-create/index.tsx b/frontend/src/app/core/pages/vault-create/index.tsx index ad43dd51..6df5ced1 100644 --- a/frontend/src/app/core/pages/vault-create/index.tsx +++ b/frontend/src/app/core/pages/vault-create/index.tsx @@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom' import { useAssets } from 'hooks/useAssets' import { useVaults } from 'hooks/useVaults' import { MessagesError } from 'utils/constants/messages-error' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Sidebar } from 'components/organisms/sidebar' @@ -23,6 +24,10 @@ export const VaultCreate: React.FC = () => { const toast = useToast() const navigate = useNavigate() + useEffect(() => { + GAService.GAPageView('Vault Create') + }, []) + const onSubmit = async ( name: string, vaultCategoryId: number, diff --git a/frontend/src/app/core/pages/vault-detail/index.tsx b/frontend/src/app/core/pages/vault-detail/index.tsx index 96c66b27..3585ff2f 100644 --- a/frontend/src/app/core/pages/vault-detail/index.tsx +++ b/frontend/src/app/core/pages/vault-detail/index.tsx @@ -9,6 +9,7 @@ import { useHorizon } from 'hooks/useHorizon' import { useVaults } from 'hooks/useVaults' import { MessagesError } from 'utils/constants/messages-error' import { toFixedCrypto } from 'utils/formatter' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Sidebar } from 'components/organisms/sidebar' @@ -54,6 +55,10 @@ export const VaultDetail: React.FC = () => { } = useVaults() const { loadingHorizon, getPaymentsData, getAssetAccounts } = useHorizon() + useEffect(() => { + GAService.GAPageView('Vault detail') + }, []) + const [selectedAsset, setSelectedAsset] = useState() diff --git a/frontend/src/app/core/pages/vaults/index.tsx b/frontend/src/app/core/pages/vaults/index.tsx index d26f2f19..ec7fdb68 100644 --- a/frontend/src/app/core/pages/vaults/index.tsx +++ b/frontend/src/app/core/pages/vaults/index.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react' import { useAssets } from 'hooks/useAssets' import { useVaults } from 'hooks/useVaults' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Sidebar } from 'components/organisms/sidebar' @@ -19,6 +20,10 @@ export const Vaults: React.FC = () => { const [currentPage, setCurrentPage] = useState(1) const LIMIT = 12 + useEffect(() => { + GAService.GAPageView('Treasury') + }, []) + useEffect(() => { getPagedVaults({ page: currentPage, diff --git a/frontend/src/app/core/routes/index.tsx b/frontend/src/app/core/routes/index.tsx index b4f52d4e..18cda372 100644 --- a/frontend/src/app/core/routes/index.tsx +++ b/frontend/src/app/core/routes/index.tsx @@ -18,7 +18,7 @@ const CoreRouter = (): JSX.Element => { ] return ( - + {routes.map(route => route)} ) diff --git a/frontend/src/app/core/routes/module-routes/index.tsx b/frontend/src/app/core/routes/module-routes/index.tsx index f11738bb..bd7af67b 100644 --- a/frontend/src/app/core/routes/module-routes/index.tsx +++ b/frontend/src/app/core/routes/module-routes/index.tsx @@ -36,7 +36,13 @@ const createModuleRoutes = ({ ) } - return + return ( + + ) } ) } diff --git a/frontend/src/components/templates/token-management/index.tsx b/frontend/src/components/templates/token-management/index.tsx index e771ec8f..99b231fd 100644 --- a/frontend/src/components/templates/token-management/index.tsx +++ b/frontend/src/components/templates/token-management/index.tsx @@ -22,6 +22,7 @@ import { getCurrencyIcon } from 'utils/constants/constants' import { typesAsset } from 'utils/constants/data-constants' import { MAX_PAGE_WIDTH } from 'utils/constants/sizes' import { toCrypto } from 'utils/formatter' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { Permissions } from 'components/enums/permissions' @@ -68,9 +69,10 @@ export const TokenManagementTemplate: React.FC = ({ @@ -97,9 +99,10 @@ export const TokenManagementTemplate: React.FC = ({ + onClick={(): void => { + GAService.GAEvent('asset_details_click') navigate(`${PathRoute.ASSET_HOME}/${asset.id}`) - } + }} > {asset.image ? ( diff --git a/frontend/src/components/templates/vault-detail/components/header/index.tsx b/frontend/src/components/templates/vault-detail/components/header/index.tsx index c36d7ec1..6d5d331a 100644 --- a/frontend/src/components/templates/vault-detail/components/header/index.tsx +++ b/frontend/src/components/templates/vault-detail/components/header/index.tsx @@ -190,19 +190,21 @@ export const Header: React.FC = ({ - - } - fontSize="sm" - _dark={{ fill: 'white' }} - > - Actions - - - Delete Vault - - + {!vault.owner_id && ( + + } + fontSize="sm" + _dark={{ fill: 'white' }} + > + Actions + + + Delete Vault + + + )} ) diff --git a/frontend/src/components/templates/vaults/components/item-vault/index.tsx b/frontend/src/components/templates/vaults/components/item-vault/index.tsx index 08db8fb5..1341215f 100644 --- a/frontend/src/components/templates/vaults/components/item-vault/index.tsx +++ b/frontend/src/components/templates/vaults/components/item-vault/index.tsx @@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom' import { getCurrencyIcon, vaultCategoryTheme } from 'utils/constants/constants' import { toCrypto } from 'utils/formatter' +import { GAService } from 'utils/ga' import { PathRoute } from 'components/enums/path-route' import { LockIcon } from 'components/icons' @@ -31,7 +32,10 @@ export const ItemVault: React.FC = ({ vault, assets }) => { variant="primary" display="flex" flexDir="column" - onClick={(): void => navigate(`${PathRoute.VAULT_DETAIL}/${vault.id}`)} + onClick={(): void => { + GAService.GAEvent('vault_details_click') + navigate(`${PathRoute.VAULT_DETAIL}/${vault.id}`) + }} cursor="pointer" w="full" maxW="full" @@ -76,11 +80,7 @@ export const ItemVault: React.FC = ({ vault, assets }) => { > {findAsset(balance)?.image ? ( - + ) : ( getCurrencyIcon(balance.asset_code, '1rem') )} diff --git a/frontend/src/components/templates/vaults/index.tsx b/frontend/src/components/templates/vaults/index.tsx index 1c4030da..d2182a20 100644 --- a/frontend/src/components/templates/vaults/index.tsx +++ b/frontend/src/components/templates/vaults/index.tsx @@ -2,6 +2,8 @@ import { Flex, Text, SimpleGrid, Box, Button } from '@chakra-ui/react' import React from 'react' import { useNavigate } from 'react-router-dom' +import { GAService } from 'utils/ga' + import { ItemVault } from './components/item-vault' import { LoaderSkeleton } from './components/loader-skeleton' import { PathRoute } from 'components/enums/path-route' @@ -39,7 +41,10 @@ export const VaultsTemplate: React.FC = ({ diff --git a/frontend/src/utils/ga/index.tsx b/frontend/src/utils/ga/index.tsx new file mode 100644 index 00000000..182ac925 --- /dev/null +++ b/frontend/src/utils/ga/index.tsx @@ -0,0 +1,23 @@ +import ReactGA from 'react-ga4' + +const GAPageView = (title: string): void => { + ReactGA.initialize('G-BG0BH1YW4P') + ReactGA.send({ + hitType: 'pageview', + page: `v2-${window.location.pathname + window.location.search}`, + title: title, + }) +} + +const GAEvent = (action: string): void => { + ReactGA.initialize('G-BG0BH1YW4P') + ReactGA.event({ + category: 'click', + action: action, + }) +} + +export const GAService = { + GAPageView, + GAEvent, +}