From 7aae96d84590be4a0a67fca2a8e6b9aaff9bdf0e Mon Sep 17 00:00:00 2001
From: jakehobbs <jacob.hobbs@alchemy.com>
Date: Fri, 7 Feb 2025 13:15:41 -0800
Subject: [PATCH] fix: syntax error in demo GA script & hydration warning
 (#1333)

* fix: quote GA ID & fix UserAvatar hydration warning

* chore: remove "use client"
---
 .../src/components/shared/GoogleAnalytics.tsx |  2 +-
 .../user-connection-avatar/UserAvatar.tsx     | 29 ++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/examples/ui-demo/src/components/shared/GoogleAnalytics.tsx b/examples/ui-demo/src/components/shared/GoogleAnalytics.tsx
index ef06a1943f..9ca671f6df 100644
--- a/examples/ui-demo/src/components/shared/GoogleAnalytics.tsx
+++ b/examples/ui-demo/src/components/shared/GoogleAnalytics.tsx
@@ -12,7 +12,7 @@ const GoogleAnalytics: FC = () => (
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
 
-            gtag('config', ${GA_ID});`,
+            gtag('config', '${GA_ID}');`,
     }}
   />
 );
diff --git a/examples/ui-demo/src/components/user-connection-avatar/UserAvatar.tsx b/examples/ui-demo/src/components/user-connection-avatar/UserAvatar.tsx
index 0e9b85b8fe..6d594bad21 100644
--- a/examples/ui-demo/src/components/user-connection-avatar/UserAvatar.tsx
+++ b/examples/ui-demo/src/components/user-connection-avatar/UserAvatar.tsx
@@ -10,21 +10,30 @@ const SUB_COLORS = ["#37BCFA", "#6D37FA"];
 
 const UserAvatar = ({ address, primaryColor }: UserAvatarProps) => {
   const avatarColors = useMemo(() => {
-    return shuffleColors([primaryColor, ...SUB_COLORS]);
-  }, [primaryColor]);
+    return shuffleColorsDeterministically(
+      [primaryColor, ...SUB_COLORS],
+      address
+    );
+  }, [address, primaryColor]);
 
   return (
-    <Avatar
-      size={40}
-      name={address}
-      variant="marble"
-      colors={avatarColors.length > 0 ? avatarColors : [primaryColor]}
-    />
+    <Avatar size={40} name={address} variant="marble" colors={avatarColors} />
   );
 };
 
-const shuffleColors = (colors: string[]) => {
-  return colors.sort(() => Math.random() - 0.5);
+// Always returns the same colors for the same seed, so
+// that rendering on the server and client will match.
+const shuffleColorsDeterministically = (colors: string[], seed: string) => {
+  if (colors.length === 1) {
+    return colors;
+  }
+  const hash = Array.from(seed).reduce(
+    (acc, char) => acc + char.charCodeAt(0),
+    0
+  );
+  return [...colors].sort(
+    (a, b) => (hash % a.charCodeAt(0)) - (hash % b.charCodeAt(0))
+  );
 };
 
 export { UserAvatar };