Merge pull request #103 from BrownBrownBear/fix/hub-add-layout-pages

fix(hub): proposal page crashed
berachain · Sep 27, 2024 · 3ee0c1a · 3ee0c1a
2 parents 4660760 + 7e43145
commit 3ee0c1a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -0,0 +1,3 @@
+declare module "@metamask/jazzicon" {
+  export default function jazzicon(diameter: number, seed: number): HTMLElement;
+}