useWeb3React hook doesn't return provider - reactjs

I want to access the Ethereum blockchain through Cloudflare Ethereum Gateway. I am trying to use web3-react library, but useWeb3React doesn't return object with provider property.
codesandbox.io
index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import Web3 from "web3";
import { Web3ReactProvider } from "#web3-react/core";
import App from "./App";
function getLibrary(provider) {
const web3Provider = new Web3.providers.HttpProvider(
"https://cloudflare-eth.com"
);
const web3 = new Web3(web3Provider);
return web3;
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>
</StrictMode>,
rootElement
);
App.js
import { useWeb3React } from "#web3-react/core";
import "./styles.css";
export default function App() {
const web3React = useWeb3React();
console.log({ web3React });
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

There is an issue in the library describing this exact problem with the solution here: https://github.com/NoahZinsmeister/web3-react/issues/126#issuecomment-783057749
Seems like you have to call web3React.activate() in your App.js with whatever connector you want to use. So for example with the #web3-react/injected-connector:
import { useWeb3React } from "#web3-react/core";
import { InjectedConnector } from "#web3-react/injected-connector";
import "./styles.css";
export default function App() {
const web3React = useWeb3React();
web3React.activate(new InjectedConnector({
supportedChainIds: [1, 3, 4, 5, 42]
}));
console.log({ web3React });
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

Related

Why my useContext is not working in my code

I have just started learning useContext hook and I am struck in this problem.
I am not able use the hook itself when I am trying to print that in console its says undefined.
This is the App.js
import "./styles.css";
import NoteState from "./Context/Notes/NoteState";
import About from "./components/About";
export default function App() {
return (
<>
<About />
<div>ankit</div>
<NoteState>
<About />
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
</NoteState>
</>
);
}
These are the files where the hook is defined
import { createContext } from "react";
const noteContext = createContext();
export default noteContext;
Second one is
import React from "react";
import NoteContext from "./NoteContext";
const NoteState = (props) => {
const state = {
name: "Name",
surname: "Surname"
};
return (
<>
<NoteContext.Provider value={state}>
{props.childern}
</NoteContext.Provider>
</>
);
};
export default NoteState;
I am trying to use this in About.jsx
import React from "react";
import noteContext from "../Context/Notes/NoteContext";
import { useContext } from "react";
const About = () => {
const a = useContext(noteContext);
console.log(a); - >> comes undefined
return (
<>
{/* <div>this is about note me but {a.name}</div> */} this gives error
</>
);
};
export default About;
You can see the same in this codesand box link.
link
There seems to be a typo in your NoteState component. It should be props.children and not childern. When I made that change and ran your sandbox, it was working fine.
Try to wrap the all application into NoteContext:
import NoteContext from './NoteContext';
export default function App() {
return (
<>
<NoteContext.Provider value={state}>
<About />
<div>ankit</div>
<NoteState>
<About />
<div className='App'>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
</NoteState>
</NoteContext.Provider>
</>
);
}

Join array with svg in jsx

I perform the following with jsx
import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as Img } from "./4ddd.svg";
import "./styles.css";
function App() {
return <div className="App">{[1, 2, 3].join(<Img />)}</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This gives
The desired output is
What is the right way to join the array with svg icon?
Please see the code at codesandbox
join is expecting string join, but you're using a component, so that's why it shows [object Object]. You can do it with reduce instead
Sandbox
import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as Img } from "./4ddd.svg";
import "./styles.css";
function App() {
return <div className="App">{[1, 2, 3].reduce((current, value) => [current, <Img/>, value])}</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I suggest you to use map instead of join in this way:
return (
<div className="App">
{[1, 2, 3].map((x) => (
<div className="Align">
{x}
{x !== [1, 2, 3].length && <Img />}
</div>
))}
</div>
);
And a little bit of css to keep all aligned:
.Align {
display: inline-block;
}
Here your codesandbox modified.
Another way:
import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as Img } from "./4ddd.svg";
import "./styles.css";
function App() {
const numberArr = [1, 2, 3];
return (
<div className="App">
{numberArr.map((item, index) => (
<>
{item}
{index < numberArr.length - 1 && <Img />}
</>
))}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here code: https://codesandbox.io/s/stupefied-drake-db64xk?file=/src/index.js:0-477

Why is the value not shown in react context?

Not sure why react context is not using the value passed in provider?
import { createContext } from "react";
const initialState = {
isOpen: false
};
export const alertContext = createContext(initialState);
export default (props) => {
return (
<>
<alertContext.Provider value={{ isOpen: true }}>
{props.children}
</alertContext.Provider>
</>
);
};
import "./styles.css";
import { useContext } from "react";
import AlertProvider, { alertContext } from "./AlertProvider";
export default function App() {
let value = useContext(alertContext);
return (
<div className="App">
<AlertProvider>
<pre>{JSON.stringify(value)}</pre>
</AlertProvider>
</div>
);
}
Why is the value for isOpen not true?
https://codesandbox.io/s/serene-faraday-1oib3?fontsize=14&hidenavigation=1&theme=dark
You need to wrap your provider around App in index.js
as shown:
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import AlertProvider from "./AlertProvider";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<AlertProvider>
<App />
</AlertProvider>
</StrictMode>,
rootElement
);
and your app.js will look like this:
import "./styles.css";
import { useContext } from "react";
import { alertContext } from "./AlertProvider";
export default function App() {
let value = useContext(alertContext);
return (
<div className="App">
<pre>{JSON.stringify(value)}</pre>
</div>
);
}

Limit the number of items in menu in react quizzes

I am using react quizzes library:
https://codesandbox.io/s/react-quizzesexample-forked-2w1gj?file=/src/index.js:408-499
According to the documentation we can choose just these kind of builder items from menu that we want using toolBox.
I want to leave just Checkboxes in the menu but i didn't find a solution for this. Who can help?
function App() {
const [formdata, setFormData] = useState([]);
return (
<div className="App">
<QuizzBuilder onChange={setFormData} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This package react-quizzes, looks not really great. Its final build not include all modules, and require importing things directly. But if you want, here's the solution:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { QuizzBuilder } from "react-quizzes";
import ToolBox from "react-quizzes/lib/ToolBox";
import "react-quizzes/lib/assets/antd.css";
const filteredToolBox = ToolBox().filter(el => el.field_name === "checkboxes_")
function App() {
const [formdata, setFormData] = useState([]);
return (
<div className="App">
<QuizzBuilder toolBox={filteredToolBox} onChange={setFormData} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Update #1
Added logic to override ToolBox label
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { QuizzBuilder } from "react-quizzes";
import QuizExample from "./QuizExample";
import "react-quizzes/lib/assets/antd.css";
import ToolBox from "react-quizzes/lib/ToolBox";
import { defaultMessages } from "react-quizzes/lib/translations/TranslatedText";
const filteredToolBox = ToolBox().filter(
(el) => el.field_name === "checkboxes_"
);
const messages = {
en: {
...defaultMessages.en,
"toolbox.checkboxes.name": "Here are Checkboxes"
}
};
function App() {
const [formdata, setFormData] = useState([]);
return (
<div className="App">
<QuizzBuilder
messages={messages}
toolBox={filteredToolBox}
onChange={setFormData}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

`App` - not retrieves the store static value

my app component, not retrieves the store default value at all. any one help me?
here in my index.js file:
import React from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import store from "./Store";
import "./styles.css";
function App(props) {
console.log("propps", props);
return (
<div className="App">
<h1>Hello CodeSandbox{props.count}</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const getState = state => {
console.log(state); //getting empty object instead `count`
return state;
};
connect(
getState,
null
)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
Live Demo
const ConnectedApp = connect(
getState,
null
)(App);
then render ConnectedApp not App

Resources