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

To help you get started, we’ve selected a few metronome-wallet-ui-logic examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github autonomoussoftware / metronome-wallet-desktop / src / components / onboarding / PasswordStep.js View on Github external
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 (
      <AltLayout title="Define a Password" data-testid="onboarding-container">
        <form onSubmit={this.onPasswordSubmit} data-testid="pass-form">
          <PasswordMessage>
            Enter a strong password until the meter turns <Green>green</Green>.
          </PasswordMessage>
          <Sp mt={2}>
            <TextInput
github autonomoussoftware / metronome-wallet-desktop / src / components / ChangePassword.js View on Github external
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') {
github autonomoussoftware / metronome-wallet-desktop / src / components / Login.js View on Github external
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 (
      <AltLayout title="Enter your password">
        <form onSubmit={this.props.onSubmit} data-testid="login-form">
          <Sp mt={4}>
            <TextInput
              data-testid="pass-field"
              autoFocus
              onChange={this.props.onInputChange}
              error={this.props.errors.password || this.props.error}
              value={this.props.password}
              label="Password"
github autonomoussoftware / metronome-wallet-desktop / src / components / onboarding / VerifyMnemonicStep.js View on Github external
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 (
      <AltLayout title="Recovery Passphrase" data-testid="onboarding-container">
        <form
          data-testid="mnemonic-form"
          onSubmit={this.props.onMnemonicAccepted}
        >
          <Message>
            To verify you have copied the recovery passphrase correctly, enter
            the 12 words provided before in the field below.
          </Message>
          <Sp mt={3} mx={-8}>
            <TextInput
              data-testid="mnemonic-field"
github autonomoussoftware / metronome-wallet-desktop / src / components / onboarding / UserMnemonicStep.js View on Github external
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 (
      <AltLayout title="Recovery Passphrase" data-testid="onboarding-container">
        <form
          data-testid="mnemonic-form"
          onSubmit={this.props.onMnemonicAccepted}
        >
          <Message>
            Enter a valid 12 word passphrase to recover a previously created
            wallet.
          </Message>
          <Sp mt={3} mx={-8}>
            <TextInput
              data-testid="mnemonic-field"
github autonomoussoftware / metronome-wallet-desktop / src / components / dashboard / tx-list / TxRow.js View on Github external
<ConverterIcon
              color={
                tx.contractCallFailed
                  ? theme.colors.danger
                  : theme.colors.primary
              }
            />
          )}

        {tx.txType === 'auction' &&
          !isPending && (
            <AuctionIcon
              color={
                tx.mtnBoughtInAuction && !tx.contractCallFailed
                  ? theme.colors.primary
                  : theme.colors.danger
              }
            />
          )}

        {(tx.txType === 'unknown' || isPending) && (
          <Pending>{confirmations}</Pending>
        )}
        <div>
          <Amount
            isCancelApproval={tx.isCancelApproval}
            isPending={isPending}
            isFailed={isFailed}
          >
            {tx.txType === 'auction' ? (
              <React.Fragment>
                <DisplayValue value={tx.ethSpentInAuction} post=" ETH" />
github autonomoussoftware / metronome-wallet-desktop / src / components / common / ConfirmationWizard.js View on Github external
<Sp my={2}>
                <Title>{this.props.successTitle}</Title>
              </Sp>
              {this.props.successText && (
                <Message>{this.props.successText}</Message>
              )}
            </Flex.Column>
          </Focusable>
        </Sp>
      )
    }
    if (status === 'failure') {
      return (
        <Sp my={19} mx={12} data-testid="failure">
          <Flex.Column align="center">
            <CloseIcon color={theme.colors.danger} size="4.8rem" />
            <Sp my={2}>
              <Title>{this.props.failureTitle}</Title>
            </Sp>
            {error && <FilteredMessage>{error}</FilteredMessage>}
            <TryAgainBtn
              data-testid="try-again-btn"
              onClick={this.onCancelClick}
              autoFocus
            >
              Try again
            </TryAgainBtn>
          </Flex.Column>
        </Sp>
      )
    }
    return (
github autonomoussoftware / metronome-wallet-desktop / src / components / dashboard / tx-list / TxRow.js View on Github external
const { confirmations, parsed: tx, ...other } = this.props
    const isFailed =
      (tx.txType === 'auction' &&
        !tx.mtnBoughtInAuction &&
        confirmations > 0) ||
      tx.contractCallFailed
    const isPending = !isFailed && confirmations < 6

    return (
      <Container {...other}>
        {(tx.txType === 'received' || tx.txType === 'sent') &&
          !isPending && (
            <TxIcon
              color={
                tx.contractCallFailed
                  ? theme.colors.danger
                  : theme.colors.primary
              }
            />
          )}

        {tx.txType === 'converted' &&
          !isPending && (
            <ConverterIcon
              color={
                tx.contractCallFailed
                  ? theme.colors.danger
                  : theme.colors.primary
              }
            />
          )}
github autonomoussoftware / metronome-wallet-desktop / src / components / dashboard / tx-list / row / Icon.js View on Github external
render() {
    const color = this.props.isFailed
      ? theme.colors.danger
      : theme.colors.primary

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

    switch (this.props.txType) {
      case 'converted':
        return <ConverterIcon color={color} />
      case 'auction':
        return <AuctionIcon color={color} />
      case 'imported':
        return <ImportIcon color={color} />
      case 'exported':
        return <ExportIcon color={color} />
      default:
        return <TxIcon color={color} />
github autonomoussoftware / metronome-wallet-desktop / src / components / common / ConfirmationWizard.js View on Github external
<Title>{this.props.pendingTitle}</Title>
            </Sp>
            <LoadingBar />
            {this.props.pendingText && (
              <Sp mt={2}>
                <Message>{this.props.pendingText}</Message>
              </Sp>
            )}
          </Flex.Column>
        </Focusable>
      </Sp>
    )
  }
}

export default withClient(ConfirmationWizard)