Add Nouns pfps (#2447)

Fixes #2428

docs/ENVS.md

@@ -237,7 +237,7 @@ Settings for meta tags, OG tags and SEO
 
 | Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie"` | Default style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar) and [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) | - | `jazzicon` | `gradient_avatar` | v1.12.0+ |
+| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie" \| "nouns"` | Default style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar), [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) and [Nouns](https://nouns.wtf) | - | `jazzicon` | `gradient_avatar` | v1.12.0+ |
 | NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT | `Array<"base16" \| "bech32">` | Displayed address format, could be either `base16` standard or [`bech32`](https://github.com/bitcoin/bips/blob/master/bip-0173.mediawiki#bech32) standard. If the array contains multiple values, the address format toggle will appear in the UI, allowing the user to switch between formats. The first item in the array will be the default format. | - | `'["base16"]'` | `'["bech32", "base16"]'` | v1.36.0+ |
 | NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX | `string` | Human-readable prefix of `bech32` address format. | Required, if `NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT` contains "bech32" value | - | `duck` | v1.36.0+ |
 | NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS | `Array<AddressViewId>` | Address views that should not be displayed. See below the list of the possible id values.  | - | - | `'["top_accounts"]'` | v1.15.0+ |

lib/settings/identIcon.ts

@@ -21,4 +21,9 @@ export const IDENTICONS: Array<{ label: string; id: IdenticonType; sampleBg: str
     id: 'gradient_avatar',
     sampleBg: 'url("/static/identicon_logos/gradient_avatar.png") center / contain no-repeat',
   },
+  {
+    label: 'Nouns',
+    id: 'nouns',
+    sampleBg: 'url("/static/identicon_logos/nouns.svg") center / contain no-repeat',
+  },
 ];

package.json

@@ -42,6 +42,7 @@
     "@blockscout/visualizer-types": "0.2.0",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
+    "@cloudnouns/kit": "1.1.6",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@growthbook/growthbook-react": "0.21.0",

public/static/identicon_logos/nouns.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" shape-rendering="crispEdges">
+  <rect width="100%" height="100%" fill="#d5d7e1"/>
+  <path fill="#caeff9" d="M90 210h140v10H90zM90 220h140v10H90zM90 230h140v10H90zM90 240h140v10H90zM90 250h20v10H90zM120 250h110v10H120zM90 260h20v10H90zM120 260h110v10H120zM90 270h20v10H90zM120 270h110v10H120zM90 280h20v10H90zM120 280h110v10H120zM90 290h20v10H90zM120 290h110v10H120zM90 300h20v10H90zM120 300h110v10H120zM90 310h20v10H90zM120 310h110v10H120z"/>
+  <path fill="#9f21a0" d="M200 230h30v10h-30z"/>
+  <path fill="#d22209" d="M160 240h40v10h-40z"/>
+  <path fill="#9f21a0" d="M200 240h30v10h-30z"/>
+  <path fill="#fe500c" d="M120 250h40v10h-40z"/>
+  <path fill="#d22209" d="M160 250h40v10h-40z"/>
+  <path fill="#9f21a0" d="M200 250h30v10h-30z"/>
+  <path fill="#ffc925" d="M90 260h20v10H90z"/>
+  <path fill="#fe500c" d="M120 260h40v10h-40z"/>
+  <path fill="#d22209" d="M160 260h40v10h-40z"/>
+  <path fill="#ffc925" d="M90 270h20v10H90z"/>
+  <path fill="#fe500c" d="M120 270h40v10h-40z"/>
+  <path fill="#ffc925" d="M90 280h20v10H90z"/>
+  <path fill="#ffc110" d="M160 30h80v10h-80zM140 40h50v10h-50z"/>
+  <path fill="#fff0ee" d="M190 40h40v10h-40z"/>
+  <path fill="#ffc110" d="M230 40h20v10h-20zM130 50h50v10h-50z"/>
+  <path fill="#fff0ee" d="M180 50h20v10h-20z"/>
+  <path d="M200 50h20v10h-20z"/>
+  <path fill="#fff0ee" d="M220 50h20v10h-20z"/>
+  <path fill="#ffc110" d="M240 50h10v10h-10zM130 60h50v10h-50z"/>
+  <path fill="#fff0ee" d="M180 60h20v10h-20z"/>
+  <path d="M200 60h20v10h-20z"/>
+  <path fill="#fff0ee" d="M220 60h20v10h-20z"/>
+  <path fill="#ffc110" d="M240 60h10v10h-10z"/>
+  <path fill="#fe500c" d="M250 60h10v10h-10z"/>
+  <path fill="#ffc110" d="M130 70h60v10h-60z"/>
+  <path fill="#fff0ee" d="M190 70h40v10h-40z"/>
+  <path fill="#ffc110" d="M230 70h20v10h-20z"/>
+  <path fill="#fe500c" d="M250 70h30v10h-30z"/>
+  <path fill="#ffc110" d="M50 80h20v10H50zM140 80h100v10H140z"/>
+  <path fill="#fe500c" d="M240 80h30v10h-30z"/>
+  <path fill="#ffc110" d="M50 90h50v10H50zM150 90h100v10H150zM40 100h220v10H40zM40 110h230v10H40zM40 120h240v10H40zM40 130h240v10H40zM40 140h240v10H40zM50 150h230v10H50zM50 160h230v10H50zM60 170h220v10H60zM60 180h110v10H60z"/>
+  <path fill="#d08b11" d="M170 180h10v10h-10z"/>
+  <path fill="#ffc110" d="M180 180h90v10h-90zM70 190h70v10H70z"/>
+  <path fill="#d08b11" d="M140 190h30v10h-30z"/>
+  <path fill="#ffc110" d="M170 190h90v10h-90zM90 200h160v10H90z"/>
+  <path fill="#ff638d" d="M100 110h60v10h-60zM170 110h60v10h-60zM100 120h10v10h-10z"/>
+  <path fill="#fff" d="M110 120h20v10h-20z"/>
+  <path d="M130 120h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 120h10v10h-10zM170 120h10v10h-10z"/>
+  <path fill="#fff" d="M180 120h20v10h-20z"/>
+  <path d="M200 120h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 120h10v10h-10zM70 130h40v10H70z"/>
+  <path fill="#fff" d="M110 130h20v10h-20z"/>
+  <path d="M130 130h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 130h30v10h-30z"/>
+  <path fill="#fff" d="M180 130h20v10h-20z"/>
+  <path d="M200 130h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 130h10v10h-10zM70 140h40v10H70z"/>
+  <path fill="#fff" d="M110 140h20v10h-20z"/>
+  <path d="M130 140h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 140h30v10h-30z"/>
+  <path fill="#fff" d="M180 140h20v10h-20z"/>
+  <path d="M200 140h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 140h10v10h-10zM70 150h10v10H70zM100 150h10v10h-10z"/>
+  <path fill="#fff" d="M110 150h20v10h-20z"/>
+  <path d="M130 150h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 150h10v10h-10zM170 150h10v10h-10z"/>
+  <path fill="#fff" d="M180 150h20v10h-20z"/>
+  <path d="M200 150h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 150h10v10h-10zM100 160h60v10h-60zM170 160h60v10h-60z"/>
+</svg>

types/views/address.ts

@@ -5,6 +5,7 @@ export const IDENTICON_TYPES = [
   'jazzicon',
   'gradient_avatar',
   'blockie',
+  'nouns',
 ] as const;
 
 export type IdenticonType = ArrayElement<typeof IDENTICON_TYPES>;

ui/shared/entities/address/AddressIdenticon.tsx

@@ -56,6 +56,15 @@ const Icon = dynamic(
         };
       }
 
+      case 'nouns': {
+        const Noun = (await import('@cloudnouns/kit'));
+
+        return (props: IconProps) => {
+          const noun = Noun.NounFactory.createFromString(props.hash, { size: props.size });
+          return <Image src={ noun.svg } alt={ `Identicon for ${ props.hash }}` }/>;
+        };
+      }
+
       default: {
         return () => null;
       }

yarn.lock

@@ -2353,6 +2353,15 @@
     picocolors "^1.0.0"
     sisteransi "^1.0.5"
 
+"@cloudnouns/kit@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@cloudnouns/kit/-/kit-1.1.6.tgz#1d6f6f86f7b9729b816f1404fd050171a1e5a743"
+  integrity sha512-4Burtt19tpoJ4dpNdE2UjQA3BjbizUzyidgM89JqEo+JO10E/5fvkQUrfNiNUQloyAXys2Iakq4N4p/+/9O+tw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/solidity" "^5.7.0"
+    jshashes "^1.0.8"
+
 "@coinbase/wallet-sdk@4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-4.0.4.tgz#634cd89bac93eeaf381a1f026476794e53431ed6"
@@ -2726,6 +2735,72 @@
     ethereum-cryptography "^2.0.0"
     micro-ftch "^0.3.1"
 
+"@ethersproject/bignumber@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.7.0.tgz#e2f03837f268ba655ffba03a57853e18a18dc9c2"
+  integrity sha512-n1CAdIHRWjSucQO3MC1zPSVgV/6dy/fjL9pMrPP9peL+QxEg9wOsVqwD4+818B6LUEtaXzVHQiuivzRoxPxUGw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    bn.js "^5.2.1"
+
+"@ethersproject/bytes@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.7.0.tgz#a00f6ea8d7e7534d6d87f47188af1148d71f155d"
+  integrity sha512-nsbxwgFXWh9NyYWo+U8atvmMsSdKJprTcICAkvbBffT75qDocbuggBU0SJiVK2MuTrp0q+xvLkTnGMPK1+uA9A==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/constants@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/constants/-/constants-5.7.0.tgz#df80a9705a7e08984161f09014ea012d1c75295e"
+  integrity sha512-DHI+y5dBNvkpYUMiRQyxRBYBefZkJfo70VUkUAsRjcPs47muV9evftfZ0PJVCXYbAiCgght0DtcF9srFQmIgWA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+
+"@ethersproject/keccak256@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.7.0.tgz#3186350c6e1cd6aba7940384ec7d6d9db01f335a"
+  integrity sha512-2UcPboeL/iW+pSg6vZ6ydF8tCnv3Iu/8tUmLLzWWGzxWKFFqOBQFLo6uLUv6BDrLgCDfN28RJ/wtByx+jZ4KBg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    js-sha3 "0.8.0"
+
+"@ethersproject/logger@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.7.0.tgz#6ce9ae168e74fecf287be17062b590852c311892"
+  integrity sha512-0odtFdXu/XHtjQXJYA3u9G0G8btm0ND5Cu8M7i5vhEcE8/HmF4Lbdqanwyv4uQTr2tx6b7fQRmgLrsnpQlmnig==
+
+"@ethersproject/sha2@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.7.0.tgz#9a5f7a7824ef784f7f7680984e593a800480c9fb"
+  integrity sha512-gKlH42riwb3KYp0reLsFTokByAKoJdgFCwI+CCiX/k+Jm2mbNs6oOaCjYQSlI1+XBVejwH2KrmCbMAT/GnRDQw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    hash.js "1.1.7"
+
+"@ethersproject/solidity@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/solidity/-/solidity-5.7.0.tgz#5e9c911d8a2acce2a5ebb48a5e2e0af20b631cb8"
+  integrity sha512-HmabMd2Dt/raavyaGukF4XxizWKhKQ24DoLtdNbBmNKUOPqwjsKQSdV9GQtj9CBEea9DlzETlVER1gYeXXBGaA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/strings@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/strings/-/strings-5.7.0.tgz#54c9d2a7c57ae8f1205c88a9d3a56471e14d5ed2"
+  integrity sha512-/9nu+lj0YswRNSH0NXYqrh8775XNyEdUQAuf3f+SmOrnVewcJ5SBNAjF7lpgehKi4abvNNXyf+HX86czCdJ8Mg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
 "@fastify/busboy@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8"
@@ -11504,7 +11579,7 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash.js@^1.0.0, hash.js@^1.0.3:
+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
   integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
@@ -13010,6 +13085,11 @@ js-file-download@^0.4.12:
   resolved "https://registry.yarnpkg.com/js-file-download/-/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"
   integrity sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -13077,6 +13157,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+jshashes@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/jshashes/-/jshashes-1.0.8.tgz#f60d837428383abf73ab022e1542e6614bd75514"
+  integrity sha512-btmQZ/w1rj8Lb6nEwvhjM7nBYoj54yaEFo2PWh3RkxZ8qNwuvOxvQYN/JxVuwoMmdIluL+XwYVJ+pEEZoSYybQ==
+
 json-bigint@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/json-bigint/-/json-bigint-1.0.0.tgz#ae547823ac0cad8398667f8cd9ef4730f5b01ff1"