fix details and add donates page

app/(tabs)/_layout.tsx

@@ -66,10 +66,10 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="settings"
+        name="donates"
         options={{
-          title: 'Settings',
-          tabBarIcon: ({ color }) => <TabBarIcon name="cogs" color={color} />,
+          title: 'Donates',
+          tabBarIcon: ({ color }) => <TabBarIcon name="dollar" color={color} />,
           headerTransparent: true,
           headerBackground: () => (
             <BlurView tint={colorScheme} intensity={100} style={StyleSheet.absoluteFill} />

app/(tabs)/donates.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, Alert, Image, Linking, Clipboard } from 'react-native';
+import { Text, View } from '../../components/Themed';
+
+export default function TabDonatesScreen() {
+
+  const showPayPalDonation = () => {
+    Linking.openURL('https://www.paypal.com/paypalme/shawwalmuhammad');
+  };
+
+  const showMetaMaskAddress = () => {
+    const walletAddress = '0x2785b6206ADe4B688ADFD6ECB206f56997eAd85D';
+
+    Alert.alert(
+      'MetaMask Wallet Address',
+      `Your MetaMask wallet address: ${walletAddress}`,
+      [
+        {
+          text: 'Copy Address',
+          onPress: async () => {
+            await Clipboard.setString(walletAddress);
+            Alert.alert('Address Copied', 'Your MetaMask wallet address has been copied to the clipboard.');
+          },
+        },
+        { text: 'OK', onPress: () => { } },
+      ]
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.wrapper}>
+        <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+        <Text>Love the Pokedex App? Support its growth by making a donation! Your contribution ensures more features, better data, and a seamless app experience.
+          Your Perks:</Text>
+        <View style={styles.textLeft}>
+          <Text>⭐ VIP Supporters Page</Text>
+          <Text>🚀 Your Name Displayed</Text>
+          <Text>💌 Add a Custom Message or Social Media Link</Text>
+        </View>
+
+        <Text>Ready to be a VIP Supporter? Donate now!</Text>
+
+        <View style={styles.donationRow}>
+          <TouchableOpacity style={styles.payPalButton} onPress={showPayPalDonation}>
+            <Image source={require('../../assets/images/paypal.png')} style={styles.logo} />
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.metaMaskButton} onPress={showMetaMaskAddress}>
+            <Image source={require('../../assets/images/metamask.png')} style={styles.logo} />
+          </TouchableOpacity>
+        </View>
+        <Text>Thank you for making the Pokédex App awesome!</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  wrapper: {
+    maxWidth: 500,
+    minWidth: 300
+  },
+  donationRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  textLeft: {
+    justifyContent: 'flex-start',
+    paddingVertical: 10,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  separator: {
+    marginVertical: 16,
+    height: 1,
+    width: '80%',
+  },
+  clearButton: {
+    backgroundColor: '#FF3B30',
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  clearButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  payPalButton: {
+    backgroundColor: '#0070BA', // PayPal blue color
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 16,
+    marginRight: 13,
+  },
+  metaMaskButton: {
+    backgroundColor: '#E2761B', // MetaMask orange color
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginLeft: 8,
+  },
+  logo: {
+    width: 100,
+    resizeMode: 'contain',
+    height: 24,
+  },
+});

app/(tabs)/favorites.tsx

@@ -1,9 +1,53 @@
 import React from 'react';
-import { useRecoilValue } from 'recoil';
-import { favoritePokemonState } from '../../store/globalState'; // Update the import path accordingly
-import PokemonListing from '../../components/PokemonListing'; // Import your PokemonListing component
+import { favoritePokemonState } from '../../store/globalState';
+import PokemonListing from '../../components/PokemonListing';
+import { Alert, Pressable, useColorScheme } from 'react-native';
+import { useRecoilState } from 'recoil';
+import { Stack } from 'expo-router';
+import Colors from '../../constants/Colors';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
 
 export default function TabFavoriteScreen() {
-  const favoritePokemon = useRecoilValue(favoritePokemonState);
-  return <PokemonListing data={favoritePokemon}/>
+  const colorScheme = useColorScheme();
+  const [favoritePokemon, setFavoritePokemon] = useRecoilState(favoritePokemonState);
+  const clearFavorites = () => {
+    Alert.alert(
+      'Clear All Favorites',
+      'Are you sure you want to delete all favorite Pokemon?',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'OK',
+          onPress: () => {
+            setFavoritePokemon([]);
+            Alert.alert('Favorites Cleared', 'All favorite Pokemon have been cleared.');
+          },
+        },
+      ]
+    );
+  };
+
+  return <>
+    <Stack.Screen
+      options={{
+        // @ts-ignore
+        headerRight: () => (
+          <Pressable onPress={() => clearFavorites()}>
+            {({ pressed }) => (
+              <FontAwesome
+                name="remove"
+                size={25}
+                color={Colors[colorScheme ?? 'light'].text}
+                style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
+              />
+            )}
+          </Pressable>
+        ),
+      }}
+    />
+    <PokemonListing data={favoritePokemon} />
+  </>
 }

app/pokemonDetails.tsx

@@ -109,7 +109,7 @@ export default function PokemonDetailsScreen() {
 
   return (
     <View style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scroll}>
+      <ScrollView contentContainerStyle={styles.scroll} showsVerticalScrollIndicator={false}>
         <View style={{ ...styles.imageBg, backgroundColor: TypeColors[dominantType] }} />
         <Image
           defaultSource={require('./../assets/images/pokeball.png')}