обернуть элемент gatsby root с помощью asyn c call - Морось, Торус - PullRequest
Новая
       13

обернуть элемент gatsby root с помощью asyn c call - Морось, Торус

0 голосов
/ 28 февраля 2020

Мне нужно обернуть элемент root Дождем. И мне также нужно использовать Torus (: //tor.us). Поэтому перед инициализацией Truffle Drizzle мне сначала нужно инициализировать Torus и создать собственный объект web3 с Torus в качестве поставщика

Пока это то, что у меня есть сделанный.

В браузере gatsby. js

import TorusContextProvider from "./src/context/TorusContextProvider"

export const wrapRootElement = ({ element }) => {

  return(
    <GlobalContextProvider>
      <TorusContextProvider>

        <LoadingContainer>
          {element}
        </LoadingContainer> 

      </TorusContextProvider>
    </GlobalContextProvider>
  )

в TorusContextProvider. js Я также проверяю typeof 'window', так как torus имеет ссылку на 'window' в своем коде. И Гэтсби не будет компилировать иначе. 

import React, { useState, useEffect } from 'react'

import Web3 from "web3";
import { Drizzle } from "@drizzle/store"
import { drizzleReactHooks } from "@drizzle/react-plugin";
import StoreManager from "../web3/contracts/StoreManager.json";

const{ DrizzleProvider } = drizzleReactHooks

const TorusContextProvider = ({ children }) => {
    const [ drizzle, setDrizzle] = useState(null)

    useEffect(() => {

      (async () => {
      // for SSR
      //if (typeof window == 'undefined') return

      // for browser
      const Torus = require('@toruslabs/torus-embed').default;
      const torus = new Torus();

      await torus.init({
        buildEnv: "production", // uses staging.tor.us
        enableLogging: false, // default : false
        network: {
          host: "https://testnetv3.matic.network",
        },
        showTorusButton: false, // default: true
      });

      console.log('initTorus() done. ')

      let web3torus = new Web3(torus.ethereum)
      //window.web3 = web3

      let drizzleOptions = {
        customProvider: web3torus,
        contracts: [StoreManager],
        polls: {
          accounts: 1500,
        },
      }

      setDrizzle(new Drizzle(drizzleOptions))

    })();  

    }, []) 


    if (typeof window !== 'undefined') {
      return (
        <TorusContextProvider>
          <DrizzleProvider drizzle={drizzle}>
            {children}
          </DrizzleProvider>
        </TorusContextProvider>
      )
    }else{
      return (
        <TorusContextProvider>
            {children}
        </TorusContextProvider>
      )

    }

  }

  export default TorusContextProvider

Теперь в браузере я получаю 

Warning: Failed prop type: The prop `drizzle` is marked as required in `v`, but its value is `null

Никогда не вызывается часть useEffect ((), а браузер падает

Помогите, чтобы эта часть работала. Может быть, я выбрал неправильный подход, поэтому, пожалуйста, совет, как этого добиться

...