# @lumerin/wallet-ui-logic

> UI logic to develop an Ethereum Lumerin wallet with React and Redux

Latest version **1.0.12-beta** (published 2022-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lumerin/wallet-ui-logic
pnpm add @lumerin/wallet-ui-logic
yarn add @lumerin/wallet-ui-logic
bun add @lumerin/wallet-ui-logic
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12-beta |
| Published | 2022-04-26 |
| First published | 2021-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 135.4 KB |
| Known vulnerabilities | 0 (+9 in 2 direct dependencies) |
| Install scripts | no |
| Author | Kodee McIntosh |
| Maintainers | lanceseidman, kvmac |
| Keywords | crypto, cryptocurrency, ethereum, lumerin, wallet |

## Links

- npm: https://www.npmjs.com/package/@lumerin/wallet-ui-logic
- Repository: https://gitlab.com/TitanInd/proxy/wallet-ui-logic
- Homepage: https://gitlab.com/TitanInd/proxy/wallet-ui-logic#readme
- Issues: https://gitlab.com/TitanInd/proxy/wallet-ui-logic/issues
- npm.io page: https://npm.io/package/@lumerin/wallet-ui-logic

## Dependencies (13)

- [redux](https://npm.io/package/redux.md) 3.7.2
- [lodash](https://npm.io/package/lodash.md) 4.17.11
- [moment](https://npm.io/package/moment.md) 2.24.0
- [reselect](https://npm.io/package/reselect.md) 3.0.1
- [prop-types](https://npm.io/package/prop-types.md) 15.6.2
- [short-uuid](https://npm.io/package/short-uuid.md) ^4.2.0
- [react-redux](https://npm.io/package/react-redux.md) 5.0.7
- [smart-round](https://npm.io/package/smart-round.md) 1.0.0
- [bignumber.js](https://npm.io/package/bignumber.js.md) 6.0.0
- [redux-actions](https://npm.io/package/redux-actions.md) 2.3.0
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [moment-precise-range-plugin](https://npm.io/package/moment-precise-range-plugin.md) 1.3.0

## Alternatives

- [@gemini-wallet/core](https://npm.io/package/@gemini-wallet/core.md) — 515.6K weekly downloads
- [utility](https://npm.io/package/utility.md) — 416.6K weekly downloads
- [@primno/dpapi](https://npm.io/package/@primno/dpapi.md) — 7.2K weekly downloads
- [pi-readseek](https://npm.io/package/pi-readseek.md) — 3.7K weekly downloads
- [@emilia-protocol/verify](https://npm.io/package/@emilia-protocol/verify.md) — 1.1K weekly downloads

## Recent versions

- 1.0.12-beta (latest) — 2022-04-26
- 1.0.11-beta — 2022-03-15
- 1.0.10-beta — 2022-02-22
- 1.0.9-beta — 2022-02-11
- 1.0.8-beta — 2021-12-31
- 1.0.7-beta — 2021-12-16
- 1.0.6-beta — 2021-12-08
- 1.0.5-beta — 2021-12-07
- 1.0.4-beta — 2021-12-06
- 1.0.3-beta — 2021-12-06
- 1.0.2-beta — 2021-12-06
- 1.0.1-beta — 2021-12-06
- 1.0.0-beta — 2021-11-03

## README

<h1>
  <img src="./logo.svg" alt="Lumerin Wallet UI Logic" width="20%">
</h1>
# lumerin-wallet-ui-logic

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:

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

Everything else should be abstracted in this package and [lumerin-wallet-core](https://github.com/LumerinInd/lumerin-wallet-core), which takes care of core wallet logic.

Supported target environments are Electron, React Native and web.

## Contents

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](https://github.com/LumerinInd/lumerin-wallet-ui-logic/tree/master/src/components)

_Example usage:_

```js
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](https://reactjs.org/docs/higher-order-components.html) pattern. These functions encapsulate all the common UI logic and Redux store mappings and inject useful props to the composed components.

Check [src/hocs](https://github.com/LumerinInd/lumerin-wallet-ui-logic/tree/master/src/hocs)

_Example usage:_

```js
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](https://github.com/LumerinInd/lumerin-wallet-ui-logic/tree/master/src/store/index.js)

_Example usage:_

```js
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>
    );
  }
}
```

### `src/utils`

Miscelaneous helper functions.

Check [src/utils/index.js](https://github.com/LumerinInd/lumerin-wallet-ui-logic/tree/master/src/utils/index.js)

### `src/theme`

This is an object containing theme constants such as colors and font sizes to be used for component styles.

Check [src/theme/index.js](https://github.com/LumerinInd/lumerin-wallet-ui-logic/tree/master/src/theme/index.js)

### Other (not intended to be directly imported)

#### `src/validators`

Form data validators used by `hocs`.

#### `src/selectors`

[`reselect`](https://github.com/reduxjs/reselect) memoized store selectors. Used by `hocs`.

#### `src/reducers`

Redux reducers, used by `store`.

## License

MIT

---
_Source: https://npm.io/package/@lumerin/wallet-ui-logic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._