fea: donate to orgs

Author: sahilkakwani9

components/OffsetCard.tsx

@@ -6,18 +6,24 @@ import {NonprofitsSheet} from './bottomSheet/NonProfitsSheet';
 
 const OffsetCard = () => {
   const [visible, setVisible] = useState(false);
+  const [TransactionSheetVisible, setTransactionSheetVisible] = useState(false);
 
   const toggleBottomNavigationView = () => {
     setVisible(!visible);
   };
+  const toggleTransactionView = () => {
+    setTransactionSheetVisible(!TransactionSheetVisible);
+  };
   return (
     <View style={styles.offsetBox}>
       <View style={styles.treeContainer}>
         <Text style={styles.tree}>🌲</Text>
       </View>
       <View style={styles.offsetContainer}>
         <Text style={styles.offsetText}>Your Footprint is reducing 🔥</Text>
-        <TouchableOpacity style={styles.button} onPress={toggleBottomNavigationView}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={toggleBottomNavigationView}>
           <Text style={styles.txButton}>Offset</Text>
         </TouchableOpacity>
 

components/bottomSheet/NonProfitsSheet.tsx

@@ -1,21 +1,28 @@
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 import {useTransactionStore} from '../../store/transaction_store';
 import {useEffect} from 'react';
+import {Image} from 'react-native';
+import {TouchableOpacity} from 'react-native';
 
 export const NonprofitsSheet: React.FC = () => {
   const {changeOrgNonProfits, fetchNonProfits} = useTransactionStore();
 
   useEffect(() => {
     fetchNonProfits();
-  });
+  }, []);
 
   const renderItem = ({item}: any) => {
-    return <View>
-
-        <Text>
-
-        </Text>
-    </View>;
+    return (
+      <TouchableOpacity style={styles.cardContainer}>
+        <View style={styles.logoContainer}>
+          <Image source={{uri: item.icon_url}} style={styles.logo} />
+        </View>
+        <View>
+          <Text style={styles.orgTitle}>{item.name}</Text>
+          {/* <Text style={styles.orgSubTitle}>{item.solanaAddress}</Text> */}
+        </View>
+      </TouchableOpacity>
+    );
   };
 
   return (
@@ -42,9 +49,41 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
   },
   title: {
-    fontSize: 20,
+    fontSize: 24,
     color: 'black',
     fontFamily: 'Rubik-Bold',
-    marginBottom: 12,
+    paddingTop: 30,
+    paddingBottom: 10,
+    textAlign: 'center',
+    // marginBottom: 12,
+  },
+  logo: {
+    height: '100%',
+    width: '100%',
+    borderRadius: 10,
+  },
+  logoContainer: {
+    height: 48,
+    width: 48,
+  },
+  cardContainer: {
+    flexDirection: 'row',
+    gap: 12,
+    paddingLeft: 16,
+    paddingRight: 70,
+    // justifyContent: '',
+    marginVertical: 8,
+    alignItems: 'center',
+  },
+  orgTitle: {
+    color: 'black',
+    fontSize: 18,
+    fontFamily: 'Rubik-SemiBold',
+  },
+  orgSubTitle: {
+    color: 'black',
+    fontSize: 12,
+    fontFamily: 'Rubik-Regular',
+    marginTop: -6,
   },
 });

screens/Home.tsx

@@ -51,7 +51,7 @@ const Home = () => {
         visible={visible}
         toggleBottomNavigationView={toggleBottomNavigationView}
         bottomsheetChild={
-          <SendTransaction toggleNFTSheetView={toggleNFTSheet} />
+          <SendTransaction toggleNFTSheetView={toggleNFTSheet} address="" />
         }
       />
       <NFTSheet

store/transaction_store.ts

@@ -95,7 +95,7 @@ export const useTransactionStore = create<ITransactionStore>((set, get) => ({
       changeOrgNonProfits: response,
     });
 
-    console.log({response});
+    console.log(response);
   },
 }));