Add ethereum icon type (#391)

package.json

@@ -9,7 +9,7 @@
   ],
   "resolutions": {
     "babel-core": "^7.0.0-bridge.0",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.5"
   },
   "scripts": {
     "build": "polkadot-dev-build-ts",
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/runtime": "^7.12.1",
-    "@polkadot/dev": "^0.59.9",
+    "@polkadot/dev": "^0.59.18",
     "@polkadot/ts": "^0.3.53",
     "@types/jest": "^26.0.15",
     "babel-plugin-transform-vue-template": "^0.4.2",
@@ -40,6 +40,8 @@
     "react-is": "^17.0.1",
     "react-native": "^0.63.3",
     "vue-template-compiler": "^2.6.12",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
     "webpack-serve": "^3.2.0"
   },
   "version": "0.61.2-4"

packages/exampleReactNative/package.json

@@ -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": "^4.0.0-3",
-    "@polkadot/util-crypto": "^3.6.1",
+    "@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",

packages/react-identicon/package.json

@@ -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": "^4.0.0-3",
-    "@polkadot/util-crypto": "^3.6.1",
+    "@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"

packages/react-identicon/src/Identicon.tsx

@@ -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)

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

@@ -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;
+`));

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

@@ -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';

packages/react-identicon/src/types.ts

@@ -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;
 }

packages/react-qr/package.json

@@ -10,8 +10,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.12.1",
-    "@polkadot/util": "^3.6.1",
+    "@polkadot/util": "^4.0.0-3",
-    "@polkadot/util-crypto": "^3.6.1",
+    "@polkadot/util-crypto": "^4.0.0-3",
     "qrcode-generator": "^1.4.4",
     "react-qr-reader": "^2.2.1",
     "styled-components": "^5.2.0"

packages/reactnative-identicon/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@polkadot/ui-shared": "^0.61.2-4",
-    "@polkadot/util": "^3.6.1",
+    "@polkadot/util": "^4.0.0-3",
-    "@polkadot/util-crypto": "^3.6.1",
+    "@polkadot/util-crypto": "^4.0.0-3",
     "react-native-svg": "^12.1.0"
   },
   "peerDependencies": {

packages/ui-keyring/package.json

@@ -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",

packages/ui-settings/package.json

@@ -10,8 +10,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.12.1",
-    "@polkadot/networks": "^3.6.1",
+    "@polkadot/networks": "^4.0.0-3",
-    "@polkadot/util": "^3.6.1",
+    "@polkadot/util": "^4.0.0-3",
     "eventemitter3": "^4.0.7",
     "store": "^2.0.12"
   },

packages/ui-shared/package.json

@@ -17,8 +17,8 @@
     "@polkadot/util-crypto": "*"
   },
   "devDependencies": {
-    "@polkadot/util": "^3.6.1",
+    "@polkadot/util": "^4.0.0-3",
-    "@polkadot/util-crypto": "^3.6.1",
+    "@polkadot/util-crypto": "^4.0.0-3",
     "@types/color": "^3.0.1",
     "@types/xmlserializer": "^0.6.1"
   }

packages/vue-identicon/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@polkadot/ui-shared": "^0.61.2-4",
-    "@polkadot/util": "^3.6.1",
+    "@polkadot/util": "^4.0.0-3",
-    "@polkadot/util-crypto": "^3.6.1",
+    "@polkadot/util-crypto": "^4.0.0-3",
     "jdenticon": "2.2.0"
   },
   "peerDependencies": {