Good evening,
I found a code that suits me that when I connect to Metamask it displays my cards otherwise it displays nothing.
The problem is that I modified it to my taste and I have everything hard in my code and therefore whether or not I connect to Metamask it displays the cards.
Can you help me modify my code so that when I connect only to Metamask it displays my maps.
The original code that only works it displays the cards if I connect to Metamask
import {useState,useEffect} from "react";
import './Experience.css'
import { SlCalender } from "react-icons/sl"
const Experience = ({state}) => {
const [education,setEducation]=useState("");
useEffect(()=>{
const {contract}=state;
const educationDetails=async()=>{
const education = await contract.methods.allEducationDetails().call();
setEducation(education);
}
contract && educationDetails();
},[state])
return (
<section className="exp-section">
<h1 className="title">Experience & Education </h1>
<div className="container">
<div className="education">
<h1 className="edu-title">Education</h1>
{education!=="" && education.map((edu)=>{
return (
<div className="edu-card">
<p className="card-text1">
<SlCalender className='icon' /> {edu.date}
</p>
<h3 className="card-text2">{edu.degree}</h3>
<p className="card-text3">{edu.knowledgeAcquired}</p>
<p className="card-text4">
{edu.instutionName}
</p>
</div>)
})}
</div>
{/* experience */}
<div className="education">
<h1 className="edu-title">Experience</h1>
<div className="edu-card">
<p className="card-text1">
<SlCalender className='icon' /> March 2013 - Present
</p>
<h3 className="card-text2">Blockchain Developer Intern</h3>
<p className="card-text3">learned this this and that.learned this this and that.learned this this and that.learned this this and that.</p>
<p className="card-text4">
Code Eater
</p>
</div>
{/* card2 */}
<div className="edu-card">
<p className="card-text1">
<SlCalender className='icon' /> March 2013 - Present
</p>
<h3 className="card-text2">Blockchain Developer Intern</h3>
<p className="card-text3">learned this this and that.learned this this and that.learned this this and that.learned this this and that.</p>
<p className="card-text4">
Code Eater
</p>
</div>
{/* card3 */}
<div className="edu-card">
<p className="card-text1">
<SlCalender className='icon' /> March 2013 - Present
</p>
<h3 className="card-text2">Blockchain Developer Intern</h3>
<p className="card-text3">learned this this and that.learned this this and that.learned this this and that.learned this this and that.</p>
<p className="card-text4">
Code Eater
</p>
</div>
</div>
</div>
</section>
)
}
export default Experience
My code or whether I am connected to Metamask or not it displays the cards
import React, { useEffect, useState } from 'react'
import { FaDonate } from 'react-icons/fa';
import { Modal, ModalHeader, ModalBody, Row, Button } from "reactstrap"
import img from "../../assets/img1.png"
import "./Projects.css"
const Projects = ({ state }) => {
const [modal, setModal] = useState(false);
const [projects, setProjects] = useState("");
useEffect(() => {
const { contract } = state;
const projectDetails = async () => {
const projects = await contract.methods.allProjects().call();
setProjects(projects)
}
contract && projectDetails();
}, [state])
const donateEth = async (event) => {
event.preventDefault();
try {
const { contract, web3 } = state;
const eth = document.querySelector("#eth").value;
const weiValue = web3.utils.toWei(eth, "ether");
const accounts = await web3.eth.getAccounts();
await contract.methods.donate().send({ from: accounts[0], value: weiValue, gas: 480000 });
alert("Transaction Succesful");
}
catch (error) {
alert("Transaction Not Succesful");
}
}
return (
<section className="project-section">
<h1 className="title">Futur Projet </h1>
<div className="card-wrapper">
{[1].map((dummyValue) => {
return (<a href="#" className="project-card" target='_blank' rel="noopener noreferrer" >
<div className="card-text">
<h3>Tokeniser l’immobilier ?</h3>
<p>Cette stratégie financière permet de réaliser des transactions immobilières fractionnées grâce aux jetons de propriété (tokens) et de devenir propriétaire d’une partie d’un bien immobilier facilement, avec une faible mise de départ.</p>
</div>
</a>)
})}
{[2].map((dummyValue) => {
return (<a href="#" className="project-card" target='_blank' rel="noopener noreferrer" >
<div className="card-img">
<img src={img} alt="" /></div>
<div className="card-text">
<h3>Tokeniser l'immobilier</h3>
</div>
</a>)
})}
{[3].map((dummyValue) => {
return (<a href="#" className="project-card" target='_blank' rel="noopener noreferrer" >
<div className="card-text">
<h3>Les avantages</h3>
<p>La rapidité des transactions en crypto-immobilier, fait partie des avantages de cet investissement en actifs numériques. En utilisant la blockchain pour l’immobilier, les délais et les coûts relatifs aux différentes étapes bancaires, administratives et notariales d’un achat immobilier traditionnel ne sont pas appliqués. Ainsi, l’investisseur profite d’un gain de temps et d’argent.</p>
</div>
</a>)
})}
</div>
{/* =========popup bootstrap========== */}
<Modal size='md' isOpen={modal} toggle={() => setModal(!modal)}>
<ModalHeader toggle={() => setModal(!modal)}>
Entrez l'ETH que vous souhaitez donner !
</ModalHeader>
<ModalBody>
<form onSubmit={donateEth}>
<Row>
<input id="eth" type="text" />
<Button className='mt-4' >
Envoyer
</Button>
</Row>
</form>
</ModalBody>
</Modal>
{/* =========popup bootstrap end========== */}
<p className='donate' onClick={() => setModal(true)}>Vous avez aimé le projet ? Pensez à faire don d'Eth <FaDonate className='icon' /></p>
</section>
)
}
export default Projects