React (Harder) vs DApps (Easier)

Am I the only one?

It is normal to be able to understand DApp’s easier than React and Javascript?

I find I can follow the logic in DApp’s such as solidity, but not in basic javascript. I understand this makes no sense, but I find it to be true.

I am going throught the React course and I just want to quit and go straight to Ethereum, but I know without React I won’t be able to build the front end of the DApp.

My two toughest courses are Javascript and React. I have taken a Solidity course before and I totally get it.

4 Likes

Hi @Stacy_L,

Javascript definitely is a little on the weird side of programming languages with many quirks and weird features. Especially programmers who come from C#, C++ or Java hate the fact that javascript is sometimes very unpredictable.

Most programming languages are very structured and predictable but Javascript isn’t because of all it’s flexibility. Advocates of javascript actually adore the fact that it is so flexible and that it can be abstracted into layers and layers.

Similarly, React uses JS and was built on top of it. So, you can expect these quirks there as well.

To answer your question, no. It is not common for people to understand JS at the very first go. Other languages are easier to pick up. But once you get the hang, you’ll fly.

Hope this gives you a perspective. :smile:

2 Likes

@Malik thanks. I appreciate it.

2 Likes

https://github.com/THEMERLINGROUP/SCP
I am having a problem configuring my smart contract with Metamask. I came here because my front end is in React. Attached is the Github link and instructions on where the error is (line 66)
Error Message:
image
GitHub: https://github.com/THEMERLINGROUP/SCP

Hi @Samuel1,

You don’t have a function named newOrderVolumeId in your solidity contract. If you don’t have it defined there, you wouldn’t get it over here in your methods list.

As I see, newOrderVolumeId is a uint256 variable and not a function. Calling it is impossible.

Hope this helps.

Have a nice day.

So my question is how do I input that function? I tried to use a state variable and it did not work. I tried call getOrder twice and it did not work and I tried to get rid of it and get an error. I know what is wrong, I just do not know how to replace it!

Malik help me out. I paid for this academy and all I have gotten is outdated projects and no answers to my problems.

Yes,

To get your latest updated variable newOrderVolumeId , you have to make it a global variable in your contract. And when you updated this variable in your _createOrder function, it gets updated.

And to retrieve this new updated value of newOrderVolumeId , just create a getter function called getNewOrderVolumeId and define a return statement to return newOrderVolumeId.

This way you will have access to newOrderVolumeId.

The place where you went wrong Is, you were trying to access a locally defined variable and you were calling it directly instead of using a getter function. This should solve the issue.

Let me know if you have any doubts.

So like this?

function getNewOrderVolumeId() public returns (uint256) {
        require(newOrderVolumeId = orderVolume.length - 1);
        return newOrderVolumeId;
    }

Yes, please try and let me know your approach.

I get error
image

So this is what I did:
I created a function called getNewOrderVolumeId:

 function getNewOrderVolumeId() public pure returns (uint256 newOrderVolumeId) {
        return newOrderVolumeId;
    }

Then in my App.js:
image
But I got this:
image

Hi,

Did you re-deploy the contract using truffle migrate --reset and provide the new ABI and contract address in your app?

Also, you can check your contract abi if your function method is available in the JSON file to make sure.

Hope this helps.

So I updated it twice. I moved over the contracts and still I am getting
image
My code in question:

  async function updateOrders() {
    const id = await SupplyChainProtocol.methods.getNewOrderVolumeId().call();
    const order = await SupplyChainProtocol.methods.getOrder(id).call();
    setOrder({
      id: order[0],
      cost:order[1],
      productName:order[2],
      description:order[3],
      leadTime_in_days:order[4]
    })
  }
  async function createOrder(e) {
    e.preventDefault();
    const cost = e.target.elements[0].value;
    const productName = e.target.elements[1].value;
    const description = e.target.elements[2].value;
    const leadTime = Math.floor(new Date(e.target.elements[3].value).getTime() / 1000 * 60 * 60);
    await contract.methods._createOrder(order.id, cost, productName, description, leadTime).send({from: accounts[0]})
    await updateOrders();
  }

Smart Contract:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;
pragma experimental ABIEncoderV2;
 import "./IERC721.sol";
 import "./IERC721Receiver.sol";
 


 contract SupplyChainProtocol is IERC721 {
  
    string public override constant name = "SupplyChainProtocol";
    string public override constant symbol= "SCP";
    bytes4 internal constant MAGIC_ERC721_RECEIVED = bytes4(keccak256("onERC721Received(address,address,uint256,bytes)"));
   uint256 public orderId;
    
    /**
     *  bytes4(keccak256('balanceOf(address)')) == 0x70a08231
     *  bytes4(keccak256('ownerOf(uint256)')) == 0x6352211e
     *  bytes4(keccak256('approve(address, uint256)')) == 0x095ea7b3
     *  bytes4(keccak256('getApproved(uint256)')) == 0x081812fc
     *  bytes4(keccak256('setApprovalForAll(address, bool)')) == 0xa22cb465
     *  bytes4(keccak256('isApprovedForAll(address, address)')) == 0xe985e9c5
     *  bytes4(keccak256('transferFrom(address, address, uint256)')) == 0x23b872dd
     *  bytes4(keccak256('safeTransferFrom(address, address, uint256)')) == 0x42842e0e
     *  bytes4(keccak256('safeTransferFrom(address, address, uint256, bytes)')) == 0xb88d4fde
     *  
     *  => 0x70a08231 ^ 0x6352211e ^ 0x095ea7b3 ^ 0x081812fc ^
     *     0xa22cb465 ^ 0xe985e9c5 ^ 0x23b872dd ^ 0x42842e0e ^ 0xb88d4fde == 0x80ac58cd
     */
    bytes4 private constant _INTERFACE_ID_ERC721 = 0x80ac58cd;

    /**
     *  bytes4(keccak256('supportsInterface(bytes4)'));
    */
    bytes4 private constant _INTERFACE_ID_ERC165 = 0x01ffc9a7;
    
  struct Order{
      uint256 id;
      uint64 cost;
      string productName;
      string description;
      uint64 leadTime_in_days;
    }
    Order[] private orderVolume;
    
   
   
    mapping(address => uint256) private balances;
    mapping(address => uint256) private OrderIncites;
    mapping(uint256 => address) private orderIdMapping;
    mapping(uint256 => address) private orderIndexToApproved;
    mapping(address => mapping(address => bool)) private _operatorApprovals;
   event OrderMade(address owner,
     uint256 OrderVolumeId,
      uint256 cost,
      string productName,
      string description,
      uint256 leadTime_in_days
    );
    function _createOrder(uint256 _ID,
        uint64 _cost,
        string memory _productName,
        string memory _description,
        uint64 _leadTime_in_days,
        address _owner
       ) external returns (uint256) {
           
         Order memory _order = Order({
             id:_ID,
             cost: uint32(_cost),
             productName: string(_productName),
             description: string (_description),
             leadTime_in_days: uint32(_leadTime_in_days)
             });
             
          orderVolume.push(_order);
          uint256 newOrderVolumeId=orderVolume.length - 1;
          emit OrderMade(_owner, newOrderVolumeId, _cost, _productName, _description, _leadTime_in_days);
          _transfer(address(0), _owner, newOrderVolumeId);
          orderId++;
          return newOrderVolumeId;  

    }
  
    function getOrder(uint256 _id) external view returns(
        uint256 id,
        uint256 cost,
        string memory productName,
        string memory description,
        uint256 leadTime_in_days
    ) {
        return (
            orderVolume[_id].id,
            orderVolume[_id].cost,
            orderVolume[_id].productName,
            orderVolume[_id].description,
            orderVolume[_id].leadTime_in_days
        );
    } 
    function getNewOrderVolumeId() public pure returns (uint256 newOrderVolumeId) {
        return newOrderVolumeId;
    }
 
    function totalSupply() external view override returns (uint256 total){
        return orderVolume.length;
    }
 
    function balanceOf(address owner) external view override returns (uint256 balance){
        return OrderIncites[owner];
    }
    function ownerOf(uint256 tokenId) external view override returns (address owner){
        return orderIdMapping[tokenId];
        
    }
 

    
    function transfer( address to, uint256 tokenId) external override{
        require(address(to) != address(0));
        require(to != address(this));
        require(_owns(msg.sender, tokenId));
        _transfer(msg.sender,to,tokenId);
    }
    function _transfer(address _from, address _to, uint256 _tokenId) internal {
        balances[_to]++;
        _to=orderIdMapping[_tokenId];
        if(_from != address(0)) {
            balances[_from]--;
            delete orderIndexToApproved[_tokenId];
        }
        emit Transfer(_from, _to, _tokenId);

    }
    function _owns(address _claimant, uint256 _tokenId) internal view returns(bool){
        return orderIdMapping[_tokenId] == _claimant;
    }
     function approve(address _approved, uint256 _tokenId)public override payable {
        require(_approved != address(0));
        require(_owns(msg.sender, _tokenId));
        _approve(_approved, _tokenId);
        emit Approval(orderIdMapping[_tokenId], _approved, _tokenId);
    }
    
     function setApprovalForAll(address operator, bool _approved) external override{ 
        require(operator != address(0));
        require(operator != msg.sender);
        _setApprovalForAll(operator, _approved);
        emit ApprovalForAll(msg.sender, operator, _approved);
    }

    function _setApprovalForAll(address _operator, bool _approved) internal{
        _operatorApprovals[msg.sender][_operator] = _approved;
    }

    function getApproved(uint256 _tokenId) external view override returns (address){
        require(_tokenId < orderVolume.length);//check that the token exists
        return orderIndexToApproved[_tokenId];
    }

    function isApprovedForAll(address _owner, address _operator) external override view returns (bool){
        //returns the mapping status for these inputs
        return _operatorApprovals[_owner][_operator];
    } 
    function _checkERC721Support(address _from, address _to, uint256 _tokenId, bytes memory _data) internal returns (bool) {
        if (!_isContract(_to)) {
            return true;
        }

        // Call onERC721Received in the _to contract
        bytes4 returnData = IERC721Receiver(_to).onERC721Received(msg.sender, _from, _tokenId, _data);
        return returnData == MAGIC_ERC721_RECEIVED;
    }
     function _isContract(address _to) internal view returns (bool) {
        uint32 size;
        assembly {
            size := extcodesize(_to)
        }
        return size > 0;
    }
    
    
    function safeTransferFrom(address _from, address  _to, uint256 _tokenId, bytes memory data) public override payable {
        require(_isApprovedOrOwner(msg.sender, _from, _to, _tokenId));
        _safeTransfer(_from, _to, _tokenId, data);

    }
     function transferFrom(address _from, address _to, uint256 _tokenId) external override payable{
        require(_to != address(0));
        address owner = orderIdMapping[_tokenId];
        require(_to != owner); // not sending to the owner
        require(msg.sender == _from || approvedFor(msg.sender, _tokenId) || this.isApprovedForAll(owner, msg.sender)); // currenct address is the owner of the token
        require(_owns(_from, _tokenId), "From is not the owner of the token");
        require(_tokenId < orderVolume.length, "Token ID is not valid");

        _transfer(_from, _to, _tokenId);
    }
    
    function _safeTransfer(address from, address to, uint256 tokenId, bytes memory _data) internal {
        _transfer(from, to, tokenId);
        require(_checkERC721Support(from, to, tokenId, _data));
    }
    function safeTransferFrom(address _from, address _to, uint256 _tokenId) external override payable {
        safeTransferFrom(_from, _to, _tokenId,"");

    }

    function _approve(address _approved, uint256 _tokenId) private {
        orderIndexToApproved[_tokenId] = _approved;
    }
    function approvedFor(address claimant, uint256 tokenId) internal view returns(bool){
        return orderIndexToApproved[tokenId] == claimant;
    }

    function _isApprovedOrOwner(address spender, address _from, address _to, uint256 _tokenId) private view returns(bool) {
        require(_tokenId < orderVolume.length);
        require(_to != address(0));
        address owner = orderIdMapping[_tokenId];
        require(_to != owner);
        require(_owns(_from, _tokenId));
        //Error at approve(spender, _tokenId)
        return (spender == _from || approvedFor(spender, _tokenId) || this.isApprovedForAll(owner, spender) );
    }
  
   
    
 }