fix: handled undefined circleLogoUrl and failed fetchQuery (#4916)

* fix: handled circleLogoUrl undefined.

* fix: catch error and return empty data.

* fix: added optional chaining for circleLogoUrl in TokenRow file.

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -82,7 +82,7 @@ export default function ChartSection({
   const isFavorited = useIsFavorited(token.address)
   const toggleFavorite = useToggleFavorite(token.address)
   const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
-  const L2Icon = getChainInfo(chainId).circleLogoUrl
+  const L2Icon = getChainInfo(chainId)?.circleLogoUrl
   const warning = checkWarning(token.address ?? '')
   const timePeriod = useAtomValue(filterTimeAtom)
 

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -483,7 +483,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
 
   const lowercaseChainName = useParams<{ chainName?: string }>().chainName?.toUpperCase() ?? 'ethereum'
   const filterNetwork = lowercaseChainName.toUpperCase()
-  const L2Icon = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[filterNetwork]).circleLogoUrl
+  const L2Icon = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[filterNetwork])?.circleLogoUrl
   const timePeriod = useAtomValue(filterTimeAtom)
   const delta = token.market?.pricePercentChange?.value
   const arrow = getDeltaArrow(delta)

src/graphql/data/fetchGraphQL.ts

@@ -16,7 +16,12 @@ const fetchQuery = (params: RequestParameters, variables: Variables): Promise<Gr
     variables,
   })
 
-  return fetch(URL, { method: 'POST', body, headers }).then((res) => res.json())
+  return fetch(URL, { method: 'POST', body, headers })
+    .then((res) => res.json())
+    .catch((e) => {
+      console.error(e)
+      return { data: [] }
+    })
 }
 
 export default fetchQuery