Update design

app.json

@@ -5,11 +5,11 @@
     "scheme": "onrampdemo",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/onramp.png",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/onramp.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -22,7 +22,7 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
+        "foregroundImage": "./assets/onramp.png",
         "backgroundColor": "#ffffff"
       },
       "package": "com.coinbase.onramp.demo"

app/(tabs)/home.tsx

@@ -3,9 +3,8 @@ import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 import { WalletDetails } from "@/components/WalletDetails/WalletDetails";
-import { useWalletBalance } from "@/hooks/useWalletBalance";
-import { useEmbeddedEthereumWallet, usePrivy } from "@privy-io/expo";
-import { useEffect, useState } from "react";
+import { useWallet } from "@/hooks/useWallet";
+import { useState } from "react";
 import {
   Image,
   KeyboardAvoidingView,
@@ -15,18 +14,11 @@ import {
 
 export default function HomeScreen() {
   const [currency, setCurrency] = useState("USD");
-  const [amount, setAmount] = useState("20");
+  const [amount, setAmount] = useState("0");
   const [asset, setAsset] = useState("ETH");
-  const { user } = usePrivy();
-  const { wallets, create } = useEmbeddedEthereumWallet();
+  const [network, setNetwork] = useState("base");
 
-  const { balance, isLoading, error } = useWalletBalance();
-
-  useEffect(() => {
-    if (wallets.length === 0) {
-      create();
-    }
-  }, [wallets, create]);
+  const currentWallet = useWallet({ network });
 
   return (
     <KeyboardAvoidingView
@@ -46,10 +38,9 @@ export default function HomeScreen() {
           <ThemedText type="title">Coinbase Onramp Demo</ThemedText>
 
           <WalletDetails
-            chainType={wallets[0]?.chainType}
-            address={wallets[0]?.address}
-            balance={balance?.toString() || "Not available"}
-            isLoading={isLoading}
+            network={network}
+            address={currentWallet?.address}
+            onChangeNetwork={setNetwork}
           />
 
           <FundForm
@@ -59,8 +50,8 @@ export default function HomeScreen() {
             onChangeCurrency={setCurrency}
             onChangeAmount={setAmount}
             onChangeAsset={setAsset}
-            walletAddress={wallets[0]?.address}
-            walletChain={wallets[0]?.chainType}
+            walletAddress={currentWallet?.address || ""}
+            walletChain={network}
           />
         </ThemedView>
       </ParallaxScrollView>

components/AmountInput/AmountInput.tsx

@@ -20,18 +20,34 @@ export const AmountInput = ({
 }: AmountInputProps) => {
   const textColor = COINBASE_BLUE;
 
-  const formatAmount = useCallback(
-    (amount: string) => {
-      const cleanAmount = amount.replace(/[^0-9.]/g, "");
-      const parts = cleanAmount.split(".");
-      if (parts.length > 2) return value;
-      if (parts[1]?.length > 2) {
-        return `${parts[0]}.${parts[1].slice(0, 2)}`;
-      }
-      return cleanAmount;
-    },
-    [value]
-  );
+  const formatAmount = useCallback((amount: string) => {
+    // Remove any non-digit and non-decimal characters
+    const cleanAmount = amount.replace(/[^0-9.]/g, "");
+
+    // Handle special cases
+    if (cleanAmount === "") return "";
+    if (cleanAmount === ".") return "0.";
+
+    // If input starts with "0" followed by a number, insert decimal point
+    if (cleanAmount.match(/^0[0-9]/)) {
+      return cleanAmount.replace(/^0([0-9])/, "0.$1");
+    }
+
+    // Split into integer and decimal parts
+    const parts = cleanAmount.split(".");
+
+    // Handle integer part - remove leading zeros unless it's just "0"
+    let integerPart = parts[0].replace(/^0+/, "") || "0";
+
+    // If there's a decimal part
+    if (parts.length > 1) {
+      // Take only first 2 decimal places
+      const decimalPart = parts[1].slice(0, 2);
+      return `${integerPart}.${decimalPart}`;
+    }
+
+    return integerPart;
+  }, []);
 
   const handleChangeText = (text: string) => {
     const formattedAmount = formatAmount(text);
@@ -46,12 +62,12 @@ export const AmountInput = ({
             {prefix}
           </ThemedText>
           <TextInput
+            inputMode="decimal"
             style={[styles.input, { color: textColor }]}
             value={value}
             onChangeText={handleChangeText}
             keyboardType="decimal-pad"
             maxLength={8}
-            selectTextOnFocus
             placeholder="0"
             placeholderTextColor={`${textColor}4D`}
           />

components/Button/Button.tsx

@@ -7,13 +7,25 @@ type ButtonProps = {
   onPress: () => void;
   variant?: "primary" | "danger";
   icon?: React.ReactNode;
+  disabled?: boolean;
 };
 
-const Button = ({ title, onPress, variant = "primary", icon }: ButtonProps) => {
+const Button = ({
+  title,
+  onPress,
+  variant = "primary",
+  icon,
+  disabled,
+}: ButtonProps) => {
   return (
     <TouchableOpacity
-      style={[styles.button, variant === "danger" && styles.dangerButton]}
+      style={[
+        styles.button,
+        variant === "danger" && styles.dangerButton,
+        disabled && styles.disabledButton,
+      ]}
       onPress={onPress}
+      disabled={disabled}
     >
       <View style={styles.content}>
         {icon}
@@ -43,6 +55,10 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "600",
   },
+  disabledButton: {
+    opacity: 0.5,
+    backgroundColor: "grey",
+  },
 });
 
 export default Button;

components/Dropdown/Dropdown.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import {
   FlatList,
   Image,
+  ImageSourcePropType,
   Modal,
   Pressable,
   StyleSheet,
@@ -16,6 +17,7 @@ type DropdownOption = {
   label: string;
   value: string;
   iconUrl?: string;
+  icon?: ImageSourcePropType;
 };
 
 type DropdownProps = {
@@ -48,9 +50,9 @@ export const Dropdown = ({
       }}
     >
       <View style={styles.optionContent}>
-        {option.iconUrl && (
+        {(option.iconUrl || option.icon) && (
           <Image
-            source={{ uri: option.iconUrl }}
+            source={option.icon || { uri: option.iconUrl }}
             style={styles.icon}
             resizeMode="contain"
           />
@@ -77,9 +79,9 @@ export const Dropdown = ({
         onPress={() => setIsOpen(true)}
       >
         <View style={styles.buttonContent}>
-          {selectedOption?.iconUrl && (
+          {(selectedOption?.iconUrl || selectedOption?.icon) && (
             <Image
-              source={{ uri: selectedOption.iconUrl }}
+              source={selectedOption.icon || { uri: selectedOption.iconUrl }}
               style={styles.icon}
               resizeMode="contain"
             />

components/Fund/Fund.tsx

@@ -55,6 +55,7 @@ export const Fund = ({
         title="Fund with Coinbase"
         onPress={handlePressFund}
         variant="primary"
+        disabled={Number(amount) === 0}
         icon={
           <MaterialIcons
             name="currency-exchange"

components/FundForm/FundForm.tsx

@@ -21,22 +21,22 @@ type FundFormProps = {
   currency: string;
   amount: string;
   asset: string;
+  walletAddress: string;
+  walletChain: string;
   onChangeCurrency: (value: string) => void;
   onChangeAmount: (value: string) => void;
   onChangeAsset: (value: string) => void;
-  walletAddress: string;
-  walletChain: string;
 };
 
 export const FundForm = ({
   currency,
   amount,
   asset,
+  walletAddress,
+  walletChain,
   onChangeCurrency,
   onChangeAmount,
   onChangeAsset,
-  walletAddress,
-  walletChain,
 }: FundFormProps) => {
   return (
     <View style={styles.container}>