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:
- Contract Definition
- EnumDefinition
- FunctionDefinition
- ImportDirective
- PragmaDirective
- StructDefinition