restore misplacing changes

gnosis · Nov 3, 2021 · 48e336c · 48e336c
1 parent bd9fe2e
commit 48e336c
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 35 deletions.
diff --git a/src/custom/hooks/useFetchProfile.ts b/src/custom/hooks/useFetchProfile.ts
@@ -3,22 +3,50 @@ import { useEffect, useState } from 'react'
 import { getProfileData } from 'api/gnosisProtocol'
 import { ProfileData } from 'api/gnosisProtocol/api'
 
-export default function useFetchProfile() {
+type FetchProfileState = {
+  profileData: ProfileData | null
+  error: string
+  isLoading: boolean
+}
+
+const emptyState: FetchProfileState = {
+  profileData: null,
+  error: '',
+  isLoading: false,
+}
+
+const FETCH_INTERVAL_IN_MINUTES = 5
+
+export default function useFetchProfile(): FetchProfileState {
   const { account, chainId } = useActiveWeb3React()
-  const [profileData, setProfileData] = useState<ProfileData | null>(null)
+  const [profile, setProfile] = useState<FetchProfileState>(emptyState)
 
   useEffect(() => {
+    setProfile({ ...emptyState, isLoading: true })
     async function fetchAndSetProfileData() {
-      if (chainId && account) {
+      if (!chainId || !account) {
+        setProfile((prevState: FetchProfileState) => {
+          return { ...prevState, isLoading: false }
+        })
+        return
+      }
+
+      try {
         const profileData = await getProfileData(chainId, account)
-        setProfileData(profileData)
-      } else {
-        setProfileData(null)
+        setProfile((prevState: FetchProfileState) => {
+          return { ...prevState, isLoading: false, profileData }
+        })
+      } catch (e) {
+        setProfile((prevState: FetchProfileState) => {
+          return { ...prevState, isLoading: false, error: 'Error getting profileData' }
+        })
       }
     }
 
-    fetchAndSetProfileData()
+    const intervalId = setInterval(fetchAndSetProfileData, FETCH_INTERVAL_IN_MINUTES * 60_000)
+
+    return () => clearInterval(intervalId)
   }, [account, chainId])
 
-  return profileData
+  return profile
 }
diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
@@ -1,3 +1,4 @@
+import styled, { css } from 'styled-components/macro'
 import { Txt } from 'assets/styles/styled'
 import {
   FlexCol,
@@ -24,41 +25,56 @@ import { SupportedChainId as ChainId } from 'constants/chains'
 
 export default function Profile() {
   const referralLink = useReferralLink()
+  const { profileData, isLoading, error } = useFetchProfile()
   const { account, chainId } = useActiveWeb3React()
-  const profileData = useFetchProfile()
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
 
+  const renderNotificationMessages = () => {
+    return (
+      <>
+        {error && (
+          <NotificationBanner isVisible level="error" canClose={false}>
+            There was an error loading your profile data. Please try again later.
+          </NotificationBanner>
+        )}
+        {chainId && chainId !== ChainId.MAINNET && (
+          <NotificationBanner isVisible level="info" canClose={false}>
+            Profile data is only available for mainnet. Please change the network to see it.
+          </NotificationBanner>
+        )}
+      </>
+    )
+  }
+
   return (
     <Wrapper>
       <GridWrap>
         <CardHead>
           <StyledTitle>Profile overview</StyledTitle>
           {account && (
-            <Txt>
-              <RefreshCcw size={16} />
-              &nbsp;&nbsp;
-              <Txt secondary>
-                Last updated
-                <MouseoverTooltipContent content="Data is updated on the background periodically.">
-                  <HelpCircle size={14} />
-                </MouseoverTooltipContent>
-                :&nbsp;
+            <Loader isLoading={isLoading}>
+              <Txt>
+                <RefreshCcw size={16} />
+                &nbsp;&nbsp;
+                <Txt secondary>
+                  Last updated
+                  <MouseoverTooltipContent content="Data is updated on the background periodically.">
+                    <HelpCircle size={14} />
+                  </MouseoverTooltipContent>
+                  :&nbsp;
+                </Txt>
+                {!lastUpdated ? (
+                  '-'
+                ) : (
+                  <MouseoverTooltipContent content={<TimeFormatted date={profileData?.lastUpdated} />}>
+                    <strong>{lastUpdated}</strong>
+                  </MouseoverTooltipContent>
+                )}
               </Txt>
-              {!lastUpdated ? (
-                '-'
-              ) : (
-                <MouseoverTooltipContent content={<TimeFormatted date={profileData?.lastUpdated} />}>
-                  <strong>{lastUpdated}</strong>
-                </MouseoverTooltipContent>
-              )}
-            </Txt>
+            </Loader>
           )}
         </CardHead>
-        {chainId && chainId !== ChainId.MAINNET && (
-          <NotificationBanner isVisible level="info" canClose={false}>
-            Profile data is only available for mainnet. Please change the network to see it.
-          </NotificationBanner>
-        )}
+        {renderNotificationMessages()}
         <ChildWrapper>
           <Txt fs={16}>
             <strong>Your referral url</strong>
@@ -93,14 +109,18 @@ export default function Profile() {
                   🧑‍🌾
                 </span>
                 <strong>{formatInt(profileData?.totalTrades)}</strong>
-                <span>Total trades</span>
+                <Loader isLoading={isLoading}>
+                  <span>Total trades</span>
+                </Loader>
               </FlexCol>
               <FlexCol>
                 <span role="img" aria-label="moneybag">
                   💰
                 </span>
                 <strong>{formatDecimal(profileData?.tradeVolumeUsd)}</strong>
-                <span>Total traded volume</span>
+                <Loader isLoading={isLoading}>
+                  <span>Total traded volume</span>
+                </Loader>
               </FlexCol>
             </FlexWrap>
           </ChildWrapper>
@@ -117,14 +137,18 @@ export default function Profile() {
                   🤝
                 </span>
                 <strong>{formatInt(profileData?.totalReferrals)}</strong>
-                <span>Total referrals</span>
+                <Loader isLoading={isLoading}>
+                  <span>Total referrals</span>
+                </Loader>
               </FlexCol>
               <FlexCol>
                 <span role="img" aria-label="wingedmoney">
                   💸
                 </span>
                 <strong>{formatDecimal(profileData?.referralVolumeUsd)}</strong>
-                <span>Referrals volume</span>
+                <Loader isLoading={isLoading}>
+                  <span>Referrals volume</span>
+                </Loader>
               </FlexCol>
             </FlexWrap>
           </ChildWrapper>
@@ -174,3 +198,37 @@ const formatDecimal = (number?: number): string => {
 const formatInt = (number?: number): string => {
   return number ? number.toLocaleString() : '-'
 }
+
+const Loader = styled.div<{ isLoading: boolean }>`
+  ${({ theme, isLoading }) =>
+    isLoading &&
+    css`
+      position: relative;
+      display: inline-block;
+
+      overflow: hidden;
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-100%);
+        background-image: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0) 0,
+          ${theme.shimmer1} 20%,
+          ${theme.shimmer2} 60%,
+          rgba(255, 255, 255, 0)
+        );
+        animation: shimmer 2s infinite;
+        content: '';
+      }
+
+      @keyframes shimmer {
+        100% {
+          transform: translateX(100%);
+        }
+      }
+    `}
+`