Assignment - Marketplace Frontend

Sadly I am still a bit stuck in completing the frontend and currently still looking for the errors present. After those are cleared I will add the last pages. In the meantime every critique of my work is appreciated.
https://github.com/paulsimroth/nft_marketplace

Hi I´m still stuck in place. More precisely I have problems figuring out how to make the Tokens show up. If anyone has some feedback and help, thanks in advance. You can look at my code on my github. I have linked it in a prior post.

Hey @PaulS96, would you please give me more details on what your trying to do? and on which file in your repo :nerd_face:

Carlos Z

1 Like

@thecil I am currently stuck with getting ym bears to show up. My guess is the issue lies inside render.js at the way I structured inventoryRender. I just have weird behavior with the tokens. For example, currently i have some showing up but not the correct number and the appearance is also not really what I minted.

EDIT: The correct number of bears now show up, also the correct dna is logged in the console but they are shown wrong.

Ok, I have started your repo, started a fresh deployment of contracts with truffle, update contracts addresses, mint 1 bear with deployer, which is the one on the img, events are working fine.

Getting the tokenId 1 from contract does work (check console getBear), at catalog, the parameters looks fine.

Now i think the problem resides on the way you are rendering each bear body, your sending string values to the renderBear function instead of number.

Now that could be part of the problem, the other issue is that your assigning the attributes directly to a class, which is general to all other bears, you might want to prefer to set the CSS directly to each ID, instead of the class, it can go for example tokenId 1 will have id="#head1".

You can also give a look on my old project, which could help you to figure out how to apply the colors into each bear on the catalog, im applying the css to id’s with tokenId number instead of the class. (buildAlien.js)

https://github.com/thecil/cryptoaliens

Overall your project is almost ready, contract is working, factory is working, getting the data from contract its also working, now the only issue is the representation of each bear in the catalog.

Carlos Z

1 Like

@thecil Thanks for the feedback. I already startedt transitioning all styling to IDs and will try my best to get it done.
The reason I used toString() on the dna is that without it I didn´t get any result. Now I at least have the bears show up. Maybe there is a better solution but I haven´t figured another way out.

You can do something like:

// After fetching the dna, it will be BN value
const toNumber = (value) => parseInt(value.toString()); 

// then we can change it to number
const _animation = toNumber(dna.animation);

Carlos Z

1 Like

Hi @thecil
Currently all the data passed into the functions should be correct, but I still don´t get the desired results. If you could take another look at my code in render.js and renderFactory.js it would be great. Thanks in advance.

I think the issue might be related to your main css file that applies the color directly on classes and ids.

You might want to remove them, but let the functions somethingColor like headColor applies the color.

Also, in the const bearDiv you are missing a "

<div class="featureBox ownersBear" id="ownersBear...

Carlos Z

1 Like

@thecil Sadly so far this doesn´t seem to be the solution. I will likely have to try something completely new. The data is all correct but the rendering of the html seems to be the problem as the IDs are shown correctly in the Dev Tools for each element but none of the styling is set.

1 Like

I noticed that a few ppl have deployed their dApp to Ropsten testnet.
Since Ropsten is deprecated, which tesnet should I use?
…and
Know any good tutorials on deploying to said network with Truffle? (I have been looking)

1 Like

Check this guide which is related to deprecated networks and what to use now

Carlos Z

1 Like

I guess I basically asked the same question twice (my post on ethereum 201)
…or at least it is the same answer for both questions.

Thank you!
Excited to get at it!

1 Like

Whoa! This was super hard.
Anyway, here is my final assignment.

In the video " Marketplace Frontend Solution",
Phillip mentioned that, having to connect/verify your wallet twice - to each of the 2 contracts, is not a great user experience.

To improve the user experience, I inherited the KittyContract.sol into the Marketplace.sol contract and deployed it as one contract (renamed to KittyExchange):

KittyExchange.sol
// SPDX-License-Identifier: MIT
pragma solidity  >=0.4.22 <0.9.0;

import "./KittyContract.sol";

contract KittyExchange is KittyContract {
       struct Offer {
        address payable seller;
        uint256 price;
        uint256 index;
        uint256 tokenId;
        bool active;
    }

    Offer[] offers;

    event MarketTransaction(string TxType, address owner, uint256 tokenId);
    
    mapping(uint256 => Offer) tokenIdToOffer;


    function getOffer(uint _tokenId) public view returns (address seller, uint256 price, uint256 index, uint256 tokenId, bool active){
        Offer storage offer = tokenIdToOffer[_tokenId];
        return (
            offer.seller,
            offer.price,
            offer.index,
            offer.tokenId,
            offer.active
        );
    }

    function getAllTokenOnSale() external view returns(uint256[] memory listOfOffers) {
        uint256 totalOffers = offers.length;

        if(totalOffers == 0) {
            return new uint256[](0);
        } else {

            uint256[] memory result = new uint256[](totalOffers); //Size 1 (of Array)

            uint256 offerId;

            for (offerId = 0; offerId < totalOffers; offerId++) {
                if(offers[offerId].active == true) {
                    result[offerId] = offers[offerId].tokenId;
                }
            }
            return result;
        }
    }



    //Create New Offer for the given tokenId and price
    function setOffer(uint256 _price, uint256 _tokenId) public {
    require(_price > 0.009 ether, "Cat price should be greater than 0.01");
    require(tokenIdToOffer[_tokenId].price == 0, "You can't sell twice the same offers ");

        Offer memory _offer = Offer({
            seller: payable(msg.sender),
            price: _price,
            active: true,
            tokenId: _tokenId,
            index: offers.length
        });

        tokenIdToOffer[_tokenId] = _offer;
        offers.push(_offer);

        emit MarketTransaction("Create offer", msg.sender, _tokenId);
    }

    //Remove existing offer
    function removeOffer(uint256 _tokenId) public {
       
        Offer memory offer = tokenIdToOffer[_tokenId];
        require(offer.seller == msg.sender, "You are not the seller of that Kitty");

        delete tokenIdToOffer[_tokenId];
        offers[offer.index].active = false;
        
        emit MarketTransaction("Remove Offer", msg.sender, _tokenId);
    }

    //Accept offer and buy Kitty
    function buyKitty(uint256 _tokenId) public payable {
        Offer memory offer = tokenIdToOffer[_tokenId];
        require(msg.value == offer.price, "The price is incorrect");
 

        //Important to delete Kitty from mapping BEFORE paying out to prevent re-entry attacks
        delete tokenIdToOffer[_tokenId];
        offers[offer.index].active = false;

        _approve(_tokenId, msg.sender);
        //Transfer funds to the seller
        // TO DO: make this logic pull instead of push 
        if(offer.price > 0){
            offer.seller.transfer(offer.price);
        }

        //Transfer ownership of the Kitty
        transferFrom(offer.seller, msg.sender, _tokenId);

        emit MarketTransaction("Buy", msg.sender, _tokenId); 
    }
}

You can try it out on the Goerli testnet:
cryptonube.github.io/crayon-cats

Github Repository:
https://github.com/CryptoNube/crayon-cats

1 Like

Hello everyone. I am currently creating my own NFT ERC1155 website however I was wondering if anyone could help me out with a few things. I am currently a bit stuck on interfaces and how to redeclare them and how to properly inherit functions from different contracts. If you guys can help me out and tell me what I am doing wrong I would really appreciate it:) I am just starting out building my own projects and need a but of help haha. Thank you in advance!!!

// SPDX-License-Identifier: MIT

pragma solidity 0.8.21;

import “@openzeppelin/contracts/access/Ownable.sol”;

import “@openzeppelin/contracts/token/ERC1155/ERC1155.sol”;

import “@openzeppelin/contracts/token/ERC1155/IERC1155Receiver.sol”;

import “@openzeppelin/contracts/token/ERC1155/utils/ERC1155Receiver.sol”;

import “@openzeppelin/contracts/token/ERC1155/extensions/ERC1155Supply.sol”;

import “@openzeppelin/contracts/token/ERC1155/extensions/ERC1155URIStorage.sol”;

contract SpiderVerseNFT is ERC1155,Ownable,IERC1155Receiver,ERC115Receiver,ERC1155Supply, ERC1155URIStorage {

//Defining the variables that will be used in this contract along with their ids.

uint public constant MILES_MORALES = 0;

uint public constant GWEN_STACY = 1;

uint public constant PETER_B_PARKER =2;

uint public constant MIGUEL_O_HARA = 3;

uint public constant HOBBIE_BROWN = 4;

uint public constant JESSICA_DREW = 5;

uint public constant PAVITIR_PRABHAKAR = 6;

uint public constant PENI_PARKER = 7;

uint public constant PETER_NOIR_PARKER = 8;

uint public constant PETER_PORKER = 9;

uint public constant SPIDEY_TOKENS = 10;

//constructor will mint all NFTS and Fungible Spidey Tokens at once.

constructor () SpiderVerseNFT() {

    _mint(msg.sender, MILES_MORALES , 1, "");

    _mint(msg.sender, GWEN_STACY , 1 , "");

    _mint(msg.sender, PETER_B_PARKER , 1 , "");

    _mint(msg.sender, MIGUEL_O_HARA , 1 , "");

    _mint(msg.sender, HOBBIE_BROWN ,  1 , "");

    _mint(msg.sender, JESSICA_DREW , 1 , "");

    _mint(msg.sender, PAVITIR_PRABHAKAR , 1  "");

    _mint(msg.sender, PENI_PARKER , 1 , "");

    _mint(msg.sender, PETER_NOIR_PARKER , 1 , "");

    _mint(msg.sender, PETER_PORKER , 1 , "");

    _mint(msg.sender, SPIDEY_TOKENS, 10**20, "")

}

//standard mapping for ERC1155 Tokens.

mapping(address => mapping( uint => uint)) public _balance;

event TransferSingle(address _IERC1155) external;

function transferSi(uint256 _ids) public payable{



   emit transfersSi(msg.sender, _id, msg.value);

}

 function safeTransferFrom(address _IERC115)

 external {

 IERC1155(_SpiderVerseNFT)

.safeTransferFrom();

 require (owner)

           

 }

function safeTransferFrom(address _IERC1155) external view returns(address){

  return IERC1155(_SpiderVerseNFT).safeTransferFrom();

}

function safeBatchTransferFrom(address _IERC1155)

external {

IERC1155(_SpiderVerseNFT)

.safeBatchTransferFrom();

}

function safeBatchTransferFrom(address _IERC1155) external view returns(address){

  return IERC1155(_SpiderVerseNFT).safeBatchTransferFrom();

   

    emit(_operator, _from, _to, _ids, _values);

}

function balanceOf(address _IERC1155) external view returns(uint256[] memory) {

IERC1155(_SpiderVerseNFT).balanceOf();

}

function balanceOfBatch(address _IERC1155) external view returns(uint256) {

 return(_SpiderVerseNFT).balanceOfBatch();

}

function setApprovalForAll(address _IERC1155)

external {

IERC1155(_SpiderVerseNFT)

.setApprovalForAll();

}

function isApprovalForAll(address _IERC1155) external view returns(bool){

 return(_SpiderVerseNFT).isApprovalForAll();

   emit(_owner, _operator, _approved);

}

}

Hi fam,

I completed this course a while ago. My Dapp was working for a while. However, now there is a problem working with metamask. The wallet connects but does not communicate properly. This is the error message I get in the console. I am unsure how to implement this. Can anyone help please?Screenshot 2024-03-23 093541

Here is my repo:
https://github.com/CryptoNube/crayon-cats

Hi @DaveRad

I see you also posted on discord. My assumption on the issue is that there are issues communicating to the contract on the chain. May I know on which chain you have deployed the contract and which RPC URLs are you using to communicate to it?

1 Like

Hi @JohnVersus,
Yes.
I am unsure what you mean by what chain.
I deployed the contract to goerli testnet (if that’s what you mean).

Here is some more info.
This is from the ‘truffle-config.js’ file:

    goerli: {
      provider: () => {
        return new HDWalletProvider(mnemonic, 'https://eth-goerli.g.alchemy.com/v2/GgXuhW8yyDNe0kONIxP7d0lxkEdhkWQn')
      },
      network_id: 5, // eslint-disable-line camelcase
      gas: 4465030,
      gasPrice: 10000000000,
    },

The Goerli PRC URL that I am using in metamask is:
https://goerli.infura.io/v3/

When I look up the contract address on goerli.etherscan.io,
it says:
“Note: Our ether balance display is temporarily unavailable. Please check back later.”

I hope this answers your question

Thank you!
Dave

Hi @DaveRad

Thanks for the details. It looks like you are using goerli chain. Unfortunately goerli chain has been depreciated before 13 days. So you will have to deploy your contracts on a different testnet like sepolia or mumbai.

Ah, it’s torched already.

I did get notifications on Metamask that it would be deprecated soon, but maybe they hadn’t updated their message to say it is done already.

Thank you very much for helping and pointing me in the right direction!
Dave

1 Like