Adding errorState in useFetchProfile (#1745)

* Adding errorState in useFetchProfile

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,
 }
 

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 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>