Hey Compound Community!
As I’ve been building a decentralized frontend hosting solution for Compound, I ran into a challenge that I’m sure many of you have faced as well: there isn’t a well-documented ABI for interacting with Compound’s smart contracts. After extensive trial and error, and plenty of digging through the code, I decided to create a fully documented ABI myself and make it available for everyone on the Nextosi GitHub.
The goal of this documentation is to streamline the process of building tools and interfaces for Compound, making it easier for any developer to understand and interact with the contracts.
The documentation covers key functionality including:
Core Functions
- wallet.js
- tokens.js
- markets.js
- userBalances.js
- totalSupply.js
- totalBorrow.js
- priceData.js
- state.js
- abiLoader.js
- main.js
- gasPrice.js
Governance Functions
- governance.js
- createProposal.js
- vote.js
- delegate.js
- fetchProposal.js
- cancelProposal.js
and
DeFi Functions
- defiMain.js
- borrow.js
- supply.js
- repay.js
- withdraw.js
- transactionHistory.js
- healthFactor.js
If you’re interested, feel free to check it out on the Nextosi GitHub. Let’s make building on Compound more accessible and encourage innovation within the community!
Looking forward to your feedback and any contributions you may have!
Below is a sample of the documentation to give you a taste of what you’ll find along with the json ABI files which are too long to include on the forum:
Sample Documentation (available in the README)
wallet.js
Overview: Manages wallet connections using Web3 providers (like MetaMask), and handles events such as account and network changes.
Dependencies: Relies on state.js for managing the user’s account and chain ID.
Requirements: A Web3 wallet such as MetaMask.
Code Example: Connecting the wallet
javascript
export async function connectWallet() {
if (window.ethereum) {
try {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
setUserAccount(accounts[0]);
const chainId = await window.ethereum.request({ method: 'eth_chainId' });
setChainId(parseInt(chainId, 16));
await refreshAllData();
} catch (error) {
console.error("Failed to connect wallet:", error);
}
} else {
alert("Please install MetaMask!");
}
}
Troubleshooting: If window.ethereum is undefined, make sure that MetaMask or another Web3 wallet is installed.
Sample Function Connect Wallet.js
// static/js/core/wallet.js
/**
* Connect to the user's MetaMask wallet.
*/
export async function connectWallet() {
if (window.ethereum) {
try {
console.log("Attempting to connect to MetaMask...");
// Request account access
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
if (accounts.length === 0) {
alert("No accounts found. Please connect to MetaMask.");
console.warn("No accounts found.");
return;
}
const account = accounts[0];
const chainId = await window.ethereum.request({ method: 'eth_chainId' });
// Update the UI with account and network information
document.getElementById('accountAddress').textContent = account;
document.getElementById('networkName').textContent = getNetworkName(chainId);
// Show wallet info and hide Connect button
document.getElementById('walletInfo').style.display = 'block';
document.getElementById('connectWallet').style.display = 'none';
document.getElementById('disconnectWallet').style.display = 'inline-block';
console.log(`Connected to account: ${account}, Network: ${getNetworkName(chainId)}`);
} catch (error) {
console.error("Error connecting to MetaMask:", error);
alert("Failed to connect to MetaMask.");
}
} else {
alert("MetaMask is not installed. Please install MetaMask and try again.");
console.error("MetaMask not detected.");
}
}
/**
* Disconnect the user's wallet by resetting UI elements.
*/
export function disconnectWallet() {
// Reset account and network information
document.getElementById('accountAddress').textContent = '--';
document.getElementById('networkName').textContent = '--';
// Hide wallet info and show Connect button
document.getElementById('walletInfo').style.display = 'none';
document.getElementById('connectWallet').style.display = 'inline-block';
document.getElementById('disconnectWallet').style.display = 'none';
console.log("Wallet disconnected.");
}
/**
* Get the network name based on the chain ID.
* @param {string} chainId - The chain ID in hexadecimal.
* @returns {string} - The name of the network.
*/
function getNetworkName(chainId) {
const networks = {
'0x1': 'Ethereum Mainnet',
'0x3': 'Ropsten Testnet',
'0x4': 'Rinkeby Testnet',
'0x5': 'Goerli Testnet',
'0x2a': 'Kovan Testnet',
// Add more networks as needed
};
return networks[chainId] || 'Unknown Network';
}