A simple Javascript UMD library for managing smart contract ABIs and Web3.js for the front-end.
- Manage multiple smart contracts in session
- Export smart contracts for caching purposes
- Built in ES6
- Leverages Web3.js with all the standard benefits
- Automatic ABI injection from Etherscan
- Supports IPFS uploads through nft.storage
- Compatible with hdwallet-provider
- Clone the repo
git clone https://github.com/aa-wong/Block3.js.git
- Git clone this repo and
cd block3
- Run
npm install
to install the library's dependencies.
- Having all the dependencies installed run
npm run build
. This command will generate twoUMD
bundles (unminified and minified) under thedist
folder and aCommonJS
bundle under thelib
folder.
- Copy and paste the /dist/Block3.min.js file into your html and reference the javascript files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Reference library in folder directory with Block3.min.js -->
<script type="text/javascript" src="js/Block3.min.js"></script>
</body>
</html>
- Reference library from window
const { Block3 } = window;
- Set Provider (optional). Providers can use HDWalletProvider or set RPC url directly. Provider can be left empty and the library will default to ethereum
const { providers } = window.Block3;
const { HttpProvider } = providers;
const provider = new HttpProvider("https://mainnet.infura.io/YOUR_INFURA_API_KEY");
// or
const provider = new HDWalletProvider(
MNEMONIC,
RPC_URL
);
- Initialize Block3 with provider and Etherscan API Key
const block3 = new Block3({
provider,
apiKey: ETHERSCAN_API_KEY
});
async function initContract() {
try {
const { Contracts } = window.Block3;
const { ERC20 } = Contracts;
// Create contract with contract address, network and address
let contract = new ERC20({
address: CONTRACT_ADDRESS,
owner: OWNER_ADDRESS, // Optional parameter,
network: NETWORK
});
// Load contract
contract = await block3.loadContract(contract);
console.log(contract);
} catch (e) {
console.error(e);
}
}
async function executeContractMethod() {
try {
// make a GET request
const res = await contract
.methods
.contractFunction()
.call({ from: contract.owner });
console.log(res);
// make a WRITE request
const res2 = await contract
.methods
.contractFunction()
.send({ from: contract.owner, value: <Amount to send to contract> });
console.log(res2);
} catch (e) {
console.error(e);
}
}
Reference and initialize IPFSStorageManager
const { IPFSStorageManager } = window.Block3;
const ipfs = new IPFSStorageManager('< nft.storage api key >');
// Uploade image file and any additional meta-data to upload to ipfs
async function upload() {
try {
// meta data parameters
const imageFile = '< image file >';
const description = 'nft description';
const name = 'nft name';
const attributes = [{'nft': 'attribute'}];
const externalUrl = '< nft external url >';
// returns cid that can be referenced in ipfs
const cid = await ipfs.uploadAndGenerateMetaData(imageFile, description, name, attributes, externalUrl);
// delete data from ipfs by cid
await ipfs.deleteMetaData(cid, cb);
} catch (e) {
console.error(e);
}
}