feat: use gridlist in dappstore

Signed-off-by: Norman Meier <[email protected]>
TERITORI · Jan 15, 2024 · d98dbe7 · d98dbe7
1 parent 050f40a
commit d98dbe7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 68 deletions.
diff --git a/packages/screens/DAppStore/components/DAppBox.tsx b/packages/screens/DAppStore/components/DAppBox.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Pressable, StyleProp, useWindowDimensions, View } from "react-native";
+import { Pressable, StyleProp, View } from "react-native";
 import { useSelector } from "react-redux";
 
 import { CheckboxDappStore } from "./CheckboxDappStore";
@@ -45,62 +45,56 @@ export const DAppBox: React.FC<{
   useEffect(() => {
     setChecked(selectedApps.includes(draggableId));
   }, [selectedApps, draggableId]);
-  const { width } = useWindowDimensions();
-  const isMobile = width < 760;
 
   return (
     <Pressable onPress={handleClick} disabled={alwaysOn}>
       <Box
         style={[
           {
             alignItems: "center",
-            justifyContent: "space-between",
             flexDirection: "row",
-            paddingVertical: layout.spacing_x1_5,
-            paddingLeft: layout.spacing_x1_5,
-            paddingRight: layout.spacing_x2_5,
+            padding: layout.spacing_x1_5,
             borderRadius: 20,
             borderWidth: 1,
             borderColor: neutral33,
             backgroundColor: isChecked ? neutral17 : neutral00,
             height: 88,
-            width: isMobile ? width * 0.8 : 306,
           },
           style,
         ]}
       >
-        <View style={{ flexDirection: "row", alignItems: "center" }}>
-          <Box
-            style={{
-              backgroundColor: neutral17,
-              borderRadius: 12,
-              padding: layout.spacing_x1,
-              width: 64,
-              height: 64,
-            }}
+        <Box
+          style={{
+            backgroundColor: isChecked ? neutral00 : neutral17,
+            borderRadius: 12,
+            padding: layout.spacing_x1,
+            width: 64,
+            height: 64,
+          }}
+        >
+          <SVGorImageIcon icon={icon} iconSize={48} />
+        </Box>
+        <View
+          style={{
+            marginHorizontal: layout.spacing_x2,
+            flex: 1,
+          }}
+        >
+          <BrandText style={fontSemibold14} numberOfLines={1}>
+            {title}
+          </BrandText>
+          <BrandText
+            isTicker
+            style={[
+              fontSemibold13,
+              {
+                color: neutral77,
+                marginTop: layout.spacing_x0_5,
+              },
+            ]}
           >
-            <SVGorImageIcon icon={icon} iconSize={48} />
-          </Box>
-          <View
-            style={{
-              marginHorizontal: layout.spacing_x2,
-              maxWidth: 158,
-              width: "100%",
-            }}
-          >
-            <BrandText style={fontSemibold14} numberOfLines={1}>
-              {title}
-            </BrandText>
-            <BrandText
-              isTicker
-              style={[
-                fontSemibold13,
-                { color: neutral77, marginTop: layout.spacing_x0_5 },
-              ]}
-            >
-              {description}
-            </BrandText>
-          </View>
+            {description}
+          </BrandText>
         </View>
 
         {!alwaysOn && <CheckboxDappStore isChecked={isChecked} />}

diff --git a/packages/screens/DAppStore/components/RightRail.tsx b/packages/screens/DAppStore/components/RightRail.tsx
@@ -5,6 +5,7 @@ import { useSelector } from "react-redux";
 import { DAppBox } from "./DAppBox";
 import { BrandText } from "../../../components/BrandText";
 import { SVGorImageIcon } from "../../../components/SVG/SVGorImageIcon";
+import { GridList } from "../../../components/layout/GridList";
 import { selectAvailableApps } from "../../../store/slices/dapps-store";
 import { layout } from "../../../utils/style/layout";
 import { dAppType } from "../types";
@@ -18,21 +19,23 @@ export const RightRail = ({ searchInput }: { searchInput: string }) => {
       style={{
         flex: 1,
         minHeight: 250,
-        maxWidth: isMobile ? "100%" : 1024,
-        paddingLeft: isMobile ? 0 : layout.spacing_x3,
+        paddingHorizontal: isMobile ? 0 : layout.spacing_x3,
         paddingTop: layout.spacing_x4,
         justifyContent: isMobile ? "flex-end" : "flex-start",
       }}
     >
       {availableApps
         ? Object.values(availableApps).map((element, index) => {
             return element.active ? (
-              <View key={element.id}>
+              <View
+                key={element.id}
+                style={{ marginBottom: layout.spacing_x4 }}
+              >
                 <View
                   style={{
                     flexDirection: "row",
                     alignItems: "center",
-                    marginLeft: isMobile ? layout.spacing_x1_5 : 0,
+                    marginHorizontal: isMobile ? layout.spacing_x1_5 : 0,
                     marginBottom: layout.spacing_x2_5,
                   }}
                 >
@@ -45,34 +48,26 @@ export const RightRail = ({ searchInput }: { searchInput: string }) => {
                   />
                   <BrandText>{element.groupName}</BrandText>
                 </View>
-                <View
-                  style={{
-                    flex: 1,
-                    marginBottom: layout.spacing_x2_5,
-                    flexDirection: "row",
-                    flexWrap: "wrap",
-                    justifyContent: isMobile ? "center" : "flex-start",
-                  }}
-                >
-                  {Object.values(element.options)
-                    .filter((option: dAppType) =>
+                <GridList<dAppType>
+                  noFixedHeight
+                  keyExtractor={(item) => item.id}
+                  data={Object.values(element.options).filter(
+                    (option: dAppType) =>
                       option.title
                         .toLowerCase()
                         .includes(searchInput.toLowerCase()),
-                    )
-                    .map((option: dAppType, index: React.Key) => {
-                      return (
-                        <DAppBox
-                          key={index}
-                          option={option}
-                          style={{
-                            marginRight: layout.spacing_x2_5,
-                            marginBottom: layout.spacing_x2_5,
-                          }}
-                        />
-                      );
-                    })}
-                </View>
+                  )}
+                  minElemWidth={300}
+                  renderItem={({ item: option }, elemWidth) => {
+                    return (
+                      <DAppBox
+                        key={index}
+                        option={option}
+                        style={{ width: elemWidth }}
+                      />
+                    );
+                  }}
+                />
               </View>
             ) : (
               <></>