Merge pull request #1250 from gabrielbazan7/ref/select-input-home

[REF] select input option when scanning from home
bitpay · Jul 11, 2024 · 1e5bebb · 1e5bebb
2 parents 360f013 + 70da214
commit 1e5bebb
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 15 deletions.
diff --git a/src/navigation/wallet/components/SendToAddress.tsx b/src/navigation/wallet/components/SendToAddress.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {
   ActiveOpacity,
   CtaContainer as _CtaContainer,
@@ -89,6 +89,7 @@ const SendToAddress = () => {
   const {keys} = useAppSelector(({WALLET}: RootState) => WALLET);
   const {rates} = useAppSelector(({RATE}) => RATE);
   const {
+    sendTo,
     recipientList,
     setRecipientListContext,
     setRecipientAmountContext,
@@ -238,6 +239,16 @@ const SendToAddress = () => {
     [wallet, setRecipientListContext, setRecipientAmountContext],
   );
 
+  useEffect(() => {
+    const checkAddressForSelectInputOption = async () => {
+      if (sendTo?.address) {
+        await sleep(1000);
+        validateData(sendTo.address);
+      }
+    };
+    checkAddressForSelectInputOption();
+  }, []);
+
   return (
     <>
       <SendToAddressContainer>

diff --git a/src/navigation/wallet/screens/AmountScreen.tsx b/src/navigation/wallet/screens/AmountScreen.tsx
@@ -8,6 +8,14 @@ import {HeaderRightContainer} from '../../../components/styled/Containers';
 import {WalletScreens, WalletGroupParamList} from '../WalletGroup';
 import type {HeaderTitleProps} from '@react-navigation/elements';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
+import {Wallet} from '../../../store/wallet/wallet.models';
+import {IsUtxoCoin} from '../../../store/wallet/utils/currency';
+import OptionsSheet, {
+  Option,
+} from '../../../navigation/wallet/components/OptionsSheet';
+import WalletIcons from '../../../navigation/wallet/components/WalletIcons';
+import Settings from '../../../components/settings/Settings';
+import {sleep} from '../../../utils/helper-methods';
 
 const HeaderContainer = styled(HeaderRightContainer)`
   justify-content: center;
@@ -40,6 +48,13 @@ export interface AmountScreenParamList {
     | string
     | ((props: HeaderTitleProps) => React.ReactNode)
     | undefined;
+  wallet: Wallet;
+  sendTo?: {
+    name: string | undefined;
+    type: string;
+    address: string;
+    destinationTag: number | undefined;
+  };
 }
 
 const AmountModalContainerHOC = gestureHandlerRootHOC(props => {
@@ -51,8 +66,11 @@ const AmountScreen: React.VFC<
 > = ({navigation, route}) => {
   const {t} = useTranslation();
   const [buttonState, setButtonState] = useState<ButtonState>();
+  const [showWalletOptions, setShowWalletOptions] = useState(false);
 
   const {
+    wallet,
+    sendTo,
     onAmountSelected,
     sendMaxEnabled,
     cryptoCurrencyAbbreviation,
@@ -70,21 +88,51 @@ const AmountScreen: React.VFC<
   const onSendMaxPressedRef = useRef(onSendMaxPressed);
   onSendMaxPressedRef.current = onSendMaxPressed;
 
+  const getHeaderRight = () => (
+    <HeaderContainer style={{flexDirection: 'row'}}>
+      <Button
+        buttonType="pill"
+        buttonStyle="cancel"
+        onPress={() => onSendMaxPressedRef.current()}
+        style={{marginRight: chain && IsUtxoCoin(chain) && wallet ? 10 : 0}}>
+        {t('Send Max')}
+      </Button>
+      {chain && IsUtxoCoin(chain) && wallet && sendTo?.address && (
+        <Settings
+          onPress={() => {
+            setShowWalletOptions(true);
+          }}
+        />
+      )}
+    </HeaderContainer>
+  );
+
+  const assetOptions: Array<Option> =
+    chain && IsUtxoCoin(chain) && wallet && sendTo?.address
+      ? [
+          {
+            img: <WalletIcons.SelectInputs />,
+            title: t('Select Inputs for this Transaction'),
+            description: t(
+              "Choose which inputs you'd like to use to send crypto.",
+            ),
+            onPress: async () => {
+              await sleep(500);
+              navigation.navigate('SendToOptions', {
+                title: t('Select Inputs'),
+                wallet,
+                sendTo,
+                context: 'selectInputs',
+              });
+            },
+          },
+        ]
+      : [];
+
   useLayoutEffect(() => {
     navigation.setOptions({
       ...(headerTitle && {headerTitle}),
-      headerRight: sendMaxEnabled
-        ? () => (
-            <HeaderContainer>
-              <Button
-                buttonType="pill"
-                buttonStyle="cancel"
-                onPress={() => onSendMaxPressedRef.current()}>
-                {t('Send Max')}
-              </Button>
-            </HeaderContainer>
-          )
-        : undefined,
+      headerRight: sendMaxEnabled ? getHeaderRight : undefined,
     });
   }, [navigation, t, sendMaxEnabled, headerTitle]);
 
@@ -103,6 +151,11 @@ const AmountScreen: React.VFC<
             onAmountSelected?.(amt.toString(), setButtonState);
           }}
         />
+        <OptionsSheet
+          isVisible={showWalletOptions}
+          closeModal={() => setShowWalletOptions(false)}
+          options={assetOptions}
+        />
       </WalletScreenContainer>
     </AmountModalContainerHOC>
   );

diff --git a/src/navigation/wallet/screens/GlobalSelect.tsx b/src/navigation/wallet/screens/GlobalSelect.tsx
@@ -805,7 +805,7 @@ const GlobalSelect: React.FC<GlobalSelectScreenProps | GlobalSelectProps> = ({
                   tokenAddress,
                   network,
                   chain,
-                  credentials: {walletName: fallbackName},
+                  credentials: {walletName: fallbackName, account},
                   walletName,
                 } = wallet;
                 return merge(cloneDeep(wallet), {
@@ -848,6 +848,7 @@ const GlobalSelect: React.FC<GlobalSelectScreenProps | GlobalSelectProps> = ({
                   currencyAbbreviation: currencyAbbreviation.toUpperCase(),
                   network,
                   walletName: walletName || fallbackName,
+                  account,
                 });
               }),
           };
@@ -887,6 +888,8 @@ const GlobalSelect: React.FC<GlobalSelectScreenProps | GlobalSelectProps> = ({
 
           if (!amount) {
             navigation.navigate(WalletScreens.AMOUNT, {
+              wallet,
+              sendTo,
               sendMaxEnabled: ['contact', 'scanner'].includes(context),
               cryptoCurrencyAbbreviation:
                 wallet.currencyAbbreviation.toUpperCase(),

diff --git a/src/navigation/wallet/screens/SendToOptions.tsx b/src/navigation/wallet/screens/SendToOptions.tsx
@@ -36,6 +36,12 @@ export type SendToOptionsParamList = {
   title: string;
   wallet: Wallet;
   context: string;
+  sendTo?: {
+    name: string | undefined;
+    type: string;
+    address: string;
+    destinationTag: number | undefined;
+  };
 };
 
 export const RecipientRowContainer = styled.View`
@@ -149,6 +155,12 @@ interface SendToOptionsContextProps {
   ) => void;
   goToConfirmView: () => void;
   goToSelectInputsView: (recipient: Recipient) => void;
+  sendTo?: {
+    name: string | undefined;
+    type: string;
+    address: string;
+    destinationTag: number | undefined;
+  };
 }
 
 export const SendToOptionsContext =
@@ -162,7 +174,7 @@ const SendToOptions = () => {
   const Tab = createMaterialTopTabNavigator();
   const navigation = useNavigation();
   const {params} = useRoute<RouteProp<WalletGroupParamList, 'SendToOptions'>>();
-  const {wallet} = params;
+  const {wallet, sendTo} = params;
   const [recipientList, setRecipientList] = useState<Recipient[]>([]);
   const [recipientAmount, setRecipientAmount] = useState<{
     showModal: boolean;
@@ -266,6 +278,7 @@ const SendToOptions = () => {
   return (
     <SendToOptionsContext.Provider
       value={{
+        sendTo,
         recipientList,
         setRecipientListContext,
         setRecipientAmountContext,