Merge pull request #19 from Cojag-projects/fix

Fix
dhiraj0911 · Feb 24, 2024 · 0a14a4e · 0a14a4e
2 parents 2ff1bcd + a823b92
commit 0a14a4e
Show file tree

Hide file tree

Showing 15 changed files with 6,391 additions and 660 deletions.
diff --git a/components/BuyCard.jsx b/components/BuyCard.jsx
@@ -1,11 +1,16 @@
 import React, { useContext, useState, useEffect } from "react";
 import Link from "next/link";
 import { NFTContext } from "../context/NFTContext";
+import {
+  useConnectionStatus,
+  useDisconnect,
+  useAddress,
+} from "@thirdweb-dev/react"; 
 
 const BuyCard = ({ nft, onProfilePage }) => {
-  const { nftCurrency, currentAccount } = useContext(NFTContext);
+  const { nftCurrency } = useContext(NFTContext);
   const ownerAddress = nft.owner.toLowerCase();
-  const currentAccountAddress = currentAccount.toLowerCase();
+  const currentAccountAddress = useConnectionStatus() === 'connected'? useAddress().toLowerCase(): null;
 
   return (
     <div

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -11,6 +11,10 @@ import images from "../assets";
 import AvatarEditor from "react-avatar-editor";
 import axios from "axios";
 import FormData from "form-data";
+import {
+  ConnectWallet,
+  useAddress
+} from "@thirdweb-dev/react";
 
 const MenuItems = ({ isMobile, active, setActive, setIsOpen }) => {
   const generateLink = (i) => {
@@ -51,8 +55,6 @@ const MenuItems = ({ isMobile, active, setActive, setIsOpen }) => {
 
 const ButtonGroup = ({ setActive, router, setIsOpen }) => {
   const {
-    connectWallet,
-    currentAccount,
     signOut,
     isSigned,
     avatar,
@@ -62,6 +64,7 @@ const ButtonGroup = ({ setActive, router, setIsOpen }) => {
   const [image, setImage] = useState(null);
   const [scale, setScale] = useState(1);
   const editorRef = useRef(null);
+  const currentAccount = useAddress();
 
   const API_BASE_URL =
     process.env.NEXT_PUBLIC_PRODUCTION === "true"
@@ -154,11 +157,12 @@ const ButtonGroup = ({ setActive, router, setIsOpen }) => {
               }}
             />
           ) : (
-            <Button
-              btnName="Connect"
-              classStyles="mx-2 h-8 mt-2 rounded-xl"
-              handleClick={connectWallet}
-            />
+            // <Button
+            //   btnName="Connect"
+            //   classStyles="mx-2 h-8 mt-2 rounded-xl"
+            //   handleClick={connectWallet}
+            // />
+            <ConnectWallet/>
           )}
           <Menu as="div" className="relative">
             <div>

diff --git a/components/RentCard.jsx b/components/RentCard.jsx
@@ -1,11 +1,20 @@
 import React, { useContext, useState, useEffect } from "react";
 import Link from "next/link";
 import { NFTContext } from "../context/NFTContext";
+import {
+  useConnectionStatus,
+  useDisconnect,
+  useAddress,
+} from "@thirdweb-dev/react";
 
 const RentCard = ({ nft, onProfilePage }) => {
-  const { nftCurrency, currentAccount } = useContext(NFTContext);
+  const { nftCurrency } = useContext(NFTContext);
   const ownerAddress = nft.owner.toLowerCase();
-  const currentAccountAddress = currentAccount.toLowerCase();
+  const currentAccountAddress = useConnectionStatus() === 'connected'? useAddress().toLowerCase(): null;
+  const renterAddress =
+    nft.rented === true || nft.rented === "true"
+      ? nft.renter.toLowerCase()
+      : null;
   const [days, setDays] = useState(0);
   const [hours, setHours] = useState(0);
   const [minutes, setMinutes] = useState(0);
@@ -31,7 +40,10 @@ const RentCard = ({ nft, onProfilePage }) => {
   }, [nft.expires]);
 
   return (
-    <div className="flex flex-col rounded-3xl border-solid hover:border-dotted m-3" style={{ backgroundColor: '#011627 ' }}>
+    <div
+      className="flex flex-col rounded-3xl border-solid hover:border-dotted m-3"
+      style={{ backgroundColor: "#011627 " }}
+    >
       <div className="px-4 py-7 sm:p-10 sm:pb-6">
         <div className="grid items-center justify-center w-full grid-cols-1 text-left">
           <div>
@@ -40,9 +52,11 @@ const RentCard = ({ nft, onProfilePage }) => {
             </h2>
             <p className="mt-6 text-sm text-gray-100">ID: {nft.id}</p>
           </div>
-          {(ownerAddress === currentAccountAddress && !nft.rented) ? (
-              <></>
-          ): (ownerAddress === currentAccountAddress && nft.rented) ? (
+          {ownerAddress === currentAccountAddress && !nft.rented ? (
+            <></>
+          ) : ownerAddress === currentAccountAddress && nft.rented ? (
+            <>Your asset is rented by somebody</>
+          ) : renterAddress === currentAccountAddress && nft.rented ? (
             <div className="flex gap-5 mt-4 text-center">
               <div className="flex flex-col">
                 <span className="countdown font-mono text-4xl">
@@ -70,43 +84,41 @@ const RentCard = ({ nft, onProfilePage }) => {
               </div>
             </div>
           ) : nft.rented ? (
-              <>
-                This NFT is already rented.
-              </>
+            <>This NFT is already rented.</>
           ) : (
-              <>
-                {nft.forRent ? (
+            <>
+              {nft.forRent ? (
                 <div className="mt-6">
                   <p>
                     <span className="text-5xl font-light tracking-tight text-white">
                       {nft.rentPrice}
                     </span>
-                    <span className="text-base font-medium text-white"> {nftCurrency(nft)} /day </span>
-                  </p>
-                </div>
-              ) : (
-                <div className="mt-6">
-                  <p>
-                    <span className="text-5xl font-light tracking-tight text-white">
-                      {nft.price}
+                    <span className="text-base font-medium text-white">
+                      {" "}
+                      {nftCurrency(nft)} /day{" "}
                     </span>
-                    <span className="text-base font-medium text-white"> {nftCurrency(nft)}</span>
                   </p>
                 </div>
+              ) : (
+                <></>
               )}
             </>
           )}
         </div>
       </div>
-      <Link href={{ pathname: '/nft-details', query: nft }}>
+      <Link href={{ pathname: "/nft-details", query: nft }}>
         <div className="flex px-6 pb-8 sm:px-8">
-          <a aria-describedby="tier-starter" className="items-center justify-center w-full px-6 py-2.5 text-center text-black duration-200 bg-white border-2 border-white rounded-full inline-flex hover:bg-transparent hover:border-white hover:text-white focus:outline-none focus-visible:outline-white text-sm focus-visible:ring-white" href="#">
+          <a
+            aria-describedby="tier-starter"
+            className="items-center justify-center w-full px-6 py-2.5 text-center text-black duration-200 bg-white border-2 border-white rounded-full inline-flex hover:bg-transparent hover:border-white hover:text-white focus:outline-none focus-visible:outline-white text-sm focus-visible:ring-white"
+            href="#"
+          >
             View More
           </a>
         </div>
       </Link>
     </div>
-  )
+  );
 };
 
 export default RentCard;
diff --git a/components/Verify.jsx b/components/Verify.jsx
@@ -23,7 +23,7 @@ const Verify = ({ email }) => {
         {wrongOTP && <p className="text-red-500">Invalid OTP. Please try again.</p>}
         <form className="flex flex-col">
           <input
-            placeholder="OTP"
+            placeholder="Verification code"
             className="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
             type="number"
             onChange={(e) => setOtp(e.target.value)}