From 5f73012e46486ff092acfc8e0d7bd7e46d82cf7a Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.soares@gnosis.pm>
Date: Tue, 12 Apr 2022 14:34:54 +0200
Subject: [PATCH] include random apps to fill the gaps in the widget

---
 src/components/Dashboard/SafeApps/Grid.tsx | 31 ++++++++++++++++++----
 src/routes/Home/index.tsx                  |  4 +--
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/Dashboard/SafeApps/Grid.tsx b/src/components/Dashboard/SafeApps/Grid.tsx
index 64c9aae730..502be11bd4 100644
--- a/src/components/Dashboard/SafeApps/Grid.tsx
+++ b/src/components/Dashboard/SafeApps/Grid.tsx
@@ -46,12 +46,33 @@ const StyledLink = styled(Link)`
 `
 
 // Transactions Builder && Wallet connect
-const officialAppIds = ['29', '11']
+const featuredAppsId = ['29', '11']
+
+const getRandomApps = (allApps: SafeApp[], size: number) => {
+  const randomIndexes: string[] = []
+  for (let i = 1; randomIndexes.length < size; i++) {
+    const randomAppIndex = Math.floor(Math.random() * allApps.length).toString()
+    const randomAppId = allApps[randomAppIndex].id
+
+    // Do not repeat random apps or featured apps
+    if (!randomIndexes.includes(randomAppIndex) && !featuredAppsId.includes(randomAppId)) {
+      randomIndexes.push(randomAppIndex)
+    }
+  }
+
+  const randomSafeApps: SafeApp[] = []
+  randomIndexes.forEach((index) => {
+    randomSafeApps.push(allApps[index])
+  })
+
+  return randomSafeApps
+}
 
-const Grid = ({ size = 3 }: { size?: number }): ReactElement => {
+const Grid = ({ size = 6 }: { size?: number }): ReactElement => {
   const { allApps, pinnedSafeApps, togglePin, isLoading } = useAppList()
 
   const displayedApps = useMemo(() => {
+    if (!allApps.length) return []
     const trackData = getAppsUsageData()
     const rankedSafeAppIds = rankTrackedSafeApps(trackData)
 
@@ -61,11 +82,11 @@ const Grid = ({ size = 3 }: { size?: number }): ReactElement => {
       if (sortedApp) topRankedSafeApps.push(sortedApp)
     })
 
-    // Do not repeat top ranked apps
-    const officialApps = allApps.filter((app) => officialAppIds.includes(app.id) && !rankedSafeAppIds.includes(app.id))
+    // Get random apps to fill the empty slots
+    const randomApps = getRandomApps(allApps, size - 1 - rankedSafeAppIds.length)
 
     // Display size - 1 in order to always display the "Explore Safe Apps" card
-    return topRankedSafeApps.concat(officialApps).slice(0, size - 1)
+    return topRankedSafeApps.concat(randomApps).slice(0, size - 1)
   }, [allApps, size])
 
   const path = generatePath(GENERIC_APPS_ROUTE)
diff --git a/src/routes/Home/index.tsx b/src/routes/Home/index.tsx
index abc43f908a..a2b6cfb5f2 100644
--- a/src/routes/Home/index.tsx
+++ b/src/routes/Home/index.tsx
@@ -5,7 +5,7 @@ import Page from 'src/components/layout/Page'
 import PendingTxsList from 'src/components/Dashboard/PendingTxs/PendingTxsList'
 import AddSafeWidget from 'src/components/Dashboard/AddSafe'
 import CreateSafeWidget from 'src/components/Dashboard/CreateSafe'
-import SafeApps from 'src/components/Dashboard/SafeApps/Grid'
+import SafeAppsGrid from 'src/components/Dashboard/SafeApps/Grid'
 import Row from 'src/components/layout/Row'
 
 const Card = styled.div`
@@ -45,7 +45,7 @@ function Home(): ReactElement {
       </Row>
 
       <Row>
-        <SafeApps size={6} />
+        <SafeAppsGrid size={6} />
       </Row>
     </Page>
   )