From ca3b021928af9b8d8028f2f8153dcb38ffddf189 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 10 Jun 2020 19:42:12 -0300 Subject: [PATCH 1/9] Adds identicon component Adds ethereum-blockies-base64 --- package.json | 3 +- src/dataDisplay/Identicon/index.stories.tsx | 19 +++++++ src/dataDisplay/Identicon/index.tsx | 62 +++++++++++++++++++++ src/dataDisplay/index.ts | 1 + yarn.lock | 12 ++++ 5 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 src/dataDisplay/Identicon/index.stories.tsx create mode 100644 src/dataDisplay/Identicon/index.tsx diff --git a/package.json b/package.json index babafb0d..6db461a8 100644 --- a/package.json +++ b/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", diff --git a/src/dataDisplay/Identicon/index.stories.tsx b/src/dataDisplay/Identicon/index.stories.tsx new file mode 100644 index 00000000..63336424 --- /dev/null +++ b/src/dataDisplay/Identicon/index.stories.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import Identicon from './index'; + +export default { + title: 'Data Display/Identicon', + component: Identicon, + parameters: { + componentSubtitle: 'Identicon Component.' + } +}; + +export const sizes = () => { + return ( + <> + + + ); +}; diff --git a/src/dataDisplay/Identicon/index.tsx b/src/dataDisplay/Identicon/index.tsx new file mode 100644 index 00000000..e4137dd5 --- /dev/null +++ b/src/dataDisplay/Identicon/index.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; + +import makeBlockie from 'ethereum-blockies-base64'; +import { RefObject, useEffect, useState } from 'react'; + +type Props = { + address: string; + diameter: number; +}; + +type StyleProps = { + width: number; + height: number; +}; + +const getStyleFrom = (diameter: number): StyleProps => ({ + width: diameter, + height: diameter +}); + +const generateBlockieIdenticon = ( + address: string, + diameter: number +): HTMLImageElement => { + const image = new window.Image(); + image.src = makeBlockie(address); + image.height = diameter; + image.width = diameter; + image.style.borderRadius = `${diameter / 2}px`; + + return image; +}; + +const Identicon = (props: Props) => { + const { address, diameter } = props; + const style: StyleProps = getStyleFrom(diameter); + + const [identicon, setIdenticon] = useState | null>(null); + + useEffect(() => { + setIdenticon(React.createRef()); + }, []); + + useEffect(() => { + const image = generateBlockieIdenticon(address, diameter); + + if (!identicon || !identicon.current) { + return; + } + + const { children } = identicon.current; + for (let i = 0; i < children.length; i += 1) { + identicon.current.removeChild(children[i]); + } + + identicon.current.appendChild(image); + }, [address, diameter, identicon]); + + return
; +}; + +export default Identicon; diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts index 2f27a0f3..a1f5e12c 100644 --- a/src/dataDisplay/index.ts +++ b/src/dataDisplay/index.ts @@ -8,3 +8,4 @@ export { default as Layout } from './Layout'; export { default as Text } from './Text'; export { default as Title } from './Title'; export { default as Section } from './Section'; +export { default as Identicon } from './Identicon'; diff --git a/yarn.lock b/yarn.lock index 093d3884..5b6480b4 100644 --- a/yarn.lock +++ b/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" From d9afd368f19d93d35dbb20a74c06ea6324ffd189 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Thu, 11 Jun 2020 10:26:36 -0300 Subject: [PATCH 2/9] Simplify identicon component logic --- src/dataDisplay/Identicon/index.tsx | 62 ++++++----------------------- 1 file changed, 12 insertions(+), 50 deletions(-) diff --git a/src/dataDisplay/Identicon/index.tsx b/src/dataDisplay/Identicon/index.tsx index e4137dd5..f3e3876d 100644 --- a/src/dataDisplay/Identicon/index.tsx +++ b/src/dataDisplay/Identicon/index.tsx @@ -1,62 +1,24 @@ import * as React from 'react'; import makeBlockie from 'ethereum-blockies-base64'; -import { RefObject, useEffect, useState } from 'react'; +import styled from 'styled-components'; type Props = { address: string; diameter: number; + className?: string }; -type StyleProps = { - width: number; - height: number; -}; - -const getStyleFrom = (diameter: number): StyleProps => ({ - width: diameter, - height: diameter -}); - -const generateBlockieIdenticon = ( - address: string, - diameter: number -): HTMLImageElement => { - const image = new window.Image(); - image.src = makeBlockie(address); - image.height = diameter; - image.width = diameter; - image.style.borderRadius = `${diameter / 2}px`; - - return image; -}; - -const Identicon = (props: Props) => { - const { address, diameter } = props; - const style: StyleProps = getStyleFrom(diameter); +const StyledImg = styled.img<{ diameter: number }>` + height: ${({ diameter }) => (diameter ? diameter : 32)}px; + width: ${({ diameter }) => (diameter ? diameter : 32)}px; + border-radius: ${({ diameter }) => (diameter ? diameter / 2 : 16)}px; +`; - const [identicon, setIdenticon] = useState | null>(null); +const Identicon: React.FC = ({ diameter = 32, address, className }) => { + const iconSrc = React.useMemo(() => makeBlockie(address), [address]); - useEffect(() => { - setIdenticon(React.createRef()); - }, []); - - useEffect(() => { - const image = generateBlockieIdenticon(address, diameter); - - if (!identicon || !identicon.current) { - return; - } - - const { children } = identicon.current; - for (let i = 0; i < children.length; i += 1) { - identicon.current.removeChild(children[i]); - } - - identicon.current.appendChild(image); - }, [address, diameter, identicon]); - - return
; -}; + return +} -export default Identicon; +export default Identicon From c387a95c254836e9f89526e0177b49dabf348a69 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Thu, 11 Jun 2020 10:36:10 -0300 Subject: [PATCH 3/9] Simplify identicon component logic --- src/dataDisplay/Identicon/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/dataDisplay/Identicon/index.tsx b/src/dataDisplay/Identicon/index.tsx index f3e3876d..53c03294 100644 --- a/src/dataDisplay/Identicon/index.tsx +++ b/src/dataDisplay/Identicon/index.tsx @@ -6,19 +6,19 @@ import styled from 'styled-components'; type Props = { address: string; diameter: number; - className?: string + className?: string; }; const StyledImg = styled.img<{ diameter: number }>` - height: ${({ diameter }) => (diameter ? diameter : 32)}px; - width: ${({ diameter }) => (diameter ? diameter : 32)}px; - border-radius: ${({ diameter }) => (diameter ? diameter / 2 : 16)}px; + height: ${({ diameter }) => diameter}px; + width: ${({ diameter }) => diameter}px; + border-radius: 50%; `; const Identicon: React.FC = ({ diameter = 32, address, className }) => { const iconSrc = React.useMemo(() => makeBlockie(address), [address]); - return -} + return ; +}; -export default Identicon +export default Identicon; From 6b2c9004879a8b098315533cb031f0efb99c61ef Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Thu, 11 Jun 2020 10:48:07 -0300 Subject: [PATCH 4/9] Simplify identicon component logic --- src/dataDisplay/Identicon/index.tsx | 8 +++++--- src/theme.ts | 7 +++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/dataDisplay/Identicon/index.tsx b/src/dataDisplay/Identicon/index.tsx index 53c03294..814395cf 100644 --- a/src/dataDisplay/Identicon/index.tsx +++ b/src/dataDisplay/Identicon/index.tsx @@ -2,20 +2,22 @@ import * as React from 'react'; import makeBlockie from 'ethereum-blockies-base64'; import styled from 'styled-components'; +import { Theme } from '../../theme'; type Props = { address: string; - diameter: number; className?: string; + diameter: keyof Theme['identicon']['diameter']; }; -const StyledImg = styled.img<{ diameter: number }>` +const StyledImg = styled.img<{ diameter: string }>` height: ${({ diameter }) => diameter}px; width: ${({ diameter }) => diameter}px; + line-height: ${({ diameter, theme }) => theme.identicon.diameter[diameter]}; border-radius: 50%; `; -const Identicon: React.FC = ({ diameter = 32, address, className }) => { +const Identicon: React.FC = ({ diameter = 'md', address, className }) => { const iconSrc = React.useMemo(() => makeBlockie(address), [address]); return ; diff --git a/src/theme.ts b/src/theme.ts index 3743ee37..d2e16680 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -109,6 +109,13 @@ const theme = { sm: '16', md: '24' } + }, + identicon: { + diameter: { + sm: '16', + md: '32', + lg: '60px' + } } }; From 9fcddbeb909dea34d02c2ad539e582a51cae35be Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Thu, 11 Jun 2020 10:51:52 -0300 Subject: [PATCH 5/9] Fix prop usage --- src/dataDisplay/Identicon/index.stories.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/dataDisplay/Identicon/index.stories.tsx b/src/dataDisplay/Identicon/index.stories.tsx index 63336424..5d0d293c 100644 --- a/src/dataDisplay/Identicon/index.stories.tsx +++ b/src/dataDisplay/Identicon/index.stories.tsx @@ -11,9 +11,5 @@ export default { }; export const sizes = () => { - return ( - <> - - - ); + return ; }; From 7615ecc5ec4f715ee3a036b97129c622086bbebc Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Thu, 11 Jun 2020 10:53:01 -0300 Subject: [PATCH 6/9] Replaces diameter with size --- src/dataDisplay/Identicon/index.tsx | 4 ++-- src/theme.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/dataDisplay/Identicon/index.tsx b/src/dataDisplay/Identicon/index.tsx index 814395cf..89a625fd 100644 --- a/src/dataDisplay/Identicon/index.tsx +++ b/src/dataDisplay/Identicon/index.tsx @@ -7,13 +7,13 @@ import { Theme } from '../../theme'; type Props = { address: string; className?: string; - diameter: keyof Theme['identicon']['diameter']; + diameter: keyof Theme['identicon']['size']; }; const StyledImg = styled.img<{ diameter: string }>` height: ${({ diameter }) => diameter}px; width: ${({ diameter }) => diameter}px; - line-height: ${({ diameter, theme }) => theme.identicon.diameter[diameter]}; + line-height: ${({ diameter, theme }) => theme.identicon.size[diameter]}; border-radius: 50%; `; diff --git a/src/theme.ts b/src/theme.ts index d2e16680..6cce6dce 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -111,9 +111,9 @@ const theme = { } }, identicon: { - diameter: { - sm: '16', - md: '32', + size: { + sm: '16px', + md: '32px', lg: '60px' } } From abfdd4afce7b557a2a1d2c32ebdec7da1e12a09d Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Fri, 12 Jun 2020 08:47:52 -0300 Subject: [PATCH 7/9] Fix sizes usage --- src/dataDisplay/Identicon/index.stories.tsx | 10 ++++++++-- src/dataDisplay/Identicon/index.tsx | 5 ++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/dataDisplay/Identicon/index.stories.tsx b/src/dataDisplay/Identicon/index.stories.tsx index 5d0d293c..1fb383f1 100644 --- a/src/dataDisplay/Identicon/index.stories.tsx +++ b/src/dataDisplay/Identicon/index.stories.tsx @@ -11,5 +11,11 @@ export default { }; export const sizes = () => { - return ; -}; + return ( + <> + + + + + ); +}; \ No newline at end of file diff --git a/src/dataDisplay/Identicon/index.tsx b/src/dataDisplay/Identicon/index.tsx index 89a625fd..dc9d08d3 100644 --- a/src/dataDisplay/Identicon/index.tsx +++ b/src/dataDisplay/Identicon/index.tsx @@ -11,9 +11,8 @@ type Props = { }; const StyledImg = styled.img<{ diameter: string }>` - height: ${({ diameter }) => diameter}px; - width: ${({ diameter }) => diameter}px; - line-height: ${({ diameter, theme }) => theme.identicon.size[diameter]}; + height: ${({ diameter, theme }) => theme.identicon.size[diameter]}; + width: ${({ diameter, theme }) => theme.identicon.size[diameter]}; border-radius: 50%; `; From 0ef41b272661c7a43c668b46ddce73ea701b59c2 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 12 Jun 2020 11:47:26 -0300 Subject: [PATCH 8/9] minor changes --- src/dataDisplay/Identicon/index.tsx | 25 ------------------- src/dataDisplay/index.ts | 1 - .../Identicon/index.stories.tsx | 10 ++++---- src/utils/Identicon/index.tsx | 25 +++++++++++++++++++ src/utils/index.ts | 3 ++- 5 files changed, 32 insertions(+), 32 deletions(-) delete mode 100644 src/dataDisplay/Identicon/index.tsx rename src/{dataDisplay => utils}/Identicon/index.stories.tsx (51%) create mode 100644 src/utils/Identicon/index.tsx diff --git a/src/dataDisplay/Identicon/index.tsx b/src/dataDisplay/Identicon/index.tsx deleted file mode 100644 index dc9d08d3..00000000 --- a/src/dataDisplay/Identicon/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; - -import makeBlockie from 'ethereum-blockies-base64'; -import styled from 'styled-components'; -import { Theme } from '../../theme'; - -type Props = { - address: string; - className?: string; - diameter: keyof Theme['identicon']['size']; -}; - -const StyledImg = styled.img<{ diameter: string }>` - height: ${({ diameter, theme }) => theme.identicon.size[diameter]}; - width: ${({ diameter, theme }) => theme.identicon.size[diameter]}; - border-radius: 50%; -`; - -const Identicon: React.FC = ({ diameter = 'md', address, className }) => { - const iconSrc = React.useMemo(() => makeBlockie(address), [address]); - - return ; -}; - -export default Identicon; diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts index a1f5e12c..2f27a0f3 100644 --- a/src/dataDisplay/index.ts +++ b/src/dataDisplay/index.ts @@ -8,4 +8,3 @@ export { default as Layout } from './Layout'; export { default as Text } from './Text'; export { default as Title } from './Title'; export { default as Section } from './Section'; -export { default as Identicon } from './Identicon'; diff --git a/src/dataDisplay/Identicon/index.stories.tsx b/src/utils/Identicon/index.stories.tsx similarity index 51% rename from src/dataDisplay/Identicon/index.stories.tsx rename to src/utils/Identicon/index.stories.tsx index 1fb383f1..44ff269a 100644 --- a/src/dataDisplay/Identicon/index.stories.tsx +++ b/src/utils/Identicon/index.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import Identicon from './index'; export default { - title: 'Data Display/Identicon', + title: 'Utils/Identicon', component: Identicon, parameters: { componentSubtitle: 'Identicon Component.' @@ -13,9 +13,9 @@ export default { export const sizes = () => { return ( <> - - - + + + ); -}; \ No newline at end of file +}; diff --git a/src/utils/Identicon/index.tsx b/src/utils/Identicon/index.tsx new file mode 100644 index 00000000..596683c2 --- /dev/null +++ b/src/utils/Identicon/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; + +import makeBlockie from 'ethereum-blockies-base64'; +import styled from 'styled-components'; +import { Theme } from '../../theme'; + +type Props = { + address: string; + className?: 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: React.FC = ({ size = 'md', address, className }) => { + const iconSrc = React.useMemo(() => makeBlockie(address), [address]); + + return ; +}; + +export default Identicon; diff --git a/src/utils/index.ts b/src/utils/index.ts index ab70100e..12d1530e 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1 +1,2 @@ -export * from './modals' +export { default as Identicon } from './Identicon'; +export * from './modals' \ No newline at end of file From 34b9d3562dc08e6d28fc949c3c4a8a383039d70b Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 12 Jun 2020 11:52:36 -0300 Subject: [PATCH 9/9] other changes --- src/utils/Identicon/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/utils/Identicon/index.tsx b/src/utils/Identicon/index.tsx index 596683c2..c934ea3a 100644 --- a/src/utils/Identicon/index.tsx +++ b/src/utils/Identicon/index.tsx @@ -6,7 +6,6 @@ import { Theme } from '../../theme'; type Props = { address: string; - className?: string; size: keyof Theme['identicon']['size']; }; @@ -16,10 +15,10 @@ const StyledImg = styled.img<{ size: string }>` border-radius: 50%; `; -const Identicon: React.FC = ({ size = 'md', address, className }) => { +const Identicon = ({ size = 'md', address, ...rest }: Props) => { const iconSrc = React.useMemo(() => makeBlockie(address), [address]); - return ; + return ; }; export default Identicon;