Adding errorState in useFetchProfile

src/custom/api/gnosisProtocol/api.ts

@@ -321,6 +321,11 @@ export type ProfileData = {
 
 export async function getProfileData(chainId: ChainId, address: string): Promise<ProfileData | null> {
   console.log(`[api:${API_NAME}] Get profile data for`, chainId, address)
+  return new Promise(function (_resolve, reject) {
+    setTimeout(() => {
+      return reject(new Error('setTimeout Error'))
+    }, 1500)
+  })
   try {
     if (chainId !== ChainId.MAINNET) {
       console.info('Profile data is only available for mainnet')

src/custom/hooks/useFetchProfile.ts

@@ -6,19 +6,26 @@ import { ProfileData } from 'api/gnosisProtocol/api'
 export default function useFetchProfile() {
   const { account, chainId } = useActiveWeb3React()
   const [profileData, setProfileData] = useState<ProfileData | null>(null)
+  const [error, setError] = useState('')
 
   useEffect(() => {
     async function fetchAndSetProfileData() {
-      if (chainId && account) {
+      if (!chainId || !account) {
+        return
+      }
+
+      try {
         const profileData = await getProfileData(chainId, account)
         setProfileData(profileData)
-      } else {
-        setProfileData(null)
+      } catch (e) {
+        setError('Error getting profileData')
       }
     }
 
+    setError('')
+    setProfileData(null)
     fetchAndSetProfileData()
   }, [account, chainId])
 
-  return profileData
+  return { profileData, error }
 }

src/custom/pages/Profile/index.tsx

@@ -19,13 +19,26 @@ import useFetchProfile from 'hooks/useFetchProfile'
 import { numberFormatter } from 'utils/format'
 import useTimeAgo from 'hooks/useTimeAgo'
 import { MouseoverTooltipContent } from 'components/Tooltip'
+import NotificationBanner from '@src/custom/components/NotificationBanner'
 
 export default function Profile() {
   const referralLink = useReferralLink()
   const { account } = useActiveWeb3React()
-  const profileData = useFetchProfile()
+  const { profileData, error } = useFetchProfile()
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
 
+  const renderNotificationMessages = () => {
+    return (
+      <>
+        {error && (
+          <NotificationBanner isVisible level="error">
+            There was an error loading your profile data. Please try again.
+          </NotificationBanner>
+        )}
+      </>
+    )
+  }
+
   return (
     <Wrapper>
       <GridWrap>
@@ -52,6 +65,7 @@ export default function Profile() {
             </Txt>
           )}
         </CardHead>
+        {renderNotificationMessages()}
         <ChildWrapper>
           <Txt fs={16}>
             <strong>Your referral url</strong>