BlockChainTransaction

BlockChain Transaction API

In the DApp of DeBox, you can realize to obtain wallet address, wallet authorization and wallet transfer through web3js standard API
DApps support all wallets in DeBox-App.
Now, we support ETH, BNB, Polygon, Arbitrum One, Optimism, ZkSync Era, their chainId as follows:
ETH:0x1, BNB:0x38, Polygon:0x89, Arbitrum One:0xa4b1, Optimism:0xa, ZkSync Era : 0x144.

Below is a demo of a blockchain transfer in a DApp, the demo supports the six chains above.
You can switch the public chain through the selection box, and in the actual project, please construct your own UI according to your own business.

Please Ensure that there are enough assets in the corresponding wallet and give enough gasprice, otherwise you may not be able to pull up the transfer page due to insufficient gas fees and insufficient assets.

Demo address: https://docs.debox.pro/demo/web3.html , Open it in DeBox to experience.
Click here to download the Demo code

Step 1: Import web3.js

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

Step 2: Check whether web3 objects are properly injected in the browser environment

1. Check whether Web3 exists.
   
2. Check whether window.ethereum exists.
   
3. Use new Web3(window.ethereum) to build web3 object. The sample code is as follows:

  <script>
                window.str = "";
                function checkWallet() {
                    if (typeof Web3 !== 'undefined') {
                        str= "Web3 type exists";
                        if (window.ethereum) {
                            // use window.ethereum
                            str += "<br/>window.ethereum exists";
                            window.web3 = new Web3(window.ethereum);
                            str += "<br/>build window.web3 object";
                        } else if (window.web3) {
                            // use window.web3.currentProvider（Web3.js v0.x.x）
                            str += "window.web3 object exists";
                            window.web3 = new Web3(window.web3.currentProvider);
                        } else {
                            // tip to install wallet
                            str += 'please install MetaMask or other wallet';
                        }
                        str += "<br/>" + "web3.currentProvider.isMetaMask==" + web3.currentProvider.isMetaMask;
                        $("#account").html(str);
                    } else {
                        $("#env").html("No web3? please install <a href='https://metamask.io/'>MetaMask</a>!");
                    }
                }
        </script>

If javascript is introduced normally, the code runs as follows:

Step 3: Select blockchain network

1. You can construction UI for switching blockchain networks via html.
   
2. Debox support six chains, chainID as follows:
   ETH:0x1 , BNB:0x38 , Polygon:0x89 , Arbitrum One:0xa4b1 , Optimism:0xa , ZkSync Era : 0x144.

The sample code demo of the switch chain is as follows:

          <script>
             function changeWallet() {
                try {
                    var chainId = $("#chainid").val()
                    web3.currentProvider.request({
                                            method: "wallet_switchEthereumChain",
                                            params: [{ chainId: chainId }],
                                            });
                } catch (error) {
                    str += "<br/>error wallet_switchEthereumChain:" + error;
                    $("#account").html(str);
                }
            }
        </script>

Select chain name to change the blockchain network

Step 4: Pull up the blockchain wallet, sign the authorization, and then complete the transfer

1. Get wallet information by calling eth_requestAccounts.
   
2. Build transactionObject,set from to value gas gasprice.
   
3. Call web3.eth.sendTransaction to sign and transfer.

The transfer demo is as follows:

<script>
            // transfer
            function transfer() {

                // user authority
                // window.ethereum.enable()
                window.ethereum.request({ method: 'eth_requestAccounts' })
                    .then(accounts => {
                        var from = accounts[0]; // authority account
                        var to = $("#to").val();
                        var value = $("#amount").val();
                        var amountValue = web3.utils.toWei(value, 'ether');
                        // alert("amountValue:  " + JSON.stringify(amountValue));

                        var gas = $("#gas").val();
                        var gasprice = web3.utils.toWei($("#gasprice").val(), 'gwei');

                        $("#from").val(from);



                        // build transactionObject
                        const transactionObject = {
                            from: from,
                            to: to,
                            value: amountValue,
                            gas: gas, // gas limit
                            gasPrice: gasprice, // gas price（gwei）
                            data:"",
                        };

                        str += "<br/>:" transactionObject + JSON.stringify(transactionObject);
                        $("#account").html(str);

                        // alert("transactionObject" + JSON.stringify(transactionObject )

                        str += "<br/>begin, call sendTransaction";
                        $("#account").html(str);
                        web3.eth.sendTransaction(transactionObject)
                        // web3.eth.signTransaction(transactionObject)
                            .then(receipt => {
                                // transaction successfull
                                console.log('Transaction receipt:', receipt);
                                str += "<br/>transaction successfull, receipt:" + receipt.transactionHash;
                                $("#account").html(str);
                            })
                            .catch(error => {
                                // err
                                console.error('Error:', error);
                                str += "<br/>call sendTransaction occur errors:" + error;
                                $("#account").html(str);

                            });
                    })
                    .catch(error => {
                        // refused by user
                        console.error('Error:', error);
                        str += "<br/>call window.ethereum.request error:" + error
                        $("#account").html(str);

                    });
            }

Run the transfer code, pull up the transfer signature screen, click OK to complete the transfer:

F.A.Q

All is right, but why can't pull up the payment page?

1. The gas price given is less than the base price.
   
2. Insufficient assets. The asset balance is less than the transfer amount + gas fee.
   
3. The network is not good, because some nodes of the blockchain are overseas, there may be no normal transfer due to network impassability, and scientific Internet access.