Update design

--cache-location/_logs/2025-02-27T19_26_00_034Z-debug-0.log

@@ -0,0 +1,20 @@
+0 verbose cli /Users/rustam/.nvm/versions/node/v20.15.1/bin/node /Users/rustam/.nvm/versions/node/v20.15.1/bin/npm
+1 info using npm@10.7.0
+2 info using node@v20.15.1
+3 silly config:load:file:/Users/rustam/.nvm/versions/node/v20.15.1/lib/node_modules/npm/npmrc
+4 silly config:load:file:/Users/rustam/workspace/onramp/onramp-demo-mobile/.npmrc
+5 silly config:load:file:/Users/rustam/.npmrc
+6 silly config:load:file:/Users/rustam/.nvm/versions/node/v20.15.1/etc/npmrc
+7 verbose title npm run lint node_modules/.cache/eslint/
+8 verbose argv "run" "lint" "--cache" "--cache-location" "node_modules/.cache/eslint/"
+9 verbose logfile logs-max:10 dir:/Users/rustam/workspace/onramp/onramp-demo-mobile/--cache-location/_logs/2025-02-27T19_26_00_034Z-
+10 verbose logfile /Users/rustam/workspace/onramp/onramp-demo-mobile/--cache-location/_logs/2025-02-27T19_26_00_034Z-debug-0.log
+11 silly logfile done cleaning log files
+12 http fetch GET 200 https://registry.npmjs.org/npm 226ms
+13 notice
+13 notice New major version of npm available! 10.7.0 -> 11.1.0
+13 notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
+13 notice To update run: npm install -g npm@11.1.0
+13 notice  { force: true, [Symbol(proc-log.meta)]: true }
+14 verbose exit 1
+15 verbose code 1

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  plugins: ["react", "react-hooks", "react-native", "@typescript-eslint"],
+  rules: {
+    "react-native/no-unused-styles": 2,
+    "react-native/split-platform-components": 2,
+    "react-native/no-inline-styles": 2,
+    "react-native/no-color-literals": 2,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+};

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    },
+    "eslint.validate": [
+      "javascript",
+      "javascriptreact",
+      "typescript",
+      "typescriptreact"
+    ],
+    "editor.formatOnSave": true,
+    "eslint.enable": true,
+    "eslint.run": "onType"
+  }

app.json

@@ -5,11 +5,11 @@
     "scheme": "onrampdemo",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/onramp.png",
+    "icon": "./assets/images/onramp.png",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "splash": {
-      "image": "./assets/onramp.png",
+      "image": "./assets/images/onramp.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -18,14 +18,16 @@
     ],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.coinbase.onramp.demo"
+      "bundleIdentifier": "com.coinbase.onramp.demo",
+      "scheme": "onrampdemo"
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/onramp.png",
+        "foregroundImage": "./assets/images/onramp.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.coinbase.onramp.demo"
+      "package": "com.coinbase.onramp.demo",
+      "scheme": "onrampdemo"
     },
     "web": {
       "favicon": "./assets/favicon.png"

app/(tabs)/_layout.tsx

@@ -1,19 +1,19 @@
 import { Tabs } from "expo-router";
 import React from "react";
 
+import WalletIcon from "@/assets/icons/WalletIcon";
 import { HapticTab } from "@/components/HapticTab";
+import { ThemedText } from "@/components/ThemedText";
 import { IconSymbol } from "@/components/ui/IconSymbol";
 import TabBarBackground from "@/components/ui/TabBarBackground";
-import { Colors } from "@/constants/Colors";
-import { useColorScheme } from "@/hooks/useColorScheme";
+import { useThemeColor } from "@/hooks/useThemeColor";
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const primaryColor = useThemeColor({}, "primary");
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
@@ -26,17 +26,45 @@ export default function TabLayout() {
         name="home"
         options={{
           title: "Home",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="house.fill" color={color} />
+          tabBarIcon: ({ color, focused }) => (
+            <IconSymbol
+              size={28}
+              name="house.fill"
+              color={focused ? primaryColor : color}
+            />
+          ),
+          tabBarLabel: ({ focused, color }) => (
+            <ThemedText
+              style={{
+                fontSize: 12,
+                color: focused ? primaryColor : color,
+              }}
+            >
+              Home
+            </ThemedText>
           ),
         }}
       />
       <Tabs.Screen
-        name="profile"
+        name="wallet"
         options={{
-          title: "Profile",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="person.fill" color={color} />
+          title: "Wallet",
+          tabBarIcon: ({ color, focused }) => (
+            <WalletIcon
+              width={28}
+              height={28}
+              color={focused ? primaryColor : color}
+            />
+          ),
+          tabBarLabel: ({ focused, color }) => (
+            <ThemedText
+              style={{
+                fontSize: 12,
+                color: focused ? primaryColor : color,
+              }}
+            >
+              Wallet
+            </ThemedText>
           ),
         }}
       />

app/(tabs)/home.tsx

@@ -1,75 +1,56 @@
 import { FundForm } from "@/components/FundForm/FundForm";
-import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
-import { WalletDetails } from "@/components/WalletDetails/WalletDetails";
+import { CURRENCY_OPTIONS } from "@/constants/constants";
+import { useApp } from "@/context/AppContext";
 import { useWallet } from "@/hooks/useWallet";
-import { useState } from "react";
+import { useMemo } from "react";
 import {
-  Image,
   KeyboardAvoidingView,
   Platform,
+  ScrollView,
   StyleSheet,
 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function HomeScreen() {
-  const [currency, setCurrency] = useState("USD");
-  const [amount, setAmount] = useState("0");
-  const [asset, setAsset] = useState("ETH");
-  const [network, setNetwork] = useState("base");
+  const { currency, network } = useApp();
 
-  const currentWallet = useWallet({ network });
+  const insets = useSafeAreaInsets();
+  const currentWallet = useWallet({ network: network?.name || "base" });
+
+  const currencySymbol = useMemo(
+    () =>
+      CURRENCY_OPTIONS.find((option) => option.value === currency?.id)?.symbol,
+    [currency]
+  );
 
   return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      style={{ flex: 1 }}
-    >
-      <ParallaxScrollView
-        headerBackgroundColor={{ light: "blue", dark: "#1D3D47" }}
-        headerImage={
-          <Image
-            source={require("@/assets/images/onramp-logo.png")}
-            style={styles.reactLogo}
-          />
-        }
+    <ThemedView style={{ flex: 1 }}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1, paddingTop: insets.top }}
       >
-        <ThemedView style={styles.container}>
-          <ThemedText type="title">Coinbase Onramp Demo</ThemedText>
-
-          <WalletDetails
-            network={network}
-            address={currentWallet?.address}
-            onChangeNetwork={setNetwork}
-          />
-
-          <FundForm
-            currency={currency}
-            amount={amount}
-            asset={asset}
-            onChangeCurrency={setCurrency}
-            onChangeAmount={setAmount}
-            onChangeAsset={setAsset}
-            walletAddress={currentWallet?.address || ""}
-            walletChain={network}
-          />
-        </ThemedView>
-      </ParallaxScrollView>
-    </KeyboardAvoidingView>
+        <ThemedText type="subtitle" style={{ textAlign: "center" }}>
+          Coinbase Onramp demo
+        </ThemedText>
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={[styles.scrollContent]}
+        >
+          <FundForm walletAddress={currentWallet?.address || ""} />
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </ThemedView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  scroll: {
     flex: 1,
-    gap: 10,
   },
-  reactLogo: {
-    height: 200,
-    width: 300,
-    bottom: 0,
-    left: 0,
-    position: "absolute",
-    alignSelf: "center",
+  scrollContent: {
+    gap: 24,
+    padding: 16,
   },
 });