@lumerin/wallet-ui-logic NPM

This package contains common elements required to develop the UI of an Ethereum Lumerin wallet with React and Redux on different platforms.

The intent behind all this is that for each platform we only have to build:

a client implementing platform-specific functionality (such as storage), and
the view rendering code.

Everything else should be abstracted in this package and lumerin-wallet-core, which takes care of core wallet logic.

Supported target environments are Electron, React Native and web.

These are the common elements intended to be directly imported by different platform implementations:

`src/components`

React components that can be reused across different platforms because they don't rely on platform-specific elements.

These include:

<Root />
<TermsAndConditions />

Check src/components

Example usage:

import React from 'react';
import Root from 'lumerin-wallet-ui-logic/components/Root';

import Onboarding from './components/Onboarding';
import Loading from './components/Loading';
import Router from './components/Router';
import Login from './components/Login';

...

class MyComponent extends React.Component {
  ...

  render() {
    return (
      <Root
        OnboardingComponent={Onboarding}
        LoadingComponent={Loading}
        RouterComponent={Router}
        LoginComponent={Login}
      />
    );
  }
}

`src/hocs`

Functions that follow the Higher-Order Component pattern. These functions encapsulate all the common UI logic and Redux store mappings and inject useful props to the composed components.

Check src/hocs

Example usage:

import withAuctionState from 'lumerin-wallet-ui-logic/hocs/withAuctionState'
import React from 'react'

const Contracts = props => {

  // These props are injected by withContractsState() higher-order component
  const {
    countdownTargetTimestamp,
    buyDisabledReason,
    auctionPriceUSD,
    auctionStatus,
    buyDisabled,
    navigation,
    title
  } = props;

  return (
    // Platform-specific code here...
  );
}

export default withContractsState(Contracts);

`src/store`

This module exports a createStore(reduxDevtoolsOptions, initialState) function and a Redux <Provider /> component.

Check src/store/index.js

Example usage:

import React from 'react';
import { Provider as ClientProvider } from 'lumerin-wallet-ui-logic/hocs/clientContext';
import { createStore, Provider } from 'lumerin-wallet-ui-logic/store';

import createClient from './client';
import config from './config';

const client = createClient(config, createStore);

class App extends React.Component {
  render() {
    return (
      <ClientProvider value={client}>
        <Provider store={client.store}>
          {/* App's Root component goes here... */}
        </Provider>
      </ClientProvider>
    );
  }
}