1  import React, { useRef } from "react";
 2  import * as Dialog from "@radix-ui/react-dialog";
 3  import { Button } from "@radix-ui/themes";
 4  import { Cross2Icon, CopyIcon } from "@radix-ui/react-icons";
 5  import styles from "./receivemodal.module.scss";
 6  import QRCode from 'react-qr-code';
 7  
 8  const ReceiveModal = ({ open, onClose, selectedToken }) => {
 9    const dialogRef = useRef(null);
10  
11    const handleClose = () => {
12      if (onClose) {
13        onClose();
14      }
15    };
16  
17    return (
18      <Dialog.Root open={open} onClose={handleClose} ref={dialogRef} style={{ alignItems: 'center', justifyContent: 'center' }}>
19        <Dialog.Overlay className={styles.DialogOverlay} />
20        <Dialog.Content className={`${styles.DialogContent} ${styles.centeredContent}`}>
21          <Dialog.Close asChild>
22            <button className={styles.IconButton} onClick={handleClose}>
23              <Cross2Icon />
24            </button>
25          </Dialog.Close>
26          <Dialog.Title className={styles.DialogTitle}>Receive</Dialog.Title>
27          <Dialog.Description className={styles.DialogDescription}>
28            Address:
29          </Dialog.Description>
30          <div className={styles.AddressContainer}>
31            <span className={styles.Address}>
32              0xc84C5136484AA1e0cc324011bb9E3350BD787E48
33            </span>
34            <span className={styles.CopyIcon} >
35              <CopyIcon />
36            </span>
37          </div>
38          <div className={styles.QRCodeContainer}>
39            <QRCode value={''} />
40          </div>
41          <div>
42            <Button className={`${styles.Button} ${styles.DoneButton}`} onClick={handleClose}>
43              Done
44            </Button>
45          </div>
46        </Dialog.Content>
47      </Dialog.Root>
48    );
49  };
50  
51  export default ReceiveModal;