From 8a59586db4bc48e6a2b9a0ff614bae1ad6f37c03 Mon Sep 17 00:00:00 2001
From: keating <keating.dev@protonmail.com>
Date: Tue, 12 Dec 2023 10:55:56 -0500
Subject: [PATCH 1/2] Add jazzicon to delegate

---
 package.json            |  1 +
 pages/[id]/delegate.tsx | 12 ++++++++----
 yarn.lock               | 20 ++++++++++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 7a2d1a6..d70ec85 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
+    "react-jazzicon": "^1.0.4",
     "react-tooltip": "^5.23.0",
     "swr": "^2.2.4",
     "viem": "~1.10.7",
diff --git a/pages/[id]/delegate.tsx b/pages/[id]/delegate.tsx
index 30f6224..2dfce64 100644
--- a/pages/[id]/delegate.tsx
+++ b/pages/[id]/delegate.tsx
@@ -8,6 +8,8 @@ import Image from 'next/image';
 import { useAccount, useEnsAvatar, useEnsName, useNetwork, useWalletClient } from 'wagmi';
 import { isAddress, formatUnits } from 'viem';
 import { useForm } from 'react-hook-form';
+import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
+
 import { useBalances } from '@/hooks/useBalances';
 import { useConfig } from '@/hooks/useConfig';
 import { useHasMounted } from '@/hooks/useHasMounted';
@@ -149,18 +151,20 @@ const Delegate: NextPage = () => {
                   <div className="flex align-center p-4 gap-1">
                     <div className="self-center font-mono">
                       {mounted && delegatee !== ZERO_ADDRESS ? (
-                        <div className="flex items-start gap-1">
-                          {delegateEnsAvatar && (
+                        <div className="flex items-center gap-1">
+                          {delegateEnsAvatar ? (
                             <img
                               className="inline-block h-6 w-6 rounded-full"
                               src={delegateEnsAvatar}
                               alt=""
                             />
+                          ) : (
+                            <Jazzicon diameter={24} seed={jsNumberForAddress(delegatee || '')} />
                           )}
-                          {delegateEnsName || delegatee}{' '}
+                          <p className="text-sm self-end">{delegateEnsName || delegatee}</p>
                           <InformationCircleIcon
                             id="delegate-address-information"
-                            className="h-4"
+                            className="h-4 self-start"
                           />
                         </div>
                       ) : (
diff --git a/yarn.lock b/yarn.lock
index 142b8b6..0e94b87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4574,6 +4574,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mersenne-twister@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "mersenne-twister@npm:1.1.0"
+  checksum: 7de1940ded117f2aad9320ae4d21d647b0ecf0667abbadcfe6a2835c669feb674ef46cb7a72da7af69a56d8b19e50e95e2fb7ef6d780efab7a6acd4d87f4cb2d
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
@@ -5527,6 +5534,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-jazzicon@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "react-jazzicon@npm:1.0.4"
+  dependencies:
+    mersenne-twister: ^1.1.0
+  peerDependencies:
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
+  checksum: e975b143b001f6e06bf6269498749e174550a86dfd85c255c64750f2adfa0b94d5ac8d79e04eb8b136f94067ee30ce47dae06312f9f1d37219319dc2c658d671
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll-bar@npm:^2.3.3":
   version: 2.3.4
   resolution: "react-remove-scroll-bar@npm:2.3.4"
@@ -6959,6 +6978,7 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     react-hook-form: ^7.47.0
+    react-jazzicon: ^1.0.4
     react-tooltip: ^5.23.0
     swr: ^2.2.4
     tailwindcss: ^3.3.3

From a3d0c8939fa271e82b45d455ee75e5c8539798b1 Mon Sep 17 00:00:00 2001
From: Keating <keating.dev@protonmail.com>
Date: Wed, 20 Dec 2023 13:30:09 -0500
Subject: [PATCH 2/2] Center

---
 pages/[id]/delegate.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/[id]/delegate.tsx b/pages/[id]/delegate.tsx
index 2dfce64..fb5eff7 100644
--- a/pages/[id]/delegate.tsx
+++ b/pages/[id]/delegate.tsx
@@ -164,7 +164,7 @@ const Delegate: NextPage = () => {
                           <p className="text-sm self-end">{delegateEnsName || delegatee}</p>
                           <InformationCircleIcon
                             id="delegate-address-information"
-                            className="h-4 self-start"
+                            className="h-4"
                           />
                         </div>
                       ) : (