smartcontract-ui concept & updates

[serapath]

@todo

• add deploy logic
• think how to deploy contracts (javascript vm? see new project by richard moore (ethers.js) or new stuff that was developed by iuri and yann for remix)
• think about the UI -> how does user trigger deploy and how does smartcontract-app (preview) change after contract is deployed)
• deploy button for constructor -> make it different (add deploy title?, also border could be thicker for deploy params)
• ropsten/Goerli test net
• concept (wireframes?, style?, content?, sections?)
• input fields in the preview (details for each data type)
  • array
  • string
  • integer
  • address
  • boolean
  • bytes
• function types
  • how to select color for: constructor, different function types (pure, payable, non payable, view)
• input fields (auto check if input is correct)
• validate inputs (params)
• each solidity function in preview will have "send" button in lower left corner
  • when clicked: the return value shows next to it
• fix number input fields to display correct number within valid range in input field
• send transactions & get return values (write and read from the contracts)
• make all contracts from the file visible in preview (one after another, collapsed by default or as
• make deployment work
• present validation feedback to user
• integer input (adapt range based on type)
• bug collapse all doesnt work
• bug collapsing a single item leaves a dashed border instead of nothing
• display time stamp next to each logged transaction
• types: validation for all possible solidity types
• expand/collapse fix
• integer and other inputs => text preselected when clicked (in focus)
• when sendTx pending (blinking or snackbar or...)
• types: functions: pure, view, non-payable and payable
• types: boolean inputs (unselected by default, append OK to array, when all values are selected, not when first one is selected)
• output: once deployed, print outputs next to function calls (with timestamp!!)
• smartcontract-ui#7: Solidity validator - BYTES
• smartcontract-ui#9: deployment manager (dashboard to see and manage deployed contracts)
• preview multiple solidity contracts defined in one file
  • when multiple contracts in one file (show all, not just first one in separate preview tabs)
• returns/receipt
  • what do we display after the transaction is completed
    • what was the function input
    • what is the return from the function
  • how to show the status: pending/in progress, finished (success/fail)
• smartcontract-ui#12 think about logo
• how to accordingly select same color for syntax highlighting
• implement at address functionality to connect/load an existing contract
• website notification
  • you need to connect to Metamask
  • error messages (you need to deploy first)
  • you don't have any funds
  • you can have only one contract per file (import using url links or later file explorer)
  • show when copied!
• improve tx logs
  • show both: sent params & returns (with types of params/return values))
  • correctly decode the output
  • it shows in a expandable terminal log and it is possible to scroll up to see previous return values
  • offer expand/collapse of terminal after each method to see 0 or just one+scroll or all results
• types: add return values (types only)
  • update return & param values after deploy
• smartcontract-ui#6 generate deployment receipt & dapp form
• display current metamask address (on top right corner? like a profile)
• types: dsiplay data types with flags/labels (next to function names)
• types: make send button green when all validations for inputs pass
• types: send button with return value (real value) and type
• errors: fix error message for wrong values (smartcontract-app)
• errors: improve error messages
• errors: solidity-validator module (=> improve error messages)
  • https://github.com/alincode/solidity-validator.js/blob/master/src/lib/getMessage.js
• notify editor to highlight code when hover parts of UDapp and vice versa
• be able to toggle every (sub)portion of the form into a json editor to copy/paste rather than using input fields
• smartcontract-ui#2: theme & styleguide
• display return values of auto fetched free read methods by default (maybe refetch after transaction?)
  • instead of read methods, there should be state (with option to refresh) and queries for those who need params
    • example: https://etherscan.io/token/0xd556caf704e39fc728058557a113b226207d2212?a=0x0000000000000000000000000000000000000000#readContract
  • also queries should on hover say query instead of maybe send (like for write functions)
    • also here https://etherscan.io/dapp/0xd556caf704e39fc728058557a113b226207d2212#readContract
• allow to send ETH directly to any contract address - no special method/function needed in source
• add small dropdown-converter tools for input values https://simpleserialize.com/
• smartcontract-ui#5: "dogfood" smartcontract-ui
• smartcontract-ui#8: translate method code to natural language

---

[ninabreznik]

Inspiration:

Recommended by @gpeterson

• Solidity UML Diagram
• https://piet.slock.it/#