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
8
votes
3answers
5k 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?
7
votes
2answers
806 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 ...
7
votes
1answer
512 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....
6
votes
3answers
5k 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 (...
5
votes
1answer
2k 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....
5
votes
1answer
463 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 ...
5
votes
3answers
4k 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 ...
5
votes
1answer
1k 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 ...
4
votes
3answers
533 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 ...
4
votes
1answer
1k 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 ...
3
votes
2answers
502 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 ...
3
votes
1answer
375 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 ...
3
votes
2answers
1k 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 ...
3
votes
4answers
390 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 )...
3
votes
1answer
570 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 ...
3
votes
2answers
2k 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 ...
3
votes
1answer
401 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 ...
3
votes
1answer
718 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....
2
votes
1answer
3k views

TypeError: (intermediate value).at is not a function

This is my code: import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Web3 from 'web3'; var ETHEREUM_CLIENT = new Web3(new Web3.providers.HttpProvider("...
2
votes
2answers
272 views

Drizzle and mapDispatchToProps not working

I'm still struggling with Drizzle, trying to dispatch my own action. Based on the Drizzle box, I added the following to HomeContainer: import Home from './Home'; import {drizzleConnect} from 'drizzle-...
2
votes
1answer
561 views

Solidity Truffle React TestRPC: Invalid address error while creating transactions through React app

I am writing a simple contract which is basically a registry. I am using testRPC for my ethereum testing. Following is my contract on Truffle: notary.sol pragma solidity ^0.4.11; contract notary { ...
2
votes
1answer
384 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 ...
2
votes
1answer
19 views

Smart Contract in website framework?

Let's say you have a Smart Contract which allows users to enter in a list by paying 0.05 ETH How would you implement the front-end / what framework would you choose? For example, I saw someone who ...
2
votes
1answer
70 views

Calling payable state changing function on client side with metamask in ethereum infura testnet

I can't seem to find an answer for my problem, or it's either impossible and I'm missing something, or it's trivial and I'm missing something. I have this function on client side: const bet = web3....
2
votes
1answer
1k views

Metamask transaction confirmed but “Internal JSON RPC error”

I am using getWeb3() to instantiate a contract and make calls with, the transaction says that is confirmed but when I open up developer tools there is the following error MetaMask - RPC Error: ...
2
votes
1answer
1k 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....
2
votes
1answer
377 views

Unhandled Rejection (TypeError): _this.contarct.getLastName(…).call is not a function

I want to get the customers last name but i get the following error any idea how to fix that ? And is there a way to modify my current get function so that it returns the first name and last name at ...
2
votes
1answer
77 views

Is React still part of the Truffle framework?

Is React still part of the Truffle framework? Need to set up a truffle project and would like to use React but not sure if it is still part of the truffle framework/family. Thanks, Manj
2
votes
1answer
541 views

Solidity events on react not firing

Simple logic event with firing in function, work perfectly as expected in truffle develop console, but never firing on my Dapp created with create-react-app, it's just seems to not listen/monitor the ...
2
votes
1answer
998 views

Web3 not defined

I am following this tutorial here: https://medium.com/@merunasgrincalaitis/the-ultimate-end-to-end-tutorial-to-create-and-deploy-a-fully-descentralized-dapp-in-ethereum-18f0cf6d7e0e after running ...
2
votes
1answer
58 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
2answers
96 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 ...
2
votes
0answers
120 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
76 views

this.contract.deployed() is not a function

I'm working on making a React frontend for my smart contract, but I'm having problems connecting it into my React code. Here are the relevant portions of my code: import TruffleContract from '...
2
votes
0answers
62 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
1answer
903 views

Truffle react box onChange error: cannot read property 'setState' of undefined

these are the functions that fail: Error: Uncaught TypeError: Cannot read property 'setState' of undefined at createOrgSchoolAddress (App.js:187) when I pasted the address in (third function was ...
2
votes
2answers
12k 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
3answers
2k views

Accessing web3 object in Chrome terminal using React

I am receiving a "not defined" error when trying to access the web3 object in Chrome terminal. My current setup: running testrpc web3 object successfully instantiated in App.js built app using React ...
1
vote
2answers
108 views

Display Array of struct within array of struct in react

I'm trying to create 2d array of different types, one of the users have suggested to use struct within a struct method -> 2d array of different types? Now I run into problem how to display it in my ...
1
vote
3answers
102 views

Why is browser taking so long to read blockchain data?

I have a dAPP and I use reactjs for the frontend. The application returns data from a smart contract (the balance) on the homepage. The main problem that I notice is that everytime I or any other ...
1
vote
2answers
89 views

Can I trigger the execution of a js file from a smart contract?

I'm a noob at this, so excuse me if this is a ludicrous question.. I have a ReactJS app that interacts with a smart contract via web3. At a certain point, some data gets stored to the contract, by ...
1
vote
4answers
2k 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 ...
1
vote
2answers
1k views

Error in unboxing truffle-react on Windows

I am trying to unbox truffle-react but I am stuck with this error: $ truffle unbox react Downloading... Unpacking... Setting up... Error: Command failed: npm install npm WARN deprecated ethereumjs-...
1
vote
2answers
167 views

Create-React from truffle: “return this.setState({ storageValue: result.c[0] })”

In the Create-React box from Truffle, why do we retrieve a uint value from a function call with "result.c[0]" instead of "result"? What's the c[0]?
1
vote
1answer
1k views

Build an Ethereum Wallet using React [closed]

Using React js i am trying to create a wallet I want to implement few functionalities 1) display balances of all the accounts 2) Display tokens by providing smart contract address how can i ...
1
vote
1answer
2k views

How to map a web3 to a react.js state

How would you map a changing variable from web3 to react.js component? Example: class App extends Component { constructor(props){ super(props); this.state = { blockNumber: web3.eth....
1
vote
2answers
889 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 ...
1
vote
2answers
135 views

Payable function with additional value attached (web3, React)

I'm making a React frontend for an open-source blockchain protocol for tokenized hedge funds. So the question is how to provide the payable function that requires some other value attached (n this ...
1
vote
1answer
644 views

Cannot read property 'eth' of undefined

I want to Interact with my Smart Contract via Web3 and React. But I get a error message with the following code. import React, { Component } from 'react'; import Web3 from 'web3'; let ...
1
vote
1answer
114 views

solidity and react and calling a solidity function many times

I was looking at where i needed to go in my coding, and see i need a pattern to handle the 'many' calls. for example a call only returns 1 set of data, when i need perhaps records 1-70. Is the ...