updates (#4244)

* updates

* wip

* design changes etc

* wip

* cleanup

* wip consistency theme

* clean up a whole bunch

* listitemwrapper

* recent activity

* format date

* cleanup

* cleanup

* wip broken stuffs

* re-adds old token row

* move balance summary widget over

* optimize icons

* cleanup

* undo

* undo

* undo

* fix

* fix size->fontSize in secure-client

Author: peterpme

packages/app-mobile/package.json

@@ -22,7 +22,7 @@
     "postinstall": "npx patch-package"
   },
   "dependencies": {
-    "@apollo/client": "3.8.0-beta.3",
+    "@apollo/client": "3.8.0-beta.5",
     "@cardinal/payment-manager": "^1.7.9",
     "@cardinal/token-manager": "^1.7.9",
     "@coral-xyz/chat-xplat": "*",

packages/app-mobile/src/screens/Unlocked/components/BalanceSummaryWidget.tsx renamed to packages/app-mobile/src/components/BalanceSummaryWidget.tsx

@@ -97,7 +97,7 @@ const QUERY_USER_BALANCE_SUMMARY = gql(`
   }
 `);
 
-function Container() {
+function Container({ hideChange }: { hideChange }) {
   const activeWallet = useActiveWallet();
   const { data } = useSuspenseQuery(QUERY_USER_BALANCE_SUMMARY, {
     variables: {
@@ -113,17 +113,19 @@ function Container() {
 
   return (
     <Stack ai="center">
-      <StyledText fontWeight="700" fontSize="$4xl" color="$fontColor">
+      <StyledText fontWeight="600" fontSize="$4xl" color="$fontColor">
         {formatUsd(totalBalance)}
       </StyledText>
-      <XStack alignItems="center">
-        <TextTotalChange totalChange={totalChange} />
-        <TextPercentChange
-          isLoading={false}
-          totalChange={totalChange}
-          percentChange={percentChange as number}
-        />
-      </XStack>
+      {hideChange ? null : (
+        <XStack alignItems="center">
+          <TextTotalChange totalChange={totalChange} />
+          <TextPercentChange
+            isLoading={false}
+            totalChange={totalChange}
+            percentChange={percentChange as number}
+          />
+        </XStack>
+      )}
     </Stack>
   );
 }
@@ -139,11 +141,11 @@ function ErrorFallback({ error }: { error: Error }) {
   );
 }
 
-export function BalanceSummaryWidget() {
+export function BalanceSummaryWidget({ hideChange }: { hideChange?: boolean }) {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <Suspense fallback={<BalanceSummaryWidgetLoading />}>
-        <Container />
+        <Container hideChange={hideChange} />
       </Suspense>
     </ErrorBoundary>
   );

packages/app-mobile/src/components/CollectionListItem.tsx

@@ -1,59 +1,77 @@
-import { View, Pressable } from "react-native";
+import { Pressable, StyleSheet } from "react-native";
 
 import { UNKNOWN_NFT_ICON_SRC } from "@coral-xyz/common";
 import { ProxyImage, XStack, StyledText } from "@coral-xyz/tamagui";
 
+import { WINDOW_WIDTH } from "~src/lib";
+
+const ITEM_WIDTH = Math.floor((WINDOW_WIDTH - 32 - 16) / 2);
+const IMAGE_WIDTH = Math.floor((ITEM_WIDTH - 8) / 2);
+export const ITEM_HEIGHT = ITEM_WIDTH + 25;
+
 export function BaseListItem({ onPress, item }: any): JSX.Element {
   return (
-    <Pressable style={{ flex: 1 }} onPress={() => onPress(item)}>
+    <Pressable
+      onPress={() => onPress(item)}
+      style={baseListItemStyle.container}
+    >
       <CollectionImage images={item.images} />
-      <XStack mt={8}>
+      <XStack mt={8} space={4}>
         <StyledText
-          fontSize="$base"
+          fontSize="$sm"
           numberOfLines={1}
           ellipsizeMode="tail"
+          color="$baseTextHighEmphasis"
           maxWidth="90%"
         >
           {item.name}
         </StyledText>
+        <StyledText
+          fontSize="$sm"
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          color="$baseTextMedEmphasis"
+        >
+          {item.images.length}
+        </StyledText>
       </XStack>
     </Pressable>
   );
 }
 
+const baseListItemStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: ITEM_WIDTH,
+    height: ITEM_HEIGHT,
+  },
+});
+
 function ImageBox({ images }: { images: string[] }): JSX.Element {
   return (
-    <View
-      style={{
-        height: 164,
-        borderRadius: 12,
-        backgroundColor: "white",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        gap: 12,
-        padding: 12,
-        justifyContent: "space-evenly",
-        alignItems: "center",
-      }}
-    >
+    <XStack flexWrap="wrap" gap={8} alignItems="center">
       {images.map((uri: string, index: number) => {
         return (
           <ProxyNFTImage
             key={`${index}${uri}`} // eslint-disable-line
             src={uri}
-            size={64}
+            size={IMAGE_WIDTH}
             style={{ borderRadius: 8 }}
           />
         );
       })}
-    </View>
+    </XStack>
   );
 }
 
 function CollectionImage({ images }: { images: string[] }): JSX.Element {
   if (images.length === 1) {
     return (
-      <ProxyNFTImage size={164} src={images[0]} style={{ borderRadius: 12 }} />
+      <ProxyNFTImage
+        size={ITEM_WIDTH}
+        src={images[0]}
+        style={{ borderRadius: 12 }}
+      />
     );
   }
 

packages/app-mobile/src/components/Icon.tsx

@@ -3,7 +3,8 @@ import type { SvgProps } from "react-native-svg";
 import { Pressable } from "react-native";
 
 import { useTheme as useTamaguiTheme } from "@coral-xyz/tamagui";
-import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import { themed as withThemedIcon } from "@tamagui/lucide-icons/src/themed";
 import Svg, { Path, Rect } from "react-native-svg";
 
@@ -14,6 +15,14 @@ type TamaguiIconProp = {
   size?: number;
 };
 
+export const ThemedMaterialIcon = withThemedIcon(
+  ({ name, color, size, style }) => {
+    return (
+      <MaterialIcons name={name} color={color} size={size} style={style} />
+    );
+  }
+);
+
 export const IconButton = withThemedIcon(
   ({ onPress, name, color, size, iconStyle }) => {
     return (