松露细雨和Web3Modal

Question

我正在尝试在Truffle Drizzle中设置Web3Modal（https://github.com/Web3Modal/web3modal）。我设法出现了模态显示，其中出现了电子钱包选项，但是一旦我单击它，就什么也没有发生。在Drizzle中，没有Web3提供程序更改。毛毛雨初始化为true，但没有重新加载发生，但是如果我重新加载页面，则它返回为false。看起来状态没有保存在内存中。我已经坚持了几天，所以我想知道是否有人已经进行了类似的设置或有什么想法要分享：）

非常感谢！

Answer 1

我在将web3modal与drizzle集成时也遇到了同样的困难。

我遇到以下错误：

Error initializing Drizzle:
TypeError: Cannot read property 'address' of undefined
    at getOrCreateWeb3Contract (32.chunk.js:33633)
    at Drizzle.addContract

您能告诉我您的代码吗？

我将ganache用作json-rpc提供程序（运行于127.0.0.1:8545）。

我正在尝试使用像这样的反应挂钩实例化毛毛雨（例如squarelink的例子：

import React, { useState, useEffect } from 'react'
import Web3 from 'web3'
import { Drizzle, generateStore } from '@drizzle/store'
import { DrizzleContext } from '@drizzle/react-plugin'
import Web3Modal from 'web3modal'
import Squarelink from 'squarelink'
import A from 'abi/A.json'
import B from 'abi/B.json'
import C from 'abi/C.json'

const DrizzleLoader = props => {
  const { children } = props

  const [drizzleInstance, setDrizzleInstance] = useState(null)

  useEffect(() => {
    async function createDrizzle() {
      const providerOptions = {
        squarelink: {
          package: Squarelink, // required
          options: {
            id: "client-id", // required
            url: "http://127.0.0.1:8545"
          }
        },
      }

      const web3Modal = new Web3Modal({
        providerOptions,
      })

      const web3ModalProvider = await web3Modal.connect()

      const customProvider = new Web3(web3ModalProvider)

      const drizzleOptions = {
        web3: {
          customProvider,
          block: false,
          fallback: {
            type: 'ws',
            url: 'ws://127.0.0.1:8545',
          },
        },
        contracts: [A, B, C],
        polls: {
          blocks: 3000,
        },
      }

      const drizzleStore = generateStore(drizzleOptions)

      setDrizzleInstance(new Drizzle(drizzleOptions, drizzleStore))
    }
    createDrizzle()
  }, [setDrizzleInstance])

  if (!drizzleInstance) {
    return <div>loading</div>
  }
  return (
    <DrizzleContext.Provider drizzle={drizzleInstance}>
      <DrizzleContext.Consumer>
        {drizzleContext => {
          const { drizzle, drizzleState, initialized } = drizzleContext

          if (!initialized) {
            return 'Loading...'
          }

          return {children}
        }}
      </DrizzleContext.Consumer>
    </DrizzleContext.Provider>
  )
}

export default DrizzleLoader