diff --git a/src/components/TokenImg.tsx b/src/components/TokenImg.tsx index 325f45956..1a59b9787 100644 --- a/src/components/TokenImg.tsx +++ b/src/components/TokenImg.tsx @@ -21,16 +21,18 @@ const MissingTokenSymbol = styled.span<{ size?: number }>` ` interface BaseProps { - token: Currency + // TODO(1533): Include logoURI as an optional property of Currency. + token: Currency & { logoURI?: string } size?: number } type TokenImgProps = BaseProps & Omit, keyof BaseProps> function TokenImg({ token, size, ...rest }: TokenImgProps) { - // Use the wrapped token info so that it includes the logoURI. + // Use the wrapped token info so that it includes the logoURI... const currency = useToken(token.isToken ? token.wrapped.address : undefined) ?? token - const srcs = useCurrencyLogoURIs(currency) + // ..but use the token directly if logoURI was included in its specification. + const srcs = useCurrencyLogoURIs(token?.logoURI ? token : currency) const alt = currency.name || currency.symbol const [attempt, setAttempt] = useState(0) diff --git a/src/hooks/useCurrencyLogoURIs.ts b/src/hooks/useCurrencyLogoURIs.ts index 30e4db4ce..4b7e78f55 100644 --- a/src/hooks/useCurrencyLogoURIs.ts +++ b/src/hooks/useCurrencyLogoURIs.ts @@ -38,10 +38,8 @@ function getTokenLogoURI(address: string, chainId: SupportedChainId = SupportedC } } -export default function useCurrencyLogoURIs(currency?: Currency | null): string[] { - const locations = useHttpLocations( - currency && 'logoURI' in currency ? (currency as { logoURI: string }).logoURI : undefined - ) +export default function useCurrencyLogoURIs(currency?: (Currency & { logoURI?: string }) | null): string[] { + const locations = useHttpLocations(currency?.logoURI) return useMemo(() => { const logoURIs = [...locations] if (currency) {