Почему я не могу получить адрес своей учетной записи в Metamask с помощью get.itsProps от Next.js? - PullRequest
Новая
       39

Почему я не могу получить адрес своей учетной записи в Metamask с помощью get.itsProps от Next.js?

0 голосов
/ 30 января 2019

Я использую Next.js для реализации рендеринга на стороне сервера в моем приложении Ethereum, однако Я не могу получить свой адрес метамаски, чтобы отобразить его в верхнем правом углу панели навигации в моем индексе.JS файл.В настоящее время моя функция getInitialProps () возвращает пустой массив. Может кто-нибудь помочь мне заставить это работать?

  • Я использую web3 v1.0.0-beta.35
  • Я вошел в Metamask (используя v 5.3.1)
  • Я использую web3.eth.getAccounts (), чтобы получить учетную запись из Metamask
  • Я дал разрешение наприложение для доступа к учетным записям Metamask в соответствии с критическими изменениями .

Было несколько случаев, когда адрес обновлялся при обновлении, но большинствовремя, когда оно не работает.

Вот репозиторий для этого проекта: https://github.com/jviray/buidl-box

Ниже приведен код для моего файла index.js, содержащего компонент, который вызывает у меня проблемы,Адрес должен отображаться в правом верхнем углу панели навигации, где написано {this.props.accounts [0]}. 

import React, { Component } from 'react';
import Head from 'next/head';
import { Jumbotron, Button } from 'react-bootstrap/lib';
import web3 from '../ethereum/web3';

class Welcome extends React.Component {
  static async getInitialProps() {
    const accounts = await web3.eth.getAccounts();

    return { accounts };
  }

  render() {
    const jumbostyle = {
      textAlign: 'center',
      marginTop: '30px'
    };

    return (
      <div>
        <Head>
          <title>BUIDL</title>
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          {/* -- Latest compiled and minified CSS */}
          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
            crossorigin="anonymous"
          />
        </Head>
        {/* NAVBAR */}
        <nav className="navbar navbar-inverse navbar-fixed-top">
          <div className="container">
            <div className="navbar-header">
              <a href="#" className="navbar-brand">
                BUIDL
              </a>
            </div>

            {/* NAVBAR ITEMS */}
            <ul className="nav navbar-nav navbar-right">
              <li className="navbar-brand">{this.props.accounts[0]}</li>
            </ul>
          </div>
        </nav>
        <Jumbotron>
          <div className="container" style={jumbostyle}>
            <h1>Welcome, Ethereum Devs!</h1>
            <p>
              As a community we need to start building new and powerful
              applications that truly add value.
            </p>
            <p>
              <a href="https://www.coindesk.com/dont-hodl-buidl-blockchain-tech-will-add-value-2018">
                <Button bsStyle="primary">Learn more</Button>
              </a>
            </p>
          </div>
        </Jumbotron>;
      </div>
    );
  }
}

export default Welcome;

Что интересно, если я добавлю состояние компонентаи использовать React "async componentDidMount ()" для setState () с выбранной учетной записью, я могу заставить его работать стабильно без проблем после обновления.

Но опять же цель состоит в том, чтобы получитьучетная запись на стороне сервера с getInitialprops, и я не могу заставить это работать.

Вот код, который работает, когда я использую "async componentDidMount ()" 

import React, { Component } from 'react';
import Head from 'next/head';
import { Jumbotron, Button } from 'react-bootstrap/lib';
import web3 from '../ethereum/web3';

class Welcome extends React.Component {
  state = {
    accountAddress: ''
  };

  async componentDidMount() {
    const accounts = await web3.eth.getAccounts();

    this.setState({
      accountAddress: accounts[0]
    });
  }

  render() {
    const jumbostyle = {
      textAlign: 'center',
      marginTop: '30px'
    };

    return (
      <div>
        <Head>
          <title>BUIDL</title>
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          {/* -- Latest compiled and minified CSS */}
          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
            crossorigin="anonymous"
          />
        </Head>
        {/* NAVBAR */}
        <nav className="navbar navbar-inverse navbar-fixed-top">
          <div className="container">
            <div className="navbar-header">
              <a href="#" className="navbar-brand">
                BUIDL
              </a>
            </div>

            {/* NAVBAR ITEMS */}
            <ul className="nav navbar-nav navbar-right">
              <li className="navbar-brand">{this.state.accountAddress}</li>
            </ul>
          </div>
        </nav>
        <Jumbotron>
          <div className="container" style={jumbostyle}>
            <h1>Welcome, Ethereum Devs!</h1>
            <p>
              As a community we need to start building new and powerful
              applications that truly add value.
            </p>
            <p>
              <a href="https://www.coindesk.com/dont-hodl-buidl-blockchain-tech-will-add-value-2018">
                <Button bsStyle="primary">Learn more</Button>
              </a>
            </p>
          </div>
        </Jumbotron>;
      </div>
    );
  }
}

export default Welcome;

В то время как этобыло бы здорово, если бы кто-нибудь мог решить эту проблему, я также был бы признателен за информацию о возможной проблеме (код async / await, Next.js, web3, React и т. д.).Спасибо !!

1 Ответ

0 голосов
/ 31 января 2019

Я проверил ваше репо.

При первом посещении страницы в новой вкладке браузера при выполнении getInitialProps используется infura-версия провайдера web3.Он не имеет доступа к метамаске вашего браузера.

Но если вы перейдете на ту же страницу с другой страницы, будет использоваться версия веб-провайдера с метамаской.Таким образом, он имеет информацию об учетной записи.

Предположим, у вас есть 2 маршрута: /home and /list и на странице /home у вас есть 

static async getInitialProps() {
    const accounts = await web3.eth.getAccounts();
}

Если вы посещаете домен / дом в новой вкладке браузеравы получите пустой массив по причинам, указанным выше.Но если вы перейдете в домен / дом из домена / списка на той же вкладке браузера, вы получите информацию об учетной записи метамаски.

...