Skip to main content

UI Guidelines

There are 5 main different components in ARC Reactor, they are

1. Toolbar

Located at the top of the window, this is the main toolbar with buttons for opening files, undo and redo actions.

1.1. File

  • New Contract File:

    Create a new contract

  • Project:

    Project related command including the action to save project, save as project and to close a project

1.2. Edit

  • Undo:

    revert back any modification made inside ARC Reactor

  • Redo:

    revert back any modifications from the undo state.

1.3. View

  • Toolbar:

    Enable/disable the toolbar (top header bar)

  • Statusbar:

    Enable/disable the statusbar (bottom part)

  • Panels:

    • Contracts :

      enable/disable the left pane-contracts

    • Compiler:

      enable/disable the left pane-compiler

    • Problems:

      enable/disable the status bar - problems

    • Properties:

      enable/disable the right pane - properties.

1.4. New Contract file

Create a new single contract file from scratch

1.5. Save

save any modifications made within ARC Reactor

2. Left Pane

On the left pane, Contracts and Compiler. In the Contracts section users can view the structure of the project files, Import assistance, Rename an import file. In the Compiler section, you can click the compiler button and it will open a separate tab on your browser that directs to ARC Compiler for Compilation and Deployment the smart contracts to EVM based networks

2.1. Contracts

Information in tree structure for all contracts involve in the project

2.2. Diagram Settings

The option to enable/disable showing the detail of diagram on main panel, these options are available for type and parameters.

3. Main Window

Solidity View Source, Diagram View. The diagram view implements stereotypes:

3.1. Diagram View

  • Contract:

    • Corresponding source code (base contracts):

    • PragmaDirective:

    • ImportDirective:

    • SubNodes:

      ref to section C.i.2 above:

      • Variable

      • Initial Value:

        • Type:

          BooleanLiteral, NumberLiteral, StringLiteral, Identifier, TupleExpression, TypeNameExpression, IndexAccess, IndexRangeAccess, BinaryOperation, Conditional, MemberAccess, FunctionCall, UnaryOperation, NewExpression, NameValueExpression

        • Expression:

        • Arguments:

        • Name:

  • Interface:

  • Library:

  • Abstract:

3.2. Source Generated View

4. Status Bar

Located on the bottom part of the UI, it consists of the problem window to assist a user to know which part of the code has been missed with the suggestion on how to solve the dependency problems.

5. Right Pane

On the right pane, add and arrange the actions are the property of any given selected diagram/table/function located on the Main Window. Properties for the right pane consists of 5 main differentiation:

  1. Contract Definition
  2. EnumDefinition
  3. FunctionDefinition
  4. ImportDirective
  5. PragmaDirective
  6. StructDefinition