From 8caa2bc1439bd605dd1e4956abd0534a69fc82ba Mon Sep 17 00:00:00 2001
From: bazz <clement.f.bazz@gmail.com>
Date: Tue, 15 Nov 2022 13:03:14 +0100
Subject: [PATCH] Add Modal

---
 src/App.jsx                  | 22 ++++++----------------
 src/App/component/Dialog.jsx | 22 ++++++++++++++++++----
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e45b27b..38ace8e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,17 +16,17 @@ function App() {
 
   const modal = useRef();
   function handleModal() {
-    DOMMethods.showModal(modal.current)
+    modal.current.showModal()
   }
   function handleClose() {
-    DOMMethods.closeModal(modal.current)
+    modal.current.close()
   }
 
   return (
     <>
       <Router>
 
-        <Nav />
+        <Nav handleModal={handleModal} />
 
         <Routes >
 
@@ -34,19 +34,9 @@ function App() {
           <Route path='NFTs' element={<Nft />} />
 
         </Routes>
-        {/* <Dialog modal={modal} >
-          <div className="modal__header">
-            <h3>Connect Wallet</h3>
-            <div className="close" onClick={() => handleClose()}>
-              <Icons name={`cross`} />
-            </div>
-          </div>
-          <div className="modal__body">
-            <p>Choose your preferred wallet:</p>
-            <LinkBTN name={`meta-fox`} text={`Metamask`} />
-            <LinkBTN name={`wallet`} text={`WalletConnect`} />
-          </div>
-        </Dialog> */}
+
+        <Dialog modal={modal} handleClose={handleClose} /> 
+        
         <Footer />
 
       </Router>
diff --git a/src/App/component/Dialog.jsx b/src/App/component/Dialog.jsx
index 61b6069..05f2c32 100644
--- a/src/App/component/Dialog.jsx
+++ b/src/App/component/Dialog.jsx
@@ -1,9 +1,23 @@
+import Icons from "../../assets/icons/Icons";
+import LinkBTN from "./LinkBTN";
 
 
-export default function Dialog({modal, children}) {
+export default function Dialog({ modal, children , handleClose}) {
         return (
-                <dialog className="modal"  ref={modal}>
-                                {children}
-                        </dialog>
+                <dialog className="modal" ref={modal}>
+                        <div className="modal__header">
+                                <h3>Connect Wallet</h3>
+                                <div className="close" onClick={() => handleClose()}>
+                                        <Icons name={`cross`} />
+                                        
+                                </div>
+                        </div>
+                        <div className="modal__body">
+                                <p>Choose your preferred wallet:</p>
+                                <LinkBTN name={`meta-fox`} text={`Metamask`} />
+                                <LinkBTN name={`wallet`} text={`WalletConnect`} />
+                                
+                        </div>
+                </dialog>
         )
 }