From dccfef77befe543964b9eb39e05c49c9b42a91b6 Mon Sep 17 00:00:00 2001
From: Pierre Bertet <hi@bpier.re>
Date: Wed, 27 Sep 2023 08:09:38 +0100
Subject: [PATCH] Move from ethereum-blockies-base64 to blo (#2555)

---
 package.json                                     | 2 +-
 src/components/common/EthHashInfo/index.test.tsx | 6 +++---
 src/components/common/Identicon/index.tsx        | 4 ++--
 yarn.lock                                        | 5 +++++
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 888c688f41..6dad58ec26 100644
--- a/package.json
+++ b/package.json
@@ -66,9 +66,9 @@
     "@web3-onboard/ledger": "2.3.2",
     "@web3-onboard/trezor": "^2.4.2",
     "@web3-onboard/walletconnect": "^2.4.5",
+    "blo": "^1.1.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.2",
-    "ethereum-blockies-base64": "^1.0.2",
     "ethers": "5.7.2",
     "exponential-backoff": "^3.1.0",
     "firebase": "^10.3.1",
diff --git a/src/components/common/EthHashInfo/index.test.tsx b/src/components/common/EthHashInfo/index.test.tsx
index 0fd8825c81..adaf9172c6 100644
--- a/src/components/common/EthHashInfo/index.test.tsx
+++ b/src/components/common/EthHashInfo/index.test.tsx
@@ -1,4 +1,4 @@
-import makeBlockie from 'ethereum-blockies-base64'
+import { blo } from 'blo'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import { act, fireEvent, render, waitFor } from '@/tests/test-utils'
@@ -179,7 +179,7 @@ describe('EthHashInfo', () => {
 
       expect(container.querySelector('.icon')).toHaveAttribute(
         'style',
-        `background-image: url(${makeBlockie(MOCK_SAFE_ADDRESS)}); width: 40px; height: 40px;`,
+        `background-image: url(${blo(MOCK_SAFE_ADDRESS)}); width: 40px; height: 40px;`,
       )
     })
 
@@ -188,7 +188,7 @@ describe('EthHashInfo', () => {
 
       expect(container.querySelector('.icon')).toHaveAttribute(
         'style',
-        `background-image: url(${makeBlockie(MOCK_SAFE_ADDRESS)}); width: 100px; height: 100px;`,
+        `background-image: url(${blo(MOCK_SAFE_ADDRESS)}); width: 100px; height: 100px;`,
       )
     })
 
diff --git a/src/components/common/Identicon/index.tsx b/src/components/common/Identicon/index.tsx
index fe25818a37..6b3d4d7623 100644
--- a/src/components/common/Identicon/index.tsx
+++ b/src/components/common/Identicon/index.tsx
@@ -1,6 +1,6 @@
 import type { ReactElement, CSSProperties } from 'react'
 import { useMemo } from 'react'
-import makeBlockie from 'ethereum-blockies-base64'
+import { blo } from 'blo'
 import Skeleton from '@mui/material/Skeleton'
 
 import css from './styles.module.css'
@@ -13,7 +13,7 @@ export interface IdenticonProps {
 const Identicon = ({ address, size = 40 }: IdenticonProps): ReactElement => {
   const style = useMemo<CSSProperties | null>(() => {
     try {
-      const blockie = makeBlockie(address)
+      const blockie = blo(address as `0x${string}`)
       return {
         backgroundImage: `url(${blockie})`,
         width: `${size}px`,
diff --git a/yarn.lock b/yarn.lock
index 32934fccf0..5c177a0688 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7186,6 +7186,11 @@ blakejs@^1.1.0, blakejs@^1.2.1:
   resolved "https://registry.yarnpkg.com/blakejs/-/blakejs-1.2.1.tgz#5057e4206eadb4a97f7c0b6e197a505042fc3814"
   integrity sha512-QXUSXI3QVc/gJME0dBpXrag1kbzOqCjCX8/b54ntNyW6sjtoqxqRk3LTmXzaJoh71zMsDCjM+47jS7XiwN/+fQ==
 
+blo@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/blo/-/blo-1.1.1.tgz#ed781c5c516fba484ec8ec86105dc27f6c553209"
+  integrity sha512-1uGZInlRD4X1WQP2G1QjDGwGZ8HdGgFKqnzyRdA2TYYc0MOQCmCi37RTQ8oJuI0UF6DYFKXHwV/t1kZkO/fTaA==
+
 blob-util@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"