fix: render invalid address warnings on token details (#5260)

* initial commit
* polishing loading state
* small refactors
* polished on chain token network switching
* fixed commited merge conflict
* small refactor
* fixed merge conflicts
* PR comments and refactors
* fix unintented trace property change
* second round of comments

src/assets/svg/eye.svg

+<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3335 19.9997C1.3335 19.9997 10.6668 1.33301 27.0002 1.33301C43.3335 1.33301 52.6668 19.9997 52.6668 19.9997C52.6668 19.9997 43.3335 38.6663 27.0002 38.6663C10.6668 38.6663 1.3335 19.9997 1.3335 19.9997Z" stroke="#98A1C0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.0002 26.9997C30.8662 26.9997 34.0002 23.8657 34.0002 19.9997C34.0002 16.1337 30.8662 12.9997 27.0002 12.9997C23.1342 12.9997 20.0002 16.1337 20.0002 19.9997C20.0002 23.8657 23.1342 26.9997 27.0002 26.9997Z" stroke="#98A1C0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx

+import { Trans } from '@lingui/macro'
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+import { ReactComponent as EyeIcon } from '../../../assets/svg/eye.svg'
+
+const InvalidDetailsContainer = styled.div`
+  padding-top: 128px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const InvalidDetailsText = styled.span`
+  margin-top: 28px;
+  margin-bottom: 20px;
+
+  text-align: center;
+
+  color: ${({ theme }) => theme.textSecondary};
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+`
+
+const TokenExploreButton = styled.button`
+  border: none;
+  border-radius: 12px;
+  background-color: ${({ theme }) => theme.accentAction};
+  padding: 12px 16px;
+
+  color: ${({ theme }) => theme.textPrimary};
+  font-size: 16px;
+  font-weight: 600;
+`
+
+export default function InvalidTokenDetails({ chainName }: { chainName?: string }) {
+  const navigate = useNavigate()
+  return (
+    <InvalidDetailsContainer>
+      <EyeIcon />
+      <InvalidDetailsText>
+        {chainName ? (
+          <Trans>{`This token doesn't exist on ${chainName}`}</Trans>
+        ) : (
+          <Trans>This token doesn&apos;t exist</Trans>
+        )}
+      </InvalidDetailsText>
+      <TokenExploreButton onClick={() => navigate('/tokens')}>
+        <Trans>Explore tokens</Trans>
+      </TokenExploreButton>
+    </InvalidDetailsContainer>
+  )
+}

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -114,9 +114,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp
 
   // set display price to ending price when prices have changed.
   useEffect(() => {
-    if (prices) {
     setDisplayPrice(endingPrice)
-    }
   }, [prices, endingPrice])
   const [crosshair, setCrosshair] = useState<number | null>(null)
 

src/graphql/data/Token.ts

@@ -48,8 +48,8 @@ export const tokenQuery = graphql`
         twitterName
         logoUrl
         tokens {
-          chain
-          address
+          chain @required(action: LOG)
+          address @required(action: LOG)
         }
       }
     }

src/lib/hooks/useCurrency.ts

@@ -25,6 +25,9 @@ function parseStringOrBytes32(str: string | undefined, bytes32: string | undefin
     : defaultValue
 }
 
+export const UNKNOWN_TOKEN_SYMBOL = 'UNKNOWN'
+export const UNKNOWN_TOKEN_NAME = 'Unknown Token'
+
 /**
  * Returns a Token from the tokenAddress.
  * Returns null if token is loading or null was passed.
@@ -51,11 +54,11 @@ export function useTokenFromActiveNetwork(tokenAddress: string | undefined): Tok
   const parsedDecimals = useMemo(() => decimals?.result?.[0] ?? DEFAULT_ERC20_DECIMALS, [decimals.result])
 
   const parsedSymbol = useMemo(
-    () => parseStringOrBytes32(symbol.result?.[0], symbolBytes32.result?.[0], 'UNKNOWN'),
+    () => parseStringOrBytes32(symbol.result?.[0], symbolBytes32.result?.[0], UNKNOWN_TOKEN_SYMBOL),
     [symbol.result, symbolBytes32.result]
   )
   const parsedName = useMemo(
-    () => parseStringOrBytes32(tokenName.result?.[0], tokenNameBytes32.result?.[0], 'Unknown Token'),
+    () => parseStringOrBytes32(tokenName.result?.[0], tokenNameBytes32.result?.[0], UNKNOWN_TOKEN_NAME),
     [tokenName.result, tokenNameBytes32.result]
   )
 

src/pages/TokenDetails/index.tsx

@@ -46,7 +46,7 @@ export default function TokenDetailsPage() {
   return (
     <Suspense fallback={<TokenDetailsPageSkeleton />}>
       <TokenDetails
-        tokenAddress={tokenAddress}
+        urlAddress={tokenAddress}
         chain={chain}
         tokenQueryReference={tokenQueryReference}
         priceQueryReference={priceQueryReference}