How to use metronome-wallet-ui-logic - 10 common examples

text-align: center;
`

const Green = styled.div`
  display: inline-block;
  color: ${p => p.theme.colors.success};
`

export default class PasswordStep extends React.Component {
  static propTypes = {
    requiredPasswordEntropy: PropTypes.number.isRequired,
    onPasswordSubmit: PropTypes.func.isRequired,
    onInputChange: PropTypes.func.isRequired,
    passwordAgain: PropTypes.string,
    password: PropTypes.string,
    errors: utils.errorPropTypes('passwordAgain', 'password')
  }

  onPasswordSubmit = e => {
    e.preventDefault()
    this.props.onPasswordSubmit({ clearOnError: false })
  }

  render() {
    return (
      
        <form data-testid="pass-form">
          
            Enter a strong password until the meter turns green.
          
          
            </form>

margin-bottom: -3.9rem;
`

class ChangePassword extends React.Component {
  static propTypes = {
    requiredPasswordEntropy: PropTypes.number.isRequired,
    newPasswordAgain: PropTypes.string,
    onInputChange: PropTypes.func.isRequired,
    newPassword: PropTypes.string,
    oldPassword: PropTypes.string,
    onSubmit: PropTypes.func.isRequired,
    history: PropTypes.shape({
      push: PropTypes.func.isRequired
    }).isRequired,
    status: PropTypes.oneOf(['init', 'pending', 'success', 'failure']),
    errors: utils.errorPropTypes(
      'newPasswordAgain',
      'newPassword',
      'oldPassword'
    ),
    error: PropTypes.string
  }

  static contextType = ToastsContext

  handleSubmitAndNavigate = e => {
    e.preventDefault()
    this.props.onSubmit()
  }

  componentDidUpdate(prevProps) {
    if (this.props.status === 'success' && prevProps.status !== 'success') {

import withLoginState from 'metronome-wallet-ui-logic/src/hocs/withLoginState'
import * as utils from 'metronome-wallet-ui-logic/src/utils'
import PropTypes from 'prop-types'
import React from 'react'

import { TextInput, AltLayout, Btn, Sp } from './common'

class Login extends React.Component {
  static propTypes = {
    onInputChange: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    password: PropTypes.string,
    errors: utils.errorPropTypes('password'),
    status: utils.statusPropTypes,
    error: PropTypes.string
  }

  render() {
    return (
      
        <form data-testid="login-form">
          
            </form>

import PropTypes from 'prop-types'
import React from 'react'

import { TextInput, AltLayout, Btn, Sp } from '../common'
import SecondaryBtn from './SecondaryBtn'
import Message from './Message'

export default class VerifyMnemonicStep extends React.Component {
  static propTypes = {
    onMnemonicCopiedToggled: PropTypes.func.isRequired,
    onMnemonicAccepted: PropTypes.func.isRequired,
    onInputChange: PropTypes.func.isRequired,
    mnemonicAgain: PropTypes.string,
    shouldSubmit: PropTypes.func.isRequired,
    getTooltip: PropTypes.func.isRequired,
    errors: utils.errorPropTypes('mnemonicAgain')
  }

  render() {
    return (
      
        <form data-testid="mnemonic-form">
          
            To verify you have copied the recovery passphrase correctly, enter
            the 12 words provided before in the field below.
          
          
            </form>

import PropTypes from 'prop-types'
import React from 'react'

import { TextInput, AltLayout, Btn, Sp } from '../common'
import SecondaryBtn from './SecondaryBtn'
import Message from './Message'

export default class UserMnemonic extends React.Component {
  static propTypes = {
    onUseUserMnemonicToggled: PropTypes.func.isRequired,
    onMnemonicAccepted: PropTypes.func.isRequired,
    onInputChange: PropTypes.func.isRequired,
    userMnemonic: PropTypes.string,
    shouldSubmit: PropTypes.func.isRequired,
    getTooltip: PropTypes.func.isRequired,
    errors: utils.errorPropTypes('userMnemonic')
  }

  render() {
    return (
      
        <form data-testid="mnemonic-form">
          
            Enter a valid 12 word passphrase to recover a previously created
            wallet.
          
          
            </form>

)}

        {tx.txType === 'auction' &&
          !isPending && (
            
          )}

        {(tx.txType === 'unknown' || isPending) && (
          {confirmations}
        )}
        <div>
          
            {tx.txType === 'auction' ? (
              
                </div>

<title>{this.props.successTitle}</title>
              
              {this.props.successText &amp;&amp; (
                {this.props.successText}
              )}
            
          
        
      )
    }
    if (status === 'failure') {
      return (
        
          
            
            
              <title>{this.props.failureTitle}</title>
            
            {error &amp;&amp; {error}}
            
              Try again
            
          
        
      )
    }
    return (

const { confirmations, parsed: tx, ...other } = this.props
    const isFailed =
      (tx.txType === 'auction' &&
        !tx.mtnBoughtInAuction &&
        confirmations > 0) ||
      tx.contractCallFailed
    const isPending = !isFailed && confirmations < 6

    return (
      
        {(tx.txType === 'received' || tx.txType === 'sent') &&
          !isPending && (
            
          )}

        {tx.txType === 'converted' &&
          !isPending && (
            
          )}

render() {
    const color = this.props.isFailed
      ? theme.colors.danger
      : theme.colors.primary

    if (this.props.txType === 'unknown' || this.props.isPending) {
      return {this.props.confirmations}
    }

    switch (this.props.txType) {
      case 'converted':
        return 
      case 'auction':
        return 
      case 'imported':
        return 
      case 'exported':
        return 
      default:
        return

<title>{this.props.pendingTitle}</title>
            
            
            {this.props.pendingText &amp;&amp; (
              
                {this.props.pendingText}
              
            )}
          
        
      
    )
  }
}

export default withClient(ConfirmationWizard)