UI polish: web tabs theming, welcome screen, home screen improvements

Author: NateIsern

app/(tabs)/_layout.web.tsx

@@ -80,9 +80,7 @@ export default function TabLayout() {
     minHeight: 0,
   };
 
-  const slotContainerStyle: StyleProp<ViewStyle> = isUltrawide
-    ? [styles.slotContainer, styles.slotContainerUltrawide]
-    : styles.slotContainer;
+  const slotContainerStyle: StyleProp<ViewStyle> = styles.slotContainer;
 
   const tabs: readonly TabDef[] = [
     { name: "index", href: "/", icon: "wallet", label: t("wallet.title") },
@@ -173,7 +171,14 @@ export default function TabLayout() {
               {tabs.map(renderTrigger)}
             </TabList>
             <View style={slotContainerStyle}>
-              <TabSlot />
+              <View
+                style={[
+                  styles.slotInner,
+                  isUltrawide && styles.slotInnerUltrawide,
+                ]}
+              >
+                <TabSlot />
+              </View>
             </View>
           </>
         ) : (
@@ -244,18 +249,30 @@ const styles = StyleSheet.create({
 
   // Wrapper around <TabSlot /> that owns the flex sizing. Without this the
   // default TabSlot style (`flexShrink: 0`) prevents react-native-web's
-  // `<ScrollView>` from receiving a bounded height.
+  // `<ScrollView>` from receiving a bounded height. We also center children
+  // horizontally so the inner cap-width column on ultrawide displays sits in
+  // the middle of the available space (not vertically centered, which is what
+  // `alignSelf: 'center'` would do inside a row-direction parent).
   slotContainer: {
     flex: 1,
     minHeight: 0,
     minWidth: 0,
     alignSelf: "stretch",
+    alignItems: "center",
   },
-  // On ultrawide displays the content column is centered and capped.
-  slotContainerUltrawide: {
-    maxWidth: CONTENT_MAX_WIDTH,
-    alignSelf: "center",
+  // Inner wrapper that holds the actual <TabSlot />. Always full width on
+  // smaller screens, capped to CONTENT_MAX_WIDTH on ultrawide so cards and
+  // text don't stretch across the viewport. Content is top-aligned because
+  // the wrapper itself is a flex column with the default `justifyContent:
+  // 'flex-start'`.
+  slotInner: {
+    flex: 1,
     width: "100%",
+    minHeight: 0,
+    minWidth: 0,
+  },
+  slotInnerUltrawide: {
+    maxWidth: CONTENT_MAX_WIDTH,
   },
 
   // ── Bottom tab bar (< 600px) ──────────────────────────────────────────────

app/(tabs)/index.tsx

@@ -24,6 +24,8 @@ import Animated, {
   Extrapolation,
 } from "react-native-reanimated";
 import { LinearGradient } from "expo-linear-gradient";
+import * as WebBrowser from "expo-web-browser";
+import * as Localization from "expo-localization";
 import { useWalletStore } from "../../src/wallet/wallet-store";
 import {
   BalanceDisplay,
@@ -76,9 +78,25 @@ export default function HomeScreen() {
   const transactions = useWalletStore((s) => s.transactions);
   const network = useWalletStore((s) => s.network);
   const activeWalletName = useWalletStore((s) => s.activeWalletName);
+  const receiveAddress = useWalletStore((s) => s.currentReceiveAddress);
   const refreshBalance = useWalletStore((s) => s.refreshBalance);
   const loading = useWalletStore((s) => s.loading);
 
+  const handleBuy = useCallback(async () => {
+    const locale = Localization.getLocales()[0];
+    const language = locale?.languageCode ?? "en";
+    const country = locale?.regionCode ?? "";
+    const params = new URLSearchParams({
+      in_app: "true",
+      address: receiveAddress ?? "",
+      language,
+      country,
+    });
+    await WebBrowser.openBrowserAsync(
+      `https://buy.fairco.in/?${params.toString()}`,
+    );
+  }, [receiveAddress]);
+
   const [price, setPrice] = useState<PriceData | null>(getCachedPrice);
 
   useFocusEffect(
@@ -191,6 +209,11 @@ export default function HomeScreen() {
               label="Receive"
               onPress={() => router.push("/(tabs)/receive")}
             />
+            <ActionButton
+              icon="credit-card-plus"
+              label="Buy"
+              onPress={handleBuy}
+            />
             <ActionButton
               icon="account-group"
               label="Contacts"

app/(tabs)/settings.tsx

@@ -525,7 +525,7 @@ export default function SettingsScreen() {
       <ScreenHeader title="Settings" />
       <ScrollView
         className="flex-1"
-        contentContainerClassName="px-4 pt-2 pb-8 gap-6"
+        contentContainerClassName="pt-2 pb-8 gap-2"
       >
         {/* Wallets */}
         <SettingsListGroup title="Wallets">

app/onboarding/welcome.tsx

@@ -3,10 +3,11 @@
  */
 
 import { useCallback } from "react";
-import { View, Text } from "react-native";
+import { View, Text, Image } from "react-native";
 import { useRouter } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Button } from "../../src/ui/components/Button";
+import { FONT_PHUDU_BLACK } from "../../src/utils/fonts";
 
 export default function WelcomeScreen() {
   const router = useRouter();
@@ -24,8 +25,18 @@ export default function WelcomeScreen() {
       <View className="flex-1 items-center justify-between px-8 pt-20 pb-10">
         {/* Brand */}
         <View className="flex-1 items-center justify-center">
-          <Text className="text-primary text-7xl mb-6">{"\u229C"}</Text>
-          <Text className="text-foreground text-3xl font-bold tracking-wider mb-3">
+          <Image
+            source={require("../../assets/icon.png")}
+            style={{ width: 128, height: 128, marginBottom: 24, borderRadius: 28 }}
+            resizeMode="contain"
+            accessibilityIgnoresInvertColors
+            accessibilityRole="image"
+            accessibilityLabel="FAIRWallet logo"
+          />
+          <Text
+            className="text-foreground text-4xl tracking-wider mb-3"
+            style={{ fontFamily: FONT_PHUDU_BLACK }}
+          >
             FAIRWallet
           </Text>
           <Text className="text-muted-foreground text-base tracking-widest">

package.json

@@ -44,6 +44,7 @@
     "expo-sqlite": "~55.0.0",
     "expo-status-bar": "~55.0.0",
     "expo-system-ui": "~55.0.0",
+    "expo-web-browser": "^55.0.14",
     "nativewind": "^4.2.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",