pezkuwichain/pezkuwi-ui
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-ui.git synced 2026-06-13 03:01:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

isAlternative (#308)

Browse Source
This commit is contained in:
Jaco Greeff
2020-04-12 07:28:16 +02:00
committed by GitHub
parent 87187649d1
commit a268160ffd
22 changed files with 618 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -6,6 +6,7 @@
- Bump to `@polkadot/api` 1.4.1
- Bump to `@polkadot/util` 2.5.1
- Convert `private <field>` to `#<field>`
- start of `isAlternative` implementations for identicons
# 0.51.1 Feb 18, 2020
package.json
+1 -1
View File
@@ -32,7 +32,7 @@
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/runtime": "^7.9.2",
"@polkadot/dev": "^0.52.8",
"@polkadot/dev": "^0.52.9",
"@polkadot/ts": "^0.3.18",
"@types/jest": "^25.2.1",
"babel-plugin-transform-vue-template": "^0.4.2",
packages/exampleReactNative/package.json
+3 -3
View File
@@ -40,9 +40,9 @@
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/runtime": "^7.9.2",
"@polkadot/keyring": "^2.8.0-beta.7",
"@polkadot/util": "^2.8.0-beta.7",
"@polkadot/util-crypto": "^2.8.0-beta.7",
"@polkadot/keyring": "^2.8.1",
"@polkadot/util": "^2.8.1",
"@polkadot/util-crypto": "^2.8.1",
"@react-native-community/cli-platform-ios": "^4.5.0",
"@types/react-test-renderer": "16.9.2",
"babel-jest": "^25.2.6",
packages/react-identicon/package.json
+3 -3
View File
@@ -26,9 +26,9 @@
"react-is": "*"
},
"devDependencies": {
"@polkadot/keyring": "^2.8.0-beta.7",
"@polkadot/util": "^2.8.0-beta.7",
"@polkadot/util-crypto": "^2.8.0-beta.7",
"@polkadot/keyring": "^2.8.1",
"@polkadot/util": "^2.8.1",
"@polkadot/util-crypto": "^2.8.1",
"@types/react-copy-to-clipboard": "^4.3.0",
"@types/react-dom": "^16.9.6",
"@types/styled-components": "^5.0.1",
packages/react-identicon/src/Identicon.tsx
+2 -1
View File
@@ -110,7 +110,7 @@ class BaseIcon extends React.PureComponent<Props, State> {
}
private getWrapped ({ address, publicKey }: State): React.ReactNode {
const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.icon } = this.props;
const { className, isAlternative, isHighlight, size = DEFAULT_SIZE, style, theme = settings.icon } = this.props;
const Component = !address
? Empty
: Components[theme === 'default' ? ICON_DEFAULT_HOST : theme] || Fallback;
@@ -124,6 +124,7 @@ class BaseIcon extends React.PureComponent<Props, State> {
<Component
address={address}
className={isHighlight ? 'highlight' : ''}
isAlternative={isAlternative}
publicKey={publicKey}
size={size}
/>
packages/react-identicon/src/icons/Beachball.tsx
+18 -21
View File
@@ -4,29 +4,26 @@
import { Props } from '../types';
import React from 'react';
import React, { useCallback } from 'react';
import generate from '@polkadot/ui-shared/beachballIcon';
export default class Beachball extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, style } = this.props;
return (
<div
className={`container ${className}`}
ref={this.appendIcon}
style={style}
/>
);
}
private appendIcon = (node: Element | null): void => {
const { address, size } = this.props;
if (node) {
node.appendChild(
function Beachball ({ address, className, size, style }: Props): React.ReactElement<Props> {
const updateElem = useCallback(
(node: HTMLDivElement): void => {
node && node.appendChild(
generate(address, size)
);
}
}
},
[address, size]
);
return (
<div
className={`container ${className}`}
ref={updateElem}
style={style}
/>
);
}
export default React.memo(Beachball);
packages/react-identicon/src/icons/Empty.tsx
+15 -17
View File
@@ -6,21 +6,19 @@ import { Props } from '../types';
import React from 'react';
export default class Empty extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, size, style } = this.props;
return (
<div
className={`container ${className}`}
style={style}
>
<svg
height={size}
viewBox='0 0 64 64'
width={size}
/>
</div>
);
}
function Empty ({ className, size, style }: Props): React.ReactElement<Props> {
return (
<div
className={`container ${className}`}
style={style}
>
<svg
height={size}
viewBox='0 0 64 64'
width={size}
/>
</div>
);
}
export default React.memo(Empty);
packages/react-identicon/src/icons/Jdenticon.tsx
+12 -14
View File
@@ -7,18 +7,16 @@ import { Props } from '../types';
import React from 'react';
import jdenticon from 'jdenticon';
export default class Jdenticon extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, publicKey, size, style } = this.props;
return (
<div
className={`container ${className}`}
dangerouslySetInnerHTML={{
__html: jdenticon.toSvg(publicKey.substr(2), size)
}}
style={style}
/>
);
}
function Jdenticon ({ className, publicKey, size, style }: Props): React.ReactElement<Props> {
return (
<div
className={`container ${className}`}
dangerouslySetInnerHTML={{
__html: jdenticon.toSvg(publicKey.substr(2), size)
}}
style={style}
/>
);
}
export default React.memo(Jdenticon);
packages/react-identicon/src/icons/Polkadot.tsx
+32 -33
View File
@@ -16,46 +16,45 @@
// - Move constants to file-level
// - Overall it is now just a static component, expecting an address as an input value
import { Circle } from '@polkadot/ui-shared/types';
import { Props as BaseProps } from '../types';
import React from 'react';
import generateIcon, { Circle } from '@polkadot/ui-shared/polkadotIcon';
import generateIcon from '@polkadot/ui-shared/polkadotIcon';
interface Props extends BaseProps {
sixPoint?: boolean;
isAlternative?: boolean;
}
export default class Identicon extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { address, className, sixPoint, size, style } = this.props;
function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
return (
<circle
cx={cx}
cy={cy}
fill={fill}
key={key}
r={r}
/>
);
}
return (
<div
className={`container ${className}`}
style={style}
function Identicon ({ address, className, isAlternative = false, size, style }: Props): React.ReactElement<Props> {
return (
<div
className={`container ${className}`}
style={style}
>
<svg
height={size}
id={address}
name={address}
viewBox='0 0 64 64'
width={size}
>
<svg
height={size}
id={address}
name={address}
viewBox='0 0 64 64'
width={size}
>
{generateIcon(address, sixPoint).map(this.renderCircle)}
</svg>
</div>
);
}
private renderCircle = ({ cx, cy, fill, r }: Circle, key: number): React.ReactNode => {
return (
<circle
cx={cx}
cy={cy}
fill={fill}
key={key}
r={r}
/>
);
}
{generateIcon(address, { isSixPoint: isAlternative }).map(renderCircle)}
</svg>
</div>
);
}
export default React.memo(Identicon);
packages/react-identicon/src/types.ts
+2
View File
@@ -11,11 +11,13 @@ export interface BaseProps {
export interface Props extends BaseProps {
address: string;
isAlternative?: boolean;
publicKey: string;
size: number;
}
export interface IdentityProps extends BaseProps {
isAlternative?: boolean;
isHighlight?: boolean;
onCopy?: (value: string) => void;
prefix?: Prefix;
packages/reactnative-identicon/package.json
+1 -1
View File
@@ -19,7 +19,7 @@
"react-native": "*"
},
"devDependencies": {
"@polkadot/util-crypto": "^2.8.0-beta.7",
"@polkadot/util-crypto": "^2.8.1",
"@types/react-native": "^0.62.1"
}
}
packages/reactnative-identicon/src/icons/Polkadot.tsx
+5 -4
View File
@@ -2,15 +2,16 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { Circle as CircleType } from '@polkadot/ui-shared/types';
import { Props as BaseProps } from '../types';
import React from 'react';
import { View } from 'react-native';
import Svg, { Circle as SvgCircle } from 'react-native-svg';
import generateIcon, { Circle as CircleType } from '@polkadot/ui-shared/polkadotIcon';
import generateIcon from '@polkadot/ui-shared/polkadotIcon';
interface Props extends BaseProps {
sixPoint?: boolean;
isAlternative?: boolean;
}
function renderCircle ({ cx, cy, fill, r }: CircleType, key: number): React.ReactNode {
@@ -25,7 +26,7 @@ function renderCircle ({ cx, cy, fill, r }: CircleType, key: number): React.Reac
);
}
export default function Identicon ({ address, sixPoint, size }: Props): React.ReactElement<Props> {
export default function Identicon ({ address, isAlternative = false, size }: Props): React.ReactElement<Props> {
return (
<View>
<Svg
@@ -34,7 +35,7 @@ export default function Identicon ({ address, sixPoint, size }: Props): React.Re
viewBox='0 0 64 64'
width={size}
>
{generateIcon(address, sixPoint).map(renderCircle)}
{generateIcon(address, { isSixPoint: isAlternative }).map(renderCircle)}
</Svg>
</View>
);
packages/ui-keyring/package.json
+3 -3
View File
@@ -26,9 +26,9 @@
"store": "^2.0.12"
},
"devDependencies": {
"@polkadot/keyring": "^2.8.0-beta.7",
"@polkadot/types": "^1.10.0-beta.16",
"@polkadot/util": "^2.8.0-beta.7",
"@polkadot/keyring": "^2.8.1",
"@polkadot/types": "^1.10.0-beta.28",
"@polkadot/util": "^2.8.1",
"@types/ledgerhq__hw-transport-node-hid": "^4.22.1",
"@types/ledgerhq__hw-transport-u2f": "^4.21.1",
"@types/mkdirp": "^1.0.0",
packages/ui-settings/package.json
+1 -1
View File
@@ -14,7 +14,7 @@
"store": "^2.0.12"
},
"devDependencies": {
"@polkadot/util": "^2.8.0-beta.7",
"@polkadot/util": "^2.8.1",
"@types/store": "^2.0.2"
},
"peerDependencies": {
packages/ui-shared/package.json
+2 -2
View File
@@ -17,8 +17,8 @@
"@polkadot/util-crypto": "*"
},
"devDependencies": {
"@polkadot/util": "^2.8.0-beta.7",
"@polkadot/util-crypto": "^2.8.0-beta.7",
"@polkadot/util": "^2.8.1",
"@polkadot/util-crypto": "^2.8.1",
"@types/color": "^3.0.1"
}
}
packages/ui-shared/src/polkadotIcon.spec.ts
+1 -1
View File
@@ -7,7 +7,7 @@ import generate from './polkadotIcon';
describe('polkadotIcon', (): void => {
it('generates the correct points from known', (): void => {
expect(
generate('5Dqvi1p4C7EhPPFKCixpF3QiaJEaDwWrR9gfWR5eUsfC39TX')
generate('5Dqvi1p4C7EhPPFKCixpF3QiaJEaDwWrR9gfWR5eUsfC39TX', { isSixPoint: false })
).toEqual([
{ cx: 32, cy: 32, fill: '#eee', r: 32 },
{ cx: 32, cy: 8, fill: 'hsl(196, 65%, 53%)', r: 5 },
packages/ui-shared/src/polkadotIcon.ts
+6 -7
View File
@@ -7,13 +7,12 @@
//
// https://github.com/paritytech/oo7/blob/251ba2b7c45503b68eab4320c270b5afa9bccb60/packages/polkadot-identicon/src/index.jsx
import { Circle } from './types';
import { blake2AsU8a, decodeAddress } from '@polkadot/util-crypto';
export interface Circle {
cx: number;
cy: number;
fill: string;
r: number;
interface Options {
isSixPoint: boolean;
}
interface Scheme {
@@ -134,9 +133,9 @@ function getColors (address: string): string[] {
}
/**
* @description Generate a array of the circles that make up an indenticon
* @description Generate a array of the circles that make up an identicon
*/
export default function generate (address: string, isSixPoint = false): Circle[] {
export default function generate (address: string, { isSixPoint }: Options): Circle[] {
const colors = getColors(address);
return [OUTER_CIRCLE].concat(
packages/ui-shared/src/types.ts
+10
View File
@@ -0,0 +1,10 @@
// Copyright 2018 @polkadot/ui-shared authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
export interface Circle {
cx: number;
cy: number;
fill: string;
r: number;
}
packages/vue-identicon/package.json
+1 -1
View File
@@ -18,7 +18,7 @@
"vue": "*"
},
"devDependencies": {
"@polkadot/util-crypto": "^2.8.0-beta.7",
"@polkadot/util-crypto": "^2.8.1",
"vue": "^2.6.11"
}
}
packages/vue-identicon/src/Identicon.ts
+2 -2
View File
@@ -77,7 +77,7 @@ export const Identicon = Vue.extend({
this.publicKey = publicKey;
}
},
props: ['prefix', 'size', 'theme', 'value'],
props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
// FIXME These nested divs are not correct, would like a different way
// here so we don't create a div wrapped for the div wrapper of the icon
template: `
@@ -88,7 +88,7 @@ export const Identicon = Vue.extend({
<Beachball :key="address" :address="address" :size="iconSize" />
</div>
<div v-else-if="type === 'polkadot'">
<Polkadot :key="address" :address="address" :size="iconSize" />
<Polkadot :key="address" :address="address" :isAlternative="isAlternative" :size="iconSize" />
</div>
<div v-else>
<Jdenticon :key="address" :publicKey="publicKey" :size="iconSize" />
packages/vue-identicon/src/icons/Polkadot.ts
+2 -2
View File
@@ -25,14 +25,14 @@ export const Polkadot = Vue.extend({
},
methods: {
createSvgHtml: function (): void {
const circles = generateIcon(this.address).map(({ cx, cy, fill, r }): string =>
const circles = generateIcon(this.address, { isSixPoint: this.isAlternative || false }).map(({ cx, cy, fill, r }) =>
`<circle cx=${cx} cy=${cy} fill="${fill}" r=${r} />`
).join('');
this.svgHtml = `<svg height=${this.size} viewBox='0 0 64 64' width=${this.size}>${circles}</svg>`;
}
},
props: ['address', 'size'],
props: ['address', 'isAlternative', 'size'],
// eslint-disable-next-line quotes
template: `<div v-html="svgHtml" />`
});
yarn.lock
+495 -355
View File
File diff suppressed because it is too large Load Diff