diff --git a/components/shared/LogoWithFallback.tsx b/components/shared/LogoWithFallback.tsx new file mode 100644 index 00000000..83e88c5f --- /dev/null +++ b/components/shared/LogoWithFallback.tsx @@ -0,0 +1,40 @@ +import Image from 'next/image' +import { ReactElement, useEffect, useState } from 'react' + +const LogoWithFallback = ({ + fallback, + alt, + src, + ...props +}: { + fallback: ReactElement + alt: string + src: string + [x: string]: string | boolean | ReactElement +}) => { + const [error, setError] = useState(false) + + useEffect(() => { + setError(false) + }, [src]) + + return ( + <> + {!error ? ( + {alt} { + console.error('error', e) + setError(true) + }} + src={src} + {...props} + /> + ) : ( + fallback + )} + + ) +} + +export default LogoWithFallback diff --git a/components/trade/MarketLogos.tsx b/components/trade/MarketLogos.tsx index 2479fe51..0e0362b1 100644 --- a/components/trade/MarketLogos.tsx +++ b/components/trade/MarketLogos.tsx @@ -4,6 +4,7 @@ import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid' import Image from 'next/legacy/image' import { useMemo } from 'react' import useMangoGroup from 'hooks/useMangoGroup' +import LogoWithFallback from '@components/shared/LogoWithFallback' const MarketLogos = ({ market, @@ -40,6 +41,7 @@ const MarketLogos = ({ return { baseLogoURI, quoteLogoURI, + name: market.name.split(/-|\//)[0], } }, [group, mangoTokens, market]) @@ -56,19 +58,14 @@ const MarketLogos = ({ }`} >
- {logos.baseLogoURI ? ( - - ) : ( - - )} +
} + />
{logos.quoteLogoURI && market instanceof Serum3Market ? ( diff --git a/public/icons/logo.png b/public/logos/logo.png similarity index 100% rename from public/icons/logo.png rename to public/logos/logo.png diff --git a/public/icons/logo.svg b/public/logos/logo.svg similarity index 100% rename from public/icons/logo.svg rename to public/logos/logo.svg