Add Card component and asset row cards in balance page

packages/mobile-app/app/(tabs)/balances.tsx

@@ -6,16 +6,85 @@ import {
   Tabs,
   Text,
   VStack,
+  Card,
 } from "@ironfish/tackle-box";
 import { SafeAreaGradient } from "@/components/SafeAreaGradient/SafeAreaGradient";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+  SharedValue,
+} from "react-native-reanimated";
 
 const GRADIENT_COLORS = ["#DE83F0", "#FFC2E8"];
 
 export default function Balances() {
+  const scrollYOffset = useSharedValue(0);
+
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    scrollYOffset.value = event.contentOffset.y;
+  });
+
   return (
     <SafeAreaGradient from={GRADIENT_COLORS[0]} to={GRADIENT_COLORS[1]}>
-      <NavBar />
+      <Animated.ScrollView
+        scrollEventThrottle={16}
+        onScroll={scrollHandler}
+        contentContainerStyle={{ flexGrow: 1 }}
+      >
+        <View style={{ flexGrow: 1 }}>
+          <AccountHeader offsetY={scrollYOffset} />
+
+          <Box
+            bg="background"
+            flexGrow={1}
+            borderTopLeftRadius={20}
+            borderTopRightRadius={20}
+          >
+            <Tabs.Root defaultValue="assets">
+              <Tabs.List>
+                <Tabs.Trigger value="assets">Assets</Tabs.Trigger>
+                <Tabs.Trigger value="transactions">Transactions</Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="assets">
+                <VStack flexGrow={1} p={4} pb={16} gap={4}>
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                  <AssetRow />
+                </VStack>
+              </Tabs.Content>
+              <Tabs.Content value="transactions">
+                <VStack flexGrow={1} p={4} pb={16}>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                  <Text>Transactions</Text>
+                </VStack>
+              </Tabs.Content>
+            </Tabs.Root>
+          </Box>
+        </View>
+      </Animated.ScrollView>
+    </SafeAreaGradient>
+  );
+}
 
+function AccountHeader({ offsetY }: { offsetY: SharedValue<number> }) {
+  return (
+    <Animated.View style={{ transform: [{ translateY: offsetY }] }}>
+      <HStack alignItems="center" px={4} py={6}>
+        <Icon name="hamburger-menu" />
+        <Box flexGrow={1}>
+          <Text size="lg" textAlign="center">
+            Account 1
+          </Text>
+        </Box>
+        <Icon name="gear" />
+      </HStack>
       <VStack alignItems="center">
         <Text size="3xl">100.55</Text>
         <Text size="lg">IRON</Text>
@@ -26,52 +95,36 @@ export default function Balances() {
           <IconButton label="Bridge" icon="arrows-bridge" />
         </HStack>
       </VStack>
+    </Animated.View>
+  );
+}
 
-      <Box
-        bg="background"
-        flexGrow={1}
-        borderTopLeftRadius={20}
-        borderTopRightRadius={20}
-      >
-        <Tabs.Root defaultValue="assets">
-          <Tabs.List>
-            <Tabs.Trigger value="assets">Assets</Tabs.Trigger>
-            <Tabs.Trigger value="transactions">Transactions</Tabs.Trigger>
-          </Tabs.List>
-          <Tabs.Content value="assets">
-            <VStack>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
-            </VStack>
-          </Tabs.Content>
-          <Tabs.Content value="transactions">
-            <VStack>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-              <Text>Transactions</Text>
-            </VStack>
-          </Tabs.Content>
-        </Tabs.Root>
-      </Box>
-    </SafeAreaGradient>
+function AssetBadge() {
+  return (
+    <Box
+      bg="pink"
+      height={48}
+      width={48}
+      minHeight={48}
+      minWidth={48}
+      borderRadius="full"
+    />
   );
 }
 
-function NavBar() {
+function AssetRow() {
   return (
-    <HStack alignItems="center" px={4} py={6}>
-      <Icon name="hamburger-menu" />
-      <Box flexGrow={1}>
-        <Text size="lg" textAlign="center">
-          Account 1
-        </Text>
-      </Box>
-      <Icon name="gear" />
-    </HStack>
+    <Card>
+      <HStack alignItems="center" gap={3}>
+        <AssetBadge />
+        <VStack>
+          <Text size="sm">$IRON</Text>
+          <Text size="sm" color="textSecondary">
+            100.55
+          </Text>
+        </VStack>
+        <Icon name="chevron-right" />
+      </HStack>
+    </Card>
   );
 }

packages/tackle-box/lib/components/Box/Box.tsx

@@ -26,14 +26,19 @@ const styles = css.create({
     flexDirection: "column",
     alignItems: "stretch",
     justifyContent: "flex-start",
+    position: "relative",
   },
   backgroundColor: (color?: string) => ({
     backgroundColor: color,
   }),
-  dimensions: (height: UnitValue, width: UnitValue) => ({
+  dimensions: (height?: UnitValue, width?: UnitValue) => ({
     height,
     width,
   }),
+  minDimensions: (minHeight?: UnitValue, minWidth?: UnitValue) => ({
+    minHeight,
+    minWidth,
+  }),
   margin: (
     top: UnitValue,
     right: UnitValue,
@@ -77,21 +82,26 @@ const styles = css.create({
 });
 
 export type BoxProps = BorderRadiusArgs &
-  BorderWidthArgs & {
+  BorderWidthArgs &
+  MarginPadding & {
     children?: ReactNode;
     height?: UnitValue;
     width?: UnitValue;
+    minHeight?: UnitValue;
+    minWidth?: UnitValue;
     bg?: Colors;
     borderColor?: Colors;
     borderWidth?: number;
     flexGrow?: number;
     style?: StyleObj;
-  } & MarginPadding;
+  };
 
 export function Box<TAsProp extends RSDElementTypes = "div">({
   children,
   height = "auto",
   width = "100%",
+  minHeight,
+  minWidth,
   bg,
   borderColor,
   borderRadius = 0,
@@ -176,6 +186,7 @@ export function Box<TAsProp extends RSDElementTypes = "div">({
       style={[
         styles.base,
         styles.dimensions(height, width),
+        styles.minDimensions(minHeight, minWidth),
         styles.margin(...margin),
         styles.padding(...padding),
         styles.borderRadius(borderRadiusValues),

packages/tackle-box/lib/components/Card/Card.tsx

@@ -0,0 +1,72 @@
+import { PropsWithChildren } from "react";
+import { css } from "react-strict-dom";
+import { Box } from "@/components/Box/Box";
+import { MarginPadding } from "@/utils/useMarginPaddingValues";
+
+const style = css.create({
+  shadowWrapper: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  content: {
+    zIndex: 1,
+  },
+});
+
+type CardProps = PropsWithChildren<
+  MarginPadding & {
+    active?: boolean;
+  }
+>;
+
+export function Card({
+  children,
+  active,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  p = 4,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+}: CardProps) {
+  return (
+    <Box m={m} mx={mx} my={my} mt={mt} mr={mr} mb={mb} ml={ml} pr={1} pb={1}>
+      <Box
+        borderRadius={4}
+        borderWidth={1}
+        borderColor="border"
+        p={p}
+        px={px}
+        py={py}
+        pt={pt}
+        pr={pr}
+        pb={pb}
+        pl={pl}
+        style={style.content}
+        bg="background"
+      >
+        {children}
+      </Box>
+      <Box style={style.shadowWrapper} pl={1} pt={1}>
+        <Box
+          borderRadius={4}
+          borderWidth={1}
+          borderColor="border"
+          flexGrow={1}
+          bg={active ? "backgroundInverse" : "background"}
+        />
+      </Box>
+    </Box>
+  );
+}

packages/tackle-box/lib/components/Stack/Stack.tsx

@@ -22,14 +22,12 @@ const styles = css.create({
 
 type StackProps = BoxProps & {
   gap?: number;
-  spacing?: number;
   alignItems?: string;
   justifyContent?: string;
 };
 
 export function HStack({
   gap = 0,
-  spacing,
   alignItems = "stretch",
   justifyContent = "flex-start",
   children,
@@ -39,7 +37,7 @@ export function HStack({
     <Box
       style={[
         styles.horizontal,
-        styles.gap(applyBaseSpacing(spacing ?? gap)),
+        styles.gap(applyBaseSpacing(gap)),
         styles.align(alignItems),
         styles.justify(justifyContent),
       ]}
@@ -52,7 +50,6 @@ export function HStack({
 
 export function VStack({
   gap = 0,
-  spacing,
   alignItems = "stretch",
   justifyContent = "flex-start",
   children,
@@ -62,7 +59,7 @@ export function VStack({
     <Box
       style={[
         styles.vertical,
-        styles.gap(applyBaseSpacing(spacing ?? gap)),
+        styles.gap(applyBaseSpacing(gap)),
         styles.align(alignItems),
         styles.justify(justifyContent),
       ]}

packages/tackle-box/lib/index.ts

@@ -1,9 +1,11 @@
 export { Box } from "@/components/Box/Box";
 export { Button } from "@/components/Button/Button";
-export { IconButton } from "@/components/Button/IconButton";
+export { Card } from "@/components/Card/Card";
 export { HStack, VStack } from "@/components/Stack/Stack";
-export { Text } from "@/components/Text/Text";
-export { TextInput } from "@/components/TextInput/TextInput";
 export { Icon } from "@/components/Icon/Icon";
+export { IconButton } from "@/components/Button/IconButton";
 export { Tabs } from "@/components/Tabs/Tabs";
+export { Text } from "@/components/Text/Text";
+export { TextInput } from "@/components/TextInput/TextInput";
+
 export { css } from "react-strict-dom";