Speed up Tap To Pay by over 30 seconds!

App.tsx

@@ -2,6 +2,7 @@ import "expo-dev-client";
 
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { LinkingOptions, NavigationContainer } from "@react-navigation/native";
+import { useStripeTerminal } from "@stripe/stripe-terminal-react-native";
 import { useFonts } from "expo-font";
 import * as Linking from "expo-linking";
 import * as SecureStorage from "expo-secure-store";
@@ -62,7 +63,8 @@ export default function App() {
   const [token, setToken] = useState<string | null>(null);
   const hcb = useClient(token);
   const scheme = useColorScheme();
-
+  useStripeTerminal()
+
   const fetcher = useCallback(
     async (url: string, options: any) => {
       try {

src/components/Transaction.tsx

@@ -3,7 +3,7 @@ import { faPaypal } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useTheme } from "@react-navigation/native";
 import { LinearGradient } from "expo-linear-gradient";
-import Icon from "hackclub-icons-rn";
+import Icon from "@hackclub/hackclub-icons-rn";
 import { memo } from "react";
 import { View, Text, ViewProps, StyleSheet } from "react-native";
 import { match } from "ts-pattern";

src/pages/index.tsx

@@ -242,7 +242,8 @@ export default function App({ navigation }: Props) {
     for (const org of organizations || []) {
       preload(`organizations/${org.id}`, fetcher!);
     }
-  }, []);
+  }), [];
+
 
   const onRefresh = () => {
     reloadOrganizations();

src/pages/organization/Donation.tsx

@@ -233,6 +233,7 @@ function PageContent({ orgId, orgName, navigation }: any) {
           donation: "true"
         },
         statementDescriptor: `HCB* ${orgName || "DONATION"}`.substring(0, 22),
+        receiptEmail: email,
       })
 
       if (error) {
@@ -435,19 +436,21 @@ function PageContent({ orgId, orgName, navigation }: any) {
       <View style={{
         flexDirection: "column",
         display: "flex",
-        alignItems: "start",
-        justifyContent: "center",
+        alignItems: "flex-start",
+        justifyContent: "flex-start",
         marginBottom: 10,
 
       }}>
 
         <View style={{
           flexDirection: "row",
           alignItems: "center",
+          justifyContent: "flex-start",
           gap: 20
         }}>
-          <Text style={{ color: colors.text, fontSize: 20 }}>Name</Text>
-
+          <View style={{ flexBasis: 55 }}>
+            <Text style={{ color: colors.text, fontSize: 20 }}>Name</Text>
+          </View>
           <TextInput
             style={{
               color: colors.text,
@@ -479,11 +482,13 @@ function PageContent({ orgId, orgName, navigation }: any) {
         <View style={{
           flexDirection: "row",
           alignItems: "center",
+          justifyContent: "flex-start",
           gap: 20,
           marginTop: 10
         }}>
-          <Text style={{ color: colors.text, fontSize: 20 }}>Email</Text>
-
+          <View style={{ flexBasis: 55 }}>
+            <Text style={{ color: colors.text, fontSize: 20 }}>Email</Text>
+          </View>
           <TextInput
             style={{
               color: colors.text,
@@ -519,6 +524,10 @@ function PageContent({ orgId, orgName, navigation }: any) {
       {connectedReader ? (
         <Button
           onPress={async () => {
+            if (!email.includes("@") || !email.includes(".")) {
+              Alert.alert("Please provide a valid email address")
+              return
+            }
             const donation_id = await createDonation();
             await paymentIntent({ donation_id });
           }}