Add pull to refresh and new design to Fiat Order Details view

app/components/UI/FiatOnRampAggregator/Views/OrderDetails.tsx

@@ -1,26 +1,23 @@
-import React, { useCallback, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { RefreshControl } from 'react-native';
 import ScreenLayout from '../components/ScreenLayout';
 import StyledButton from '../../StyledButton';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import OrderDetail from '../components/OrderDetails';
-import Account from '../components/Account';
 import { strings } from '../../../../../locales/i18n';
-import { makeOrderIdSelector } from '../../../../reducers/fiatOrders';
-import { useSelector } from 'react-redux';
+import {
+  makeOrderIdSelector,
+  updateFiatOrder,
+} from '../../../../reducers/fiatOrders';
+import { useDispatch, useSelector } from 'react-redux';
 import { getFiatOnRampAggNavbar } from '../../Navbar';
 import { useTheme } from '../../../../util/theme';
 import { ScrollView } from 'react-native-gesture-handler';
 import Routes from '../../../../constants/navigation/Routes';
-import { FiatOrder } from '../../FiatOrders';
+import { FiatOrder, processFiatOrder } from '../../FiatOrders';
 import useAnalytics from '../hooks/useAnalytics';
 import { Order } from '@consensys/on-ramp-sdk';
-
-const styles = StyleSheet.create({
-  screenLayout: {
-    paddingTop: 0,
-  },
-});
+import Logger from '../../../../util/Logger';
 
 const OrderDetails = () => {
   const trackEvent = useAnalytics();
@@ -38,6 +35,9 @@ const OrderDetails = () => {
   );
   const { colors } = useTheme();
   const navigation = useNavigation();
+  const dispatch = useDispatch();
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
   useEffect(() => {
     navigation.setOptions(
@@ -65,6 +65,27 @@ const OrderDetails = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [trackEvent]);
 
+  const dispatchUpdateFiatOrder = useCallback(
+    (updatedOrder) => {
+      dispatch(updateFiatOrder(updatedOrder));
+    },
+    [dispatch],
+  );
+
+  const handleOnRefresh = useCallback(async () => {
+    try {
+      setIsRefreshing(true);
+      await processFiatOrder(order, dispatchUpdateFiatOrder);
+    } catch (error) {
+      Logger.error(error as Error, {
+        message: 'FiatOrders::OrderDetails error while processing order',
+        order,
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [dispatchUpdateFiatOrder, order]);
+
   const handleMakeAnotherPurchase = useCallback(() => {
     navigation.goBack();
     navigation.navigate(Routes.FIAT_ON_RAMP_AGGREGATOR.ID);
@@ -76,12 +97,18 @@ const OrderDetails = () => {
 
   return (
     <ScreenLayout>
-      <ScrollView>
-        <ScreenLayout.Header>
-          <Account />
-        </ScreenLayout.Header>
+      <ScrollView
+        refreshControl={
+          <RefreshControl
+            colors={[colors.primary.default]}
+            tintColor={colors.icon.default}
+            refreshing={isRefreshing}
+            onRefresh={handleOnRefresh}
+          />
+        }
+      >
         <ScreenLayout.Body>
-          <ScreenLayout.Content style={styles.screenLayout}>
+          <ScreenLayout.Content>
             <OrderDetail
               order={order}
               provider={provider}
@@ -91,13 +118,11 @@ const OrderDetails = () => {
         </ScreenLayout.Body>
         <ScreenLayout.Footer>
           <ScreenLayout.Content>
-            <View>
-              <StyledButton type="confirm" onPress={handleMakeAnotherPurchase}>
-                {strings(
-                  'fiat_on_ramp_aggregator.order_details.another_purchase',
-                )}
-              </StyledButton>
-            </View>
+            <StyledButton type="confirm" onPress={handleMakeAnotherPurchase}>
+              {strings(
+                'fiat_on_ramp_aggregator.order_details.another_purchase',
+              )}
+            </StyledButton>
           </ScreenLayout.Content>
         </ScreenLayout.Footer>
       </ScrollView>

app/components/UI/FiatOnRampAggregator/components/Account.tsx

@@ -6,16 +6,13 @@ import BaseText from '../../../Base/Text';
 import { View, StyleSheet } from 'react-native';
 import { useTheme } from '../../../../util/theme';
 import { Colors } from '../../../../util/theme/models';
-
+import { colors as importedColors } from '../../../../styles/common';
 // TODO: Convert into typescript and correctly type
 const Text = BaseText as any;
 const Identicon = JSIdenticon as any;
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
-    selector: {
-      flexShrink: 1,
-    },
     accountText: {
       flexShrink: 1,
       marginVertical: 3,
@@ -31,9 +28,20 @@ const createStyles = (colors: Colors) =>
       justifyContent: 'center',
       flexShrink: 1,
     },
+    transparentContainer: {
+      backgroundColor: importedColors.transparent,
+      paddingVertical: 0,
+      paddingHorizontal: 0,
+    },
   });
 
-const Account = () => {
+const Account = ({
+  address,
+  transparent = false,
+}: {
+  address?: string;
+  transparent?: boolean;
+}) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const selectedAddress = useSelector(
@@ -45,11 +53,13 @@ const Account = () => {
       state.engine.backgroundState.PreferencesController.identities,
   );
   return (
-    <View style={styles.container}>
-      <Identicon diameter={15} address={selectedAddress} />
+    <View
+      style={[styles.container, transparent && styles.transparentContainer]}
+    >
+      <Identicon diameter={15} address={address || selectedAddress} />
       <Text style={styles.accountText} primary centered numberOfLines={1}>
-        {identities[selectedAddress]?.name} (
-        <EthereumAddress address={selectedAddress} type={'short'} />)
+        {identities[address || selectedAddress]?.name} (
+        <EthereumAddress address={address || selectedAddress} type={'short'} />)
       </Text>
     </View>
   );