Build out top part of balances view

packages/mobile-app/.eslintrc.js

@@ -1,8 +1,13 @@
 // https://docs.expo.dev/guides/using-eslint/
 module.exports = {
   extends: ["expo", "prettier"],
-  plugins: ["prettier"],
+  plugins: ["prettier", "plugin:import/typescript"],
   rules: {
     "prettier/prettier": "error",
   },
+  settings: {
+    "import/resolver": {
+      typescript: {},
+    },
+  },
 };

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

@@ -1,49 +1,46 @@
-import { StyleSheet } from "react-native";
-import { Box, HStack, Icon, Text } from "@ironfish/tackle-box";
-import { SafeAreaView } from "react-native-safe-area-context";
-import Svg, { RadialGradient, Rect, Stop } from "react-native-svg";
+import {
+  Box,
+  HStack,
+  Icon,
+  IconButton,
+  Text,
+  VStack,
+} from "@ironfish/tackle-box";
+import { SafeAreaGradient } from "@/components/SafeAreaGradient/SafeAreaGradient";
 
 const GRADIENT_COLORS = ["#DE83F0", "#FFC2E8"];
 
 export default function Balances() {
   return (
-    <SafeAreaView style={styles.safeArea} edges={["top", "bottom"]}>
-      <Svg style={[StyleSheet.absoluteFill, styles.svg]}>
-        <RadialGradient
-          id="gradient"
-          cx="50%"
-          cy="50%"
-          rx="80px"
-          ry="160px"
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop offset="0" stopColor={GRADIENT_COLORS[0]} />
-          <Stop offset="1" stopColor={GRADIENT_COLORS[1]} />
-        </RadialGradient>
-        <Rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
-      </Svg>
+    <SafeAreaGradient from={GRADIENT_COLORS[0]} to={GRADIENT_COLORS[1]}>
+      <NavBar />
 
-      <HStack>
-        <Icon name="hamburger-menu" />
-        <Text size="lg">Account 1</Text>
-        <Icon name="gear" />
-      </HStack>
+      <VStack alignItems="center">
+        <Text size="3xl">100.55</Text>
+        <Text size="lg">IRON</Text>
 
-      <Box bg="white" mt={40}>
-        <Text size="lg">Balance</Text>
-      </Box>
-    </SafeAreaView>
+        <HStack py={8} px={6}>
+          <IconButton label="Receive" icon="arrow-receive" />
+          <IconButton label="Send" icon="arrow-send" />
+          <IconButton label="Bridge" icon="arrows-bridge" />
+        </HStack>
+      </VStack>
+
+      <Box bg="background" flexGrow={1} />
+    </SafeAreaGradient>
   );
 }
 
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    backgroundColor: "lightblue",
-  },
-  svg: {
-    height: "100%",
-    width: "100%",
-    zIndex: -1,
-  },
-});
+function NavBar() {
+  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>
+  );
+}

packages/mobile-app/components/SafeAreaGradient/SafeAreaGradient.tsx

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+import { type Edges, SafeAreaView } from "react-native-safe-area-context";
+import { StyleSheet, View } from "react-native";
+import Svg, { RadialGradient, Rect, Stop } from "react-native-svg";
+
+type Props = {
+  from: string;
+  to: string;
+  children: ReactNode;
+  edges?: Edges;
+};
+
+export function SafeAreaGradient({
+  from,
+  to,
+  children,
+  edges = ["top"],
+}: Props) {
+  return (
+    <SafeAreaView
+      edges={edges}
+      style={[
+        styles.safeArea,
+        {
+          backgroundColor: to,
+        },
+      ]}
+    >
+      <View style={styles.svgContainer}>
+        <Svg style={StyleSheet.absoluteFillObject}>
+          <RadialGradient
+            id="gradient"
+            cx="50%"
+            cy="50%"
+            rx="50%"
+            ry="50%"
+            gradientUnits="userSpaceOnUse"
+          >
+            <Stop offset="0" stopColor={from} />
+            <Stop offset="1" stopColor={to} />
+          </RadialGradient>
+          <Rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
+        </Svg>
+      </View>
+      {children}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  svgContainer: {
+    position: "absolute",
+    top: 140,
+    left: 0,
+    width: "100%",
+    aspectRatio: 1,
+    zIndex: -1,
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+});

packages/mobile-app/package.json

@@ -17,6 +17,7 @@
     "expo": "~51.0.39",
     "expo-constants": "~16.0.2",
     "expo-font": "~12.0.10",
+    "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.24",
     "expo-secure-store": "13.0.2",
@@ -36,8 +37,7 @@
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "~3.34.0",
     "react-native-svg": "15.9.0",
-    "zod": "^3.22.4",
-    "expo-linear-gradient": "~13.0.2"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -46,6 +46,8 @@
     "@types/react": "~18.2.79",
     "eslint-config-expo": "^7.0.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.1.3",
     "expo-build-properties": "^0.12.5",
     "prettier": "^3.3.2",

packages/mobile-app/tsconfig.json

@@ -2,6 +2,10 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { css, html } from "react-strict-dom";
-import { palette, type PaletteColors } from "@/vars/colors.stylex";
+import { type Colors, getColorValue } from "@/vars/colors.stylex";
 import { StyleObj, UnitValue } from "@/utils/types";
 import {
   useMarginPaddingValues,
@@ -53,16 +53,20 @@ const styles = css.create({
   borderWidth: (width: number) => ({
     borderWidth: width,
   }),
+  flexGrow: (grow?: number) => ({
+    flexGrow: grow,
+  }),
 });
 
 export type BoxProps = {
   children?: ReactNode;
   height?: UnitValue;
   width?: UnitValue;
   borderRadius?: "full" | number;
-  bg?: PaletteColors;
-  borderColor?: PaletteColors;
+  bg?: Colors;
+  borderColor?: Colors;
   borderWidth?: number;
+  flexGrow?: number;
   style?: StyleObj;
 } & MarginPadding;
 
@@ -74,6 +78,7 @@ export function Box({
   borderColor,
   borderRadius = 0,
   borderWidth = 0,
+  flexGrow,
   style,
   ...marginPadding
 }: BoxProps) {
@@ -87,9 +92,12 @@ export function Box({
         styles.margin(...margin),
         styles.padding(...padding),
         styles.borderRadius(borderRadius === "full" ? 9999 : borderRadius),
-        styles.backgroundColor(bg ? palette[bg] : undefined),
-        styles.borderColor(borderColor ? palette[borderColor] : undefined),
+        styles.backgroundColor(bg ? getColorValue(bg) : undefined),
+        styles.borderColor(
+          borderColor ? getColorValue(borderColor) : undefined,
+        ),
         styles.borderWidth(borderWidth),
+        styles.flexGrow(flexGrow),
         style,
       ]}
     >

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

@@ -1,68 +1,13 @@
-import { html, css } from "react-strict-dom";
-import { ComponentProps } from "react";
+import { html } from "react-strict-dom";
 import { HStack, Text } from "@/index";
 import { Icon, type IconName } from "@/components/Icon/Icon";
-import { colors } from "@/vars/index.stylex";
-
-const styles = css.create({
-  base: {
-    boxSizing: "border-box",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    textAlign: "center",
-    paddingTop: 14,
-    paddingBottom: 14,
-    paddingLeft: 24,
-    paddingRight: 24,
-    fontSize: 20,
-    borderRadius: 9999,
-  },
-  solid: {
-    backgroundColor: {
-      default: colors.backgroundInverse,
-      ":active": colors.backgroundHoverInverse,
-    },
-    borderWidth: 0,
-    color: colors.textPrimaryInverse,
-  },
-  outline: {
-    backgroundColor: {
-      default: "rgba(0, 0, 0, 0.0)",
-      ":active": "rgba(0, 0, 0, 0.05)",
-    },
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: colors.border,
-    color: colors.textPrimary,
-  },
-  ghost: {
-    backgroundColor: {
-      default: "rgba(0, 0, 0, 0.0)",
-      ":active": "rgba(0, 0, 0, 0.05)",
-    },
-    borderWidth: 0,
-    borderColor: "transparent",
-    color: colors.textPrimary,
-  },
-  disabled: {
-    backgroundColor: colors.backgroundDisabled,
-    borderColor: "transparent",
-    color: colors.textDisabled,
-  },
-  icon: {
-    width: 17,
-    height: 18,
-  },
-});
-
-type ButtonProps = ComponentProps<typeof html.button>;
+import { type OnClick, styles } from "./shared";
 
 type Props = {
   disabled?: boolean;
   title: string;
   variant?: "solid" | "outline" | "ghost";
-  onClick?: ButtonProps["onClick"];
+  onClick?: OnClick;
   rightIcon?: IconName;
 };
 
@@ -86,7 +31,7 @@ export function Button({
       style={computedStyles}
       onClick={(e) => {
         if (disabled) return;
-        onClick?.(e);
+        onClick(e);
       }}
     >
       <ButtonContent title={title} rightIcon={rightIcon} />