Getting Started with CrossFi Development: Keplr & MetaMask Wallet Integration

Why CrossFi 🧐

CrossFi Chain is a layer 1 blockchain with a modular architecture. It consists of two integral parts, Cosmos and EVM. Each part is responsible for its specific functionality, with their work completely synchronized as a single organism.
CrossFi is fully EVM compatible, which means you can use any EVM based developer tooling and libraries. For the purposes of this tutorial, we will create a decentralized application using Foundry.

Main Takeaways 🎁

• Understand CrossFi Blockchain
• Download & Configure Keplr Wallet
• Download & Configure Metamask Wallet
• Integrate CrossFi Testnet into MetaMask
• Generate CrossFi Testnet Tokens
• Import Evmos Address & Balance
• Initialize a New dApp using Foundry
• Deploy Contract on CrossFi Testnet
• Verify Contract with XFI-Scan Explorer

Dev Tools ⚒️

• Yarn

npm install -g yarn

• Forge

curl -L https://foundry.paradigm.xyz | bash

Step 1: Setup Keplr Wallet for CrossFi Token Generation

We will start this tutorial by establishing a communication channel between our dApp and the blockchain network. Interacting with Ethereum is seamless using wallets like MetaMask or Keplr. Additionally, Cosmos-based blockchains rely on Keplr for asset and fund management.

Follow this link to set up a Keplr wallet for CrossFi testnet token generation.

Step 2: Export Keplr to MetaMask wallet

I assume you have followed the link above to download and configure the Keplr wallet, as well as generated at least 0.01 XFI testnet tokens. You can continue to increase your balance by revisiting the faucet daily. However, importing the Keplr wallet into MetaMask is the next stage in this process.

- Retrieve Keplr wallet recovery phrase

• To view your recovery phrase, select the User icon at the top right corner

• Click the three-stacked-dots next to your wallet name

• Select View recovery phrase from the options

• Insert your password and click Confirm to proceed

• Select Copy to clipboard to copy your recovery phrase

✍️ Ensure to store your Keplr wallet recovery phrase safely and handy

- Export with Keplr's recovery phrase

✍️ Recommended: Create a new Chrome profile before downloading MetaMask wallet in order to separate the pre-existing MetaMask accounts from the imported Keplr account.

• Go to metamask.io and select [Get MetaMask]
• Select [Add to Chrome] and click the [Add extension] button in the modal window
• Agree to MetaMask's Terms of use and select the [Import an existing wallet] button
• [Agree] to continue
• Insert the 12-word Keplr wallet recovery phrase that you copied earlier
• Create password and select [Import my wallet]
• Select [Done] to finalize the installation

Boom 💥 Your MetaMask wallet is ready!

- Adding the CrossFi Test Network to MetaMask

✍️ Currently, your wallet balance may display zero, because the MetaMask network is set to Ethereum by default.

• Click on the Network dropdown at the top-left corner of MetaMask page
• Turn on the Show test networks switch button
• Click the [Add a custom network] button
• Fill in the network details as follows and click [Save]:

Network name: CrossFi Testnet
Default RPC URL: https://rpc.testnet.ms
Chain ID: 4157
Symbol: XFI
Block explorer URL: https://scan.testnet.ms

• Select the network dropdown again and click the CrossFi Testnet you recently added

Congratulations 🎉 You have successfully imported your Keplr wallet to MetaMask

Step 3: Create a new project directory

mkdir crossfi-foundry-dapp && cd crossfi-foundry-dapp

Step 4: Initialize the Foundry framework

✍️ Foundry initializes a new git repository automatically. This can be prevented by flagging the command.

forge init --no-git

✍️ Recommended: Each of these folders includes an initial file; delete them one by one to start fresh.

Step 5: Create the contract

• Navigate to the src directory
• Create a new file named SimpleEscrow.sol
• Update the SimpleEscrow.sol with the following code:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.23;

contract SimpleEscrow {
    address public buyer;
    address public seller;
    bool public isLocked;

    constructor(address _seller) payable {
        require(msg.value > 0, "Deposit required");
        buyer = msg.sender;
        seller = _seller;
        isLocked = true;
    }

    function releaseFunds() external {
        require(msg.sender == buyer, "Only buyer can release funds");
        require(isLocked, "Funds already released");

        isLocked = false;
        payable(seller).transfer(address(this).balance);
    }

    function refundBuyer() external {
        require(msg.sender == seller, "Only seller can refund buyer");
        require(isLocked, "Funds already released");

        isLocked = false;
        payable(buyer).transfer(address(this).balance);
    }

    function balanceOf() public view returns (uint) {
        return address(this).balance;
    }
}

Step 6: Compile the contract

• To compile the Solidity smart contract using Forge, execute the following command:

forge build

• Compilation result, if successful:

[⠊] Compiling...
[⠢] Compiling 1 files with Solc 0.8.27
[⠆] Solc 0.8.27 finished in 101.42ms
Compiler run successfully

Bonus: 💚 Retrieving your Private Key from MetaMask

• Click on the three-stacked-dots at the top-right corner of Metamask page
• Select Account details
• Select [Show private key] button
• Insert your password and [Confirm]
• Click and hold the [Hold to reveal Private Key] button
• Copy your Private Keyand keep it handy

Step 7: Deploying contract on CrossFi Testnet

• Navigate to the script directory and create a new file named SimpleEscrow.s.sol
• Here is the code for the deploy script

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.23;

import "forge-std/Script.sol";
import "../src/SimpleEscrow.sol";

contract DeployEscrow is Script {
    function run() external {
        address seller = 0x3e61b7C58cb5D0d5F75082b758454a43676C8491;
        uint256 depositAmount = 1 ether;

        vm.startBroadcast(vm.envUint("PRIVATE_KEY"));
        SimpleEscrow escrow = new SimpleEscrow{value: depositAmount}(seller);
        vm.stopBroadcast();

        console.log("Escrow Contract Deployed at:", address(escrow));
    }
}

✍️ You can generate a new seller address here

• Execute the following command to deploy your contract:

forge create --rpc-url https://rpc.testnet.ms \
--private-key YOUR_PRIVATE_KEY \
script/SimpleEscrow.s.sol:DeployEscrow  

✍️ Replace the YOUR_PRIVATE_KEY variable with the Private Key you copied from your MetaMask wallet

• If the deployment is successful, your contract address should appear under "Deployed to" in your terminal.

[⠊] Compiling...
[⠒] Compiling 1 files with Solc 0.8.27
[⠑] Solc 0.8.27 finished in 476.53ms
Compiler run successful!
Deployer: 0xF79102F12fC0ddDFbDDF459F3b2C3caB341F27C1
Deployed to: 0xF9E58DA7B14B0fabcBb7D9FB5c37A5aB92E4cF4E
Transaction hash: 0x6effdefe753139b8cdbdfd13a300554d3d071b7e043a7b92caa1f0d7c8ccfcaf

• You may confirm that your contract has been deployed to the CrossFi testnet by searching for its address using the test XFI Scan

Step 8: Interacting with the contract

In the final step of this guide, we will interact with our contract by calling the public functions. We can do this by using Foundry and the following commands:

- Set your contract address

After deployment, note down your contract’s address and set it in an environment variable:

export CONTRACT_ADDRESS=0xYourContractAddressHere

- Read data from the contract

Run the following command to check the contract balance:

cast balance $CONTRACT_ADDRESS --rpc-url https://rpc.testnet.ms

Conclusion

In this tutorial, we explored how to build and deploy a Simple Escrow Smart Contract on the CrossFi blockchain using Foundry. Along the way, we covered key steps such as setting up Keplr and MetaMask wallets, integrating CrossFi Testnet, obtaining test tokens, and deploying our contract successfully.

By following these steps, you now have a solid understanding of CrossFi’s smart contract capabilities, how to interact with its ecosystem, and how to leverage Foundry for efficient smart contract development. Additionally, verifying your contract on XFI-Scan Explorer ensures transparency and trust in blockchain applications.

This foundational knowledge can be extended to develop more advanced decentralized applications on CrossFi. Whether you're building DeFi solutions, NFT marketplaces, or secure payment systems, this tutorial serves as a stepping stone toward mastering smart contract development on CrossFi.

Keep experimenting, testing, and pushing the boundaries of what's possible with blockchain technology! 🚀🔥

Comments

[KENNY ADEJARE]

This well detailed and helpful...Thanks for sharing this