diff --git a/src/components/Blockie/Blockie.css b/src/components/Blockie/Blockie.css
index 32764644..ffe28860 100644
--- a/src/components/Blockie/Blockie.css
+++ b/src/components/Blockie/Blockie.css
@@ -5,6 +5,10 @@
margin-left: 0.1em;
}
+.dcl.blockie.circle {
+ border-radius: 50%;
+}
+
.dcl.blockie.small {
border-radius: 4px;
}
diff --git a/src/components/Blockie/Blockie.stories.tsx b/src/components/Blockie/Blockie.stories.tsx
index c5879249..4c023320 100644
--- a/src/components/Blockie/Blockie.stories.tsx
+++ b/src/components/Blockie/Blockie.stories.tsx
@@ -18,6 +18,7 @@ storiesOf('Blockie', module)
>
))
+ .add('Circular shape', () => )
.add('In a paragraph', () => (
You've transfered 1,000 to{' '}
diff --git a/src/components/Blockie/Blockie.tsx b/src/components/Blockie/Blockie.tsx
index c12d0605..a4bc44c7 100644
--- a/src/components/Blockie/Blockie.tsx
+++ b/src/components/Blockie/Blockie.tsx
@@ -1,6 +1,7 @@
import * as React from 'react'
import * as blockies from 'ethereum-blockies/blockies'
import './Blockie.css'
+import classNames from 'classnames'
export type BlockieProps = {
seed: string
@@ -9,6 +10,7 @@ export type BlockieProps = {
bgcolor?: string
size?: number
scale?: number
+ shape?: 'circle' | 'square'
className?: string
children?: React.ReactNode
}
@@ -63,18 +65,28 @@ export class Blockie extends React.PureComponent {
}
render(): JSX.Element {
- const { size, scale, children, className } = this.props
+ const { size, scale, shape, children, className } = this.props
- let classes = `dcl blockie ${className}`.trim()
+ let scaleClass = ''
if (scale * size <= 16) {
- classes += ' mini'
+ scaleClass += ' mini'
} else if (scale * size <= 24) {
- classes += ' tiny'
+ scaleClass += ' tiny'
} else if (scale * size <= 36) {
- classes += ' small'
+ scaleClass += ' small'
}
- const canvas =
+ const canvas = (
+
+ )
if (children) {
return (