Ethereum Payment App using Ionic

Building an Ionic application to interact with MetaMask and web3.js to perform transactions.

Having spent much time building web and mobile applications, I wanted to explore developments on a different horizon, such as building payment applications and integrating existing wallets and gateways into web apps; thus came in Ionic, which helps build scalable cross platform apps quickly.

Why Ionic, you may ask. Yes, native app development helps interacting with device specific hardware. But Ionic or other such platforms, with strong developer community, help build cross-platform mobile first applications with a single codebase. Also with ever increasing compute power driving smaller devices like smartphones the difference in performance between native and hybrid application is shrinking substantially.

Well coming back to my quest, this exploration lead me to discover metamask, a crypto wallet & gateway to blockchain apps.

Working 🤖

In its latest version, MetaMask injects the Ethereum provider which is available at available at window.ethereum. For security purposes , your application has to request access to user accounts by calling the method ethereum.enable() . This opens up a popup in metamask for the user to allow or deny access.

The following code shows a way to request for access to user accounts :

// request to access user account details
this.ethereum = (window as any).ethereum;
this.webby3 = (window as any).web3;
if (typeof this.ethereum == 'undefined') {
    this.dialog.presentToast('Please install MetaMask extension');
    return;
}
try {
    let x = await this.ethereum.enable();
    console.log('ethereum enabled=>', x);
}catch(err) {
    console.log('err=>', err);
    if (err.code == 4001) {
       this.dialog.presentToast('User denied account access..');
       return;
    }
}

With the above setup you can get access to user’s account-details such as address, balance and gas price for transactions. A sample code to fetch details like account info, balance etc are as follows :

if (typeof this.webby3 !== 'undefined') {

// Get MetaMask Account
this.webby3.eth.getAccounts(async (err: any, res: any) => {
     if (err) {
       this.dialog.presentToast('Couldn't fetch account details..');
       return;
     }
     if(res && res.length>0 ) {
       // res is array of accounts
       this.webby3.eth.getBalance(res[0], "latest", (error: any,        result: any) => {
      if(error) {
            console.log('balance error=>', error);
      }
      if (result) {
        //result is bigNumber Wei -> convert to ether
        let balance = this.webby3.fromWei(String(result), 'ether');
      }
   
    });
    }else {
        this.dialog.presentToast('Log in to MetaMask Account..');
    }
})
// Get current gas price
this.webby3.eth.getGasPrice((err: any, _gasPrice: any) => {
   if (err) {
   console.log('err=>', err);
   }
   let gasPrice = this.webby3.fromWei(String(_gasPrice), "ether");
})
} 
else {
   console.log('error');
   this.dialog.presentToast('Install MetaMask extension');
}

Web3.js provides isAddress() and sendTransaction() functions to check if the wallet address is valid and to perform transaction respectively.

Note: The Payload required for sendTransaction() requires the amount to be converted to Wei which refers to the smallest denomination of ether (ETH).

if (typeof this.webby3 !== 'undefined') {
    if (!this.webby3.isAddress(useraddress))
       {
        await this.dialog.presentToast('Invalid User Address..');
        return;
       }
}
// transaction
let payload: any = {
    from: this.address.value,
    to: val.address,
    value: this.webby3.toWei(Number(amountInEther), 'ether'),
};
this.webby3.eth.sendTransaction(payload, (err: any, transactionHash: any) => {
  if (err) {
     console.log('err=>', err);
     this.dialog.presentToast('Error occured!');
  }
  if (transactionHash) {
      console.log('transactionHash=>', transactionHash);
      this.dialog.presentToast('Transaction Successful!');
  }
})

To my understanding, MetaMask doesn’t facilitate to store multiple addresses as some sort of collection, for easier and faster payment. My application does the exact same by allowing users to encapsulate multiple addresses under a group thereby avoiding the repetitive task of copying addresses every time prior performing a transaction.

Each collection consist of multiple metamask addresses . For example, user could create a group ‘work’ consisting of office colleagues with whom he frequently does transactions with.

Conclusion

I have built ‘EthApp’ - an ethereum payment app using Ionic that helps ease the payment process by allowing user to create collections. The user login authentication and CRUD operations on collection lists are performed using Firebase authentication and Cloud Firestore. The source code is available on Gitlab. I hope this app and its development can help open up the ‘cryptic’ world of ethereum.