How is Xinfin Remix used for the development of Smart Contracts for Xinfin Hybrid Blockchain?

Published in

Yodaplus

15 min readOct 21, 2021

XinFin Remix is an integrated development environment for authoring Solidity smart contracts, building, deploying, and operating them on the XinFin Blockchain Network, and is accessible through a web browser.

What is XinFin Remix?

XinFin Remix is a web-based Integrated Development Environment (IDE) for writing Solidity Smart Contracts and compiling, deploying, and running them on the XinFin Blockchain Network.

XinFin Remix has a new and improved structure!

Icon Panel: You can alter which plugins appear in the Side Panel by clicking on the Icon Panel.
Side Panel: The Side Panel contains the GUI for most, but not all, plugins.
Main Panel: This was solely used for editing files in the previous arrangement. On the other hand, the Main Panel now contains both plugins and files for the IDE to compile.
Terminal: The Terminal displays the outcomes of your activities with the GUIs. In this part, you can also run scripts.

Icon Panel at Page Load

These icons are displayed in the ‘Icon’ panel by default when you load Remix.

Everything in Remix is a plugin in the upgraded version; hence the Plugin Manager is critical. In the old Remix layout, on the other hand, each primary job was divided into tabs. These tabs have been redesigned to function as plugins.

Due to the power necessary to activate the plugins, the number of plugins you use at one time may impair page loading and make it slightly tedious.

Homepage

In the Main Panel, the homepage is in the upper left corner of the tab.

The Homepage can also be accessed by clicking the Remix logo at the top of the Icon panel.

Environments

To load a group of plugins, click one of the environment buttons.

We now have a Solidity Button and a Vyper Button in our new version, so you will soon be able to store your environment.

Go to the plugin management by selecting the Plugin symbol in the Icon panel to see all the plugins.

The Environment buttons are time and sanity savers that prevent you from going to the plugin management every time you open the page.

Plugin Manager

We designed Remix to be adaptable to improve its functionality and integrate it into new projects like yours.

As a result, we turned everything into a plugin. You simply need to load the functionality you require with this method. The Plugin Manager allows you to easily manage and turn your plugins on and off as needed.

You may also use the Plugin Manager to develop your plugin and import it into Remix. To do so, go to the Plugin Manager panel’s top and click the “Connect to a Local Plugin” link.

Themes

We introduced the themes section to make working on Remix more enjoyable and welcoming. You can now use a dark or grey theme or any custom theme that best suits your requirements.

To choose a theme, navigate to the settings tab and scroll down to the bottom of the page to find different bootstrap-based themes.

File Explorer

Click the ‘File Explorer’ icon to open the file explorer.

By default, the file explorer displays all of the files stored in your browser. You can rename, remove, or add new files to the file explorer and see them in the browser folder.

Note: Clearing the browser’s storage will destroy all of the solidity files you’ve created. To circumvent this, you can use Remix, storing and syncing files in the browser with your local computer.

Create a New File

In Remix, you can create a new untitled.sol file by selecting the ‘create new file’ option.

Add a File from Your Computer

You can use the ‘add local file’ option to import a local file into the Remix browser’s storage.

Publish to Gist

This functionality allows you to publish all files from the browser folder to a gist.

It’s worth noting that the Gist API changed in 2018, requiring users to be verified before publishing a gist.

To set up Github tokens, go to this link page and select Generate new token. Then, create a new token by checking only the ‘Create Gists’ checkbox.

Then copy it and paste it into Remix (right panel/Settings tab) and save it. You can now take advantage of the feature.

Connect your filesystem to Remix.

This can be used to keep Remix and your local file system in sync.

Plugin Manager

In Remix, everything is a PLUGIN.

We’ve turned everything into a plugin to make it easier to integrate new tools produced by us and by you into Remix. This architecture makes it easier to incorporate Remix or any portion of Remix into other projects.

You will only have to load the functionality you require now that Plugins have been introduced. It also allows you to turn plugins on and off as necessary.

The Plugin Manager, which is also the portion of Remix where you may develop your own plugin or load a local plugin into Remix, allows you to manage all of your plugins.

Click the “Connect to a Local Plugin” link at the top of the Plugin Manager screen to do the latter.

To learn more about making your plugin, go to the README of Remix-plugin repo.

Settings

By clicking the gear symbol at the bottom of the icon panel, you would enter Settings.

You’ll find a connection to our Gitter Channel as well as a link to the homepage (if you’ve closed it already). For all you aesthetes out there, we also offer a very extensive list of themes.

More crucial settings are:

Text wrap: This allows you to specify how the editor’s text should be wrapped.
Enable optimization: This specifies whether or not the compiler should optimize the code during compilation. This option can be enabled to save execution gas. Although it is beneficial to enable optimization for contracts that are ready to be deployed in production, it may cause inconsistencies while debugging such a contract.

Solidity Editor

The Remix editor recompiles the code whenever the current file is modified, or another file is chosen. Syntax highlighting for solidity keywords is also available.

Here’s a rundown of some key features:

It organizes open files into tabs.
In the gutter, Compilation Warning and Error are displayed.
Every five seconds, Remix saves the current file automatically.
The +/- buttons in the editor’s top left corner can be used to change the font size.

Terminal

The following are the primary features of the terminal:

It has a JavaScript interpreter and a web3 object built-in. Thus, it allows the execution of the JavaScript code to interact with the current environment. (Please note that web3 is only accessible when the web provider or injected provider mode is chosen.)
It shows the most critical activities performed using the Remix IDE (i.e.,, sending a new transaction).
It shows the mined transactions in the current context. You can opt to see all transactions or just those that refer to contracts that Remix is aware of (e.g, transactions created from the Remix IDE).
It allows users to look for data and erase logs from the terminal.
It allows you to launch scripts by typing them after the > at the bottom.

Compiler (Solidity)

The Solidity Compiler can be accessed by clicking the Solidity icon in the Icon panel.

To start compilation, you must first click the compile button (D. in the image below). Then, if you want the file to be compiled every time it is saved or another file is chosen, you can tick the auto compile checkbox (E. in the image below).

It is now possible to compile Yul files since the release of Solidity 0.5.7. Please read the solidity documentation about Yul, which contains some code examples.

To change the language, utilize the language dropdown (B. in the figure below). Well, this dropdown list is only available in 0.5.7 and later versions.

You can compile code against a certain Ethereum hard fork using the fork selection dropdown list (C. in the image below). The default hard fork used by a specific version corresponds to the compiler default.

To see the hard fork name used for the current compilation, navigate to “Compilation Details” (G. in the figure below) in the Metadata section settings.

Compilation can take a long time if the contract has a lot of dependencies. As a result, you can use auto compilation for instantaneous compilation at your leisure.

Following each compilation, a list of all freshly compiled contracts is updated. The Contract pulldown option can then be used to pick a compiled contract (F. in the image below).

When one contract imports other contracts, many contracts are created. You can check the details of any of these contracts by selecting them.

A popup with extensive information about the currently selected contract appears when you click the “Compilation Details” button (G. in the image below).

From the same menu, you can also upload your non-abstract contract to Swarm.

The ABI and the solidity source code are two examples of publicly available data. After a contract is published, the bzz URL in the details modal dialogue SWARM LOCATION can be used to access its metadata information.

The static analysis tab generates a report after each compilation, which is useful for fixing observed errors even if the compiler doesn’t complain. Below the contract section, any compilation errors or warnings are indicated. See more.

Deploy & Run

You can send transactions to the current environment using the Deploy & Run module.

Click the ‘Run’ icon in the Icon panel to get to the Deploy & Run module.

You must have a contract compiled in order to utilize this module fully. So, if a contract name appears in the contract pick box (in the image below, it’s the Ballot pulldown), you can interact with it; otherwise, you must choose a new contract. To do so, make the file the active tab in the editor panel by clicking it (in the image below, on the right side of the page in the main panel, the ballot.sol is the active contract). Then, go to the compiler module and compile it once it’s activated.

Run Setup

The following options provide you direct control over transaction execution:

Environment:

JavaScript VM: All transactions will be performed in a sandbox blockchain in the browser using JavaScript VM. This implies that if you reload the page, nothing will be saved. The JsVM has its blockchain, and it creates a new one on every reload without preserving the old one.
Injected Provider: Remix will connect to a web3 provider that has been injected. Metamask is an instance of a web3 injection service.
Web3 Provider: Remix will connect to a distant node using the Web3 Provider. You’ll need to give the URL to your chosen Ethereum client, such as Geth, Parity, or any other Ethereum client.

Account: It shows the list of accounts and their linked balances with the current environment. You can choose from five different accounts on the JsVM. If you’re using MetaMask with Injected Web3, you’ll need to modify the account in MetaMask.

Gas Limit: This determines the maximum quantity of gas that can be used for all Remix transactions.

Value: This determines how much ETH, WEI, GWEI, and other cryptocurrencies are sent to a contract or payment function. After each transaction, the value is always reset to 0. (It’s worth noting that the payment functions have a red button.)

Initiate Instance

The select box in the above image is set to Ballot. The list of compiled contracts will be displayed in this select box.
Deploy is a command that sends a transaction to the server that deploys the selected contract. The newly generated instance is added when the transaction is mined (this can take several seconds). First, you must define the constructor’s parameters if it has any.
To gain access to the contract that has already been deployed, AtAddress is used. It is assumed that the provided address is a valid instance of the chosen contract. Note that there is no check at this point, so use caution and make sure you trust the contract at that address before utilizing this feature.

Pending Instances

Validating a transaction can take a long time. The GUI displays it in a pending state throughout this period. The number of pending transactions is updated and the transaction is added to the log after the transaction is mined (see terminal).

Making use of the ABI

A classic Remix use case is using Deploy or AtAddress. A contract’s ABI, on the other hand, can be used to interact with it. Its interface is described by a JSON array called the ABI.

In Remix, make a new file with the extension *.abi and copy the ABI content to communicate with a contract using the ABI. Then type the address of the contract you wish to interact with in the input next to AtAddress. When you select AtAddress, a new “connection” with the contract will appear below.

Using the Recorder

A Recorder is a tool that saves a set of transactions in a JSON file so that they can be repeated later in the same or a different environment.

Saving the transaction list to a JSON file (defaulted to senario.json) allows you to easily review the transaction list, alter input parameters, update the linked library, and so on.

The Recorder can be used in a variety of ways, such as

You can modify the environment and redeploy contracts to a more realistic environment like a test net with an injected web3 or a Geth node after creating and testing contracts in a contained environment (like the JavaScript VM). The settings in the resulting senario.json file are the same as in the Javascript VM. This means you won’t have to click the interface many times to get to the state you had already achieved, making the Recorder a time-saving utility.
You may also personalize the playback by changing the settings in the senario.json file.
Because deploying a contract sometimes necessitates more than just one transaction, the recorder will automate this process.
Working in a development environment demands the initial setup of the state.

senario.json

You must first execute some transactions in the recorder before you can create this file. Transactions Recorded has a 0 next to it in the image above. This indicates that it is not the appropriate time to preserve transactions because none exist. Every transaction you make adds to the total. After that, click the floppy disc icon to create the senario.json file when you’re ready.

The JSON file below is an example of the senario.json file.

Three transactions are carried out in it:

The first corresponds to the installation of the testLib library.

The second corresponds to the contract test being deployed with the constructor’s first parameter set to 11. This contract is subject to the library’s approval. The property link references are used to link the items together. The address of the previously generated library is used in this case: created1512830014773. The number represents the transaction ID (timestamp) that resulted in the creation of the library.

The third record (with the property set to created1512830015080) corresponds to the contract test’s call to the function set. Input parameters are 1 and 0xca35b7d915458ef540ade6068dfe2f44e8fa733c

All these transactions are created using the value of the accounts’ account {0}.

{
   "accounts":{
      "account{0}":"xdcca35b7d915458ef540ade6068dfe2f44e8fa733c"
   },
   "linkReferences":{
      "testLib":"created{1512830014773}"
   },
   "transactions":[
      {
         "timestamp":1512830014773,
         "record":{
            "value":"0",
            "parameters":[
               
            ],
            "abi":"0xbc36789e7a1e281436464229828f817d6612f7b477d66591ff96a9e064bcc98a",
            "contractName":"testLib",
            "bytecode":"60606040523415600e57600080fd5b60968061001c6000396000f300606060405260043610603f576000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff1680636d4ce63c146044575b600080fd5b604a6060565b6040518082815260200191505060405180910390f35b6000610d809050905600a165627a7a7230582022d123b15248b8176151f8d45c2dc132063bcc9bb8d5cd652aea7efae362c8050029",
            "linkReferences":{
               
            },
            "type":"constructor",
            "from":"account{0}"
         }
      },
      {
         "timestamp":1512830015080,
         "record":{
            "value":"100",
            "parameters":[
               11
            ],
            "abi":"0xc41589e7559804ea4a2080dad19d876a024ccb05117835447d72ce08c1d020ec",
            "contractName":"test",
            "bytecode":"60606040526040516020806102b183398101604052808051906020019091905050806000819055505061027a806100376000396000f300606060405260043610610062576000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff1680632f30c6f61461006757806338cc48311461009e57806362738998146100f357806387cc10e11461011c575b600080fd5b61009c600480803590602001909190803573ffffffffffffffffffffffffffffffffffffffff16906020019091905050610145565b005b34156100a957600080fd5b6100b1610191565b604051808273ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200191505060405180910390f35b34156100fe57600080fd5b6101066101bb565b6040518082815260200191505060405180910390f35b341561012757600080fd5b61012f6101c4565b6040518082815260200191505060405180910390f35b8160008190555080600160006101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff1602179055505050565b6000600160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff16905090565b60008054905090565b600073__browser/ballot.sol:testLib____________636d4ce63c6000604051602001526040518163ffffffff167c010000000000000000000000000000000000000000000000000000000002815260040160206040518083038186803b151561022e57600080fd5b6102c65a03f4151561023f57600080fd5b505050604051805190509050905600a165627a7a72305820e0b2510bb2890a0334bfe5613d96db3e72442e63b514cdeaee8fc2c6bbd19d3a0029",
            "linkReferences":{
               "browser/ballot.sol":{
                  "testLib":[
                     {
                        "length":20,
                        "start":511
                     }
                  ]
               }
            },
            "name":"",
            "type":"constructor",
            "from":"account{0}"
         }
      },
      {
         "timestamp":1512830034180,
         "record":{
            "value":"1000000000000000000",
            "parameters":[
               1,
               "xdcca35b7d915458ef540ade6068dfe2f44e8fa733c"
            ],
            "to":"created{1512830015080}",
            "abi":"0xc41589e7559804ea4a2080dad19d876a024ccb05117835447d72ce08c1d020ec",
            "name":"set",
            "type":"function",
            "from":"account{0}"
         }
      }
   ],
   "abis":{
      "0xbc36789e7a1e281436464229828f817d6612f7b477d66591ff96a9e064bcc98a":[
         {
            "constant":true,
            "inputs":[
               
            ],
            "name":"get",
            "outputs":[
               {
                  "name":"",
                  "type":"uint256"
               }
            ],
            "payable":false,
            "stateMutability":"view",
            "type":"function"
         }
      ],
      "0xcc41589e7559804ea4a2080dad19d876a024ccb05117835447d72ce08c1d020ec":[
         {
            "constant":true,
            "inputs":[
               
            ],
            "name":"getInt",
            "outputs":[
               {
                  "name":"",
                  "type":"uint256"
               }
            ],
            "payable":false,
            "stateMutability":"view",
            "type":"function"
         },
         {
            "constant":true,
            "inputs":[
               
            ],
            "name":"getFromLib",
            "outputs":[
               {
                  "name":"",
                  "type":"uint256"
               }
            ],
            "payable":false,
            "stateMutability":"view",
            "type":"function"
         },
         {
            "constant":true,
            "inputs":[
               
            ],
            "name":"getAddress",
            "outputs":[
               {
                  "name":"",
                  "type":"address"
               }
            ],
            "payable":false,
            "stateMutability":"view",
            "type":"function"
         },
         {
            "constant":false,
            "inputs":[
               {
                  "name":"_t",
                  "type":"uint256"
               },
               {
                  "name":"_add",
                  "type":"address"
               }
            ],
            "name":"set",
            "outputs":[
               
            ],
            "payable":true,
            "stateMutability":"payable",
            "type":"function"
         },
         {
            "inputs":[
               {
                  "name":"_r",
                  "type":"uint256"
               }
            ],
            "payable":true,
            "stateMutability":"payable",
            "type":"constructor"
         }
      ]
   }
}

Deployed Contracts

This area of the Run tab contains a list of deployed contracts that can be interacted with using the deployed contract’s auto-generated UI, commonly known as udapp.

To open it, click the sideways caret.

The functions are listed in the contract. Different colors can be used for the function buttons.

Solidity has blue buttons for functions that are constant or pure. A new transaction is not created by clicking one of them. As a result, clicking will not modify the state of the contract; instead, it will return a value contained in the contract without charging you a gas fee.
Non-payable functions affect the status of the contract but do not receive Ether and have an orange button. Clicking on them initiates a transaction, which costs gas.
In Solidity, functions with red buttons are payable functions. By selecting one of these, a new transaction with the ability to accept a value will be created. The value is entered into the Value box beneath the Gas Limit field.

For more information, see more about the Solidity modifier.

If a function requires input parameters, you will have to input them.

Inputting parameters

Using the collapsible view to input parameters.

(Using a single input box to input all of the parameters)

Commas are used to separate parameters.
Each parameter’s kind is indicated in the input field.
Double-quotes aren’t required for numbers and addresses.
Wrapping the strings is required.
The “delegate” function has three parameters in the example above.

Inputting parameters in the expanded view

When you click the ‘down’ caret, you’ll be sent to the Multi-param Manager, where you can enter the parameters one by one. Much less perplexing!

Even strings, in this view, do not need to be wrapped.

The inputs will be encoded and copied if you click the clipboard icon. Encoding can only be done with a valid set of inputs.

In the event if you type a unit instead of an address, clicking the clipboard will result in an error.

Passing in a tuple or a struct to a function

You must use an array [] to pass a tuple in.

Likewise, it must be passed as an array [] to pass a struct as a function parameter. Also, the line pragma experimental ABIEncoderV2; must be placed at the beginning of the solidity file.

Debugger

You can debug the transaction using the Debugger module. It can be used to deploy both Remix-created and previously mined transactions.

Debugging is only possible if the current environment has the required features.

When a successful or failed transaction displays in the terminal, click the ‘Debug’ button to activate the debugger. Alternatively, you can load the module with the plugin manager and then click the problem in the icon panel. Or you can also use the debugger by typing debug in the console.

This section contains details on the most recent compilation. At each compilation, a new analysis is done by default.

The contract code is detailedly described in the analysis tab. These details can assist you in avoiding coding errors and prompting optimal practices.