[Mobile][UMA-1118] Theme tokens

apps/mobile/app/(auth)/_layout.tsx

@@ -2,7 +2,7 @@ import { useCurrentAccount } from "@umami/state";
 import { Redirect, Stack } from "expo-router";
 import { View } from "react-native";
 
-import { Header } from "../../components/Header";
+import { Header } from "../../components/header";
 
 export default function AuthenticatedLayout() {
   const currentAccount = useCurrentAccount();

apps/mobile/app/_layout.tsx

@@ -6,14 +6,15 @@
 import { PersistGate } from "redux-persist/integration/react";
 import { TamaguiProvider } from "tamagui";
 
-import { PersistorLoader } from "../components/PersistorLoader";
+import { PersistorLoader } from "../components/persistorLoader";
 import { AuthProvider, ReactQueryProvider } from "../providers";
 import { ModalProvider } from "../providers/ModalProvider";
 import { persistor, store } from "../store";
 import { tamaguiConfig } from "../tamagui.config";
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
+  const theme = colorScheme === "dark" ? "dark" : "light";
 
   useEffect(() => {
     void SplashScreen.hideAsync();

apps/mobile/components/header/Header.tsx

@@ -1,7 +1,7 @@
 import { XStack } from "tamagui";
 
-import { AccountBadge } from "../AccountBadge";
-import { HeaderIcon } from "../HeaderIcon";
+import { AccountBadge } from "../accountBadge";
+import { HeaderIcon } from "../headerIcon";
 
 export const Header = () => (
   <XStack alignItems="center" justifyContent="space-between" width="100%" paddingHorizontal={10}>

apps/mobile/components/persistorLoader/index.ts

@@ -1 +1 @@
-export * from "./PersistorLoader";
+export * from "./persistorLoader";

apps/mobile/ios/Podfile.lock

@@ -2574,15 +2574,15 @@ SPEC CHECKSUMS:
   EXUpdates: d61c867ebb33b405f6e8e563dc0f0e239e69dfa9
   EXUpdatesInterface: 1dcebac98ac5dad4289e6ff2bd5616822e894397
   FBLazyVector: be7314029d6ec6b90f0f75ce1195b8130ed9ac4f
-  fmt: fad7775865bb4340e98e10997c965fd61b3c749e
-  glog: 94308668c25e8ccac76f853cda1931c7aa3f5fae
+  fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
+  glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
   GoogleSignIn: d4281ab6cf21542b1cfaff85c191f230b399d2db
   GTMAppAuth: f69bd07d68cd3b766125f7e072c45d7340dea0de
   GTMSessionFetcher: 5aea5ba6bd522a239e236100971f10cb71b96ab6
-  hermes-engine: 77f19b2923ed39b21649b7551471674e3ace7a0a
+  hermes-engine: 0555a84ea495e8e3b4bde71b597cd87fbb382888
   JWTDecode: 3eaab1e06b6f4dcbdd6716aff09ba4c2104ca8b7
   OpenSSL-Universal: b60a3702c9fea8b3145549d421fdb018e53ab7b4
-  RCT-Folly: aac5a2e8a7b6b8108945e58a66d08f78b800a1ea
+  RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
   RCTDeprecation: 2c5e1000b04ab70b53956aa498bf7442c3c6e497
   RCTRequired: 5f785a001cf68a551c5f5040fb4c415672dbb481
   RCTTypeSafety: 6b98db8965005d32449605c0d005ecb4fee8a0f7
@@ -2652,7 +2652,7 @@ SPEC CHECKSUMS:
   RNSVG: ea3e35f0375ac20449384fa89ce056ee0e0690ee
   SimpleKeychain: f8707c8e97b38c6a6e687b17732afc9bcef06439
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
+  Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
 
 PODFILE CHECKSUM: 0f4c3f313f5ffb2631df8d241912e17bb850bab1
 

apps/mobile/screens/Home/HomeComponent.tsx

@@ -0,0 +1,63 @@
+import { type SocialAccount } from "@umami/core";
+import { useDataPolling } from "@umami/data-polling";
+import {
+  useCurrentAccount,
+  useGetAccountBalance,
+  useGetDollarBalance,
+  useSelectNetwork,
+  useSelectedNetwork,
+} from "@umami/state";
+import { prettyTezAmount } from "@umami/tezos";
+import type React from "react";
+import { Button, Text, XStack, YStack } from "tamagui";
+
+import { ActionButton, BalanceDisplay, NetworkSwitch } from "./components";
+import { useSocialOnboarding } from "../../services/auth";
+
+export const HomeComponent: React.FC = () => {
+  useDataPolling();
+
+  const currentAccount = useCurrentAccount();
+  const network = useSelectedNetwork();
+  const selectNetwork = useSelectNetwork();
+  const { logout } = useSocialOnboarding();
+
+  const address = currentAccount ? currentAccount.address.pkh : "";
+  const balance = useGetAccountBalance()(address);
+  const balanceInUsd = useGetDollarBalance()(address);
+
+  return (
+    <YStack alignItems="center" flex={1} paddingTop={20} backgroundColor="white">
+      <BalanceDisplay balance={balance} />
+      <XStack justifyContent="space-around" width="100%" marginVertical={20}>
+        <ActionButton title="Buy" />
+        <ActionButton title="Swap" />
+        <ActionButton title="Receive" />
+        <ActionButton title="Send" />
+      </XStack>
+
+      <YStack alignItems="center" marginTop={50}>
+        <Text color="#333" fontSize={24} fontWeight="bold">
+          Welcome to the Home Screen!
+        </Text>
+        <NetworkSwitch network={network} selectNetwork={selectNetwork} />
+      </YStack>
+
+      <YStack alignItems="center" marginTop={20}>
+        <Text>Current network: {network.name}</Text>
+        <Text>Label: {currentAccount?.label}</Text>
+        <Text>Address: {currentAccount?.address.pkh}</Text>
+        <Text>Balance: {prettyTezAmount(balance ?? 0)}</Text>
+        <Text>Balance in USD: {balanceInUsd?.toString() ?? "0"}</Text>
+      </YStack>
+
+      <Button
+        marginTop={20}
+        onPress={() => logout((currentAccount as SocialAccount).idp)}
+        size="$4"
+      >
+        Logout
+      </Button>
+    </YStack>
+  );
+};

apps/mobile/styles/colours.ts

@@ -0,0 +1,31 @@
+import { palette } from "./palette";
+
+export const colors = {
+  light: [
+    palette.white, // background
+    palette.gray90, // surface
+    palette.gray80, // card
+    palette.gray70, // overlay
+    palette.gray60, // border
+    palette.gray50, // highlight
+    palette.gray10, // text
+    palette.blueLight, // accent
+    palette.green, // success
+    palette.yellow, // warning
+    palette.red, // error
+  ],
+
+  dark: [
+    palette.black, // background
+    palette.gray10, // surface
+    palette.gray20, // card
+    palette.gray30, // overlay
+    palette.gray40, // border
+    palette.gray50, // highlight
+    palette.gray90, // text
+    palette.blueDark, // accent
+    palette.green, // success
+    palette.yellow, // warning
+    palette.red, // error
+  ],
+};

apps/mobile/styles/index.ts

@@ -0,0 +1,5 @@
+export * from "./colours";
+export * from "./shorthands";
+export * from "./theme";
+export * from "./tokens";
+export * from "./typography";

apps/mobile/styles/palette.ts

@@ -0,0 +1,20 @@
+export const palette = {
+  black: "#000000",
+  white: "#FFFFFF",
+  gray10: "hsla(0, 0%, 10%, 1)",
+  gray20: "hsla(0, 0%, 20%, 1)",
+  gray30: "hsla(0, 0%, 30%, 1)",
+  gray40: "hsla(0, 0%, 40%, 1)",
+  gray50: "hsla(0, 0%, 50%, 1)",
+  gray60: "hsla(0, 0%, 60%, 1)",
+  gray70: "hsla(0, 0%, 70%, 1)",
+  gray80: "hsla(0, 0%, 80%, 1)",
+  gray90: "hsla(0, 0%, 90%, 1)",
+
+  red: "hsla(0, 100%, 50%, 1)",
+  green: "hsla(120, 100%, 40%, 1)",
+  yellow: "hsla(50, 100%, 50%, 1)",
+
+  blueDark: "hsla(250, 50%, 35%, 1)",
+  blueLight: "hsla(250, 50%, 65%, 1)",
+};

apps/mobile/styles/shorthands.ts

@@ -0,0 +1,62 @@
+export const shorthands = {
+  // Spacing
+  p: "padding",
+  px: "paddingHorizontal",
+  py: "paddingVertical",
+  pt: "paddingTop",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  pr: "paddingRight",
+
+  m: "margin",
+  mx: "marginHorizontal",
+  my: "marginVertical",
+  mt: "marginTop",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  mr: "marginRight",
+
+  // Sizing
+  w: "width",
+  h: "height",
+  minW: "minWidth",
+  minH: "minHeight",
+  maxW: "maxWidth",
+  maxH: "maxHeight",
+
+  // Borders
+  br: "borderRadius",
+  bw: "borderWidth",
+  bc: "borderColor",
+
+  // Flexbox & Alignment
+  d: "display",
+  f: "flex",
+  fd: "flexDirection",
+  ai: "alignItems",
+  jc: "justifyContent",
+  as: "alignSelf",
+
+  // Positioning
+  pos: "position",
+  top: "top",
+  bottom: "bottom",
+  left: "left",
+  right: "right",
+  z: "zIndex",
+
+  // Colors & Background
+  bg: "backgroundColor",
+  op: "opacity",
+
+  // Typography
+  fz: "fontSize",
+  fw: "fontWeight",
+  ta: "textAlign",
+  lh: "lineHeight",
+  ls: "letterSpacing",
+  ff: "fontFamily",
+
+  // Shadow
+  shadow: "boxShadow",
+};

apps/mobile/styles/theme.ts

@@ -0,0 +1,22 @@
+export const themes = {
+  light: {
+    bg: "#ffffff",
+    color: "#000000",
+    primary: "#007AFF",
+    secondary: "#34C759",
+    danger: "#FF3B30",
+    warning: "#FFCC00",
+    success: "#4CD964",
+    shadow: "rgba(0,0,0,0.1)",
+  },
+  dark: {
+    bg: "#1a1a1a",
+    color: "#ffffff",
+    primary: "#0A84FF",
+    secondary: "#30D158",
+    danger: "#FF453A",
+    warning: "#FFD60A",
+    success: "#32D74B",
+    shadow: "rgba(255,255,255,0.1)",
+  },
+};

apps/mobile/styles/tokens.ts

@@ -0,0 +1,48 @@
+import { createTokens } from "@tamagui/core";
+
+export const tokens = createTokens({
+  size: {
+    xxs: 2,
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 20,
+    xl: 32,
+    xxl: 48,
+  },
+  space: {
+    xxs: 2,
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 20,
+    xl: 32,
+    xxl: 48,
+  },
+  radius: {
+    none: 0,
+    sm: 3,
+    md: 6,
+    lg: 12,
+    xl: 24,
+    xxl: 48, // Ensure this exists!
+  },
+  color: {
+    white: "#ffffff",
+    black: "#000000",
+    gray100: "#f7fafc",
+    gray200: "#edf2f7",
+    gray300: "#e2e8f0",
+    gray400: "#cbd5e0",
+    gray500: "#a0aec0",
+    gray600: "#718096",
+    gray700: "#4a5568",
+    gray800: "#2d3748",
+    gray900: "#1a202c",
+    primary: "#007AFF",
+    secondary: "#34C759",
+    danger: "#FF3B30",
+    warning: "#FFCC00",
+    success: "#4CD964",
+  },
+});