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.
590
questions
0
votes
0
answers
5
views
NFT based webapp - Best architecture approach to render data to the front more agile
I am building a book marketplace where each different book launch a limited series of N copies.
Therefore for each book I create an ERC-721 contract with a totalSupply = N.
In each ERC-721 contract I ...
- 21
0
votes
0
answers
24
views
Sending data to the contract from the react frontend is not working
I've made an twitter contract, where we can send and get tweets from the frontend React. While sending the data to the contract, The metamask popup is opening, But it shows warning like this.
I don't ...
- 1
0
votes
1
answer
14
views
Cannot write text in placeholder in react
I'm new to react and learn it through a tutorial about ethereum. Here is how the form with multiple fields is created:
const Input = ({ placeholder, name, type, value, handleChange }) => (
<...
1
vote
1
answer
24
views
Unable to call a function from my smart contract in react
So I have checked and the smart contract is working perfectly in hardhat but when I am call it in react I am facing problem
// SPDX-License-Identifier: MIT
pragma solidity >=0.5.0 <0.9.0;
...
1
vote
0
answers
7
views
Are there any way to pay transaction cost from a hardware wallet when deploying contract using ethers.js?
I am working on developing Dapp and facing a challenge.
▶ Thing I want to achieve ◀
I'd like to create a new wallet instance, then when deploying a contract, I want to pay transaction costs from a ...
- 11
1
vote
0
answers
14
views
How to anticipate a new React protocol to block Javascript URLs as a Security precaution
Many Web3 dapps have a feature where sending a blockchain transaction conveniently triggers a pop-up link where one can simply click and see that transaction on a blockchain explorer. For example, you ...
- 689
0
votes
0
answers
20
views
I am trying to display image on frontend using pinata and ipfs but facing this error
import { useState } from "react";
import "./Display.css";
const Display = ({ contract, account }) => {
const [data, setData] = useState("")
const getdata = ...
- 7
-1
votes
0
answers
40
views
Frontend error : Could not resolve metadata using Thirdweb
Error: Could not resolve metadata for contract at 0x4ad98B13b90F7DFbBA0fF3b89b213c0dCaD31545 at fetchContractMetadataFromAddress
- 7
0
votes
1
answer
40
views
Ethers.js Signer Address is Null and Provider Block at -2 in a React Native Expo App with WalletConnect
I'm working on a Web3 application using Solidity, React Native Expo, and WalletConnectModal. I've set up a Ganache network for testing and successfully connected to it via my Expo app and MetaMask. I'...
0
votes
0
answers
21
views
Error when Importing Web3 in React: Module not found for './formats' and
I'm encountering an issue while trying to import the Web3 library in a React project. The error message I'm receiving is:
Module not found: Error: Can't resolve './formats' in '/Users/kaustubhsharma/...
1
vote
0
answers
7
views
Blockchain prereqs
I know there are many job boards for web3 that display the job requirements but I just wanted to know from someone who has experience working in this field about the proficiency one needs in React. ...
- 11
0
votes
1
answer
17
views
How do I update a campaign without it creating a new campaign?
I'm working on the update campaign feature in a project.
First Issue - Prefilling the form fields
I want first to prefill the form fields then from there, a user can change what they want.
In the /...
- 71
1
vote
1
answer
28
views
transactionContract.addtoblockchain is not a function
Calling a specific function from smart contract through react jsx file , console is giving me error "transactionContract.addtoblockchain is not a function", even the function is present in ...
1
vote
0
answers
56
views
"Error: write after end": ReactJS with web3js and MetaMask on Chrome
I have a ReactJS v18.2 project and use web3.js v1.8 for the blockchain connection. I have three environments: local, test, main.
test and main are both on the same server, but run on different domains:...
- 11
1
vote
0
answers
23
views
Title: Issue with BigInt Conversion and White Screen in React DApp Production Build
Problem Description:
I have developed a decentralized application (DApp) using React that interacts with a smart contract. The DApp works as intended in the development environment, but when I try to ...
- 11
1
vote
0
answers
7
views
fetchTasks() function does not work when page is reloaded at first
I have a weird issue. The issue is the fetchTasks() function does not work at first render, so does not display anything on the page, but if i save the code again, does not matter how even if I don't ...
0
votes
0
answers
145
views
How to implement wallet connection with Ethers.js v6 for multiple providers (MetaMask, Coinbase)
I'm building a DApp and want to provide wallet connection options for users. I'm using Ethers.js v6 for Ethereum interactions. My goal is to allow users to click buttons like "Connect to MetaMask&...
0
votes
0
answers
80
views
How to fix Error: fractional component exceeds decimals?
I cannot seem to be able to fix the error "Error: fractional component exceeds decimals [ See: https://links.ethers.org/v5-errors-NUMERIC_FAULT ] (fault="underflow", operation="...
- 13
0
votes
1
answer
21
views
React.js 18 and ethers 6 Cannot read properties of undefined (reading 'Web3Provider')
"ethers": "^5.7.2",
"react": "^18.2.0",
Cannot read properties of undefined (reading 'Web3Provider')
- 3
0
votes
1
answer
53
views
Error connecting to contract: Error: contract runner does not support calling
I am getting this error when i click the create a new issue I get this error in the log.
here is the react code-
import React, { useState, useEffect } from "react";
import { ethers } from &...
0
votes
1
answer
185
views
could not coalesce error (error={ "code": -32002, "payload": { "method": "eth_requestAccounts",
complete error-
could not coalesce error (error={ "code": -32002, "payload": { "method": "eth_requestAccounts", "params": [ ] } }, payload={ "...
0
votes
0
answers
7
views
Minting react app
I build a sample minting app with React, When I built the app on localhost everything ran correctly, but when deploy the app on Vercel appear a blank page. what is wrong?
- 11
0
votes
1
answer
152
views
Cannot read properties of undefined (reading 'reduceRight')
src/queries.js
import { createClient } from "urql"
export const APIURL = "https://api.lens.dev";
export const LENS_HUB_CONTRACT_ADDRESS =
"...
0
votes
0
answers
67
views
Thirdweb Contract Not working with react
My application was working properly but now it is not working properly
made a crowdfunding platform
this is my context file
import React, { useContext, createContext } from "react";
...
1
vote
2
answers
963
views
what is the right way to read from the contract? using wagmi.sh
So I am using the package wagmi.sh and via that I am writing to a very simple contract called the counter program that increments the value by 1 each time I call the function. Now I am able to ...
0
votes
0
answers
32
views
I have tried debugging the code but still i am not able to find the error. Function "getDonators" not found in contract
import React, { useContext, createContext } from "react";
import {
useAddress,
useContract,
useMetamask,
useContractWrite,
} from "@thirdweb-dev/react";
import { ethers } ...
- 7
0
votes
0
answers
149
views
Unable to get the Read data or write data using Wagmi sh
So here is the react code and its a simple Counter program. Deployed on the below address.
I have put both the solidity part as well as React code
// SPDX-License-Identifier: MIT
contract ...
0
votes
1
answer
285
views
How to call useContractRead of wagmi in diferents places of React Component
I have created a handler to try to use the wagmi getter function call.
const handleContractReadCurrentDuel = () => {
const { data: duel } = useContractRead({
address: ...
0
votes
1
answer
23
views
Updating Front-end data based on smart contract data
I am writing an ICO(Presale) contract which have different phases of sale and different starting prices for each phase. Also, on each token sale the price of tokens increase by a static value. After ...
1
vote
1
answer
102
views
implementing chart like Dextool's chart for my react.js application
I'm gonna implement chart into my react.js application.
Chart method should be similar to dextools. Now I try to use GraphQL to retrieve all trading histories. And also I'm gonna use OHLC react chart ...
- 128
0
votes
0
answers
20
views
I am trying to reproduce the exception caused by metamask
The purpose of obtaining this image is to aid in my attempts to reproduce the issue. Additionally, I am curious to know if anyone within the community has encountered a similar situation before.
3
votes
0
answers
342
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 ...
0
votes
0
answers
18
views
How am I supposed to store user account details data in a decentralized manner?
I'm building an NFT marketplace app where creators can mint NFTs based on some external images, and users can buy those to support the creators. I need to support user account details storage. I'll ...
- 202
1
vote
0
answers
288
views
wallet connect button integration using web3Modal
I'm trying to integrate wallet connect to my dApp using web3modal.
Link to the docs -> https://docs.walletconnect.com/2.0/web3modal/react/installation
The dApp is about token swapping.
When I try ...
- 35
0
votes
0
answers
25
views
Is it possible for sendTransaction to return an empty hash from MetaMask while isSuccess is true
Our app is using React + Wagmi + prepare hooks.
One MetaMask user had an issue where their transaction completed successfully, but DoThisThing was never called. Code is simplified, but wondering if ...
- 23
0
votes
0
answers
96
views
How to implement react native wallet connect V1 and V2 using wallet connect?
I've already implemented react native wallet V2, but I can't implement react native wallet V1. Could anyone kindly explain about react native wallet(Not Dapp) V1?
Please let me know source code URL OR ...
0
votes
0
answers
10
views
Getting status = false
I need a help. I used this source code to develop a project and its a voting app but i am stuck on this problem
async function getCurrentStatus() {
const provider = new ethers.providers....
- 77
1
vote
0
answers
110
views
ethers.HDNodeWallet.encrypt is too slow in React Native
I'm in a React-Native project, and i want to create wallet and the encryp it, at the start wallet.createRandom an the other functions in os the wallet instances were to slow so i just implement react-...
- 13
0
votes
1
answer
25
views
invalid BigNumber value for Date
I tried to update the current campaign based on Id, target value and a new date, but getting an error when executing the function
function from contract
function updateCampaign(
uint _id,
...
- 3
1
vote
0
answers
132
views
While importing metamask sdk resolve module `crypto` error
I created a new react native project using npx react-native init and fallowed Use MetaMask SDK with React Native docs but after just importing the MetaMaskSDK it gives an error
Error: While trying to ...
- 11
0
votes
0
answers
82
views
React dApp - MetaMask - RPC Error: Internal JSON-RPC error
I use wagmi hooks
const { config } = usePrepareContractWrite({
address: CONTRACT_ADDRESS,
abi: ABI,
chainId: 80001,
functionName: FUNCTION_CALLED,
args: [id, user, indexes, ...
- 3
0
votes
0
answers
10
views
Transaction failed on even transaction index solidity, double function call with one form submit
I try to push data into two struct with single call on front end app, it turns out the data that i push on even index of transaction failed on second struct
Struct
struct MakananPart1{
uint ...
- 1
0
votes
0
answers
153
views
Wallet.createRandom() function by ethers.js don't work in a React Native Project
i'm trying to make a wallet in react native using ethers.js, but when i'm trying to call the function createRandom, to generate a secure random seed the application gets crashed.
this is the code, i'm ...
- 13
0
votes
1
answer
197
views
Smart Contract's ABI has uint256, but I get error `Type 'number' is not assignable to type 'BigNumber'
This is the first time I work with web3 api, so I am totally lost.
I use wagmi hook with react, trying to call a function from smart contract:
const id = 1;
const index = 1;
const { data, error, ...
- 3
1
vote
0
answers
27
views
React dapp using same previous account(from ganache) even though changed in metamask
I have tried to interact and call functions from ethereum contract deployed at local blockchain ganache in my react dapp. And I am using metamask. But even though I change the account in metamask the ...
- 11
0
votes
0
answers
27
views
Is there any way to get the array length inside a mapping without a getter function or count variable?
mapping(address => uint256[]) public submitterAddressToFormIdsAssigned;
This is a mapping from an address to an array of uint256s.
I want to get the length of array. I used a count variable before ...
- 326
0
votes
1
answer
41
views
Logging user on web3.js is calling a function before web3 is assigned
I have a little weird problem. I'm creating the front-end of a blockchain app with react and web3. Everything is perfect and it connects fine, but when I reload the page and call the getNfts() ...
- 1
0
votes
1
answer
19
views
How to set owner wallet into useState from router.query?
I'm trying to set the address of a connected wallet into useState as string so that another function can use it to run it's function.
const router = useRouter();
const { walletAddress } = ...
0
votes
1
answer
72
views
Using connected wallet to fetch all NFTs using alchemy sdk
I'm trying to pass the user's connected wallet into getNftsForOwner function but am not sure how to do it. If I type out the address into the function like this:
const NFTs = await alchemy.nft....
0
votes
1
answer
56
views
How to use the connected wallet in getNftsForOwner for Alchemy SDK function?
I'm using a combination of Thirdweb and Alchemy SDK to fetch all nfts in a connected wallet. Every example I've come across for Alchemy's getNftsForOwner function has the wallet address placed in the ...