跳到主要内容

开始

安装

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;
}
}