From bad4bfb7dce2599b867376ba69df624ce22c3c86 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:28:34 -0300
Subject: [PATCH] feat: Allow rounded blockie (#553)

* feat: Allow rounded blockie

* fix: Remove important
---
 src/components/Blockie/Blockie.css         |  4 ++++
 src/components/Blockie/Blockie.stories.tsx |  1 +
 src/components/Blockie/Blockie.tsx         | 24 ++++++++++++++++------
 3 files changed, 23 insertions(+), 6 deletions(-)

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)
       <Blockie seed={address} scale={21} />
     </>
   ))
+  .add('Circular shape', () => <Blockie seed={address} shape="circle" />)
   .add('In a paragraph', () => (
     <p>
       You've transfered <Mana inline>1,000</Mana> 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<BlockieProps> {
   }
 
   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 = <canvas className={classes} ref={this.canvas} />
+    const canvas = (
+      <canvas
+        className={classNames(
+          'dcl blockie',
+          className,
+          shape === 'circle' && 'circle',
+          shape !== 'circle' && scaleClass
+        )}
+        ref={this.canvas}
+      />
+    )
 
     if (children) {
       return (