rename safe app tracking methods. extract card dimensions to constants

5afe · Apr 12, 2022 · 9df6dc7 · 9df6dc7
1 parent 5edf3a8
commit 9df6dc7
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 22 deletions.
diff --git a/src/components/Dashboard/SafeApps/Card.tsx b/src/components/Dashboard/SafeApps/Card.tsx
@@ -11,13 +11,17 @@ const StyledLink = styled(Link)`
   color: black;
 `
 
+export const CARD_WIDTH = 260
+export const CARD_HEIGHT = 200
+export const CARD_PADDING = 24
+
 const StyledCard = styled.div`
   position: relative;
-  width: 260px;
-  height: 200px;
+  width: ${CARD_WIDTH}px;
+  height: ${CARD_HEIGHT}px;
   background-color: white;
   border-radius: 8px;
-  padding: 24px;
+  padding: ${CARD_PADDING}px;
 `
 
 const StyledLogo = styled.img`

diff --git a/src/components/Dashboard/SafeApps/Grid.tsx b/src/components/Dashboard/SafeApps/Grid.tsx
@@ -2,15 +2,14 @@ import { ReactElement, useMemo } from 'react'
 import styled from 'styled-components'
 import { Button } from '@gnosis.pm/safe-react-components'
 import { generatePath, Link } from 'react-router-dom'
+import Skeleton from '@material-ui/lab/Skeleton/Skeleton'
 
 import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'
 import { GENERIC_APPS_ROUTE } from 'src/routes/routes'
-import Card from 'src/components/Dashboard/SafeApps/Card'
+import Card, { CARD_HEIGHT, CARD_PADDING, CARD_WIDTH } from 'src/components/Dashboard/SafeApps/Card'
 import ExploreIcon from 'src/assets/icons/explore.svg'
-import local from 'src/utils/storage/local'
 import { SafeApp } from 'src/routes/safe/components/Apps/types'
-import { APPS_DASHBOARD, AppTrackData, rankTrackedSafeApps } from 'src/routes/safe/components/Apps/trackAppUsageCount'
-import Skeleton from '@material-ui/lab/Skeleton/Skeleton'
+import { getAppsUsageData, rankTrackedSafeApps } from 'src/routes/safe/components/Apps/trackAppUsageCount'
 
 const StyledGrid = styled.div`
   display: flex;
@@ -53,7 +52,7 @@ const Grid = ({ size = 3 }: { size?: number }): ReactElement => {
   const { allApps, pinnedSafeApps, togglePin, isLoading } = useAppList()
 
   const displayedApps = useMemo(() => {
-    const trackData = local.getItem<AppTrackData>(APPS_DASHBOARD) || {}
+    const trackData = getAppsUsageData()
     const rankedSafeAppIds = rankTrackedSafeApps(trackData)
 
     const topRankedSafeApps: SafeApp[] = []
@@ -78,7 +77,7 @@ const Grid = ({ size = 3 }: { size?: number }): ReactElement => {
         <StyledGrid>
           {Array.from(Array(size).keys()).map((key) => (
             <SkeletonWrapper key={key}>
-              <Skeleton variant="rect" width={308} height={248} />
+              <Skeleton variant="rect" width={CARD_WIDTH + 2 * CARD_PADDING} height={CARD_HEIGHT + 2 * CARD_PADDING} />
             </SkeletonWrapper>
           ))}
         </StyledGrid>

diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -37,7 +37,7 @@ import { grantedSelector } from 'src/routes/safe/container/selector'
 import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
 import { trackEvent } from 'src/utils/googleTagManager'
 import { useRemoteSafeApps } from 'src/routes/safe/components/Apps/hooks/appList/useRemoteSafeApps'
-import { countOpen } from 'src/routes/safe/components/Apps/trackAppUsageCount'
+import { trackSafeAppOpenCount } from 'src/routes/safe/components/Apps/trackAppUsageCount'
 
 const AppWrapper = styled.div`
   display: flex;
@@ -140,7 +140,7 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
   useEffect(() => {
     if (!currentApp) return
 
-    countOpen(currentApp)
+    trackSafeAppOpenCount(currentApp)
   }, [currentApp])
 
   const openConfirmationModal = useCallback(

diff --git a/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx b/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
@@ -27,7 +27,7 @@ import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { useRemoteSafeApps } from 'src/routes/safe/components/Apps/hooks/appList/useRemoteSafeApps'
-import { countTxs } from 'src/routes/safe/components/Apps/trackAppUsageCount'
+import { trackSafeAppTxCount } from 'src/routes/safe/components/Apps/trackAppUsageCount'
 
 const Container = styled.div`
   max-width: 480px;
@@ -116,7 +116,7 @@ export const ReviewConfirm = ({
   }
 
   const confirmTransactions = (txParameters: TxParameters, delayExecution: boolean) => {
-    countTxs(currentApp)
+    trackSafeAppTxCount(currentApp)
     dispatch(
       createTransaction(
         {

diff --git a/src/routes/safe/components/Apps/trackAppUsageCount.ts b/src/routes/safe/components/Apps/trackAppUsageCount.ts
@@ -16,24 +16,29 @@ export type AppTrackData = {
   }
 }
 
-export const countOpen = (app: SafeApp): void => {
-  const trackData = local.getItem<AppTrackData>(APPS_DASHBOARD) || {}
+export const getAppsUsageData = (): AppTrackData => {
+  return local.getItem<AppTrackData>(APPS_DASHBOARD) || {}
+}
+
+export const trackSafeAppOpenCount = (app: SafeApp): void => {
+  const trackData = getAppsUsageData()
   const currentOpenCount = trackData[app.id]?.openCount || 0
   const currentTxCount = trackData[app.id]?.txCount || 0
+
   local.setItem(APPS_DASHBOARD, {
     ...trackData,
     [app.id]: {
-      ...trackData[app.id],
       timestamp: Date.now(),
       openCount: currentOpenCount + 1,
       txCount: currentTxCount,
     },
   })
 }
 
-export const countTxs = (app: SafeApp): void => {
-  const trackData = local.getItem<AppTrackData>(APPS_DASHBOARD) || {}
+export const trackSafeAppTxCount = (app: SafeApp): void => {
+  const trackData = getAppsUsageData()
   const currentTxCount = trackData[app.id]?.txCount || 0
+
   local.setItem(APPS_DASHBOARD, {
     ...trackData,
     [app.id]: { ...trackData[app.id], txCount: currentTxCount + 1 },
@@ -46,10 +51,8 @@ export const rankTrackedSafeApps = (apps: AppTrackData): string[] => {
   return appsMap
     .sort((a, b) => {
       // The more recently used app gets a bigger score/relevancy multiplier
-      const aTimeMultiplier =
-        a[1].timestamp.valueOf() - b[1].timestamp.valueOf() > 0 ? MORE_RECENT_MULTIPLIER : LESS_RECENT_MULTIPLIER
-      const bTimeMultiplier =
-        b[1].timestamp.valueOf() - a[1].timestamp.valueOf() > 0 ? MORE_RECENT_MULTIPLIER : LESS_RECENT_MULTIPLIER
+      const aTimeMultiplier = a[1].timestamp - b[1].timestamp > 0 ? MORE_RECENT_MULTIPLIER : LESS_RECENT_MULTIPLIER
+      const bTimeMultiplier = b[1].timestamp - a[1].timestamp > 0 ? MORE_RECENT_MULTIPLIER : LESS_RECENT_MULTIPLIER
 
       // The sorting score is a weighted function where the OPEN_COUNT weights differently than the TX_COUNT
       const aScore = (TX_COUNT_WEIGHT * a[1].txCount + OPEN_COUNT_WEIGHT * a[1].openCount) * aTimeMultiplier