Solved add to card,authentication and remove the card problem

backend/apps/pet/admin.py

@@ -25,6 +25,7 @@ def clean(self):
 class PetAdmin(admin.ModelAdmin):
     form = PetAdminForm
     list_display = [
+        "id",
         "name",
         "price",
         "age",

backend/apps/pet/models.py

@@ -51,6 +51,7 @@ def get_passive_status(self):
 # Create your models here.
 # !Pet
 class Pet(TimeStampedModel, LifecycleModel):
+    # pet_index = models.AutoField(primary_key=True, blank=True, null=True)
     name = models.CharField(_("Name"), max_length=50)
     age = models.IntegerField(_("Age"))
     breed = models.CharField(_("Breed"), max_length=50)

frontend/contract-ui/contracts/PetLocal.json

@@ -1 +1 @@
-{"abi":"[{\"type\":\"constructor\",\"payable\":false,\"inputs\":[{\"type\":\"uint256\",\"name\":\"initialPetIndex\"}]},{\"type\":\"function\",\"name\":\"addPet\",\"constant\":false,\"payable\":false,\"inputs\":[],\"outputs\":[]},{\"type\":\"function\",\"name\":\"addToCart\",\"constant\":false,\"payable\":false,\"inputs\":[{\"type\":\"uint256\",\"name\":\"_petId\"},{\"type\":\"string\",\"name\":\"_petName\"},{\"type\":\"string\",\"name\":\"_petColor\"},{\"type\":\"uint256\",\"name\":\"_petPrice\"},{\"type\":\"string\",\"name\":\"_petPhoto\"}],\"outputs\":[]},{\"type\":\"function\",\"name\":\"adoptPet\",\"constant\":false,\"payable\":false,\"inputs\":[{\"type\":\"uint256\",\"name\":\"adoptIdx\"}],\"outputs\":[]},{\"type\":\"function\",\"name\":\"allAdoptedPets\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[{\"type\":\"uint256\"}],\"outputs\":[{\"type\":\"uint256\"}]},{\"type\":\"function\",\"name\":\"getAllAdoptedPets\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"uint256[]\"}]},{\"type\":\"function\",\"name\":\"getAllAdoptedPetsByOwner\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"uint256[]\"}]},{\"type\":\"function\",\"name\":\"getCartItems\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"tuple[]\",\"components\":[{\"type\":\"uint256\",\"name\":\"id\"},{\"type\":\"string\",\"name\":\"name\"},{\"type\":\"string\",\"name\":\"color\"},{\"type\":\"uint256\",\"name\":\"price\"},{\"type\":\"string\",\"name\":\"photo\"}]}]},{\"type\":\"function\",\"name\":\"getOwner\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"address\"}]},{\"type\":\"function\",\"name\":\"owner\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"address\"}]},{\"type\":\"function\",\"name\":\"ownerAddressToPetList\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[{\"type\":\"address\"},{\"type\":\"uint256\"}],\"outputs\":[{\"type\":\"uint256\"}]},{\"type\":\"function\",\"name\":\"petIdxToOwnerAddress\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[{\"type\":\"uint256\"}],\"outputs\":[{\"type\":\"address\"}]},{\"type\":\"function\",\"name\":\"petIndex\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"uint256\"}]}]","address":"0x5FbDB2315678afecb367f032d93F642f64180aa3","network":"localhost","deployer":"0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"}
+{"abi":"[{\"type\":\"constructor\",\"payable\":false,\"inputs\":[{\"type\":\"uint256\",\"name\":\"initialPetIndex\"}]},{\"type\":\"function\",\"name\":\"addPet\",\"constant\":false,\"payable\":false,\"inputs\":[],\"outputs\":[]},{\"type\":\"function\",\"name\":\"addToCart\",\"constant\":false,\"payable\":false,\"inputs\":[{\"type\":\"uint256\",\"name\":\"_petId\"},{\"type\":\"string\",\"name\":\"_petName\"},{\"type\":\"string\",\"name\":\"_petColor\"},{\"type\":\"uint256\",\"name\":\"_petPrice\"},{\"type\":\"string\",\"name\":\"_petPhoto\"}],\"outputs\":[]},{\"type\":\"function\",\"name\":\"adoptPet\",\"constant\":false,\"payable\":false,\"inputs\":[{\"type\":\"uint256\",\"name\":\"adoptIdx\"}],\"outputs\":[]},{\"type\":\"function\",\"name\":\"allAdoptedPets\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[{\"type\":\"uint256\"}],\"outputs\":[{\"type\":\"uint256\"}]},{\"type\":\"function\",\"name\":\"getAllAdoptedPets\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"uint256[]\"}]},{\"type\":\"function\",\"name\":\"getAllAdoptedPetsByOwner\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"uint256[]\"}]},{\"type\":\"function\",\"name\":\"getCartItems\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"tuple[]\",\"components\":[{\"type\":\"uint256\",\"name\":\"id\"},{\"type\":\"string\",\"name\":\"name\"},{\"type\":\"string\",\"name\":\"color\"},{\"type\":\"uint256\",\"name\":\"price\"},{\"type\":\"string\",\"name\":\"photo\"}]}]},{\"type\":\"function\",\"name\":\"getCartLength\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"uint256\"}]},{\"type\":\"function\",\"name\":\"getOwner\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"address\"}]},{\"type\":\"function\",\"name\":\"owner\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"address\"}]},{\"type\":\"function\",\"name\":\"ownerAddressToPetList\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[{\"type\":\"address\"},{\"type\":\"uint256\"}],\"outputs\":[{\"type\":\"uint256\"}]},{\"type\":\"function\",\"name\":\"petIdxToOwnerAddress\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[{\"type\":\"uint256\"}],\"outputs\":[{\"type\":\"address\"}]},{\"type\":\"function\",\"name\":\"petIndex\",\"constant\":true,\"stateMutability\":\"view\",\"payable\":false,\"inputs\":[],\"outputs\":[{\"type\":\"uint256\"}]},{\"type\":\"function\",\"name\":\"removeCart\",\"constant\":false,\"payable\":false,\"inputs\":[{\"type\":\"uint256\",\"name\":\"index\"}],\"outputs\":[]}]","address":"0x5FbDB2315678afecb367f032d93F642f64180aa3","network":"localhost","deployer":"0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"}

frontend/contract-ui/src/Dapp.jsx

@@ -57,11 +57,48 @@ function Dapp() {
         Moralis.onAccountChanged(handleAccountsChanged);
     }
 
+
+    // ?getMoralisProvider
+    const getMoralisProvider = async() => {
+      return window.localStorage.getItem('provider')
+    }
+
+
+
+    //? checkMoralisWalletUIIsConnected
+    const checkMoralisWalletUIIsConnected = async() => {
+      const metamask = await getMoralisProvider()
+      if(metamask == null) {
+          toast.info("If you want see your balance please click connect button top right side")
+      }
+    }
+
+
+    // ?setAccountListener
+    const setAccountListener = async()=>{
+      provider._jsonRpcConnection.events.on('notification',(payload) => {
+        let count = 0
+        const { method,params } = payload
+
+        if(params.isUnlocked===false){
+          setIsAuthenticated(false)
+
+        }
+        else if(params.isUnlocked===true){
+          setIsAuthenticated(true)
+        }
+      })
+    }
+
+
     // ?isAuthenticated
     const checkIsAuthenticated = async () => {
       if (typeof provider !== 'undefined') {
           await provider.request({method: "eth_requestAccounts"})
           const is_check = await checkNetwork()
+          await checkMoralisWalletUIIsConnected()
+
+          console.log("🚀 ~ checkIsAuthenticated ~ is_check:", is_check)
           setIsAuthenticated(is_check)
           return is_check
       } else {
@@ -115,8 +152,11 @@ function Dapp() {
 
     //useEffect
     useEffect(()=>{
+      // setAccountListener()
       initContract()
       checkIsAdmin()
+      setAccountListener()
+      checkIsAuthenticated()
     },[account])
 
 
@@ -127,10 +167,10 @@ function Dapp() {
           {/*<TxError/>*/}
           <br />
           <div className="navbar-container">
-            <Navbar checkIsAuthenticated={checkIsAuthenticated} isAuthenticated={isAuthenticated} account={account} isAdmin={isAdmin}/>
+            <Navbar isAuthenticated={isAuthenticated} account={account} isAdmin={isAdmin}/>
           </div>
           <div className="items">
-            <PetItem checkIsAuthenticated={checkIsAuthenticated} isAuthenticated={isAuthenticated} contract={contract} account={account} isAdmin={isAdmin}/>
+            <PetItem isAuthenticated={isAuthenticated} contract={contract} account={account} isAdmin={isAdmin}/>
           </div>
         </div>
         </>

frontend/contract-ui/src/components/Petitem.jsx

@@ -60,8 +60,7 @@ export function PetItem({checkIsAuthenticated,isAuthenticated,contract,account,i
 
     //? addToCart
     const addToCart = async (e) => {
-        const is_auth = await checkIsAuthenticated()
-
+        const is_auth = isAuthenticated
         const is_exits_in_cart = await checkCartItems(e.target.getAttribute('pet-id'))
 
         if (is_auth && contract != null && !is_exits_in_cart){
@@ -120,7 +119,7 @@ export function PetItem({checkIsAuthenticated,isAuthenticated,contract,account,i
                                                             <span className="mb-1 block text-sm leading-6 text-indigo-500">{pet.name}</span>
                                                         </h3>
                                                         <div className="prose prose-slate prose-sm text-slate-600 dark:prose-dark">
-                                                            <p>{pet.description}</p>
+                                                            <p>{pet.description.substring(0,pet.description.length/2)}...</p>
                                                         </div>
                                                         <a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500 mt-6" href="https://headlessui.dev">
                                                             Learn more
@@ -140,7 +139,7 @@ export function PetItem({checkIsAuthenticated,isAuthenticated,contract,account,i
                                                             </svg>
                                                         </a>
                                                         {
-                                                            !isAdmin ? (
+                                                            !isAdmin && isAuthenticated ? (
                                                                 <button onClick={addToCart} pet-id={pet.id} pet-slug={pet.slug} className="text-white w-55 bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                                                                     ml-2 group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 pr-6 pl-4 focus:outline-none focus:ring-2 ">
                                                                     Add to cart

frontend/contract-ui/src/routes/Cart.jsx

@@ -1,5 +1,5 @@
 // ! React
-import { useEffect, useState,useRef } from 'react';
+import { useEffect, useState,useRef,useCallback } from 'react';
 
 //! Component
 import { Navbar } from "../components/Navbar";
@@ -21,6 +21,11 @@ export  default function Cart(){
     const [pets,setPets] = useState(null)
     const [paymentOption,setPaymentOption] = useState('ethereum')
     const [isAdopted,setIsAdopted] = useState(false)
+    const [signer,setSigner] = useState()
+    const [reload,setReload] = useState(false)
+
+    //reloadEffect
+    const reloadEffect = useCallback(() => setReload(!reload),[reload])
 
     //moralis
     const { web3,account,Moralis,isAuthenticated,user,authenticate } = useMoralis();
@@ -33,7 +38,7 @@ export  default function Cart(){
         const connected_contract = await connect_contract()
         const signer = getSigner(account)
         const pets = await connected_contract.connect(signer).getCartItems()
-        pets.length > 0 && (setPets(pets), setContract(connected_contract));
+        pets.length > 0 && (setPets(pets), setContract(connected_contract),setSigner(signer));
     }
 
     // ?handlePaymentOptionChanged
@@ -42,12 +47,24 @@ export  default function Cart(){
         setPaymentOption(selected_option)
     }
 
-    //? hideElement
-    const hideElement = () => {
+    //? removeCart
+    const removeCart = async (index) => {
+        console.log("🚀 ~ removeCart ~ index:", index)
         const element = elementRef.current;
-        gsap.to(element, { opacity: 0, duration: 1, onComplete: () => {
-          // Optionally, perform any additional actions after hiding the element
-        }});
+        const removed_pet = await contract.connect(signer).removeCart(index)
+
+        if (element) {
+            gsap.to(element, {
+                opacity: 0,
+                height: 0,
+                duration: 0.3,
+                onComplete: () => {
+                    // Remove the element from the DOM
+                    element.remove();
+                },
+            });
+        }
+        await getCartItems()
     ;}
 
     //useEffect
@@ -80,6 +97,7 @@ export  default function Cart(){
                                     pets && pets.length > 0 ? (
                                         pets.map((pet, index) => (
                                             <div key={index} className="mt-8 space-y-3 rounded-lg border bg-white px-2 py-4 sm:px-6" ref={elementRef}>
+                                                <p>Index value brat - {index}</p>
                                                 <div className="flex flex-col rounded-lg bg-white sm:flex-row">
                                                     <img className="m-2 h-24 mt-5 w-28 rounded-md border object-cover object-center" src={pet.photo} alt="" />
                                                     <div className="grid grid-cols-1 w-full px-4 py-4">
@@ -89,8 +107,7 @@ export  default function Cart(){
                                                     </div>
                                                 </div>
                                                 <div className="flex justify-end">
-                                                <button disabled type="button" className="text-white bg-slate-700 -mt-10 mr-4  focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
-
+                                                <button stype="button" className="text-white bg-slate-700 -mt-10 mr-4  focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
                                                     {
                                                         isAdopted ? (
                                                             <div>
@@ -109,6 +126,9 @@ export  default function Cart(){
                                                         <span>Adopt</span>
                                                     }
                                                 </button>
+                                                <button onClick={()=>removeCart(index)} stype="button" className="text-white bg-red-500 -mt-10 mr-4 -ml-2 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-red-600 dark:hover:bg-red-800 dark:focus:ring-red-800 inline-flex items-center">
+                                                    Remove cart
+                                                </button>
                                                 </div>
                                             </div>