TOWARD WEB3: CRYPTO BANKING

Web3 Development: Connecting Frontend to Backend

Free Checks to Claim!

Published in

Coinmonks

5 min readJul 26, 2023

Web3 development is a rapidly growing field, with developers creating decentralized applications (dApps) that interact with blockchain networks and smart contracts. However, one of the challenges that developers often face is connecting the frontend of their application to the backend, i.e., the blockchain network and smart contracts. In this post, we’ll explore how to establish this connection and the key elements required.

This piece is the latest addition to our crypto banking series (see first and second articles), where we mimic traditional checking accounts using only cryptocurrency. Here, we will unveil our process of integrating the frontend and backend of our web3 platform. Thus far, our explorations have been limited to the Mumbai test network. However, in a significant leap forward, we are now navigating the Matic network for the first time. To mark this achievement, we are offering checks for those keen on claiming them.

Key Elements for Connection

There are three primary elements that need to be provided to the frontend for it to connect to the backend:

URL of a Node: This endpoint allows you to access the blockchain network and its data. Without it, you cannot communicate with the smart contracts or send transactions. This URL can be obtained by running your own node locally or remotely, using a third-party service that provides node access, or relying on the user’s browser extension or wallet.
Contract Address: This is the unique identifier of the smart contract on the blockchain. It is needed to interact with the specific smart contract you’re interested in.
Contract ABI (Application Binary Interface): The ABI is a JSON object that defines how to interact with the smart contract. It specifies the contract’s functions, variables, and events. Without the ABI, you cannot call or listen to the contract from your frontend application.
Depending on your use case and design, you may also need to provide some additional elements to the frontend, such as the network ID, contract events, and contract metadata.

Connecting to the Blockchain

To connect to the blockchain, you need to create a web3 instance. This can be done using the web3.js library, which allows you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. Here’s an example of how to create a web3 instance:

import Web3 from "web3";
// create a web3 instance
const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");

In this line of code, Web3.givenProviderrefers to the URL extracted from a wallet extension, assuming one is installed and enabled in the user’s browser. If there is no wallet extension or web3 provider available, then Web3.givenProvider will return null, and the code will fall back to the second option, which is "http://localhost:8545". This is the URL of a local node that you can run on your own machine for development and testing purposes.

Interacting with Smart Contracts

Once you have a web3 instance, you can create a contract instance using the contract address and the ABI. This allows you to interact with the smart contract by calling its functions, listening to its events, or sending transactions to it.

import CheckClaimJSON from './CheckClaimV1.json';
import Web3 from 'web3';

// define the contract ABI
const abi = CheckClaimJSON.abi;
// define the contract address
const address = "0x..."; // replace with your contract address
// create a web3 instance
const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
// create a contract instance
const contract = new web3.eth.Contract(abi, address);

// You can then call any method of the smartcontract
// Example to get the balance of a user we use:
const balance = await contract.methods.balances(address).call();

The last line shows how we use the contract to get a user's balance for our crypto-banking application.

Integrating the Frontend with the Backend

In our case, we use a single Makefile to compile both the frontend and the backend. This Makefile acts as the glue between the two components, placing the information needed by the frontend (contract address and ABI) in an accessible file. Its content is:

all: setabi
 cd check-claim-app/; npm start

deploy.mumbai.log: contracts/CheckClaimV1.sol contracts/CheckClaimProxy.sol contracts/CheckClaimTimeLock.sol
 npx hardhat run --network mumbai scripts/deploy.js | tee deploy.mumbai.log

deploy.matic.log: contracts/CheckClaimV1.sol contracts/CheckClaimProxy.sol contracts/CheckClaimTimeLock.sol
 npx hardhat run --network matic scripts/deploy.js | tee deploy.matic.log

# add other networks as needed

balances: scripts/network_balances.js
 npx hardhat run scripts/network_balances.js

setabi: deploy.mumbai.log deploy.matic.log
 cp artifacts/contracts/CheckClaimV1.sol/CheckClaimV1.json check-claim-app/src/
 echo "export const CONTRACT_ADDRESSES = {" > "check-claim-app/src/ContractAddr.js"
 echo "  80001: \"$(shell tail -1 deploy.mumbai.log | cut -d ':' -f2 | cut -d' ' -f2)\"," >> "check-claim-app/src/ContractAddr.js"
 echo "  137: \"$(shell tail -1 deploy.matic.log | cut -d ':' -f2 | cut -d' ' -f2)\"," >> "check-claim-app/src/ContractAddr.js"
 echo "};" >> "check-claim-app/src/ContractAddr.js"

The Makefile generates a file called contractAddr.js that exports the contract addresses for different networks. It also copies the ABI from a JSON file generated by the smart contract compilation process. The content of the ContractAddr.js looks like this:

export const CONTRACT_ADDRESSES = {
  80001: "0x1542b6D46f99CCbaD07e25BfacA0652EE6468A74",
  137: "0x1542b6D46f99CCbaD07e25BfacA0652EE6468A74",
};

Here's an example of how to import and use these data in your React app:

import CheckClaimJSON from './CheckClaimV1.json';
import { CONTRACT_ADDRESSES } from './ContractAddr.js';
import Web3 from 'web3';

// get the abi
const abi = CheckClaimJSON.abi;
// get the network ID
const networkId = await web3.eth.net.getId();
// define the contract address
const address = CONTRACT_ADDRESSES[networkId];
// create a web3 instance
const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
// create a contract instance
const contract = new web3.eth.Contract(abi, address);

Free Checks

As promised here is a free check that you can claim.

{
  "recipient": "0x0000000000000000000000000000000000000000",
  "amount": "0.1",
  "nonce": 1690096319687,
  "signature": "0xc0a0eeff2188be287bef1780086cc16e99c876e4fb01892aa6b7f9508396139335f97b01dc0cb2b1f45f303db17d85da6fc5f1ab5f9cf02a75a970174e2cfd521c"
}

To claim your check, visit Check Claim (softech29.gitlab.io) and link your wallet to the website. Once connected, choose the “Withdraw Check” tab. Here, you’re able to copy the check and click the “Withdraw Check” button to kickstart the withdrawal process. Following this, you’ll need to confirm the transaction via your wallet. Please note, a small fee may apply to complete the transaction.

I’ve included just one check. The reason is, when the recipient’s address is 0x0, our smart contract enables anyone to claim it. This could potentially result in a single claimant seizing all available checks if I posted multiple at once, which isn’t our intention. Our goal is to enable as many individuals as possible to test our system. Therefore, if you’d like a check, kindly leave a comment with your address as part of this limited-time offer. In response, I will generate a unique check exclusively claimable by you.

Conclusion

In conclusion, connecting the frontend of a web3 application to the backend involves providing the URL of a node, the contract address, and the contract ABI. Depending on your use case, you may also need to provide additional elements such as the network ID, contract events, and contract metadata. By understanding these elements and how to use them, you can create powerful and interactive dApps that effectively leverage blockchain technology.

If you’ve enjoyed this exploration into crypto banking and web3 development, please show your support by clapping! We’re always keen to understand which content you find most valuable. We also welcome your comments and insights; your feedback is crucial in driving our project forward. Also, if you haven’t done so already, consider following us for the latest insights into decentralized applications. Let’s continue this exciting journey together.