Add ethereum icon type (#391)

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

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