add receive qr code

src/ReceiveModal.tsx

@@ -0,0 +1,64 @@
+import React, {FC} from "react";
+import {StyleSheet, View } from "react-native";
+import Modal from "react-native-modal/dist/modal";
+import Button from "./components/Button";
+import QRCode from "react-qr-code";
+
+type ReceiveModalProps = {
+  address: string;
+  isVisible: boolean;
+  onChangeFunc: () => void;
+};
+
+const ReceiveModal: FC<ReceiveModalProps> = props => {
+  const {address, isVisible, onChangeFunc} = props;
+
+  return (
+    <Modal isVisible={isVisible} style={modalStyle.modalContainer}>
+        <View style={modalStyle.container}>
+          <QRCode value={address} />
+        <Button label="Cancel" disabled={false} btnColor="black" btnBorderColor="white" btnFontSize={13} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => onChangeFunc()} btnJustifyContent='center'></Button>
+        </View>
+    </Modal>
+  )};
+
+const modalStyle = StyleSheet.create({
+  modalContainer: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  container: {
+    height: 350,
+    padding: 40,
+    alignItems: 'center',
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    borderColor: 'rgba(0, 0, 0, 0.1)',
+    backgroundColor: 'white'
+  },
+  header: {
+    paddingTop: '7%',
+    fontSize: 22,
+    fontFamily: 'Inconsolata Regular'
+  },
+  prompt: {
+    paddingTop: '10%',
+    fontSize: 16,
+    fontFamily: 'Inconsolata Regular'
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: '#0e4e0b',
+    borderWidth: 3,
+    borderRadius: 80,
+    marginTop: '7%',
+  },
+  icon: {
+    color: '#0e4e0b'
+  }
+});
+
+export default ReceiveModal;

src/components/steps/HomeScreen.tsx

@@ -6,11 +6,11 @@ import { bytesToHex, hexToBytes } from "@noble/hashes/utils";
 import { bech32 } from "bech32";
 import { ripemd160 } from "@noble/hashes/ripemd160";
 import { sha256 } from "@noble/hashes/sha256";
+import ReceiveModal from "../../ReceiveModal";
 
 enum HomeSteps {
   Home,
-  ScanCode,
-  ShowAddress,
+  ScanCode
 }
 
 type HomeScreenProps = {
@@ -22,6 +22,7 @@ type HomeScreenProps = {
 const  HomeScreen: FC<HomeScreenProps> = props => {
   const {walletKey, onPressFunc, onCancelFunc} = props;
   const [step, setStep] = useState(HomeSteps.Home);
+  const [receiveVisible, setReceiveVisible] = useState(false)
   const cameraDevice = useCameraDevice('back');
   const {hasPermission, requestPermission} = useCameraPermission();
   const codeScanner = useCodeScanner({
@@ -69,15 +70,13 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
 
   if (step == HomeSteps.Home) {
     return <SafeAreaView>
-      <Text style={styles.prompt}>{walletAddress()}</Text>
       <Button label="Scan" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(HomeSteps.ScanCode)} btnJustifyContent='center'></Button>
-      <Button label="Receive" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(HomeSteps.ShowAddress)} btnJustifyContent='center'></Button>
+      <Button label="Receive" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setReceiveVisible(true)} btnJustifyContent='center'></Button>
       <Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
+      <ReceiveModal address={walletAddress()} isVisible={receiveVisible} onChangeFunc={() => {setReceiveVisible(false)} } />
     </SafeAreaView>
   } else if (step == HomeSteps.ScanCode) {
     return <Camera style={StyleSheet.absoluteFill} device={cameraDevice!} isActive={true} codeScanner={codeScanner}/>
-  } else {
-    return <SafeAreaView></SafeAreaView>
   }
 };