From a587ea658abd8ee7d87a9a3ad14ac3985099b139 Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Fri, 24 Jan 2025 13:33:20 -0800
Subject: [PATCH 1/3] Use GitHub profile picture

---
 src/components/ConnectButton.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
index ca110830bf..b502f868b4 100644
--- a/src/components/ConnectButton.tsx
+++ b/src/components/ConnectButton.tsx
@@ -7,6 +7,9 @@ import ProfileModal from '@site/src/components/ProfileModal';
 import { useProgress } from '../hooks/use-progress';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useProfile } from '../hooks/use-profile';
+import { useGithubAvatar } from '../hooks/use-github-avatar';
+import { SocialType } from '../types/gold-star';
 
 const shortenAddress = (address: string) => {
   if (!address) return '';
@@ -15,6 +18,8 @@ const shortenAddress = (address: string) => {
 
 const ConnectButton: React.FC = () => {
   const { user, logIn, logOut } = useCurrentUser();
+  const { profile } = useProfile(user.addr);
+  const { avatar } = useGithubAvatar(profile?.socials?.[SocialType.GITHUB]);
   const [isProgressModalOpen, setIsProgressModalOpen] = useState(false);
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
   const { getProgress } = useProgress();
@@ -59,7 +64,15 @@ const ConnectButton: React.FC = () => {
       <Dropdown
         buttonLabel={
           <div className="flex items-center gap-2">
-            <FontAwesomeIcon icon={faUser} size="md" className="mx-auto" />
+            {avatar ? (
+              <img
+                src={avatar}
+                alt="Github Avatar"
+                className="w-6 h-6 rounded-full"
+              />
+            ) : (
+              <FontAwesomeIcon icon={faUser} size="md" className="mx-auto" />
+            )}
             <span className="text-sm text-gray-500">
               {formattedProgressValue}%
             </span>

From cb7b730513a0adfc42e3c8623ec4dcb82bc128b7 Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Fri, 24 Jan 2025 14:04:05 -0800
Subject: [PATCH 2/3] use client

---
 src/components/ConnectButton.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
index b502f868b4..10e9cb8edd 100644
--- a/src/components/ConnectButton.tsx
+++ b/src/components/ConnectButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import { useCurrentUser } from '@site/src/hooks/use-current-user';
 import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';

From 985b87295fbdbf664969f599d0a58a71809faadd Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Fri, 24 Jan 2025 14:12:44 -0800
Subject: [PATCH 3/3] fix ssr

---
 src/components/ConnectButton.tsx  | 2 --
 src/hooks/use-persistent-cache.ts | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
index 10e9cb8edd..b502f868b4 100644
--- a/src/components/ConnectButton.tsx
+++ b/src/components/ConnectButton.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState } from 'react';
 import { useCurrentUser } from '@site/src/hooks/use-current-user';
 import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
diff --git a/src/hooks/use-persistent-cache.ts b/src/hooks/use-persistent-cache.ts
index 289ba47605..3f94db7c45 100644
--- a/src/hooks/use-persistent-cache.ts
+++ b/src/hooks/use-persistent-cache.ts
@@ -7,7 +7,7 @@ export function usePersistentCache<K extends {}, V extends {}>(
 ): LRUCache<K, V> {
   const [cache] = useState(() => {
     const cache = new LRUCache<K, V>(opts);
-    if (!localStorage) {
+    if (typeof window === 'undefined') {
       return cache;
     }
 
@@ -23,7 +23,7 @@ export function usePersistentCache<K extends {}, V extends {}>(
   });
 
   useEffect(() => {
-    if (!localStorage || typeof window === 'undefined') {
+    if (typeof window === 'undefined') {
       return;
     }