Questions tagged [react]

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It uses a declarative paradigm and aims to be both efficient and flexible.

141 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
3
votes
1answer
1k views

Drizzle cacheCall is not updating data correctly

I have a react component which is interacting with a solidity contract via drizzle. I store a cacheCall index in the constructor: this.opcTokenCacheCallIndex = context.drizzle.contracts.OPCToken....
3
votes
2answers
27k views

TypeError: Cannot read property 'then' of undefined

I am having an error with Web3. After going through all possibilities I decided to post a question hoping for someone with a solution. The error I keep getting is: TypeError: Cannot read property '...
2
votes
0answers
21 views

Is it conventional to host your dapp on a subdomain (e.g. app.uniswap.org), and why?

I've noticed the design pattern of having an enter app button from the home/landing page which opens the dapp in a new tab is quite common. This is something that I don't see in Web2 design. Is there ...
2
votes
1answer
2k views

Web3 error handling in React

This is really a two part question. First, the only way I can get the error message thrown by a Smart Contract require statement is to call the function first with a call rather than a send. send does ...
2
votes
1answer
357 views

Uncaught (in promise) Error while opening and doing transaction on private ethereum blockchain using web3 and go-ethereum

I am trying to integrate a react app with go-ethereum using web3js. an event Onsubmit will do the following: 1. Create an account. 2. Open the account. 3. Approve a smart contract with the created ...
2
votes
0answers
318 views

Solidity get return variable from a send method in React

I'm trying to call a method that pushes data to my Blockchain and then returns back the ID of the new struct I created. This is how I'm calling the method in my React code: const documentId = await ...
2
votes
0answers
105 views

Use React Dev Tool in developing MetaMask

I am new to MetaMask, and learning how MetaMask works. I found MetaMask UI was implemented with React, so I tried to use React Dev Tool, but I am not able get it working. Please help. I started stand ...
2
votes
0answers
181 views

How to update react component state with Drizzle

I'm using react and drizzle and want to update the classes state based on data returned from a call to a contract. I'm using the standard pattern from the drizzle box and here (https://itnext.io/how-...
2
votes
0answers
402 views

Truffle constant functions run out of gas, how to simulate a local node

I am new to solidity and web3. I am getting familiar with Truffle, testrpc and web3 1.x. I am also using React as a front end. I know that functions that don't change the smart contract state can ...
1
vote
0answers
71 views

[ Web3.js on BSC ]: Returned error: unknown account

Here's the error: index.js:1 Error: Returned error: unknown account I'm getting this error while running this method: nftMintingContract.methods.mint(account, cid).send({from: account}) The ...
1
vote
1answer
90 views

How to keep MetaMask connection to the UI persistent with Web3-react?

I am working with web3-react and I cannot figure out how to keep the connection to the MetaMask wallet persistent upon browser refreshes. This is the code: // define the injectedConnectors const ...
1
vote
0answers
63 views

Deploying and Using OpenZeppelin PaymentSplitter in Web3

I currently have a contract that is creating an "item" for a customer to purchase. I've managed to follow a well put together tutorial for implementing this contract into my test network ...
1
vote
0answers
23 views

How to send multiple function arguments to solidity smart contract from react.js using Drizzle?

I am trying to call a function of solidity contract that takes in multiple arguments(8 arguments). This is my contract function. function generatePet( uint256 _petPrice, ...
1
vote
1answer
165 views

Dapp using react-native and truffle

I have a blockchain dapp which is working fine in web browser. Wallet : Metamask OS : Ubuntu 20 Node : 10.19.0 Npm : 6.14.4 But, I would like to run the dapp in mobile view using truffle ...
1
vote
0answers
34 views

Transfer ethers from smart contract to an account in metamask

I want to transfer 10 ether from smart contract to an account in metamask. I used the following script inside my smart contract : function transferBalance(address payable Add) public{ ...
1
vote
1answer
97 views

ALERT: Transaction Error. Exception thrown in contract code.(metamask)

i am working on truffle Pet-shop with react, i am using local blockchain ganache with metamask, The issue I'm encountering with my application is that when i am trying to call deleteAdopter function ...
1
vote
0answers
70 views

transaction receipt not working

I use react and web3 to interact with metamask. Until yesterday every thing was fine. but, today some of the transaction results are not returning. I use this code to load web3 let web3 if (window....
1
vote
0answers
72 views

Execution erorr: Invalid opcode on estimateGas | Possible unhandled promise rejection

pragma solidity ^0.5.0; I get invalid opcode error when trying to estimate gas needed for my transaction from react-native using the following line of code: const gasAmount = await contract.methods ...
1
vote
0answers
91 views

how to display a struct inside mapping inside struct in solidity on react js frontend

I have a mapping of struct (mapping (address => struct)) inside another struct. I'm having issue in how to display the struct in the front end while using Reactjs.
1
vote
0answers
110 views

Contract not returning error to React Interface

I have a contract which I've tested with Mocha and Remix and is working just fine. The problem is when I'm running it with my React Interface. When I call a function in my solidity contract that ...
1
vote
0answers
64 views

What are the differences between Drizzle and the Truffle React box?

Truffle has many "boxes", two of which are: truffle unbox react And: truffle unbox drizzle They both seem to be focused on frontend development. Other than Drizzle being based on a Redux store, ...
1
vote
0answers
32 views

Event listener doesn't trigger setState in web3js

I have the following function that does something with a smart contract, and then should manipulate the dapp state when the event has been received. However, it doesn't set the state of the dapp, and ...
1
vote
1answer
44 views

Watching for events

How come sometimes events show up on block explorers in hex and sometimes to you can see the actual string name of the event in the logs. I ask because my event watchers on my front end only pick up ...
1
vote
0answers
491 views

Help me fix Error: No "from" address specified in neither the given options, nor the default options. I'm use MetaMask

file web3.js import Web3 from 'web3'; const web3 = new Web3(window.web3.currentProvider); export default web3; file image.js import web3 from './web3'; const address = '...
1
vote
0answers
20 views

Any idea how to add new contracts into drizzle react app using the address?

I have a react app which creates new contracts. lets say A creates B. I have the addresses of the newly created contracts of B. How do i add the newly created contracts of B using its address to ...
1
vote
1answer
66 views

How can I add new contracts generated from a factory to my drizzle-react app?

I have a Factory contract which creates new contracts. How do I get the new contract into my drizzle-react web app? I am using to send the transaction to create a new contract but I don't know how ...
1
vote
0answers
22 views

How can I specify a date picker in one of the fields in my ContractForm React component?

I'm using the ContractForm React component available in the drizzle-react-component library. It's super nice and easy to setup and use, but I am dealing with a date in one of the fields (which is ...
1
vote
1answer
4k views

gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1

I used the command truffle unbox react to build a dapp. It is just the initial step of my dapp development. However, it sucks. It continually pops up gyp ERR! build error gyp ERR! stack Error: `C:\...
1
vote
1answer
321 views

Both web3.eth.accounts.create() and web3.eth.personal.newAccount() not working

I'm making a dApp on reactjs. I wanted to create a new account and have done it trying 2 methods this.web3.eth.personal.newAccount() this.web3.eth.accounts.create() I have attached the code below(...
1
vote
1answer
570 views

How to use web3-react with truffle Dapp? any sample code / tutorial?

I am new to react and finding issues with the front-end of the Dapp application. Especially in web3 version > web3 1.0.0 I just heard about the web3-react and I think it will be a lot easier. I ...
1
vote
0answers
23 views

Adding additional info for initial state of Drizzle

How do I add extra content to the initial state of drizzle? I want to keep some local information that is not dependant on the blockchain. Should I keep a seperate redux store for that or is there a ...
1
vote
0answers
618 views

metamask and infura - Managing and signing with private keys

I am using Infura as a node for my DApp so I need to send raw transactions by signing them. These transactions can come from multiple users of an application so each user must sign and send a raw ...
1
vote
1answer
894 views

How to get the returned value of a smart contract function when it called by using cacheSend() in drizzle

I just tried to build a simple DApp using truffle, react and drizzle. My question is how to get the returned value of a smart contract function when it called by using cacheSend() in drizzle? As ...
1
vote
1answer
312 views

Unable to deploy smart contract to rinkeby using ledger wallet?

I am trying to deploy smart contract using ledger wallet. But i keep getting the error cant subscribe to new header. However i get the transaction hash but cant receive the contract instance and ...
1
vote
1answer
813 views

How to get only past 2 days events using getPastEvents everytime?

How can the following query be modified to only fetch the past two days worth of events: const events= await MyContract.getPastEvents("eventName", { fromBlock: 0, toBlock: "latest" });
1
vote
0answers
241 views

set default amout to transaction

I have a ticket system where you can buy some tickets to an given price. I want to set the amount to the method and send it back to the contract. For this I'm using metamask but I don't really get, ...
1
vote
0answers
171 views

There is any open source for mnemonic (recovery) phrase can be used in react project?

I want to know how to implement 12 words or 24 words mnemonic(recovery) phrase screen as "Create Wallet" part in the ethereum, ERC20 token wallet project built with React Native like as coinomi wallet....
1
vote
0answers
203 views

cannot get return variable(s) in javascript when using require in solidity

I have a function in solidity that returns a few bytes32 variables. I cannot for the life of me access those variables. Can someone please help? function getData() public returns (bytes32, bytes32, ...
1
vote
2answers
4k views

Create an Ethereum wallet with React Native for single token

Many of you might think that this question has already been answered but I don't think that there is a clear answer on the internet for the current Ethereum, Web3.js and React Native versions (for ...
1
vote
0answers
335 views

Drizzle React Component ContractData for array returns empty

<ContractData contract="TheContract" method="getData" methodArgs={[accounts[0], "0", { from: accounts[0] }]} /> and a contract view function function getData() public view returns (...
1
vote
0answers
326 views

Web3 Eth Filter does not seem to work

I am using Ganache as my test network and I am running React as my front end. My ComponentWillMount() is as follows: componentWillMount() { getWeb3 .then(results => { this.setState({ ...
1
vote
0answers
643 views

"Truffle unbox react" Not Working Properly

I am facing problems running the basic official setup of react and truffle. Here's what I did: truffle init truffle unbox react truffle develop truffle(develop)> compile truffle(develop)> ...
1
vote
0answers
82 views

Is the following model correct for a DAPP?

I am trying to make a DAPP using React Native. I have made a flowchart of all the pieces i need to build in order for it to work. I was hoping if someone could verify it so that I can start working ...
1
vote
0answers
822 views

How to fix 'Waiting for roots to load...' in react-devtools for a dApp?

I am building a Parity UI dApp from the Skeleton dApp at https://github.com/paritytech/skeleton and I want to debug it with Facebook's react-devtools Since Parity renders the dApp in an iframe, I ...
0
votes
1answer
13 views

Unable to upload images to IPFS using ipfs-http-client

I am having an issue with uploading images to IPFS after having switched to ipfs-http-client from ipfs-api. This is what my page code is like at the moment: import ipfs from "../utils/ipfs"; ...
0
votes
1answer
21 views

In React.js, How can I get return data from smart contract method including event and emit?

I have smart contract server function and that function including emit and event. event TokenMinted( address indexed _recipient, uint256 indexed _tokenId ); function ...
0
votes
0answers
28 views

How to send tether token in ether wallet using web3

I am gonna send tether token from my wallet address to other wallet address using web3. const Web3 = require('web3'); const web3 = new Web3('https://mainnet.infura.io/v3/projectId'); web3....
0
votes
0answers
21 views

the simplest NFT Gallery displayer using react

As an exercise, I'm trying to build the simplest possible application, which is an NFT collection gallery. I simply would like to query a smart contract and read the metadata and display the whole ...
0
votes
1answer
15 views

how can i invoke function each 5 minutes using react?

how can i invoke pickVoters() each 5 minutes using react? import React, { Component } from "react"; class Pick extends Component { static async getInitialProps(props) { const { address } = ...
0
votes
0answers
9 views

MetaMask not showing ERC-20 amount in Transaction - Only showing ETH gas fee

Im experimenting with sending my custom ERC-20 token with MetaMask to my contract. Im using react.js for a simple front end. I press a button which creates a transaction from my metamask account for a ...