Move ui-identicon -> react-identicon (#165)

* Move ui-identicon -> react-identicon

* ui-identicon import fix

* Update README package links

* Update doc sidebar links

* Adjust react-qr signatures, CHANGELOG

CHANGELOG.md

@@ -1,5 +1,7 @@
 # 0.42.x
 
+- The `@polkadot/react-qr` package has been added to display/scan QR codes
+- The `@polkadot/ui-identicon` package has been renamed to `@polkadot/react-identicon`
 - For `@polkadot/ui-keyring` the stores are now not exported from the index, imports should be changed to either `ui-keyring/stores` or explicitly to `ui-keyring/stores/Extension`
 - `@polkadot/ui-settings` has UNfrastructure added as an RPC provider for Alex
 - `@polkadot/ui-settings` exposes a dropdown with address prefix options

README.md

@@ -15,7 +15,8 @@ Basic browser and React components for creating apps using the polkadot{.js} lib
 
 The following libraries are currently available
 
+- [react-identicon](packages/react-identicon/) Identity icon generator with address as input
+- [react-qr](packages/react-qr/) QR code generator/reader for [uos](https://github.com/maciejhirsz/uos) (Substrate/Polkadot only)
 - [ui-assets](packages/ui-assets/) Static assets, images and others, shared accross projects
-- [ui-identicon](packages/ui-identicon/) Identity icon generator with address as input
 - [ui-keyring](packages/ui-keyring/) A browser-specific wrapper around the base [@polkadot/util-keyring](https://github.com/polkadot-js/util/) library
 - [ui-settings](packages/ui-settings/) A browser local storage wrapper for app settings & configuration

docs/.vuepress/config.js

@@ -22,7 +22,8 @@ module.exports = {
     ],
     search: false,
     sidebar: [
-      ['/ui-identicon/', '@polkadot/ui-identicon'],
+      ['/react-identicon/', '@polkadot/react-identicon'],
+      ['/react-qr/', '@polkadot/react-qr'],
       ['/ui-keyring/', '@polkadot/ui-keyring'],
       ['/ui-settings/', '@polkadot/ui-settings'],
       '/CONTRIBUTING.md'

jest.config.js

@@ -3,8 +3,8 @@ const config = require('@polkadot/dev-react/config/jest');
 
 module.exports = Object.assign({}, config, {
   moduleNameMapper: {
-    '@polkadot/react-(qr)(.*)$': '<rootDir>/packages/react-$1/src/$2',
+    '@polkadot/react-(identicon|qr)(.*)$': '<rootDir>/packages/react-$1/src/$2',
-    '@polkadot/ui-(assets|identicon|keyring|settings)(.*)$': '<rootDir>/packages/ui-$1/src/$2',
+    '@polkadot/ui-(assets|keyring|settings)(.*)$': '<rootDir>/packages/ui-$1/src/$2',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object',
     '\\.(css|less)$': 'empty/object'
   }

packages/react-identicon/README.md

@@ -1,15 +1,15 @@
-# @polkadot/ui-identicon
+# @polkadot/react-identicon
 
 A generic identity icon that can render icons based on the theme, be it Substrate or Polkadot
 
 ## Usage Examples
 
-To install the component, do `yarn add @polkadot/ui-identicon`
+To install the component, do `yarn add @polkadot/react-identicon`
 
 Inside a React component, you can now render any account with the associated icon -
 
 ```javascript
-import Identicon from '@polkadot/ui-identicon';
+import Identicon from '@polkadot/react-identicon';
 
 ...
 render () {

packages/react-identicon/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@polkadot/ui-identicon",
+  "name": "@polkadot/react-identicon",
   "version": "0.42.0-beta.18",
   "description": "Renders an SVG picture representing an address",
   "main": "index.js",

packages/react-identicon/src/Demo.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/Identicon.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/LICENSE

@@ -1,7 +1,7 @@
 Apache-2.0 License (Apache-2.0)
 
 Copyright 2016 Dan Finlay
-Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

packages/react-identicon/src/beachball/README.md

@@ -1,4 +1,4 @@
-# @polkadot/ui-identicon/beachball
+# @polkadot/react-identicon/beachball
 
 Adapted from [Jazzicon](https://github.com/danfinlay/jazzicon) by Dan Finlay with the following changes -
 
@@ -16,4 +16,4 @@ Adapted from [Jazzicon](https://github.com/danfinlay/jazzicon) by Dan Finlay wit
 
 Also see [src/demo.js](src/demo.js) for a randomly generated example.
 
-![demo](https://raw.githubusercontent.com/polkadot-js/ui/master/packages/ui-identicon/demo.png)
+![demo](https://raw.githubusercontent.com/polkadot-js/ui/master/packages/react-identicon/demo.png)

packages/react-identicon/src/beachball/colors.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/colors.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/container.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/container.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/defaults.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/demo.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/index.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/index.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/seeder.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/seeder.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/shape/circle.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/shape/circle.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/shape/square.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/circle.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/circle.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/element.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/element.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/rect.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/rect.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/svg.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/svg/svg.ts

@@ -1,5 +1,5 @@
 // Copyright 2016 Dan Finlay
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/types.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/beachball/xmlserializer.d.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/icons/Beachball.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/icons/Empty.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/icons/Jdenticon.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/icons/Polkadot.tsx

@@ -1,5 +1,5 @@
 // Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
-// Copyright 2018 @polkadot/ui-identicon authors & contributors
+// Copyright 2018 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/icons/index.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/index.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/src/types.ts

@@ -1,4 +1,4 @@
-// Copyright 2018 @polkadot/ui-identicon authors & contributors
+// Copyright 2018 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/webpack.config.js

@@ -1,4 +1,4 @@
-// Copyright 2017-2019 @polkadot/ui-identicon authors & contributors
+// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-qr/README.md

@@ -1,3 +1,3 @@
 # @polkadot/react-qr
 
-A Qr-code component that allows for the transfer of addresses and transaction payloads to and from external readers
+A Qr-code component that allows for the transfer of addresses and transaction payloads to and from external readers. It implements the [Universal Offline Signatures](https://github.com/maciejhirsz/uos) specification to read and generated QR codes.

packages/react-qr/src/Display.tsx

@@ -23,7 +23,7 @@ interface State {
   frames: string[];
   frameIdx: number;
   image: string | null;
-  timerId: NodeJS.Timeout | null;
+  timerId: number | null;
   valueHash: string | null;
 }
 
@@ -90,7 +90,7 @@ class Display extends React.PureComponent<Props, State> {
 
   public componentDidMount (): void {
     this.setState({
-      timerId: setInterval(this.nextFrame, FRAME_DELAY)
+      timerId: window.setInterval(this.nextFrame, FRAME_DELAY)
     });
   }
 

packages/react-qr/src/DisplayAddress.tsx

@@ -29,7 +29,7 @@ export default class DisplayExtrinsic extends React.PureComponent<Props, State>
     dataHash: null
   };
 
-  public getDerivedStateFromProps ({ address }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ address }: Props, prevState: State): State | null {
     const data = u8aConcat(
       PREFIX,
       encodeString(address)

packages/react-qr/src/DisplayPayload.tsx

@@ -30,7 +30,7 @@ export default class DisplayPayload extends React.PureComponent<Props, State> {
     dataHash: null
   };
 
-  public getDerivedStateFromProps ({ address, payload }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ address, payload }: Props, prevState: State): State | null {
     const data = u8aConcat(
       SUBSTRATE,
       CRYPTO_SR25519,

packages/ui-keyring/src/options/KeyPair.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import IdentityIcon from '@polkadot/ui-identicon';
+import IdentityIcon from '@polkadot/react-identicon';
 
 interface Props {
   address: string;

tsconfig.json

@@ -3,12 +3,12 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@polkadot/react-identicon": [ "packages/react-identicon/src" ],
+      "@polkadot/react-identicon/*": [ "packages/react-identicon/src/*" ],
       "@polkadot/react-qr": [ "packages/react-qr/src" ],
       "@polkadot/react-qr/*": [ "packages/react-qr/src/*" ],
       "@polkadot/ui-assets": [ "packages/ui-assets/src" ],
       "@polkadot/ui-assets/*": [ "packages/ui-assets/src/*" ],
-      "@polkadot/ui-identicon": [ "packages/ui-identicon/src" ],
-      "@polkadot/ui-identicon/*": [ "packages/ui-identicon/src/*" ],
       "@polkadot/ui-keyring": [ "packages/ui-keyring/src" ],
       "@polkadot/ui-keyring/*": [ "packages/ui-keyring/src/*" ],
       "@polkadot/ui-settings": [ "packages/ui-settings/src" ],