start of chaning receive option page

App.tsx

@@ -73,8 +73,12 @@ import {
   FaucetSettingsPage,
 } from './app/components/admin/homeComponents/faucet';
 import globalOnBreezEvent from './app/functions/globalOnBreezEvent';
-import {EditReceivePaymentInformation} from './app/components/admin/homeComponents/recieveBitcoin';
-import {ViewInProgressSwap} from './app/components/admin/homeComponents/receiveBitcoinNew';
+
+import {
+  EditReceivePaymentInformation,
+  ViewInProgressSwap,
+} from './app/components/admin/homeComponents/receiveBitcoinNew';
+import SwitchReceiveOptionPage from './app/components/admin/homeComponents/receiveBitcoinNew/switchReceiveOptionPage';
 
 const BACKGROUND_NOTIFICATION_TASK = 'BACKGROUND-NOTIFICATION-TASK';
 
@@ -181,6 +185,10 @@ function ResetStack(): JSX.Element | null {
               name="EditReceivePaymentInformation"
               component={EditReceivePaymentInformation}
             />
+            <Stack.Screen
+              name="SwitchReceiveOptionPage"
+              component={SwitchReceiveOptionPage}
+            />
           </Stack.Group>
           <Stack.Screen name="ContactsPage" component={ContactsPage} />
           <Stack.Screen name="ViewAllTxPage" component={ViewAllTxPage} />

app/components/admin/homeComponents/receiveBitcoinNew/buttonContainer.js

@@ -57,6 +57,11 @@ export default function ButtonsContainer(props) {
         </TouchableOpacity>
       </View>
       <TouchableOpacity
+        onPress={() => {
+          navigate.navigate('SwitchReceiveOptionPage', {
+            setSelectedRecieveOption: props.setSelectedRecieveOption,
+          });
+        }}
         style={[
           styles.secondaryButton,
           {borderColor: theme ? COLORS.darkModeText : COLORS.lightModeText},

app/components/admin/homeComponents/receiveBitcoinNew/index.js

@@ -1,5 +1,11 @@
 import RefundBitcoinTransactionPage from './bitcoinRefundablePage';
 import ButtonsContainer from './buttonContainer';
+import EditReceivePaymentInformation from './editPaymentInformation';
 import ViewInProgressSwap from './ViewInProgressSwap';
 
-export {ButtonsContainer, ViewInProgressSwap, RefundBitcoinTransactionPage};
+export {
+  ButtonsContainer,
+  ViewInProgressSwap,
+  RefundBitcoinTransactionPage,
+  EditReceivePaymentInformation,
+};

app/components/admin/homeComponents/receiveBitcoinNew/switchReceiveOptionPage.js

@@ -0,0 +1,113 @@
+import {useNavigation} from '@react-navigation/native';
+import {
+  Image,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {
+  CENTER,
+  COLORS,
+  FONT,
+  ICONS,
+  SATSPERBITCOIN,
+  SHADOWS,
+  SIZES,
+} from '../../../../constants';
+import {useGlobalContextProvider} from '../../../../../context-store/context';
+
+export default function SwitchReceiveOptionPage(props) {
+  const navigate = useNavigation();
+  const {theme} = useGlobalContextProvider();
+  const setSelectedRecieveOption = props.route.params.setSelectedRecieveOption;
+
+  return (
+    <View
+      style={[
+        styles.globalContainer,
+        {
+          backgroundColor: theme
+            ? COLORS.darkModeBackground
+            : COLORS.lightModeBackground,
+          paddingVertical: 10,
+          alignItems: 'center',
+        },
+      ]}>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          width: '95%',
+        }}>
+        <TouchableOpacity
+          onPress={() => {
+            navigate.goBack();
+          }}>
+          <Image
+            source={ICONS.leftCheveronIcon}
+            style={{width: 30, height: 30, marginRight: 'auto'}}
+          />
+          <View
+            style={[
+              styles.optionContainer,
+              {
+                backgroundColor: theme
+                  ? COLORS.darkModeBackgroundOffset
+                  : COLORS.lightModeBackgroundOffset,
+              },
+            ]}>
+            <View>
+              <Image
+                style={{width: 40, height: 60}}
+                source={
+                  theme ? ICONS.lightningBoltLight : ICONS.lightningBoltDark
+                }
+              />
+            </View>
+            <View>
+              <Image
+                style={{width: 40, height: 40}}
+                source={theme ? ICONS.chainLight : ICONS.chainDark}
+              />
+            </View>
+            <View>
+              <Image
+                style={{width: 40, height: 40}}
+                source={theme ? ICONS.LiquidLight : ICONS.LiquidDark}
+              />
+            </View>
+            <View>
+              <Image
+                style={{width: 40, height: 40}}
+                source={theme ? ICONS.qrCodeLight : ICONS.qrCodeDark}
+              />
+            </View>
+          </View>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  globalContainer: {
+    flex: 1,
+  },
+
+  optionContainer: {
+    height: 'auto',
+    width: '95%',
+    padding: 15,
+    borderRadius: 8,
+    ...CENTER,
+    marginTop: 20,
+  },
+  icon: {width: 40, height: 40},
+});

app/components/admin/homeComponents/recieveBitcoin/index.js

@@ -2,7 +2,7 @@ import NavBar from './NavBar';
 import BitcoinPage from './bitcoinPage';
 import ButtonsContainer from './buttonsContainer';
 import EditAmountPopup from './editAmount';
-import EditReceivePaymentInformation from './editPaymentInformation';
+
 import LightningPage from './lightningPage';
 import LiquidPage from './liquidPage';
 import TopBar from './topBar';
@@ -15,5 +15,4 @@ export {
   LightningPage,
   LiquidPage,
   NavBar,
-  EditReceivePaymentInformation,
 };

app/constants/icons.js

@@ -44,6 +44,14 @@ import BTCMap from '../assets/icons/BTCMap.png';
 import gainsIcon from '../assets/icons/gains.png';
 import lightMode from '../assets/icons/lightMode.png';
 import darkMode from '../assets/icons/darkMode.png';
+import lightningBoltLight from '../assets/icons/lightningBoltLight.png';
+import lightningBoltDark from '../assets/icons/lightningBoltDark.png';
+import chainDark from '../assets/icons/chainDark.png';
+import chainLight from '../assets/icons/chainLight.png';
+import LiquidDark from '../assets/icons/liquidDark.png';
+import LiquidLight from '../assets/icons/liquidLight.png';
+import qrCodeLight from '../assets/icons/qrCodeLight.png';
+import qrCodeDark from '../assets/icons/qrCodeDark.png';
 
 export default {
   Xcircle,
@@ -92,4 +100,12 @@ export default {
   gainsIcon,
   lightMode,
   darkMode,
+  lightningBoltLight,
+  lightningBoltDark,
+  chainDark,
+  chainLight,
+  LiquidDark,
+  LiquidLight,
+  qrCodeLight,
+  qrCodeDark,
 };

app/screens/inAccount/receiveBtcPage.js

@@ -192,6 +192,7 @@ export function ReceivePaymentHome() {
           generatedAddress={generatedAddress}
           setSendingAmount={setSendingAmount}
           setPaymentDescription={setPaymentDescription}
+          setSelectedRecieveOption={setSelectedRecieveOption}
         />
         <Text
           style={[