From 755ce84469954ab34f8096a34fe0bd819630cbeb Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Mon, 8 Nov 2021 09:50:24 -0300
Subject: [PATCH] Adding errorState in useFetchProfile (#1745)

* Adding errorState in useFetchProfile
---
 src/custom/hooks/useFetchProfile.ts |  4 ++--
 src/custom/pages/Profile/index.tsx  | 23 +++++++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/custom/hooks/useFetchProfile.ts b/src/custom/hooks/useFetchProfile.ts
index e49393102..c2d95af4e 100644
--- a/src/custom/hooks/useFetchProfile.ts
+++ b/src/custom/hooks/useFetchProfile.ts
@@ -5,13 +5,13 @@ import { ProfileData } from 'api/gnosisProtocol/api'
 
 type FetchProfileState = {
   profileData: ProfileData | null
-  //error: string
+  error: string
   isLoading: boolean
 }
 
 const emptyState: FetchProfileState = {
   profileData: null,
-  //error: '',
+  error: '',
   isLoading: false,
 }
 
diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
index a83093fad..679dd331c 100644
--- a/src/custom/pages/Profile/index.tsx
+++ b/src/custom/pages/Profile/index.tsx
@@ -26,9 +26,24 @@ import { SupportedChainId as ChainId } from 'constants/chains'
 export default function Profile() {
   const referralLink = useReferralLink()
   const { account, chainId } = useActiveWeb3React()
-  const { profileData, isLoading } = useFetchProfile()
+  const { profileData, isLoading, error } = useFetchProfile()
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
 
+  const renderNotificationMessages = (
+    <>
+      {error && (
+        <StyledNotificationBanner isVisible level="error" canClose={false}>
+          There was an error loading your profile data. Please try again later.
+        </StyledNotificationBanner>
+      )}
+      {chainId && chainId !== ChainId.MAINNET && (
+        <StyledNotificationBanner isVisible level="info" canClose={false}>
+          Profile data is only available for mainnet. Please change the network to see it.
+        </StyledNotificationBanner>
+      )}
+    </>
+  )
+
   return (
     <Wrapper>
       <GridWrap>
@@ -57,11 +72,7 @@ export default function Profile() {
             </Loader>
           )}
         </CardHead>
-        {chainId && chainId !== ChainId.MAINNET && (
-          <StyledNotificationBanner changeOnProp={account} isVisible level="info" canClose={false}>
-            Profile data is only available for mainnet. Please change the network to see it.
-          </StyledNotificationBanner>
-        )}
+        {renderNotificationMessages}
         <ChildWrapper>
           <Txt fs={16}>
             <strong>Your referral url</strong>