Gift card improvements

src/navigation/tabs/shop/ShopHome.tsx

@@ -1,7 +1,7 @@
 import debounce from 'lodash.debounce';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styled from 'styled-components/native';
-import {ScrollView} from 'react-native';
+import {Keyboard, ScrollView} from 'react-native';
 import GiftCardCatalog from './components/GiftCardCatalog';
 import {
   getGiftCardConfigList,
@@ -236,7 +236,11 @@ const ShopHome: React.FC<
 
   return (
     <ShopContainer>
-      <ScrollView ref={scrollViewRef} keyboardDismissMode="on-drag">
+      <ScrollView
+        ref={scrollViewRef}
+        keyboardDismissMode="on-drag"
+        keyboardShouldPersistTaps="handled"
+        onScrollBeginDrag={Keyboard.dismiss}>
         <ShopInnerContainer>
           <Tab.Navigator
             style={{

src/navigation/tabs/shop/gift-card/GiftCardStack.tsx

@@ -19,6 +19,9 @@ import Confirm, {
   GiftCardConfirmParamList,
 } from '../../../wallet/screens/send/confirm/GiftCardConfirm';
 import {useTranslation} from 'react-i18next';
+import PayProConfirmTwoFactor, {
+  PayProConfirmTwoFactorParamList,
+} from '../../../wallet/screens/send/confirm/PayProConfirmTwoFactor';
 
 export type GiftCardStackParamList = {
   BuyGiftCard: {cardConfig: CardConfig};
@@ -42,6 +45,7 @@ export type GiftCardStackParamList = {
   GiftCardDetails: {cardConfig: CardConfig; giftCard: GiftCard};
   GiftCardAmount: AmountParamList;
   GiftCardConfirm: GiftCardConfirmParamList;
+  GiftCardConfirmTwoFactor: PayProConfirmTwoFactorParamList;
 };
 
 export enum GiftCardScreens {
@@ -52,6 +56,7 @@ export enum GiftCardScreens {
   GIFT_CARD_DETAILS_MODAL = 'GiftCardDetailsModal',
   GIFT_CARD_AMOUNT = 'GiftCardAmount',
   GIFT_CARD_CONFIRM = 'GiftCardConfirm',
+  GIFT_CARD_CONFIRM_TWO_FACTOR = 'GiftCardConfirmTwoFactor',
 }
 
 const GiftCards = createStackNavigator<GiftCardStackParamList>();
@@ -101,6 +106,15 @@ const GiftCardStack = () => {
           gestureEnabled: false,
         }}
       />
+      <GiftCards.Screen
+        options={{
+          headerTitle: () => (
+            <HeaderTitle>{t('Two-Step Verification')}</HeaderTitle>
+          ),
+        }}
+        name={GiftCardScreens.GIFT_CARD_CONFIRM_TWO_FACTOR}
+        component={PayProConfirmTwoFactor}
+      />
     </GiftCards.Navigator>
   );
 };

src/navigation/wallet/WalletStack.tsx

@@ -23,7 +23,6 @@ import {HeaderTitle} from '../../components/styled/Text';
 import CreateEncryptionPassword from './screens/CreateEncryptionPassword';
 import {
   Key,
-  TransactionProposal,
   Wallet as WalletModel,
   _Credentials,
 } from '../../store/wallet/wallet.models';
@@ -66,7 +65,9 @@ import PriceCharts, {PriceChartsParamList} from './screens/PriceCharts';
 import ClearEncryptPassword, {
   ClearEncryptPasswordParamList,
 } from './screens/ClearEncryptPassword';
-import PayProConfirmTwoFactor from './screens/send/confirm/PayProConfirmTwoFactor';
+import PayProConfirmTwoFactor, {
+  PayProConfirmTwoFactorParamList,
+} from './screens/send/confirm/PayProConfirmTwoFactor';
 import {useTranslation} from 'react-i18next';
 
 export type WalletStackParamList = {
@@ -103,7 +104,7 @@ export type WalletStackParamList = {
   Confirm: ConfirmParamList;
   DebitCardConfirm: DebitCardConfirmParamList;
   PayProConfirm: PayProConfirmParamList;
-  PayProConfirmTwoFactor: {onSubmit: (code: string) => Promise<void>};
+  PayProConfirmTwoFactor: PayProConfirmTwoFactorParamList;
   CreateMultisig: CreateMultisigProps;
   JoinMultisig: JoinMultisigParamList | undefined;
   Copayers: {wallet: WalletModel; status: _Credentials};

src/navigation/wallet/screens/send/confirm/GiftCardConfirm.tsx

@@ -2,7 +2,6 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {useNavigation, useRoute} from '@react-navigation/native';
 import {Hr} from '../../../../../components/styled/Containers';
 import {RouteProp, StackActions} from '@react-navigation/core';
-import {WalletScreens, WalletStackParamList} from '../../../WalletStack';
 import {useAppDispatch, useAppSelector} from '../../../../../utils/hooks';
 import {H4} from '../../../../../components/styled/Text';
 import {
@@ -56,6 +55,10 @@ import {
 import {startGetRates} from '../../../../../store/wallet/effects';
 import {coinbasePayInvoice} from '../../../../../store/coinbase';
 import {useTranslation} from 'react-i18next';
+import {
+  GiftCardScreens,
+  GiftCardStackParamList,
+} from '../../../../tabs/shop/gift-card/GiftCardStack';
 
 export interface GiftCardConfirmParamList {
   amount: number;
@@ -95,7 +98,8 @@ const Confirm = () => {
   const {t} = useTranslation();
   const dispatch = useAppDispatch();
   const navigation = useNavigation();
-  const route = useRoute<RouteProp<WalletStackParamList, 'GiftCardConfirm'>>();
+  const route =
+    useRoute<RouteProp<GiftCardStackParamList, 'GiftCardConfirm'>>();
   const {
     amount,
     cardConfig,
@@ -364,8 +368,8 @@ const Confirm = () => {
   };
 
   const request2FA = async () => {
-    navigation.navigate('Wallet', {
-      screen: WalletScreens.PAY_PRO_CONFIRM_TWO_FACTOR,
+    navigation.navigate('GiftCard', {
+      screen: GiftCardScreens.GIFT_CARD_CONFIRM_TWO_FACTOR,
       params: {
         onSubmit: async twoFactorCode => {
           try {

src/navigation/wallet/screens/send/confirm/PayProConfirmTwoFactor.tsx

@@ -21,6 +21,10 @@ const PrimaryActionContainer = styled.View`
   margin-bottom: 20px;
 `;
 
+export interface PayProConfirmTwoFactorParamList {
+  onSubmit: (code: string) => Promise<void>;
+}
+
 interface TwoFactorCodeFormValues {
   code: string;
 }