Skip to main content

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.

Filter by
Sorted by
Tagged with
20 votes
5 answers
35k views

How to convert from Wei to Ether in React?

In React, I use a Web3js call function to get a value. The returned value is in Wei. However, I want to render it in Ethers. What would be the best way to do it?
Ruham's user avatar
  • 963
9 votes
6 answers
3k views

Error: Hydration failed because the initial UI does not match what was rendered on the server, Wagmi and Nextjs

I was trying to implement wagmi in my dapp, after I copied the example in the documentation https://wagmi.sh/examples/connect-wallet, I got this error: Error: Hydration failed because the initial UI ...
Paulliano's user avatar
  • 209
9 votes
3 answers
27k views

How to import web3 into a React project

I apologize preemptively for the very basic question. I have added and installed web3 using yarn in my react project. Inside my index.js file in /scr and based on the web3 docs I have tried both (...
Bryan Campbell's user avatar
9 votes
2 answers
3k views

should I use server side rendering(Next.js) for a dapp?

Recently I have been studying a lot about dapps and now working on a little complex one. So what I wanted to ask is which is better for a dapp ? SSR or CSR ? I have read in a couple of places that we ...
Ankit Brahmbhatt's user avatar
9 votes
0 answers
2k views

Merkle tree whitelisting

Ive been trying to whitelist huge amount of addresses with merkle tree. Here is my json: [ "0xb860BA0E67C8......5ca4b4720d49F549AE8faA", "0xaF019d749865.......f044C1A534e1eC9F0D353"...
Atakan Saadetlioğlu's user avatar
8 votes
4 answers
11k views

Warning: Contract code size exceeds 24576 bytes

I'm using hardhat and when trying to compile the code it shows me a warning containing @uniswap/v2-periphery/contracts/UniswapV2Router02.sol:12:1: Warning: Contract code size exceeds 24576 bytes (a ...
Yaya's user avatar
  • 109
8 votes
5 answers
27k views

How to disconnect MetaMask wallet using Web3modal

I am using metamask with kovan to connect to the wallet import React, { useState, useEffect} from 'react'; import Web3 from "web3"; import Web3Modal from "web3modal"; import Navbar from './components/...
Svetlana Berrios's user avatar
7 votes
2 answers
27k views

Module not found: Error: Can't resolve 'stream' in React project including web3

When I include web3 in a project I am getting node compile errors like this... ERROR in ./node_modules/cipher-base/index.js 3:16-43 Module not found: Error: Can't resolve 'stream' in '/Users/xxx/dev/...
Simon's user avatar
  • 197
7 votes
1 answer
2k views

Why does sendSignedTransaction return a tx hash BUT does not post to the Rinkeby network (React, Metamask, web3, infura)

I'm developing a very simple React application wherein a user clicks a button and some ether gets sent from one account to another. Currently, the onClick sendEther function crafts a proper signed ...
Sam Dealy's user avatar
7 votes
1 answer
5k views

Watching Solidity event gives error: TypeError: watch is not a function

I am trying to watch a Solidity event in my React app, but I keep getting the following exception error thrown: TypeError: MyEvent.watch is not a function I am sure the event is present in ...
Tarek's user avatar
  • 643
7 votes
1 answer
928 views

Truffle unbox drizzle not working properly

truffle version = 4.1.4 truffle unbox drizzle truffle compile truffle migrate npm run build npm run start this gets me this error: Truffle Drizzle-box fails with TypeError: (0 , _drizzle....
Travis Rivera's user avatar
6 votes
3 answers
5k views

Build an application with Truffle + React + Redux

I'm looking for some examples about how to build a Dapp with Truffle + React + Redux. I'm able to only find this old tutorial https://www.youtube.com/watch?v=GPP6uAq15d8. Does anyone have some other ...
underdog's user avatar
  • 1,190
5 votes
7 answers
19k views

I am getting error saying export 'ethers'.'provider' (imported as 'ethers') was not found in 'ethers'. Despite importing correctly

I am trying to import ethers in my react js frontend with the below code, import "./App.css"; import { useState } from "react"; import { ethers } from "ethers"; import ...
Gourav Kumar's user avatar
5 votes
2 answers
4k views

How to call a contract function from ReactJS, that takes a struct as an argument?

I am struggling to figure out how to actually call a function (using React) in a contract that takes a struct as an argument (which also has another struct in it) ? The contract function looks like ...
CryptoHero's user avatar
5 votes
1 answer
3k views

"this._eth.sendTransaction is not a function" when executing method in Web3

I'm using react-web3 (which basically gives me a web3 object back) and I'm trying to make my contract work. This is the code I'm using: const web3 = window.web3; const contract = new web3.eth....
Fabian Lurz's user avatar
5 votes
4 answers
13k views

Metamask API: can't detect events "connect" and "disconnect" in React.js

Hello I'm very new to developing. I'm testing communication with Metamask via React.js I managed to succesfully listen to Network and Account changes, but when I try to detect if someone "...
Menlo's user avatar
  • 63
5 votes
1 answer
6k views

The send transactions "from" field must be defined!

I am trying to call a function of a contract that has been deployed to Ganache. I am trying to call a function that makes payouts to a few addresses and can be called by owner only. When I am calling ...
Rohan Dhar's user avatar
5 votes
1 answer
819 views

Having issues using the Drizzle library in React

Using Ubuntu 16.04 Greetings, all I was following the tutorial for getting Drizzle up and running located here. I advanced to this step when I attempted to run the app using the "npm start" command ...
Jake Armitage's user avatar
5 votes
1 answer
3k views

How to mock an ethers provider while testing with jest?

In the real app, I'm using the web3-react hook to inject the provider, etc. How do I best mock that/replicate that in a Jest Typescript environment?
Michael C's user avatar
  • 463
5 votes
2 answers
7k views

Listening for events in a React DApp

I am new to React and don't know where I should put the code to .watch() for Solidity events. Right now, I the code in a member function of my main App class. As is, I am successfully capturing ...
Ryan Miller's user avatar
4 votes
1 answer
2k views

What does "on('transactionHash', callback())" do?

I'm following a tutorial to make transactions. The tutor does it using below web3.js and react.js code block. stakeTokens = (amount) => { this.setState({ loading: true }) this.state.daiToken....
Sapthaka's user avatar
  • 163
4 votes
3 answers
2k views

simple dapp with React "issues with solidity"

i am trying to build a simple app (will improve once i get the simple one to work)I created a new Reactapp, added both the contracts and migrations directories and i use ganache and metamaks. I have ...
MyTurn's user avatar
  • 101
4 votes
3 answers
673 views

Why is MeteorJS so popular for making dApps?

I am learning more about creating a front end that communicates with solidity contracts. At first, I was pointed in the direction of using ReactJS, but now I see many people talking about using ...
Mike Garber's user avatar
4 votes
1 answer
6k views

How to detect if user's account on Metamask is disconnected in frontend

am trying to build a web3 application. In my frontend I want to detect if user changed his account on Metamask wallet or disconnected and want to show this change on frontend. How can I do so? const ...
Radiant_Performer_39's user avatar
4 votes
3 answers
6k views

Provider does not have a request or send method to use

I am doing the Ethereum and Solidity: The Complete Developer's Guide and I am unable to resolve this error. The code is expected to do a transaction via await factory.methods .createCampaign(this....
Anupam's user avatar
  • 572
4 votes
1 answer
5k views

Refresh page upon MetaMask Confirmation. Web3js & React()

I would like to reload the React Web3 wallet's page upon MetaMask Confirmation. Meaning when the ERC-20 token send transaction is confirmed, the page should reload or state should update to display ...
Luc1d's user avatar
  • 146
4 votes
4 answers
11k views

This contract object doesn't have address set yet, please set an address first

I am in the final stages of developing an application that is similar to https://www.ethereum.org/crowdsale, however, when I click on the create button, my Metamask modal is not popping up to ask me ...
Daniel's user avatar
  • 501
4 votes
4 answers
5k views

Module not found: Can't resolve './contracts/SimpleStorage.json'

I am new to solidity, truffle and i tried react-box from Truffle and i get the following error. I am using Macos. Here is the basic steps npm install -g truffle truffle develop compile ...
MyTurn's user avatar
  • 101
4 votes
1 answer
2k views

Call a function with an address attached (Solidity React)

I'm trying to make a frontend of calling a function with an address attached: function getAvailableAllocation(address _addr) constant returns (uint ethAvailableAllocation) { return ...
Vladimir B.'s user avatar
4 votes
2 answers
1k views

How can I access the address of a contract in a drizzle dapp?

I've started working from the drizzle box and can access functions within contracts, but if I want to give an allowance to a contract address so it can use users tokens how can I give the correct ...
Ayeayeron's user avatar
  • 161
4 votes
5 answers
8k 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 ...
Mustapha Mond's user avatar
4 votes
1 answer
2k views

How to handle wrong chain error [Infura, Wagmi, React, Typescript]

When I npm run dev and my wallet is not connected to one of the chains I have specified, I get the following error This raises the question for me, how to handle the error when a user is not ...
kalculated's user avatar
3 votes
2 answers
926 views

window.ethereum.isConnected() always returns true

I'm currently working on "How to build an NFT Marketplace from Scratch" and, Implementing wallet connection. The wallet connect Button is always shows as "connected" even if I ...
吉川遼's user avatar
3 votes
2 answers
2k views

Error: Unhandled Rejection (Error): This contract object doesn't have address set yet, please set an address first?

I was learning Solidity through Remix and I decided to make a simple front-end application with pure HTML and CSS, it worked using Rinkeby. Then I discovered Truffle and since then I try to make the ...
João Vitor's user avatar
3 votes
2 answers
2k views

Connecting to MetaMask wallet via WalletConnect Web3Modal V2 from mobile browser does not give connect prompt in metamask app

import { EthereumClient, modalConnectors, walletConnectProvider, } from "@web3modal/ethereum"; import { configureChains, createClient, WagmiConfig } from "wagmi"; import { ...
chaitu605's user avatar
3 votes
1 answer
2k views

contract sendTransaction does not return transaction hash

I just started with truffle react box.. and i changed a little bit to : const tx = await instance.set.sendTransaction(999,{from : accounts[0]}); console.log("tx is on the way : ",tx); const txReceipt ...
Ankush Tripathi's user avatar
3 votes
2 answers
2k views

How to Listen to Contract Events in Drizzle

Let's take the example of the SimpleStorage contract that comes with the truffle box drizzle-box How can we listen to the event StorageSet and console.log it to the JS console? drizzleOptions.js ...
Nyxynyx's user avatar
  • 1,167
3 votes
4 answers
558 views

React for a dApp

Is it somehow possible to build the front-end side for a DApp using React ? (if i have the back-end code written in solidity and i have no knowledge of solidity? or do i need to learn solidity first )...
USER's user avatar
  • 35
3 votes
2 answers
1k views

How to pass dynamic arguments to usePrepareContractWrite in Wagmi?

I have to pass token amount as argument on a function call. The amount is dynamic and coming from a text box when a user click button (for partial amount submission). There is another button that ...
sanjay dev's user avatar
3 votes
1 answer
3k views

Populating the write args with wagmi usePrepareContractWrite

I am using wagmi usePrepareContractWriteand write to write to my contract. I am allowing the user to upload fields and create an NFT. Is there a way to set the args in the write function? For example ...
caffeinescript's user avatar
3 votes
1 answer
822 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 ...
Sam11's user avatar
  • 63
3 votes
2 answers
6k views

React: Please pass numbers as strings or BigNumber objects to avoid precision errors

Here is my onSubmit function: onSubmitModifyAllocation = async event => { event.preventDefault(); const accounts = await web3.eth.getAccounts(); await fund.methods.modifyAllocation(this....
Vladimir B.'s user avatar
3 votes
1 answer
2k views

React: Re-render states after MetaMask transaction

The React frontend of my dapp successfully fetches the data from the private blockchain (Ganache) and updates the states accordingly. However, when I trigger a function via onClick that updates the ...
Ruham's user avatar
  • 963
3 votes
0 answers
802 views

Randomly getting errors on Wagmi useWaitForTransaction and useContractWrite hooks

I'm using a Wagmi library in my ReactJS application and one specific hook(s) are randomly throwing errors. Sometimes it's not an error and the task executes fine, or it's throwing one of 2 errors ...
Nika Khachiashvili's user avatar
3 votes
1 answer
803 views

How to fetch data using wagmi without user wallet?

Is it possible to use the useContractRead hooks to get contract data without the user connecting their wallet? I see no option to do a read without a user connecting first in wagmi.
Mustafa Khan's user avatar
3 votes
1 answer
436 views

How to pass arrays to a smart contract function from frontend using react and ethers js?

What is the approach to take an array as input from the user on frontend and then storing it in useState and pass it to a smart contract using ethers. I am just unable to create the correct format. ...
Zartaj Afser's user avatar
  • 4,396
3 votes
1 answer
2k views

Using typed @web3-react/core, Web3ReactProvider, useWeb3React in a well-encapsulated way

I was looking into good usage patterns of @web3-react/core, specifically was looking at Uniswap's V3 code among other places... Examples here: https://github.com/Uniswap/interface/blob/main/src/index....
lostdorje's user avatar
  • 129
3 votes
2 answers
1k views

Metamask injects one account in web3, but calls contracts using another account

Building a React app, MetaMask injects web3, I get accounts[0] from getAccounts(), then pass it to my contract functions together with other parameters. I want my modifiers to lock incoming function ...
Elio's user avatar
  • 31
3 votes
1 answer
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....
CollaborativeLearner's user avatar
3 votes
2 answers
28k 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 '...
H Ali's user avatar
  • 31

1
2 3 4 5
12