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 } from "@radix-ui/react-icons";
 5  import styles from "./presentpassport.module.scss";
 6  import useAuth from "../../auth/hooks/useAuth";
 7  
 8  const PresentPassport = ({ open, onClose }) => {
 9    const dialogRef = useRef(null);
10    const { principal } = useAuth();
11  
12  
13    const handleClose = () => {
14      if (onClose) {
15        onClose();
16      }
17    };
18  
19    return (
20      <Dialog.Root open={open} onClose={handleClose} ref={dialogRef} style={{ alignItems: 'center', justifyContent: 'center' }}>
21        <Dialog.Overlay className={styles.DialogOverlay} />
22        <Dialog.Content className={`${styles.DialogContent} ${styles.centeredContent}`}>
23          <Dialog.Close asChild>
24            <button className={styles.DialogCloseButton} onClick={handleClose}>
25              <Cross2Icon />
26            </button>
27          </Dialog.Close>
28          <Dialog.Title className={styles.DialogTitle}>Send</Dialog.Title>
29          <fieldset>
30            <label className={styles.SendModalLabel}>Destination</label>
31            <input className={styles.SendModalInput} defaultValue="Enter reciepient address" />
32            {/* <label className={styles.SendModalLabel}>Amount</label> */}
33            
34            {/* <input className={styles.SendModalInput} /> */}
35          </fieldset>
36          <div className={styles.AddressContainer}>
37            <span className={styles.AddressLabel}>Source:</span>
38            <span className={styles.AddressValue}>{principal}</span>
39          </div>
40          <div className={styles.ButtonContainer}>
41            <Button className={`${styles.Button} ${styles.SendModalCancelButton}`}>
42              Cancel
43            </Button>
44            <Button className={`${styles.Button} ${styles.SendModalNextButton}`} onClick={handleClose}>
45              Next
46            </Button>
47          </div>
48        </Dialog.Content>
49      </Dialog.Root>
50    );
51  };
52  
53  export default PresentPassport;