How to Integrate Ethereum Blockchain in Bubble

Add an HTML element to your page and load the ethers.js library from CDN. This library provides a clean API for interacting with Ethereum. Create a JavascriptToBubble element for passing data between JavaScript and Bubble workflows.

1<script src="https://cdn.ethers.io/lib/ethers-5.7.umd.min.js"></script>

Add a 'Connect Wallet' button. In an HTML element, write JavaScript that requests MetaMask connection using window.ethereum.request({ method: 'eth_requestAccounts' }). When the user approves, capture their wallet address and pass it to Bubble via JavascriptToBubble. Store the wallet address on the User record for future reference. Show the connected address (abbreviated) in the UI.

1<script>
2async function connectWallet() {
3  if (typeof window.ethereum !== 'undefined') {
4    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
5    const address = accounts[0];
6    // Pass to Bubble via JavascriptToBubble
7    bubble_fn_wallet_connected(address);
8  } else {
9    alert('Please install MetaMask to connect your wallet');
10  }
11}
12</script>

To read blockchain data (token balance, NFT ownership, contract state), create an ethers.js Contract instance with the contract address and ABI. Call read-only functions (view/pure) which do not require gas or transactions. Pass the results back to Bubble via JavascriptToBubble for display in your UI elements.

1<script>
2async function readContract() {
3  const provider = new ethers.providers.Web3Provider(window.ethereum);
4  const contractAddress = '0x...your_contract...';
5  const abi = ['function balanceOf(address) view returns (uint256)'];
6  const contract = new ethers.Contract(contractAddress, abi, provider);
7  const balance = await contract.balanceOf(userAddress);
8  bubble_fn_token_balance(ethers.utils.formatEther(balance));
9}
10</script>

For write operations (transfers, minting, contract interactions), use a signer instead of a provider. The user must approve the transaction in MetaMask and pay gas fees. Create the contract instance with the signer, call the write function, and wait for the transaction to be mined. Pass the transaction hash back to Bubble for recording.

Create a 'WalletTransaction' Data Type with: user, wallet_address, tx_hash, type (send/receive/contract), amount, status (pending/confirmed/failed), block_number, timestamp. After each transaction, create a record. For transaction status updates, either poll the blockchain periodically or use a webhook service like Alchemy Notify.