JsonImportSubview.prototype.render = function () {
  const { error } = this.props

  return (
    h('div', {
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '5px 15px 0px 15px',
      },
    }, [

      h('p', 'Used by a variety of different clients'),
      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),

      h(FileInput, {
        readAs: 'text',
        onLoad: this.onLoad.bind(this),
        style: {
          margin: '20px 0px 12px 20px',
          fontSize: '15px',
        },
      }),

      h('input.large-input.letter-spacey', {
        type: 'password',
        placeholder: 'Enter password',
        id: 'json-password-box',
        onKeyPress: this.createKeyringOnEnter.bind(this),
        style: {
          width: 260,
          marginTop: 12,
        },
      }),

      h('button.primary', {
        onClick: this.createNewKeychain.bind(this),
        style: {
          margin: 12,
        },
      }, 'Import'),

      error ? h('span.error', error) : null,
    ])
  )
}
Example #2
0
const render = () => {
  ReactDOM.render(
    h(Counter,{
      value: store.getState().number,
      onIncrement: () => {
        store.dispatch({type: "INCREMENT"})
      },
      onDecrement: () => {
        store.dispatch({type: "DECREMENT"})
      },
      onToggle: () => {
        store.dispatch({type: "TOGGLE"})
      },
      running: store.getState().running
    }),
    document.getElementById("root")
  );
};
Example #3
0
  const declare = curry((dispatch, state) => {

    // change the tab index
    const change = (index) => dispatch({'type': 'change', index})
    const dispatchChild = (index) => (action) => dispatch({type:'child', index, action})
    const declareChild = (c, i) => c.declare(dispatchChild(i), state.states[i], {index: state.index, change})
    const effects = mapIndexed(declareChild, children)

    const html = map(prop('html'), effects)
    const fx = pipe(
      map(omit(['html'])),
      concatAllEffects
    )(effects)

    return merge(fx, {
      html: h('div.tabvc', {style}, html),
    })
  })
Example #4
0
)(props => {
  const { currentAgent, actions, currentAgentGroupProfiles } = props

  if (isNil(currentAgent)) {
    return null
  }

  return h(Profile, {
    initialValues: currentAgent.profile,
    updateProfile: (nextProfile) => {
      actions.profiles.update(currentAgent.profile.id, nextProfile)
    },
    agentType: 'my',
    isEditing: true,
    agent: currentAgent,
    currentAgentGroupProfiles: currentAgentGroupProfiles
  })
})
Example #5
0
  const declare = curry((dispatch, state) => {

    const push = (scene) => dispatch({type:'push', scene})
    const pop = () => dispatch({type:'pop'})
    const dispatchChild = (index) => (action) => dispatch({type:'child', index, action})
    const declareChild = (c, i) => c.declare(dispatchChild(i), state.states[i], {push, pop})
    const effects = mapIndexed(declareChild, children)

    const html = map(prop('html'), effects)
    const fx = pipe(
      map(omit(['html'])),
      concatAllEffects
    )(effects)

    return merge(fx, {
      html: h('div.tabvc', {style}, html),
    })
  })
AccountDetailScreen.prototype.subview = function () {
  var subview
  try {
    subview = this.props.accountDetail.subview
  } catch (e) {
    subview = null
  }

  switch (subview) {
    case 'transactions':
      return this.tabSections()
    case 'export':
      var state = extend({key: 'export'}, this.props)
      return h(ExportAccountView, state)
    default:
      return this.tabSections()
  }
}
EthBalanceComponent.prototype.renderBalance = function (value) {
  var props = this.props
  const { conversionRate, shorten, incoming, currentCurrency } = props
  if (value === 'None') return value
  if (value === '...') return value
  var balanceObj = generateBalanceObject(value, shorten ? 1 : 3)
  var balance
  var splitBalance = value.split(' ')
  var ethNumber = splitBalance[0]
  var ethSuffix = splitBalance[1]
  const showFiat = 'showFiat' in props ? props.showFiat : true

  if (shorten) {
    balance = balanceObj.shortBalance
  } else {
    balance = balanceObj.balance
  }

  var label = balanceObj.label

  return (
    h(Tooltip, {
      position: 'bottom',
      title: `${ethNumber} ${ethSuffix}`,
    }, h('div.flex-column', [
      h('.flex-row', {
        style: {
          alignItems: 'flex-end',
          lineHeight: '13px',
          fontFamily: 'Montserrat Light',
          textRendering: 'geometricPrecision',
        },
      }, [
        h('div', {
          style: {
            width: '100%',
            textAlign: 'right',
          },
        }, incoming ? `+${balance}` : balance),
        h('div', {
          style: {
            color: ' #AEAEAE',
            fontSize: '12px',
            marginLeft: '5px',
          },
        }, label),
      ]),

      showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
    ]))
  )
}
  render() {
    const children = [];

    if (this.props.pointsUnderBrush.length) {
      const sideLength = this.props.layout.sideLength;
      const margin = this.props.layout.margin;
      const innerSide = sideLength - margin;

      this.props.layout.boxes.forEach(box => {
        const points = [];

        if (this.props.pointsUnderBrush.length <= 200) {
          this.props.pointsUnderBrush.forEach(i => {
            points.push([
              this.props.features[box.m].values[i],
              this.props.features[box.n].yValues[i]
            ]);
          });

          const sp = h(ScatterPlot, {
            xOffset: box.x,
            yOffset: box.y,
            points,
            hideAxis: true,
            sideLength: innerSide,
            muiTheme: this.props.muiTheme,
            className: 'active'
          });

          children.push(sp);
        }
      });
    }

    return h(
      'g',
      {
        width: this.props.width,
        height: this.props.height,
        className: 'scatterplots-active-points'
      },
      children
    );
  }
Example #9
0
function MyGroups (props) {
  const { styles, currentAgent, currentAgentGroupProfiles = [], currentAgentGroupSupplierProfiles = [] } = props

  if (isNil(currentAgent)) {
    return null
  }

  const renderMyGroupProfiles = (type) => {
    return (groupProfiles) => {
      if (isEmpty(groupProfiles)) return null
      return h('div', { className: styles.myGroupsContainer }, [
        h('p', {
          className: styles.intro
        }, [
          h(FormattedMessage, {
            id: type === 'supplier' ? 'agents.mySupplierGroups' : 'agents.myBuyingGroups',
            className: styles.labelText
          })
        ]),
        h('ul', renderGroupProfiles(groupProfiles))
      ])
    }
  }

  const renderGroupProfiles = (groupProfiles) => {
    return map(renderGroupProfile, groupProfiles)
  }

  const renderGroupProfile = (profile) => {
    return h(Link, {
      className: styles.link,
      to: `/p/${profile.id}`
    }, [
      h('li', profile.name)
    ])
  }

  return h('div', {
    className: styles.container
  }, [
    renderMyGroupProfiles('buying')(currentAgentGroupProfiles),
    renderMyGroupProfiles('supplier')(currentAgentGroupSupplierProfiles)
  ])
}
Example #10
0
 h('tbody', pages.map(p =>
   h('tr', [
     h('th.face', [
       h('h2', p.nome),
       h('img', {src: p.capa})
     ]),
     h('td.desc', [
       h('dl', Object.keys(p)
         .filter(key => key !== 'nome' && key !== 'capa' && key !== 'text')
         .map(key =>
           h('div', {key: key}, [
             h('dt', key),
             h('dd', p[key])
           ])
         )
       ),
       h('hr'),
       h('p', p.text)
     ])
   ])
Example #11
0
    map(route => {
      const {
        path,
        name = path,
        navigation
      } = route

      const {
        Component,
        title = name,
        icon
      } = navigation

      if (Component) {
        return (
          h(Component, {
            onClick: toggleDrawer,
            key: name,
            as: MenuItem,
            leftIcon: (
              h('i', {
                className: icon,
                'aria-hidden': true
              })
            )
          })
        )
      }

      return (
        h(NavLink, {
          to: path,
          key: name
        }, [
          h(MenuItem, {
            onClick: toggleDrawer,
            leftIcon: (
              h('i', {
                className: icon,
                'aria-hidden': true
              })
            )
          }, [
            h(FormattedMessage, {
              id: title,
              className: styles.labelText
            })
          ])
        ])
      )
    }),
Example #12
0
  it('gets multi select value', () => {
    let val = [];
    const opts = [
      {value: 'a', text: 'aaa'},
      {value: 'b', text: 'bbb'},
      {value: 'c', text: 'ccc'},
    ];
    const comp = h('select', {
      multiple: true,
      value: val,
      onChange: e => {
        val = getMultiSelectValue(e);
      },
    }, [
      opts.map((opt, i) => {
        return h('option', {
          key: opt.value,
          value: opt.value,
          className: `opt_${i + 1}`,
        }, opt.text);
      }),
    ]);
    const el = TestUtils.renderIntoDocument(comp);

    const opt1 = el.querySelector('.opt_1');
    const opt2 = el.querySelector('.opt_2');
    const opt3 = el.querySelector('.opt_3');

    opt1.selected = true;
    opt2.selected = true;
    TestUtils.Simulate.change(el);

    val.should.have.length(2);
    val.should.containDeepOrdered(['a', 'b']);

    // change event clears selected options
    opt2.selected = true;
    opt3.selected = true;
    TestUtils.Simulate.change(el);

    val.should.have.length(2);
    val.should.containDeepOrdered(['b', 'c']);
  });
ShapeshiftForm.prototype.renderMarketInfo = function () {
  const { depositCoin } = this.state
  const coinPair = `${depositCoin}_eth`
  const { tokenExchangeRates } = this.props
  const {
    limit,
    rate,
    minimum,
  } = tokenExchangeRates[coinPair] || {}

  return h('div.shapeshift-form__metadata', {}, [

    this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'),
    this.renderMetadata('Limit', limit),
    this.renderMetadata('Exchange Rate', rate),
    this.renderMetadata('Minimum', minimum),

  ])
}
Example #14
0
  document.addEventListener('DOMContentLoaded', () => {
    const renderRoot = createRoot({
      config,
      store,
      style,
      client,
      root,
      intl
    })

    const appNode = document.querySelector(root.appNode)

    ReactDOM.render(
      renderRoot([
        h(Layout, { routes })
      ]),
      appNode
    )
  })
Example #15
0
}, ({id, value, placeholder, ref, classes, type, name, required, onChange, onEnter,}) => {
  return h('input', {
    id,
    className: S.join(' ', classes || []),
    type: type || 'text',
    name,
    placeholder,
    required,
    value,
    ref,
    onChange,
    onKeyUp: (event) => {
      if (event.keyCode === 13 && onEnter != null) {
        logger.debug('Enter pressed')
        onEnter()
      }
    },
  })
})
Example #16
0
)(props => {
  const { taskPlan, currentAgent, actions, setTaskWorkerId } = props

  return h(TaskWorker, {
    taskPlan,
    onNavigate: handleNavigate,
    onCancel: handleCancel,
    onComplete: handleComplete
  })

  function handleNavigate (taskPlan) {
    actions.router.push(`/tasks/${taskPlan.id}`)
  }

  function handleCancel (taskPlan) {
    const {
      parentTaskPlan,
      params: { orderId } = {}
    } = taskPlan
    const nextRoute = (
      (!isNil(parentTaskPlan))
        ? `/tasks/${parentTaskPlan.id}`
        : (!isNil(orderId))
          ? `/o/${orderId}`
          : `/tasks`
    )
    actions.router.push(nextRoute)
  }

  function handleComplete (taskplan) {
    const taskWork = {
      taskPlanId: taskPlan.id,
      taskRecipeId: taskplan.taskRecipeId,
      workerAgentId: currentAgent.id,
      params: {
        // contextAgentId: group.id
      }
    }

    setTaskWorkerId(actions.taskWorks.create(taskWork))
  }
})
function startApp (metamaskState, accountManager, opts) {
  // parse opts
  if (!metamaskState.featureFlags) metamaskState.featureFlags = {}
  const store = configureStore({

    // metamaskState represents the cross-tab state
    metamask: metamaskState,

    // appState represents the current tab's popup state
    appState: {},

    // Which blockchain we are using:
    networkVersion: opts.networkVersion,
  })

  const useBetaUi = metamaskState.featureFlags.betaUI
  const networkEndpointType = useBetaUi ? BETA_UI_NETWORK_TYPE : OLD_UI_NETWORK_TYPE
  store.dispatch(actions.setNetworkEndpoints(networkEndpointType))

  // if unconfirmed txs, start on txConf page
  const unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.unapprovedTypedMessages, metamaskState.network)
  const numberOfUnapprivedTx = unapprovedTxsAll.length
  if (numberOfUnapprivedTx > 0) {
    store.dispatch(actions.showConfTxPage({
      id: unapprovedTxsAll[numberOfUnapprivedTx - 1].id,
    }))
  }

  accountManager.on('update', function (metamaskState) {
    store.dispatch(actions.updateMetamaskState(metamaskState))
  })

  // start app
  render(
    h(Root, {
      // inject initial state
      store: store,
    }
  ), opts.container)

  return store
}
Example #18
0
          identityList.map((identity) => {
            const pending = this.props.pending.filter((txOrMsg) => {
              if ('txParams' in txOrMsg) {
                return txOrMsg.txParams.from === identity.address
              } else if ('msgParams' in txOrMsg) {
                return txOrMsg.msgParams.from === identity.address
              } else {
                return false
              }
            })

            return h(AccountListItem, {
              key: `acct-panel-${identity.address}`,
              identity,
              selectedAddress: this.props.selectedAddress,
              accounts: this.props.accounts,
              onShowDetail: this.onShowDetail.bind(this),
              pending,
            })
          }),
function ProductsForOrder (props) {
  const { styles, isListView, setListView } = props

  const listIcon = h(FontIcon, { className: `fa fa-list` })
  const gridIcon = h(FontIcon, { className: `fa fa-th` })
  return (
    h('div', { className: styles.container }, [
      h('div', { className: styles.buttonsContainer }, [
        h(FlatButton, { icon: listIcon, label: 'LIST', onClick: (ev) => setListView(true) }),
        h(FlatButton, { icon: gridIcon, label: 'GRID', onClick: (ev) => setListView(false) })
      ]),
      isListView ? renderList(props) : renderGrid(props)
    ])
  )
}
function recipientField (txParams, transaction, isTx, isMsg) {
  let message

  if (isMsg) {
    message = 'Signature Requested'
  } else if (txParams.to) {
    message = addressSummary(txParams.to)
  } else {
    message = 'Contract Published'
  }

  return h('div', {
    style: {
      fontSize: 'x-small',
      color: '#ABA9AA',
    },
  }, [
    message,
    renderErrorOrWarning(transaction),
  ])
}
  it('can tolerate a gas decimal number at a high precision', function (done) {
    const renderer = ReactTestUtils.createRenderer()

    let valueStr = '20'
    while (valueStr.length < 20) {
      valueStr += '0'
    }
    const value = new BN(valueStr, 10)

    const inputStr = '2.3'

    let targetStr = '23'
    while (targetStr.length < 19) {
      targetStr += '0'
    }
    const target = new BN(targetStr, 10)

    const precision = 18 // ether precision
    const scale = 18

    const props = {
      value,
      scale,
      precision,
      onChange: (newBn) => {
        assert.equal(newBn.toString(), target.toString(), 'should tolerate increase')
        done()
      },
    }

    const inputComponent = h(BnInput, props)
    const component = additions.renderIntoDocument(inputComponent)
    renderer.render(inputComponent)
    const input = additions.find(component, 'input.hex-input')[0]
    ReactTestUtils.Simulate.change(input, { preventDefault () {}, target: {
      value: inputStr,
      checkValidity () { return true } },
    })
  })
CurrencyInput.prototype.render = function () {
  const {
    className,
    placeholder,
    readOnly,
    inputRef,
  } = this.props

  const inputSizeMultiplier = readOnly ? 1 : 1.2

  const valueToRender = this.getValueToRender()

  return h('input', {
    className,
    value: valueToRender,
    placeholder,
    size: valueToRender.length * inputSizeMultiplier,
    readOnly,
    onChange: e => this.handleChange(e.target.value),
    ref: inputRef,
  })
}
Modal.prototype.render = function () {
  const modal = MODALS[this.props.modalState.name || 'DEFAULT']

  const children = modal.contents
  const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
  const contentStyle = modal.contentStyle || {}

  return h(FadeModal,
    {
      className: 'modal',
      keyboard: false,
      onHide: () => { this.onHide() },
      ref: (ref) => {
        this.modalRef = ref
      },
      modalStyle,
      contentStyle,
      backdropStyle: BACKDROPSTYLE,
    },
    children,
  )
}
Example #24
0
const Content = props =>
  h(Subscribe, {
    to: [FilterStore],
    children: filter => {
      const renderBtnFilter = (text, dataAttr) => {
        const { filters } = filter.state
        const isActive = lift(filters)
          .find(f => f === dataAttr)
          .isDefined()

        return h(BtnFilter, {
          onClick: () => filter.updateFilters(dataAttr),
          isActive,
          dataAttr,
          text
        })
      }

      return h('div', [
        h(IconHeader, {
          icon: History,
          size: 20,
          color: grey,
          text: 'My work'
        }),
        h(TextBlock, [h('p', `Here is what I've done so far :`)]),
        h(`div.${styles.filters}`, [
          h('span', 'show :'),
          renderBtnFilter('side projects', 'sideprojects'),
          renderBtnFilter('jobs', 'jobs')
        ]),
        h(CardList, {
          sortBy: 'title',
          collectionToRender: CardCollection,
          filters: filter.state.filters
        })
      ])
    }
  })
ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) {
  return h(this.activeToggle('.input-container'), {
    style: {
      marginTop: '1%',
    },
  }, [

    h('div', `${coin} Address:`),

    h('input#fromCoinAddress.buy-inputs', {
      type: 'text',
      placeholder: `Your ${coin} Refund Address`,
      dataset: {
        persistentFormId: 'refund-address',

      },
      style: {
        boxSizing: 'border-box',
        width: '227px',
        height: '30px',
        padding: ' 5px ',
      },
    }),

    h('i.fa.fa-pencil-square-o.edit-text', {
      style: {
        fontSize: '12px',
        color: '#F7861C',
        position: 'absolute',
      },
    }),
    h('div.flex-row', {
      style: {
        justifyContent: 'flex-start',
      },
    }, [
      h('button', {
        onClick: this.shift.bind(this),
        style: {
          marginTop: '1%',
        },
      },
      'Submit'),
    ]),
  ])
}
 render () {
   return (
     h('.page-container', [
       h('.page-container__header', [
         h('.page-container__title', this.context.t('revealSeedWordsTitle')),
         h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')),
       ]),
       h('.page-container__content', [
         this.renderWarning(),
         h('.reveal-seed__content', [
           this.renderContent(),
         ]),
       ]),
       this.renderFooter(),
     ])
   )
 }
Example #27
0
const compareValues = ({
  values,
  component = PrimitiveValue,
  required = false,
  immutable = false,
  hideUnchanged = false,
}, compare) => {

  const changes = findChanges(values, compare.values)
  const counts = countChanges(changes)
  const didChange = counts.unchanged < changes.length
  const summarizeChanges = (didChange && hideUnchanged) ? true : false
  const filteredChanges = (didChange && hideUnchanged)
    ? R.filter(Change.case({ Preservation: R.F, _: R.T }), changes)
    : changes

  return (
    { warnings: check(immutable)(required)(values)(compare.values)
    , summary: summarizeChanges ? h(InfoText, {}, formatCounts(counts)) : null
    , items: showChanges(component)(filteredChanges)
    }
  )
}
      layout.boxes.forEach(box => {
        // features go across the x
        // and down the y
        // SVG coords also go down the y
        const xName = columnNames[box.m];
        const yName = columnNames[box.n];

        const points = _.zip(this.props.features[box.m].values, this.props.features[box.n].yValues);

        const sp = h(ScatterPlot, {
          points,
          m: box.m,
          n: box.n,
          xName,
          yName,
          xOffset: box.x,
          yOffset: box.y,
          sideLength: sideLength - margin,
          muiTheme
        });

        children.push(sp);
      });
EthFeeDisplay.prototype.render = function () {
  const {
    activeCurrency,
    conversionRate,
    gas,
    gasPrice,
    blockGasLimit,
  } = this.props

  return h(EthBalance, {
    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
    currentCurrency: activeCurrency,
    conversionRate,
    showFiat: false,
    hideTooltip: true,
    styleOveride: {
      color: '#5d5d5d',
      fontSize: '16px',
      fontFamily: 'DIN OT',
      lineHeight: '22.4px',
    },
  })
}
Example #30
0
 ? props.backends.map(backend =>
     h('tr', { key: backend.storage.url || backend.storage.id }, [
       h('td', backend.storage.case({
         Web: () => 'Web',
         IndexedDB: () => 'Local',
         Memory: () => 'Memory',
         Canonical: () => 'Web',
       })),
       h('td', [
         h(Link, {
           route: Route('backend-home', {
             backendID: backend.asIdentifier(),
           })
         }, backend.metadata.label)
       ]),
       h('td', backend.metadata.description),
       h('td', {}, new Date(backend.metadata.accessed).toLocaleDateString()),
     ])