Identicons

package.json

@@ -69,7 +69,8 @@
     "typescript": "3.9.2",
     "webpack": "4.43.0",
     "webpack-cli": "^3.3.10",
-    "webpack-node-externals": "^1.7.2"
+    "webpack-node-externals": "^1.7.2",
+    "ethereum-blockies-base64": "^1.0.2"
   },
   "peerDependencies": {
     "react": "^16.x.x",

src/theme.ts

@@ -109,6 +109,13 @@ const theme = {
       sm: '16',
       md: '24'
     }
+  },
+  identicon: {
+    size: {
+      sm: '16px',
+      md: '32px',
+      lg: '60px'
+    }
   }
 };
 

src/utils/Identicon/index.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Identicon from './index';
+
+export default {
+  title: 'Utils/Identicon',
+  component: Identicon,
+  parameters: {
+    componentSubtitle: 'Identicon Component.'
+  }
+};
+
+export const sizes = () => {
+  return (
+    <>
+      <Identicon address="thisIsAnExample" size="sm" />
+      <Identicon address="thisIsAnExample" size="md" />
+      <Identicon address="thisIsAnExample" size="lg" />
+    </>
+  );
+};

src/utils/Identicon/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import makeBlockie from 'ethereum-blockies-base64';
+import styled from 'styled-components';
+import { Theme } from '../../theme';
+
+type Props = {
+  address: string;
+  size: keyof Theme['identicon']['size'];
+};
+
+const StyledImg = styled.img<{ size: string }>`
+  height: ${({ size, theme }) => theme.identicon.size[size]};
+  width: ${({ size, theme }) => theme.identicon.size[size]};
+  border-radius: 50%;
+`;
+
+const Identicon = ({ size = 'md', address, ...rest }: Props) => {
+  const iconSrc = React.useMemo(() => makeBlockie(address), [address]);
+
+  return <StyledImg src={iconSrc} size={size} {...rest} />;
+};
+
+export default Identicon;

src/utils/index.ts

@@ -1 +1,2 @@
-export * from './modals'
+export { default as Identicon } from './Identicon';
+export * from './modals'

yarn.lock

@@ -5007,6 +5007,13 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+ethereum-blockies-base64@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ethereum-blockies-base64/-/ethereum-blockies-base64-1.0.2.tgz#4aebca52142bf4d16a3144e6e2b59303e39ed2b3"
+  integrity sha512-Vg2HTm7slcWNKaRhCUl/L3b4KrB8ohQXdd5Pu3OI897EcR6tVRvUqdTwAyx+dnmoDzj8e2bwBLDQ50ByFmcz6w==
+  dependencies:
+    pnglib "0.0.1"
+
 eventemitter3@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
@@ -8293,6 +8300,11 @@ pkg-up@2.0.0, pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+pnglib@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/pnglib/-/pnglib-0.0.1.tgz#f9ab6f9c688f4a9d579ad8be28878a716e30c096"
+  integrity sha1-+atvnGiPSp1Xmti+KIeKcW4wwJY=
+
 pnp-webpack-plugin@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz#62a1cd3068f46d564bb33c56eb250e4d586676eb"