From 7e43145df7daf38a85cd5ef0aa3ed3ece5875021 Mon Sep 17 00:00:00 2001
From: brown <brown@berachain.com>
Date: Thu, 26 Sep 2024 17:45:41 -0400
Subject: [PATCH] fix(shared-ui): update identicon with useEffect to prevent
 ssr crashing

---
 packages/shared-ui/src/identicon.tsx       | 19 +++++++++++++------
 packages/shared-ui/src/types/jazzicon.d.ts |  3 +++
 2 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 packages/shared-ui/src/types/jazzicon.d.ts

diff --git a/packages/shared-ui/src/identicon.tsx b/packages/shared-ui/src/identicon.tsx
index a1c1a974f..05af4661a 100755
--- a/packages/shared-ui/src/identicon.tsx
+++ b/packages/shared-ui/src/identicon.tsx
@@ -1,6 +1,10 @@
+"use client";
+
 // @ts-nocheck
-import { useLayoutEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { cn } from "@bera/ui";
+
+import "./types/jazzicon.d.ts";
 import jazzicon from "@metamask/jazzicon";
 
 export default function Identicon({
@@ -15,17 +19,20 @@ export default function Identicon({
   const iconSize = size ?? 24;
 
   const icon = useMemo(
-    () => account && jazzicon(iconSize, parseInt(account.slice(2, 10), 16)),
+    () =>
+      account &&
+      typeof window !== "undefined" &&
+      jazzicon(iconSize, parseInt(account.slice(2, 10), 16)),
     [account, iconSize],
   );
   const iconRef = useRef<HTMLDivElement>(null);
-  useLayoutEffect(() => {
+  useEffect(() => {
     const current = iconRef.current;
-    if (icon) {
-      current?.appendChild(icon);
+    if (icon && current) {
+      current.appendChild(icon);
       return () => {
         try {
-          current?.removeChild(icon);
+          current.removeChild(icon);
         } catch (e) {
           console.error("Avatar icon not found");
         }
diff --git a/packages/shared-ui/src/types/jazzicon.d.ts b/packages/shared-ui/src/types/jazzicon.d.ts
new file mode 100644
index 000000000..9a4a7cebd
--- /dev/null
+++ b/packages/shared-ui/src/types/jazzicon.d.ts
@@ -0,0 +1,3 @@
+declare module "@metamask/jazzicon" {
+  export default function jazzicon(diameter: number, seed: number): HTMLElement;
+}