Как импортировать web3 в проект React

Я извиняюсь упреждающе по самому основному вопросу. Я добавил и установил web3, используя пряжу в моем проекте реагирования. Внутри моего index.js-файла в /scr и на основе документов web3 я пробовал оба (не в то же время)

var Web3 = require("web3");
var web3 = new Web3();

и

import Web3 from 'web3';
var web3 = new Web3();

перед добавлением

if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider);
} else {
  // set the provider you want from Web3.providers
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

web3.eth.getAccounts((error, accounts) => console.log(accounts[0]));

и в итоге появляется сообщение об ошибке «Невозможно прочитать свойство 0 неопределенного», что заставляет меня думать, что проблема связана со счетами [0].

Смутно, когда мои запросы на импорт /импорт в верхней части страницы удаляются, а страница обновляется, браузер обнаруживает метамаску и печатает мой адрес на консоли. Кроме того, я получаю жалобы, что мой объект web3 не определен, но этого можно ожидать.

Я явно не запускаю webpack или браузер, потому что веб-пакет включен в проекты реагирования. Это что-то мне нужно сделать?

Что происходит здесь и как я могу заставить проект React работать с метамаском?

3 голоса | спросил Bryan Campbell 22 MaramThu, 22 Mar 2018 02:35:02 +03002018-03-22T02:35:02+03:0002 2018, 02:35:02

2 ответа


0

Это звучит запутанно и, основываясь на версии web3, у вас синтаксис другой. Согласно ошибке, которую вы получили на первом месте, похоже, что вы используете web3 1.0. Однако код экземпляра предназначен для версии 0.2.x.x

Просто, чтобы уточнить, так будет выглядеть ваш код, если вы используете web3 1.0

импортировать Web3 из 'web3';

const web3 = новый Web3 (Web3.givenProvider || "http: //localhost: 8545");
web3.eth.getAccounts () затем (console.log).;

Итак, в основном вы создаете экземпляр web3 с помощью givenProvider (если вы используете метамаску или туман) или с локальным , Затем вы получите учетные записи .

Если вы используете старую версию web3, код немного отличается:

импортировать Web3 из 'web3';

let web3 = null;
if (typeof web3! == 'undefined') {
  web3 = новый Web3 (web3.currentProvider);
} else {
  //установить поставщика, которого вы хотите, из Web3.providers
  web3 = новый Web3 (новый Web3.providers.HttpProvider («http: //localhost: 8545»));
}

web3.eth.getAccounts (обратный вызов (ошибка, результат) {console.log (результат)})
ответил mirg 22 MaramThu, 22 Mar 2018 05:57:42 +03002018-03-22T05:57:42+03:0005 2018, 05:57:42
2

Самый простой способ - использовать компонент response-web3-provider .

Добавьте Web3Provider к вашему корневому компоненту React:

import Web3Provider from 'react-web3-provider';

ReactDOM.render(
  <Web3Provider
    defaultWeb3Provider={
      (cb) => cb(new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/YOUR_API_KEY")))
    }
    loading="Loading..."
  >
    <App />
  </Web3Provider>
)

Затем в компоненте, где вы хотите использовать Web3:

import { withWeb3 } from 'react-web3-provider';

class MyComponent {
  render() {
    const { web3 } = this.props;

    web3.eth.getAccounts(console.log);

    // Version 1.0.0-beta.35
    return "Web3 version: {web3.version}";
  }
}

export default withWeb3(MyComponent);
ответил Peter 18 PM00000080000000931 2018, 20:32:09

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132