Merge pull request #856 from ambrosus/AMB-5085

fix(swap): update render bottom sheet method & text-or-spinner component render loadingLabel optional
ambrosus · Dec 6, 2024 · d056968 · d056968
2 parents 7bcbeac + da6d10a
commit d056968
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 32 deletions.
diff --git a/src/components/composite/TextOrSpinner/index.tsx b/src/components/composite/TextOrSpinner/index.tsx
@@ -6,7 +6,7 @@ import { scale } from '@utils/scaling';
 
 interface TextOrSpinnerProps {
   loading: boolean;
-  loadingLabel: string;
+  loadingLabel: string | undefined;
   label: string;
   styles?: Partial<{
     loading: Partial<{
@@ -44,14 +44,18 @@ export const TextOrSpinner = ({
       {loading ? (
         <Row alignItems="center">
           <Spinner size="xs" />
-          <Spacer horizontal value={scale(8)} />
-          <Text
-            fontSize={styles.loading?.fontSize}
-            fontFamily={styles.loading?.fontFamily}
-            color={styles.loading?.color}
-          >
-            {loadingLabel}
-          </Text>
+          {loadingLabel && (
+            <>
+              <Spacer horizontal value={scale(8)} />
+              <Text
+                fontSize={styles.loading?.fontSize}
+                fontFamily={styles.loading?.fontFamily}
+                color={styles.loading?.color}
+              >
+                {loadingLabel}
+              </Text>
+            </>
+          )}
         </Row>
       ) : (
         <Text

diff --git a/src/features/swap/components/modular/review-swap-button/index.tsx b/src/features/swap/components/modular/review-swap-button/index.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { PrimaryButton } from '@components/modular';
-import { Spinner, Text } from '@components/base';
 import { COLORS } from '@constants/colors';
 import { useSwapContextSelector } from '@features/swap/context';
 import {
@@ -11,6 +10,23 @@ import {
 } from '@features/swap/lib/hooks';
 import { buttonActionString } from '@features/swap/utils/button-action.string';
 import { cssShadowToNative } from '@utils/css-shadow-to-native';
+import { TextOrSpinner } from '@components/composite';
+import { FontFamily } from '@components/base/Text/Text.types';
+
+function buttonStyles(disabled: boolean) {
+  return {
+    active: {
+      fontSize: 17,
+      fontFamily: 'Inter_600SemiBold' as FontFamily,
+      color: disabled ? COLORS.brand75 : COLORS.neutral0
+    },
+    loading: {
+      fontSize: 17,
+      fontFamily: 'Inter_600SemiBold' as FontFamily,
+      color: COLORS.brand75
+    }
+  };
+}
 
 export const ReviewSwapButton = () => {
   const { t } = useTranslation();
@@ -77,17 +93,12 @@ export const ReviewSwapButton = () => {
       style={buttonShadow}
       onPress={onResolveBottomSheetDataPress}
     >
-      {isProcessingBottomSheet ? (
-        <Spinner />
-      ) : (
-        <Text
-          fontSize={17}
-          fontFamily="Inter_600SemiBold"
-          color={disabled ? COLORS.brand75 : COLORS.neutral0}
-        >
-          {swapButtonString}
-        </Text>
-      )}
+      <TextOrSpinner
+        label={swapButtonString}
+        loadingLabel={undefined}
+        loading={isProcessingBottomSheet}
+        styles={buttonStyles(disabled)}
+      />
     </PrimaryButton>
   );
 };
diff --git a/src/features/swap/components/modular/submit-swap-actions/index.tsx b/src/features/swap/components/modular/submit-swap-actions/index.tsx
@@ -44,6 +44,7 @@ export const SubmitSwapActions = () => {
         const tx = await swapTokens();
 
         if (!tx) {
+          onChangeBottomSheetSwapStatus(BottomSheetStatus.ERROR);
           sendFirebaseEvent(CustomAppEvents.swap_error, {
             swapError: 'swapTokens-tx not found'
           });
@@ -52,6 +53,7 @@ export const SubmitSwapActions = () => {
           onChangeBottomSheetSwapStatus(BottomSheetStatus.SUCCESS);
         }
       } catch (error) {
+        onChangeBottomSheetSwapStatus(BottomSheetStatus.ERROR);
         sendFirebaseEvent(CustomAppEvents.swap_error, {
           swapError: JSON.stringify(
             (error as { message: string })?.message ?? JSON.stringify(error)

diff --git a/src/features/swap/components/templates/bottom-sheet-preview-swap/components/error/index.tsx b/src/features/swap/components/templates/bottom-sheet-preview-swap/components/error/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useCallback } from 'react';
+import { InteractionManager, View } from 'react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
 import { styles } from './styles';
@@ -21,6 +21,13 @@ export const ErrorSwapView = () => {
   const { onReviewSwapDismiss, onChangeBottomSheetSwapStatus } =
     useSwapBottomSheetHandler();
 
+  const onRepeatTransaction = useCallback(() => {
+    onReviewSwapDismiss();
+    InteractionManager.runAfterInteractions(() =>
+      onChangeBottomSheetSwapStatus(BottomSheetStatus.PREVIEW)
+    );
+  }, [onChangeBottomSheetSwapStatus, onReviewSwapDismiss]);
+
   const onNavigateToWallets = () => {
     onChangeBottomSheetSwapStatus(BottomSheetStatus.PREVIEW);
     _delayNavigation(onReviewSwapDismiss, () =>
@@ -55,7 +62,7 @@ export const ErrorSwapView = () => {
           style={{
             ...cssShadowToNative('0px 0px 12px 0px rgba(53, 104, 221, 0.50)')
           }}
-          onPress={onReviewSwapDismiss}
+          onPress={onRepeatTransaction}
         >
           <Text
             fontFamily="Inter_600SemiBold"

diff --git a/src/features/swap/components/templates/bottom-sheet-preview-swap/index.tsx b/src/features/swap/components/templates/bottom-sheet-preview-swap/index.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 import { styles } from './styles';
 import { useForwardedRef } from '@hooks';
@@ -8,20 +8,57 @@ import { scale } from '@utils/scaling';
 import { useSwapContextSelector } from '@features/swap/context';
 import { RenderBottomSheetStatusView } from './components/render';
 import { useTranslation } from 'react-i18next';
+import { useSwapBottomSheetHandler } from '@features/swap/lib/hooks';
+import { BottomSheetStatus } from '@features/swap/types';
+import { _delayNavigation } from '@utils';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import { HomeNavigationProp } from '@appTypes';
 
 export const BottomSheetPreviewSwap = forwardRef<BottomSheetRef, unknown>(
   (_, ref) => {
     const { t } = useTranslation();
+    const navigation: HomeNavigationProp = useNavigation();
     const bottomSheetRef = useForwardedRef(ref);
     const { isProcessingSwap } = useSwapContextSelector();
+    const {
+      bottomSheetSwapStatus,
+      onReviewSwapDismiss,
+      onChangeBottomSheetSwapStatus
+    } = useSwapBottomSheetHandler();
+
+    const isPreview = useMemo(
+      () => bottomSheetSwapStatus === BottomSheetStatus.PREVIEW,
+      [bottomSheetSwapStatus]
+    );
+
+    const onSuccessBottomSheetDismiss = useCallback(() => {
+      onChangeBottomSheetSwapStatus(BottomSheetStatus.PREVIEW);
+      if (bottomSheetSwapStatus === BottomSheetStatus.SUCCESS) {
+        _delayNavigation(onReviewSwapDismiss, () =>
+          navigation.dispatch(
+            CommonActions.reset({
+              index: 0,
+              routes: [{ name: 'HomeScreen' }]
+            })
+          )
+        );
+      }
+    }, [
+      bottomSheetSwapStatus,
+      navigation,
+      onChangeBottomSheetSwapStatus,
+      onReviewSwapDismiss
+    ]);
 
     return (
       <BottomSheet
-        title={t('common.review')}
+        ref={bottomSheetRef}
+        title={isPreview ? t('common.review') : undefined}
         swiperIconVisible={false}
         closeOnBackPress={!isProcessingSwap}
+        onBackdropPress={onSuccessBottomSheetDismiss}
+        onCustomCrossPress={onSuccessBottomSheetDismiss}
         swipingEnabled={false}
-        ref={bottomSheetRef}
       >
         <View style={styles.container}>
           <RenderBottomSheetStatusView />

diff --git a/src/features/swap/lib/hooks/use-swap-bottom-sheet-handler.ts b/src/features/swap/lib/hooks/use-swap-bottom-sheet-handler.ts
@@ -19,6 +19,11 @@ export function useSwapBottomSheetHandler() {
 
   const { fetchAllBalances } = useSwapAllBalances();
 
+  const onChangeBottomSheetSwapStatus = useCallback(
+    (status: BottomSheetStatus) => setBottomSheetSwapStatus(status),
+    [setBottomSheetSwapStatus]
+  );
+
   const onShowBottomSheetByKey = useCallback(
     (key: SelectedTokensKeys) => {
       Keyboard.dismiss();
@@ -55,11 +60,6 @@ export function useSwapBottomSheetHandler() {
     bottomSheetPreviewSwapRef.current?.dismiss();
   }, [bottomSheetPreviewSwapRef]);
 
-  const onChangeBottomSheetSwapStatus = useCallback(
-    (status: BottomSheetStatus) => setBottomSheetSwapStatus(status),
-    [setBottomSheetSwapStatus]
-  );
-
   return {
     onDismissBottomSheetByKey,
     onShowBottomSheetByKey,