diff --git a/copy-to-apps.sh b/copy-to-apps.sh index 300132b6..74dfeca3 100755 --- a/copy-to-apps.sh +++ b/copy-to-apps.sh @@ -12,7 +12,9 @@ function copy_folder () { yarn polkadot-dev-build-ts +copy_folder "react-identicon" +copy_folder "react-qr" copy_folder "ui-assets" -copy_folder "ui-identicon" copy_folder "ui-keyring" copy_folder "ui-settings" +copy_folder "ui-shared" diff --git a/jest.config.js b/jest.config.js index 371c25c3..b4ba7855 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,7 +4,7 @@ const config = require('@polkadot/dev-react/config/jest'); module.exports = Object.assign({}, config, { moduleNameMapper: { '@polkadot/react-(identicon|qr)(.*)$': '/packages/react-$1/src/$2', - '@polkadot/ui-(assets|keyring|settings)(.*)$': '/packages/ui-$1/src/$2', + '@polkadot/ui-(assets|keyring|settings|shared)(.*)$': '/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' } diff --git a/packages/react-identicon/package.json b/packages/react-identicon/package.json index c4344fdf..eb1b32c7 100644 --- a/packages/react-identicon/package.json +++ b/packages/react-identicon/package.json @@ -11,6 +11,7 @@ "dependencies": { "@babel/runtime": "^7.5.5", "@polkadot/ui-settings": "^0.42.0-beta.23", + "@polkadot/ui-shared": "^0.42.0-beta.23", "@types/color": "^3.0.0", "@types/react-copy-to-clipboard": "^4.2.6", "color": "^3.1.2", diff --git a/packages/react-identicon/src/icons/Polkadot.tsx b/packages/react-identicon/src/icons/Polkadot.tsx index 861e0aeb..40095d44 100644 --- a/packages/react-identicon/src/icons/Polkadot.tsx +++ b/packages/react-identicon/src/icons/Polkadot.tsx @@ -19,40 +19,15 @@ import { Props as BaseProps } from '../types'; import React from 'react'; -import { blake2AsU8a, decodeAddress } from '@polkadot/util-crypto'; +import generateIcon, { Circle } from '@polkadot/ui-shared/polkadotIcon'; interface Props extends BaseProps { sixPoint?: boolean; } -interface Scheme { - freq: number; - colors: number[]; -} - -const blake2 = (value: Uint8Array): Uint8Array => - blake2AsU8a(value, 512); - -const s = 64; -const c = s / 2; -const z = s / 64 * 5; - -const zero = blake2(new Uint8Array(32)); -const schema: { [index: string]: Scheme } = { - target: { freq: 1, colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1] }, - cube: { freq: 20, colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5] }, - quazar: { freq: 16, colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0] }, - flower: { freq: 32, colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3] }, - cyclic: { freq: 32, colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6] }, - vmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10] }, - hmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11] } -}; - export default class Identicon extends React.PureComponent { public render (): React.ReactNode { - const { address, className, size, style } = this.props; - const xy = this.getCircleXY(); - const colors = this.getColors(); + const { address, className, sixPoint, size, style } = this.props; return (
{ height={size} viewBox='0 0 64 64' > - {this.renderCircle(s / 2, s / 2, s / 2, '#eee', -1)} - { - xy.map(([x, y], index): React.ReactNode => - this.renderCircle(x, y, z, colors[index], index) - ) - } + {generateIcon(address, sixPoint).map(this.renderCircle)}
); } - private renderCircle (cx: number, cy: number, r: number, fill: string, key: number): React.ReactNode { + private renderCircle = ({ cx, cy, r, fill }: Circle, key: number): React.ReactNode => { return ( { /> ); } - - private getCircleXY (): [number, number][] { - const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = this.getRotation(); - - return [ - [c, c - r], - [c, c - ro2], - [c - rroot3o4, c - r3o4], - [c - rroot3o2, c - ro2], - [c - rroot3o4, c - ro4], - [c - rroot3o2, c], - [c - rroot3o2, c + ro2], - [c - rroot3o4, c + ro4], - [c - rroot3o4, c + r3o4], - [c, c + r], - [c, c + ro2], - [c + rroot3o4, c + r3o4], - [c + rroot3o2, c + ro2], - [c + rroot3o4, c + ro4], - [c + rroot3o2, c], - [c + rroot3o2, c - ro2], - [c + rroot3o4, c - ro4], - [c + rroot3o4, c - r3o4], - [c, c] - ]; - } - - private getRotation (): { r: number; ro2: number; r3o4: number; ro4: number; rroot3o2: number; rroot3o4: number } { - const { sixPoint = false } = this.props; - const r = sixPoint - ? (s / 2 / 8 * 5) - : (s / 2 / 4 * 3); - const rroot3o2 = r * Math.sqrt(3) / 2; - const ro2 = r / 2; - const rroot3o4 = r * Math.sqrt(3) / 4; - const ro4 = r / 4; - const r3o4 = r * 3 / 4; - - return { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 }; - } - - private getColors (): string[] { - const { address } = this.props; - const total = Object.keys(schema).map((k): number => schema[k].freq).reduce((a, b): number => a + b); - const id = Array.from(blake2(decodeAddress(address))).map((x, i): number => (x + 256 - zero[i]) % 256); - const d = Math.floor((id[30] + id[31] * 256) % total); - const rot = (id[28] % 6) * 3; - const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30; - const scheme = this.findScheme(d); - const palette = Array.from(id).map((x, i): string => { - const b = (x + i % 28 * 58) % 256; - - if (b === 0) { - return '#444'; - } else if (b === 255) { - return 'transparent'; - } - - const h = Math.floor(b % 64 * 360 / 64); - const l = [53, 15, 35, 75][Math.floor(b / 64)]; - - return `hsl(${h}, ${sat}%, ${l}%)`; - }); - - return scheme.colors.map((_, i): string => - palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]] - ); - } - - private findScheme (d: number): Scheme { - let cum = 0; - const ks = Object.keys(schema); - - for (const i in ks) { - cum += schema[ks[i]].freq; - - if (d < cum) { - return schema[ks[i]]; - } - } - - throw new Error('Unable to find schema'); - } } diff --git a/packages/ui-shared/.nodoc b/packages/ui-shared/.nodoc new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-shared/LICENSE b/packages/ui-shared/LICENSE new file mode 100644 index 00000000..0d381b2e --- /dev/null +++ b/packages/ui-shared/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/ui-shared/README.md b/packages/ui-shared/README.md new file mode 100644 index 00000000..96194164 --- /dev/null +++ b/packages/ui-shared/README.md @@ -0,0 +1,3 @@ +# @polkadot/ui-assets + +Static assets including images shared across projects diff --git a/packages/ui-shared/package.json b/packages/ui-shared/package.json new file mode 100644 index 00000000..acfc4d9b --- /dev/null +++ b/packages/ui-shared/package.json @@ -0,0 +1,17 @@ +{ + "name": "@polkadot/ui-shared", + "version": "0.42.0-beta.23", + "description": "Shared logic that is usable accross all frameworks-specific areas", + "main": "index.js", + "author": "Jaco Greeff ", + "maintainers": [ + "Jaco Greeff " + ], + "license": "Apache-2.0", + "dependencies": { + "@babel/runtime": "^7.5.5" + }, + "peerDependencies": { + "@polkadot/util-crypto": "*" + } +} diff --git a/packages/ui-shared/src/polkadotIcon.spec.ts b/packages/ui-shared/src/polkadotIcon.spec.ts new file mode 100644 index 00000000..cfef118d --- /dev/null +++ b/packages/ui-shared/src/polkadotIcon.spec.ts @@ -0,0 +1,30 @@ +import generate from './polkadotIcon'; + +describe('polkadotIcon', (): void => { + it('generates the correct points from known', (): void => { + expect( + generate('5Dqvi1p4C7EhPPFKCixpF3QiaJEaDwWrR9gfWR5eUsfC39TX') + ).toEqual([ + { cx: 32, cy: 32, fill: '#eee', r: 32 }, + { cx: 32, cy: 8, fill: 'hsl(196, 65%, 53%)', r: 5 }, + { cx: 32, cy: 20, fill: 'hsl(320, 65%, 53%)', r: 5 }, + { cx: 21.607695154586736, cy: 14, fill: 'transparent', r: 5 }, + { cx: 11.215390309173472, cy: 20, fill: 'hsl(112, 65%, 15%)', r: 5 }, + { cx: 21.607695154586736, cy: 26, fill: 'hsl(22, 65%, 15%)', r: 5 }, + { cx: 11.215390309173472, cy: 32, fill: 'hsl(213, 65%, 15%)', r: 5 }, + { cx: 11.215390309173472, cy: 44, fill: 'hsl(163, 65%, 53%)', r: 5 }, + { cx: 21.607695154586736, cy: 38, fill: 'hsl(213, 65%, 53%)', r: 5 }, + { cx: 21.607695154586736, cy: 50, fill: 'hsl(185, 65%, 75%)', r: 5 }, + { cx: 32, cy: 56, fill: 'hsl(163, 65%, 53%)', r: 5 }, + { cx: 32, cy: 44, fill: 'hsl(213, 65%, 53%)', r: 5 }, + { cx: 42.392304845413264, cy: 50, fill: 'hsl(213, 65%, 15%)', r: 5 }, + { cx: 52.78460969082653, cy: 44, fill: 'hsl(112, 65%, 15%)', r: 5 }, + { cx: 42.392304845413264, cy: 38, fill: 'hsl(22, 65%, 15%)', r: 5 }, + { cx: 52.78460969082653, cy: 32, fill: 'transparent', r: 5 }, + { cx: 52.78460969082653, cy: 20, fill: 'hsl(196, 65%, 53%)', r: 5 }, + { cx: 42.392304845413264, cy: 26, fill: 'hsl(320, 65%, 53%)', r: 5 }, + { cx: 42.392304845413264, cy: 14, fill: 'hsl(11, 65%, 35%)', r: 5 }, + { cx: 32, cy: 32, fill: 'hsl(309, 65%, 53%)', r: 5 } + ]); + }); +}); diff --git a/packages/ui-shared/src/polkadotIcon.ts b/packages/ui-shared/src/polkadotIcon.ts new file mode 100644 index 00000000..f2155ec7 --- /dev/null +++ b/packages/ui-shared/src/polkadotIcon.ts @@ -0,0 +1,142 @@ +// Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon +// 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. + +// This has been converted from the original version that can be found at +// +// https://github.com/paritytech/oo7/blob/251ba2b7c45503b68eab4320c270b5afa9bccb60/packages/polkadot-identicon/src/index.jsx + +import { blake2AsU8a, decodeAddress } from '@polkadot/util-crypto'; + +export interface Circle { + cx: number; + cy: number; + fill: string; + r: number; +} + +interface Scheme { + freq: number; + colors: number[]; +} + +const blake2 = (value: Uint8Array): Uint8Array => + blake2AsU8a(value, 512); + +const S = 64; +const C = S / 2; +const Z = S / 64 * 5; +const ZERO = blake2(new Uint8Array(32)); + +const SCHEMA: { [index: string]: Scheme } = { + target: { freq: 1, colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1] }, + cube: { freq: 20, colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5] }, + quazar: { freq: 16, colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0] }, + flower: { freq: 32, colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3] }, + cyclic: { freq: 32, colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6] }, + vmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10] }, + hmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11] } +}; + +const OUTER_CIRCLE: Circle = { + cx: C, + cy: C, + r: C, + fill: '#eee' +}; + +function getRotation (isSixPoint: boolean): { r: number; ro2: number; r3o4: number; ro4: number; rroot3o2: number; rroot3o4: number } { + const r = isSixPoint + ? (C / 8 * 5) + : (C / 4 * 3); + const rroot3o2 = r * Math.sqrt(3) / 2; + const ro2 = r / 2; + const rroot3o4 = r * Math.sqrt(3) / 4; + const ro4 = r / 4; + const r3o4 = r * 3 / 4; + + return { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 }; +} + +function getCircleXY (isSixPoint: boolean): [number, number][] { + const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint); + + return [ + [C, C - r], + [C, C - ro2], + [C - rroot3o4, C - r3o4], + [C - rroot3o2, C - ro2], + [C - rroot3o4, C - ro4], + [C - rroot3o2, C], + [C - rroot3o2, C + ro2], + [C - rroot3o4, C + ro4], + [C - rroot3o4, C + r3o4], + [C, C + r], + [C, C + ro2], + [C + rroot3o4, C + r3o4], + [C + rroot3o2, C + ro2], + [C + rroot3o4, C + ro4], + [C + rroot3o2, C], + [C + rroot3o2, C - ro2], + [C + rroot3o4, C - ro4], + [C + rroot3o4, C - r3o4], + [C, C] + ]; +} + +function findScheme (d: number): Scheme { + let cum = 0; + const schema = Object.values(SCHEMA).find((schema): boolean => { + cum += schema.freq; + + return d < cum; + }); + + if (!schema) { + throw new Error('Unable to find schema'); + } + + return schema; +} + +function addressToId (address: string): Uint8Array { + return blake2(decodeAddress(address)).map((x, i): number => (x + 256 - ZERO[i]) % 256); +} + +function getColors (address: string): string[] { + const total = Object.values(SCHEMA).map((s): number => s.freq).reduce((a, b): number => a + b); + const id = addressToId(address); + const d = Math.floor((id[30] + id[31] * 256) % total); + const rot = (id[28] % 6) * 3; + const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30; + const scheme = findScheme(d); + const palette = Array.from(id).map((x, i): string => { + const b = (x + i % 28 * 58) % 256; + + if (b === 0) { + return '#444'; + } else if (b === 255) { + return 'transparent'; + } + + const h = Math.floor(b % 64 * 360 / 64); + const l = [53, 15, 35, 75][Math.floor(b / 64)]; + + return `hsl(${h}, ${sat}%, ${l}%)`; + }); + + return scheme.colors.map((_, i): string => + palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]] + ); +} + +export default function generate (address: string, isSixPoint: boolean = false): Circle[] { + const colors = getColors(address); + + return [OUTER_CIRCLE].concat( + getCircleXY(isSixPoint).map(([cx, cy], index): Circle => ({ + cx, cy, r: Z, fill: colors[index] + })) + ); +} diff --git a/tsconfig.json b/tsconfig.json index d173dbb9..a867597f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,9 @@ "@polkadot/ui-keyring": [ "packages/ui-keyring/src" ], "@polkadot/ui-keyring/*": [ "packages/ui-keyring/src/*" ], "@polkadot/ui-settings": [ "packages/ui-settings/src" ], - "@polkadot/ui-settings/*": [ "packages/ui-settings/src/*" ] + "@polkadot/ui-settings/*": [ "packages/ui-settings/src/*" ], + "@polkadot/ui-shared": [ "packages/ui-shared/src" ], + "@polkadot/ui-shared/*": [ "packages/ui-shared/src/*" ] }, "typeRoots": [ "./node_modules/@polkadot/ts",