implement receive modal

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@noble/hashes": "^1.5.0",
         "@react-native-async-storage/async-storage": "^2.0.0",
+        "@react-native-clipboard/clipboard": "^1.14.2",
         "@scure/bip39": "^1.4.0",
         "bech32": "^2.0.0",
         "react": "18.3.1",
@@ -3176,6 +3177,29 @@
         "react-native": "^0.0.0-0 || >=0.65 <1.0"
       }
     },
+    "node_modules/@react-native-clipboard/clipboard": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.14.2.tgz",
+      "integrity": "sha512-Mb58f3neB6sM9oOtKYVGLvN8KVByea67OA9ekJ0c9FwdH24INu8RJoA7/fq+PRk+7oxbeamAcEoQPRv0uwbbMw==",
+      "license": "MIT",
+      "workspaces": [
+        "example"
+      ],
+      "peerDependencies": {
+        "react": ">= 16.9.0",
+        "react-native": ">= 0.61.5",
+        "react-native-macos": ">= 0.61.0",
+        "react-native-windows": ">= 0.61.0"
+      },
+      "peerDependenciesMeta": {
+        "react-native-macos": {
+          "optional": true
+        },
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-native-community/cli": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-14.1.0.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@noble/hashes": "^1.5.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
+    "@react-native-clipboard/clipboard": "^1.14.2",
     "@scure/bip39": "^1.4.0",
     "bech32": "^2.0.0",
     "react": "18.3.1",

src/ReceiveModal.tsx

@@ -1,23 +1,33 @@
 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";
+import Styles from "./Styles";
+import IconButton from "./components/IconButton";
 
 type ReceiveModalProps = {
   address: string;
   isVisible: boolean;
   onChangeFunc: () => void;
+  onCancelFunc: () => void;
 };
 
 const ReceiveModal: FC<ReceiveModalProps> = props => {
-  const {address, isVisible, onChangeFunc} = props;
+  const {address, isVisible, onChangeFunc, onCancelFunc} = props;
+
+  const addressLabel = () => {
+    return address.substring(0, 5) + "\u2026" + address.substring(address.length - 5);
+  }
 
   return (
-    <Modal isVisible={isVisible} style={modalStyle.modalContainer}>
+    <Modal isVisible={isVisible} style={modalStyle.modalContainer} onBackdropPress={onCancelFunc}>
         <View style={modalStyle.container}>
-          <QRCode value={address} />
-        <Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
+          <View>
+           <QRCode value={address} size={220} bgColor="#320430" fgColor="#F29AE9" />
+          </View>
+          <View style={Styles.footer}>
+            <IconButton label={addressLabel()} disabled={false} onChangeFunc={onChangeFunc} rotate="0deg" backgroundColor="white" labelColor="black" icon="content-copy"/>
+          </View>
         </View>
     </Modal>
   )};
@@ -28,13 +38,13 @@ const modalStyle = StyleSheet.create({
     margin: 0,
   },
   container: {
-    height: 350,
+    height: 420,
     padding: 40,
     alignItems: 'center',
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
     borderColor: 'rgba(0, 0, 0, 0.1)',
-    backgroundColor: 'white'
+    backgroundColor: '#320430'
   },
   header: {
     paddingTop: '7%',

src/components/steps/HomeScreen.tsx

@@ -1,6 +1,5 @@
 import {FC, useEffect, useRef, useState } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import Button from "../Button";
 import { Camera, useCameraDevice, useCameraPermission, useCodeScanner } from "react-native-vision-camera";
 import { hexToBytes } from "@noble/hashes/utils";
 import { bech32 } from "bech32";
@@ -12,6 +11,7 @@ import Styles from "../../Styles";
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import SubMenuModal from "../SubMenuModal";
 import IconButton from "../IconButton";
+import Clipboard from "@react-native-clipboard/clipboard";
 
 enum HomeSteps {
   Home,
@@ -90,6 +90,11 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
     setMenuVisible(true);
   }
 
+  const copyAddressAndClose = () => {
+    Clipboard.setString(walletAddress());
+    setReceiveVisible(false);    
+  }
+
   useEffect(() => {
     if (!hasPermission) {
       if (!requestPermission()) {
@@ -114,7 +119,7 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
           <IconButton label="Scan" disabled={false} rotate="0deg" backgroundColor="#321504" labelColor="#FE740C" icon="line-scan" onChangeFunc={() => setStep(HomeSteps.ScanCode)}/> 
         </View>
         </View>
-      <ReceiveModal address={walletAddress()} isVisible={receiveVisible} onChangeFunc={() => {setReceiveVisible(false)} } />
+      <ReceiveModal address={walletAddress()} isVisible={receiveVisible} onChangeFunc={copyAddressAndClose} onCancelFunc={() => setReceiveVisible(false)}/>
     </View>
     }
     {step == HomeSteps.ScanCode &&