跳到主要内容

开始

安装​

npm install solive

使用​

1. 配置webpack​

// 使用craco配置：
const webpack = require("webpack");

module.exports = {
  // ...
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // eslint-disable-next-line no-param-reassign
      webpackConfig.resolve.fallback = {
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "zlib": require.resolve("browserify-zlib"),
        "stream": require.resolve("stream-browserify"),
        "events": require.resolve("events/"),
        "crypto": require.resolve("crypto-browserify"),
        "assert": require.resolve("assert/"),
        "buffer": require.resolve("buffer/"),
        "util": require.resolve("util/"),
        "path": require.resolve("path-browserify"),
        "tty": require.resolve("tty-browserify"),
        "os": require.resolve("os-browserify/browser"),
        "punycode": require.resolve("punycode/"),
        "fs": false,
        "url": require.resolve("url/"),
        "net": require.resolve("net-browserify"),
        "child_process": false,
        async_hooks: false,
        rawBody: false,
      };

      webpackConfig.plugins.push(
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"]
        })
      );
      return webpackConfig;
    }
  }
};

2. 引入样式​

import 'solive-core/dist/index.css';

3. 使用​

<Editor
  height="500px"
  modelInfos={[
    {
      filename: '_Storage.sol',
      value: "// SPDX-License-Identifier: GPL-3.0\n\npragma solidity >=0.7.0 <0.9.0;\n\n/**\n * @title Storage\n * @dev Store & retrieve value in a variable\n * @custom:dev-run-script ./scripts/deploy_with_ethers.ts\n */\ncontract Storage {\n\n    uint256 number;\n\n    /**\n     * @dev Store value in variable\n     * @param num value to store\n     */\n    function store(uint256 num) public {\n        number = num;\n    }\n\n    /**\n     * @dev Return value \n     * @return value of 'number'\n     */\n    function retrieve() public view returns (uint256){\n        return number;\n    }\n}",
      language: "solidity" as any,
    },
  ]}
/>

即可看到效果：

/**
   * @filename Storage.sol
   */

  // SPDX-License-Identifier: GPL-3.0

  pragma solidity >=0.7.0 <0.9.0;

  /**
   * @title Storage
   * @dev Store & retrieve value in a variable
   * @custom:dev-run-script ./scripts/deploy_with_ethers.ts
   */
  contract Storage {

      uint256 number;

      /**
       * @dev Store value in variable
       * @param num value to store
       */
      function store(uint256 num) public {
          number = num;
      }

      /**
       * @dev Return value
       * @return value of 'number'
       */
      function retrieve() public view returns (uint256){
          return number;
      }
  }