ETHEREAL : A Decentralized Virtual Banking system - Part II
Tags: blockchain, webdev, beginners, tutorial
Published: 2022-01-07 12:19:16

_This is a follow-up article from our previous post._

{% link https://dev.to/nitdgplug/ethereal-a-decentralized-virtual-banking-system-part-i-1mol %}


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4ai3n88chf1eygc3ddw.png)

In the previous post, we discussed the features like **Creating a new account, Displaying Accounts, Account Details and Adding Balance**. Today, let us learn how can we add features like : **Withdrawing Balance, Transfer Amount to other virtual accounts on the Bank and Displaying Transaction history**.

---

## Part 3 : Withdrawing Balance and Transfer Amount to other virtual accounts on the Bank


Just navigate to `SimpleStorage.sol` file and paste this inside.

```js

    //Function to withdraw balance from your existing accounts, the balance will be transferred to your blockchain account
    function withdrawBalance(
        uint256 _serial,
        uint256 _amount,
        address payable _creator
    ) 
    external returns (bool _success) {
        if (accounts[_serial].balance >= _amount / 1000000000000000000 + 1) {
            _creator.transfer(_amount);
            accounts[_serial].balance -= _amount / 1000000000000000000;
            bankBalance -= _amount / 1000000000000000000;
            transacNum++;
            transactions[transacNum] = Transaction(
                transacNum,
                accounts[_serial].balance,
                _amount / 1000000000000000000,
                block.timestamp,
                "Withdrawal",
                _serial
            );
            emit TransactionCompleted(
                _amount / 1000000000000000000,
                transacNum,
                serialNumber,
                "Withdrawal"
            );
            return true;
        } else {
            revert("Insufficient Funds");
            //   revert InsufficientFunds(_serial,_amount/1000000000000000000,accounts[_serial].balance-1,'Withdrawal');
        }
    }



    //Function to virtually send money from one bank account to other
    function transactAmount(
        uint256 _amount,
        uint256 _serial_2,
        uint256 _serial
    ) public {
        if (accounts[_serial].balance >= _amount / 1000000000000000000 + 1) {
            accounts[_serial].balance -= _amount / 1000000000000000000;
            accounts[_serial_2].balance += _amount / 1000000000000000000;
            transacNum++;
            emit TransactionCompleted(
                _amount / 1000000000000000000,
                transacNum,
                serialNumber,
                "TransferMoneySent"
            );
            transactions[transacNum] = Transaction(
                transacNum,
                accounts[_serial].balance,
                _amount / 1000000000000000000,
                block.timestamp,
                "TransferMoneySent",
                _serial
            );
            transacNum++;
            emit TransactionCompleted(
                _amount / 1000000000000000000,
                transacNum,
                serialNumber,
                "TransferMoneyReceived"
            );
            transactions[transacNum] = Transaction(
                transacNum,
                accounts[_serial_2].balance,
                _amount / 1000000000000000000,
                block.timestamp,
                "TransferMoneyReceived",
                _serial_2
            );
        } else {
            revert("Insufficient Funds");
            //   revert InsufficientFunds(_serial,_amount/1000000000000000000,accounts[_serial].balance-1,'TransferMoney');
        }
    }

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jbr4x9pou1qip2mj36s.png)

Now, let us move on to the Front-end part.

Now, the logic for this feature is slightly counter-intuitive on the frontend but pretty straightforward in the backend, we create a **withdrawBalance** function similar to the **addBalance** function taking the same 3 inputs as in the **addBalance** function but this function will be an external function  as it also needs to access the contract balance, and you cannot access the balance of a contract by being a part of the contract you need to access it from outside 

**Withdraw balance :**
  

 **_Ether from the Contract -> Ganache account_** 

Virtual balance of both the Contract(Bank) and the account are decreased since actual ether is transported out of the Contract.


Now, how to send ether from the Contract to any other ethereum account, well this took a while to figure out, but every address has two methods to access, one is the **balance** method and the other is the **transfer** method, now we use the transfer method here to transfer actual ether from the Contract to any other Ganache account(here the account connected to the Metamask account).


Now, like the previous function, let us add a **withdrawBalance** function now according to intuition you need to subtract the amount that is passed from the frontend, and one more additional line must be added to transfer actual ether from the contract to the creator address which we pass in the **withdrawBalance** account.

Now, one check should be added though that the virtual account from which we are withdrawing balance should have an amount greater than the amount we want to withdraw.


**withdrawBalance function code snippet**

```js
if(account[serialNumber].balance){

   account[serialNumber].balance-=amount;

   account[0].balance-=amount;

   _creator.transfer(amount);

}
```

This is the syntax to transfer amount from the contract to the Ganache account connected to Metamask which is the creator account


For the frontend, let us go to our **AccountDetails** page let us go to another grid box, whereas done in previous components we create a form input field and a submit button the value of the form input field being the **withdrawBalance** state variable which will be passed in the backend function.



On the click of the submit button, we pass the **withdrawBalance** function on the frontend which has a similar syntax to the previous **addBalance** function but there are some minor differences.



As you can notice that the value is not given, why?
Firstly, why do we need to use the send option when we are withdrawing balance, well that's the catch, to access any function from the backend solidity contract you need to use the send option and it will cost some amount of ether definitely and after you approve the Metamask transaction, in this case, the backend function is executed and actual ether is sent from your contract to the Ganache. 

```js
await contract.methods.withdrawBalance(id,withdrawBalance,account).send({from:account})
```


After this you need to resolve the promise using the `.then` and `.catch` methods, you can follow the example given in the above **addBalance** function where you need to run another **async** function to get the updated Balance and set the state of the balance variable to that updated balance. You can check with your Ganache client that the amount has been added to it, proving that your withdrawal was successful. 

Now, let us implement the next functionality of this module, of transferring the virtual amount from one account to another, the logic for this is the simplest you can find among all the previous functions as there is no actual involvement of ether. 

The bank balance won't be increased or decreased as both the accounts are present on the bank, we just need to increase the virtual balance of the account we are transferring to and decrease the virtual balance of the account from which we are sending the amount.


Let us quickly see the backend code for this functionality, we need to create a **transferAmount** function which is a public function in the backend which by intuition takes 3 inputs, any guesses ???


Well, it is the amount to be transferred, the serial number of the account from which the amount is being transferred, and the serial number of the account to which the amount is to be transferred.

We need to add one check before passing the function that is the amount that is passed should be less than the balance of the account from which it is being transferred.

The code snippet of the **transferAmount** functionality is given below: 

**transferAmount code snippet**


```js
if(accounts[serial_1].balance>amount){
   accounts[serial_1].balance-=amount;
   accounts[serial_2].balance+=amount;
}
```

Now let us complete the frontend code for this functionality, the same old process we need to create a form in a grid box, and in this form we need to take two inputs, one is the second account serial number to which you need to send the amount, and the other is the amount to transfer and on clicking of the submit button we need to pass a **transferAmount** function on the frontend.


This function takes the inputs from the form values and similar to the above functions we need to use the send option to run the function on the backend.

```js
await contract.methods.transferAccount(amount,id,secondserialNumber).send({from:account})
```

and after this, we can use the similar `.then` and `.catch` methods to resolve this promise and run the function to again set the balance to updated balance, similar to the previous examples. 

{% youtube AAVKwDIbzkk %}


## Part 4 : Displaying Transaction history

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83kxnlh8omb9jzgq9bp1.png)

Navigate to `SimpleStorage.sol` file and paste this inside.

```js
    //Defining a struct to store transaction record
    struct Transaction {
        uint256 transacNum;
        uint256 currentBalance;
        uint256 amountTransacted;
        uint256 createdAt;
        string transacType;
        uint256 accountSerialNumber;
    }
    
```

{% youtube vZxxsVAaR7s %}

---

That concludes our project. You can further customize the styling of the project and also add any more new features like substituting the serial Number with the actual account and using the account for transactions.

Thank you for reading this article. Hope you had a great time building this project and have learned a lot more about Blockchain Technology.


**You can find all the Resources required for this Project by clicking [here](https://github.com/shashank725/ETHEREAL/tree/main/resources).**

**Project Github repository :**
{% github https://github.com/deucaleon18/ETHEREAL %}

**Project collaborators :**

{% user deucaleon18 %}

{% user shashank725 %}

{% user ajp %}

<br>

**Connect with us :**
<a href="https://nitdgplug.org/"><img src="https://img.shields.io/badge/GLUG website-FFFC00?style=for-the-badge&logo=U+1F427&logoColor=white"></a>

<a href="https://www.linkedin.com/company/lugnitdgp/mycompany/"><img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="linkedin"/></a>

<a href="https://www.instagram.com/nitdgplug/"><img src="https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white"></a>

<a href="https://www.facebook.com/nitdgplug"><img src="https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white"></a>

---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqsn2bupxtk6nan73cxo.JPG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4ayozr2zm16sag0fy5b.gif)