solui
  • Dapps
  • Getting Started
  • Docs
  • Community

@solui/react

React components for solUI.

Installation

(Note: peer dependencies must also be installed)

npm install @solui/react react react-dom

Example usage

Render a UI:

const React = require('react')
const { process as processSpec, validateGroupInputs, validatePanel, executePanel } = require('@solui/processor')
const { Dapp } = require('@solui/react')

export default ({ spec, artifacts, network }) => {
  return (
    <Dapp
      network={network}
      spec={spec}
      artifacts={artifacts}
      processSpec={processSpec}
      validateGroupInputs={validateGroupInputs}
      validatePanel={validatePanel}
      executePanel={executePanel}
    />
  )
}

Read full documentation.

## License

Copyright 2019 solUI Contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Address

Render an Ethereum address.

Parameters

  • $0 Object
    • $0.address
    • $0.tx
    • $0.children

Returns ReactElement

AlertBox

Render an alert.

Parameters

  • $0 Object
    • $0.className
    • $0.msg

Returns ReactElement

Button

Render a button.

Returns ReactElement

NetworkContext

Network context.

This consists of a network property which is of type NetworkInfo.

Type: Object

CopyToClipboardButton

Copy-to-clipboard button.

Parameters

  • $0 Object
    • $0.value
    • $0.className

Returns ReactElement

Dapp

Render a UI.

Parameters

  • $0 Object
    • $0.network
    • $0.spec
    • $0.artifacts
    • $0.className
    • $0.validateSpec
    • $0.processSpec
    • $0.validatePanel
    • $0.executePanel
    • $0.embedUrl

Returns ReactElement

DateTime

Render a date-time value.

Parameters

  • $0 Object
    • $0.className
    • $0.dateTime
    • $0.withTime

Returns ReactElement

ErrorBox

Render an error alert.

Parameters

  • $0 Object
    • $0.className
    • $0.error

Returns ReactElement

Field

Render an input field.

Parameters

  • $0 Object
    • $0.className
    • $0.name
    • $0.value
    • $0.onChange
    • $0.config.title
    • $0.config.type
    • $0.config.resolvedOptions
    • $0.config.helpText
    • $0.config.placeholder
    • $0.config.config ...any
    • $0.validationStatus

Returns ReactElement

GlobalStyles

Render global styles.

Returns ReactElement

useExecutionHistory

Hook for handling execution history.

Returns useExecutionHistoryStruct

useExecutionHistory

Type: Object

Properties

  • executionHistory Array The execution history. Each item contains: { inputs, tx, outputs, error }
  • saveExecutionToHistory Function Save an execution to history.

useInput

Hook for handling user-input values.

This will expose funtions for change handling, validation and post-validation error handling.

Parameters

  • $0 Object
    • $0.inputs
    • $0.validate
  • inputs Array Input field configurations
  • validate Function Callback to validate input values.

Returns UseInputHookStruct

UseInputHookStruct

Type: Object

Properties

  • inputValue Object Current input values
  • updateInputValue Function Callback to update input value.
  • inputValidation Object Current input validation status.
  • updateInputValidation Function Current to update input validation status.
  • allInputsAreValid Boolean Flag indicating whether all inputs are currently valid.
  • onInputChange Function Callback for when input changes.

useNetwork

  • See: {NetworkContext}

Hook for obtaining current network context.

Returns NetworkInfo

useRect

Hook for obtaining bounding rectangle of a DOM node.

Parameters

  • nodeRef Object Element reference.
  • observe Boolean Whether to observe for changes. (optional, default true)
  • onChange Funtion Callback for when rectangle gets updated.

Returns Object Bounding rectangle

Icon

Render an icon.

To use this component without on-screen icon flickering the following line should be added to your React app's root file, before anything gets rendered:

require('@fortawesome/fontawesome-svg-core/styles.css')

Returns ReactElement

IconButton

  • See: {Icon}

Render an icon button.

Parameters

  • $0 Object
    • $0.icon
    • $0.tooltip
    • $0.props ...any

Returns ReactElement

Image

Render an image.

Parameters

  • $0 Object
    • $0.className
    • $0.url

Returns ReactElement

Interface

  • See: {Dapp}

Render an interface.

Parameters

  • $0 Object
    • $0.onExecutePanel
    • $0.onValidatePanel
    • $0.title
    • $0.description
    • $0.image
    • $0.panels

Returns ReactElement

Layout

Render the common layout.

Parameters

Returns ReactElement

LinkButton

Render a button that looks like a link.

Returns ReactElement

ListInput

Render a textarea input field for list items.

Returns ReactElement

LoadingIcon

  • See: {Icon}

Render the loading icon.

Parameters

  • props Object Icon properties.

Returns ReactElement

MaxContentWidth

Render a max-width container.

Parameters

  • $0 Object
    • $0.children
    • $0.width

Returns ReactElement

Render embed label.

Parameters

  • $0 Object
    • $0.className
    • $0.embedUrl
    • $0.spec
    • $0.artifacts

Returns ReactElement

NetworkInfoLabel

Render network info.

Parameters

  • $0 Object
    • $0.className
    • $0.network.id
    • $0.network.name

Returns ReactElement

Panel

Render a UI panel.

Parameters

  • $0 Object
    • $0.expanded
    • $0.onClick
    • $0.onExecute
    • $0.onValidate
    • $0.id
    • $0.title
    • $0.description
    • $0.image
    • $0.inputs

Returns ReactElement

PanelInputs

Render panel inputs.

Parameters

  • $0 Object
    • $0.inputs
    • $0.onInputChange
    • $0.inputValue
    • $0.inputValidation

Returns ReactElement

Progress

Render progress indicator with given content.

Parameters

  • $0 Object
    • $0.className
    • $0.children

Returns ReactElement

Result

  • See: {Value}

Render one ore more execution results.

Parameters

  • $0 Object
    • $0.className
    • $0.result.value
    • $0.result.error
    • $0.result.meta.successMsgs
    • $0.result.meta.failureMsgs

Returns ReactElement

TextInput

Render a text input field.

Returns ReactElement

Tx

Render transaction info.

Parameters

  • $0 Object
    • $0.className
    • $0.tx.hash

Returns ReactElement

openUrl

Navigate to given URL in platform-agnostic manner.

This does nothing server-side.

Parameters

  • url String URL to navigate to.

Returns undefined

getMetaTextForInput

Get meta string to display to user based on input's value and configuration.

Parameters

  • $0 Object
    • $0.type
    • $0.value
    • $0.config
  • type String Input type
  • value any Input current value
  • config Object Input configuration

Returns InputMeta

getRenderableValuesForOutput

Get renderable values for given output value and config.

Parameters

  • $0 Object
    • $0.type
    • $0.value
    • $0.valueTransformed
  • type String Output type
  • value any Output current value
  • config Object Output configuration

Returns any [String]

InputMeta

Type: Object

Properties

  • metaText String User-friendly help display string.
  • tooltip ReactElement Tooltip to show user.

SingleValue

Render a single value.

Parameters

  • $0 Object
    • $0.className
    • $0.value
    • $0.valueTransformed
    • $0.config ...any

Returns ReactElement