קורס blockchain – הקדמה והכנה לפרויקט

import './App.scss';
import React, { useEffect, useState } from 'react';
import GallerySlider from './GallerySlider';
import logo from './logo.png';
import { ethers } from 'ethers';

function App() {
  const [address , setAddress] = useState();

  const connectWallet = () =>{
    if(window.ethereum) {
        window.ethereum.request({method: 'eth_requestAccounts'})
        .then(result=>{
            setAddress(result[0]);
        })
    }else {
        console.log('Install Metamask')
    }
};

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} alt="logo" />
        <span>NTF Artist</span>
      </header>
      <div className="collection-cointainer">
      <h1>New NFT's Collections</h1>
        <GallerySlider />
      </div>
      <button type="button"  onClick={connectWallet} className="mint-btn">Mint NFT Now</button>
    {address}
    </div>
  );
}

export default App;

import React, { useEffect, useState } from 'react'
import imgOne from './01.jpg';
import imgTwo from './02.jpg';
import imgThree from './03.jpg';
import imgFour from './04.jpg';

function GallerySlider() {
    const [slides, getSlides] = useState([]);
    useEffect(() => {
        if (slides.length < 1) {
            setTimeout(() => {
                getSlides([...slides, { img: imgOne, desc: 'Some text about this art.', id: 243567 },
                { img: imgTwo, desc: 'Some text about this art.', id: 98742564 },
                { img: imgThree, desc: 'Some text about this art.', id: 978645 },
                { img: imgFour, desc: 'Some text about this art.', id: 3568 }]);
            }, 2000);
        }
    }, []);

    if (slides && slides.length > 0) {
        return (
            <>
                <ul className='listOfArts'>

                    {
                        slides.map((item) =>
                            <li className='item-container' key={item.id}>
                                <img src={item.img} alt={item.desc} />
                                <div className='artDescription'>
                                    <span>
                                        {item.desc}
                                    </span>
                                    <button type="button" disabled>its Minted</button>
                                </div>
                            </li>
                        )
                    }
                </ul>
            </>
        )
    } else {
        return (<> Gallery is loading, Please Wait..
        </>)
    }

}
export default GallerySlider;