george-florea/blockchain

Doc proiect blockchain

cerinte proiect:

(optional) pentru a prezenta si flow-ul de conectare cu metamask, in caz ca v-ati conectat deja, puteti sa

• apasati f12 in site
• mergeti in meniul de application:
• stergeti isAuth (selectati si apasati delete)

(obligatoriu)

de creeat 2 conturi in metamask pentru a demonstra functia de owner si de bidder intr-o licitatie

Pasi prezentare aplicatie:

1. De pe pagina de home apasati ori pe butonul central de go to auctions ori pe auctions din meniul de navigare

2. Apasam pe butonul de add object

3. Pe pagina de adaugare vom insera date, apoi cand apasam pe butonul de auction me ne va aparea o analiza de cost, daca alegem sa continuam se va deschide fereastra de metamask, in care vom puteam confirma tranzactia

4. O data ce tranzactia a fost adaugata, o putem vedea si in lista de licitatii:

5. Pe pagina de detalii

   • vom schimba contul pentru a putea licita
   • licitam (a se observa ca apare suma licitata cu minus)
   • schimbam contul din nou, in cel de owner
   • dam cancel la licitatie drept owner
   • schimbam din nou contul in cel care a licitat

6. Din meniul de navigare, apasam pe My auctions

7. Alegem licitatia la care tocmai ce am licitat si dam finalize auction pentru a ne retrage banii( in fereastra de metamask ar trb sa apara suma licitata cu +)

Structura proiectului de react:

src/context:

1. contine cele 2 abi-uri ale contractelor in fisiere .json
2. in useWeb3.jsx:
   • se creeaza un provider de context: initializam un state global, un fel de singleton, pentru a ne asiguram ca avem aceleasi date in toate paginile, nu avem instante diferite
   • in functia de initWeb3()
     • verificam daca matamask a fost conectat: daca pe window se afla obiectul ethereum
     • daca da, instantiem o instanta de web 3 prin care avem acces la informatii despre blockchain si despre conturile conectate la metamask
     • instantiem si contractul de auctionCreator folosind adresa deployata pe remix si abi-ul asociat
     • printr-un call la metoda getAuctions primim adresele licitatiilor existente, prin care vom itera si vom instantia contracte pentru fiecare din ele:
     • obiectul final in care sunt salvate contractele va arata cv de genu:

     { auctionCreator: , auctions: { [id_auction]: contract-ul asociat licitatiei cu id-ul dat }, }

• acesta functie( useWeb3() ) este folosita in pagini drept:

src/Pages

• fiecare folder este asignat unei parti de aplicatie: Home, MyAuctions, Auctions
• fisierele .jsx sunt asociate unei pagini

stocarea pozelor se face pe firebase deoarece am incercat sa stochez pozele pe ipfs, dar:

1. pe infura, un site care ofera servicii de hostare a ipfs, nu mai acorda api key-uri pentru interactiunea cu ipfs pentru utilizatorii noi
2. pentru a hosta local ipfs, trebuie platita o suma de bani si nu am considerat ca merita

Cerinte optionale:

1. Tratare events:
   • in folderul src/Pages/Auctions/observables, in fisierul AuctionObserver.js:
   • se asculta dupa eventul BidPlaced, iar de fiecare data cand este emis acest event in contract, se va apela functia data ca parametru(callback este un pointer catre functia data ca parametru):
   • functia subscribeToBidPlaced este folosita in fisierul src/Pages/Auctions/ViewAuction.jsx. Functia data ca parametru ( getAuctionDetails ) returneaza detaiile actualizate ale licitatiei

• astfel de ficare data cand este emis eventul de bidPlaced, se va face un nou request care va aduce datele actualizate in pagina

2. Analiza gas-cost

   • se gaseste in fiserul src/Pages/Auctions/AddAuction.jsx
   • explicatia se gaseste aici: explicatie gpt
   • aceasta analiza se apeleaza automat de fiecare data cand dorim sa adaugam o noua licitatie, doar daca utilizatorul vrea sa continue tranzactia se va realiza

3. Control al starii tranzactiilor

   • am folosit un loading spinner si toast-uri pentru a oferi feedback despre starea tranzactiilor
   • prin try catch putem observa daca o tranzactie s-a realizat cu succes sau nu si afisam utilizatorului mesajul potrivit in toast -exemplu toast: