Add ethereum icon type (#391)

This commit is contained in:
Jaco Greeff
2020-11-03 15:35:10 +01:00
committed by GitHub
parent 2b0dac8097
commit ff1a31a336
14 changed files with 865 additions and 510 deletions
+3 -3
View File
@@ -12,12 +12,12 @@
"test": "jest"
},
"dependencies": {
"@polkadot/keyring": "^3.6.1",
"@polkadot/keyring": "^4.0.0-3",
"@polkadot/reactnative-identicon": "^0.61.2-4",
"@polkadot/ui-keyring": "^0.61.2-4",
"@polkadot/ui-settings": "^0.61.2-4",
"@polkadot/util": "^3.6.1",
"@polkadot/util-crypto": "^3.6.1",
"@polkadot/util": "^4.0.0-3",
"@polkadot/util-crypto": "^4.0.0-3",
"@react-native-community/async-storage": "^1.12.1",
"fast-text-encoding": "^1.0.3",
"get-yarn-workspaces": "^1.0.2",
+4 -3
View File
@@ -10,12 +10,13 @@
"license": "Apache-2.0",
"dependencies": {
"@babel/runtime": "^7.12.1",
"@polkadot/keyring": "^3.6.1",
"@polkadot/keyring": "^4.0.0-3",
"@polkadot/ui-settings": "^0.61.2-4",
"@polkadot/ui-shared": "^0.61.2-4",
"@polkadot/util": "^3.6.1",
"@polkadot/util-crypto": "^3.6.1",
"@polkadot/util": "^4.0.0-3",
"@polkadot/util-crypto": "^4.0.0-3",
"color": "^3.1.3",
"ethereum-blockies-base64": "^1.0.2",
"jdenticon": "2.2.0",
"react-copy-to-clipboard": "^5.0.2",
"styled-components": "^5.2.0"
+12 -3
View File
@@ -9,9 +9,9 @@ import CopyToClipboard from 'react-copy-to-clipboard';
import styled from 'styled-components';
import settings, { ICON_DEFAULT_HOST } from '@polkadot/ui-settings';
import { isHex, isU8a, u8aToHex } from '@polkadot/util';
import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
import { decodeAddress, encodeAddress, ethereumEncode } from '@polkadot/util-crypto';
import { Beachball, Empty, Jdenticon, Polkadot } from './icons';
import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons';
const Fallback = Beachball;
@@ -24,6 +24,7 @@ const DEFAULT_SIZE = 64;
const Components: Record<string, React.ComponentType<ComponentProps>> = {
beachball: Beachball,
empty: Empty,
ethereum: Ethereum,
jdenticon: Jdenticon,
polkadot: Polkadot,
substrate: Jdenticon
@@ -67,7 +68,15 @@ class BaseIcon extends React.PureComponent<Props, State> {
BaseIcon.prefix = prefix;
}
public static getDerivedStateFromProps ({ prefix = BaseIcon.prefix, value }: Props, prevState: State): State | null {
public static getDerivedStateFromProps ({ prefix = BaseIcon.prefix, theme, value }: Props, prevState: State): State | null {
if (theme === 'ethereum') {
const address = isU8a(value)
? ethereumEncode(value)
: value || '';
return { address, publicKey: '' };
}
try {
const address = isU8a(value) || isHex(value)
? encodeAddress(value, prefix)
@@ -0,0 +1,29 @@
// Copyright 2017-2020 @polkadot/react-identicon authors & contributors
// SPDX-License-Identifier: Apache-2.0
import { Props } from '../types';
import makeBlockie from 'ethereum-blockies-base64';
import React, { useMemo } from 'react';
import styled from 'styled-components';
function Ethereum ({ address, className = '', style }: Props): React.ReactElement<Props> {
const imgSrc = useMemo(
() => makeBlockie(address),
[address]
);
return (
<img
className={className}
src={imgSrc}
style={style}
/>
);
}
export default React.memo(styled(Ethereum)(({ size }: Props) => `
display: block;
height: ${size}px;
width: ${size}px;
`));
@@ -3,5 +3,6 @@
export { default as Beachball } from './Beachball';
export { default as Empty } from './Empty';
export { default as Ethereum } from './Ethereum';
export { default as Jdenticon } from './Jdenticon';
export { default as Polkadot } from './Polkadot';
+1 -1
View File
@@ -25,6 +25,6 @@ export interface IdentityProps extends BaseProps {
onCopy?: (value: string) => void;
prefix?: Prefix;
size?: number;
theme?: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
theme?: 'beachball' | 'empty' | 'ethereum' | 'jdenticon' | 'polkadot' | 'substrate';
value?: string | Uint8Array | null;
}
+2 -2
View File
@@ -10,8 +10,8 @@
"license": "Apache-2.0",
"dependencies": {
"@babel/runtime": "^7.12.1",
"@polkadot/util": "^3.6.1",
"@polkadot/util-crypto": "^3.6.1",
"@polkadot/util": "^4.0.0-3",
"@polkadot/util-crypto": "^4.0.0-3",
"qrcode-generator": "^1.4.4",
"react-qr-reader": "^2.2.1",
"styled-components": "^5.2.0"
+2 -2
View File
@@ -11,8 +11,8 @@
"dependencies": {
"@babel/runtime": "^7.12.1",
"@polkadot/ui-shared": "^0.61.2-4",
"@polkadot/util": "^3.6.1",
"@polkadot/util-crypto": "^3.6.1",
"@polkadot/util": "^4.0.0-3",
"@polkadot/util-crypto": "^4.0.0-3",
"react-native-svg": "^12.1.0"
},
"peerDependencies": {
+3 -3
View File
@@ -19,16 +19,16 @@
"dependencies": {
"@babel/runtime": "^7.12.1",
"@ledgerhq/hw-transport-webusb": "^5.26.0",
"@polkadot/keyring": "^3.6.1",
"@polkadot/keyring": "^4.0.0-3",
"@polkadot/ui-settings": "^0.61.2-4",
"@polkadot/util": "^3.6.1",
"@polkadot/util": "^4.0.0-3",
"@zondax/ledger-polkadot": "^0.11.0",
"mkdirp": "^1.0.4",
"rxjs": "^6.6.3",
"store": "^2.0.12"
},
"devDependencies": {
"@polkadot/types": "^2.4.1",
"@polkadot/types": "^2.5.1",
"@types/ledgerhq__hw-transport-node-hid": "^4.22.2",
"@types/ledgerhq__hw-transport-webusb": "^4.70.1",
"@types/mkdirp": "^1.0.1",
+2 -2
View File
@@ -10,8 +10,8 @@
"license": "Apache-2.0",
"dependencies": {
"@babel/runtime": "^7.12.1",
"@polkadot/networks": "^3.6.1",
"@polkadot/util": "^3.6.1",
"@polkadot/networks": "^4.0.0-3",
"@polkadot/util": "^4.0.0-3",
"eventemitter3": "^4.0.7",
"store": "^2.0.12"
},
+2 -2
View File
@@ -17,8 +17,8 @@
"@polkadot/util-crypto": "*"
},
"devDependencies": {
"@polkadot/util": "^3.6.1",
"@polkadot/util-crypto": "^3.6.1",
"@polkadot/util": "^4.0.0-3",
"@polkadot/util-crypto": "^4.0.0-3",
"@types/color": "^3.0.1",
"@types/xmlserializer": "^0.6.1"
}
+2 -2
View File
@@ -11,8 +11,8 @@
"dependencies": {
"@babel/runtime": "^7.12.1",
"@polkadot/ui-shared": "^0.61.2-4",
"@polkadot/util": "^3.6.1",
"@polkadot/util-crypto": "^3.6.1",
"@polkadot/util": "^4.0.0-3",
"@polkadot/util-crypto": "^4.0.0-3",
"jdenticon": "2.2.0"
},
"peerDependencies": {