|
| 1 | +import { chakra } from '@chakra-ui/react'; |
| 2 | +import type { SpecifyAd } from '@specify-sh/sdk'; |
| 3 | +import Specify, { ImageFormat } from '@specify-sh/sdk'; |
| 4 | +import React from 'react'; |
| 5 | + |
| 6 | +import type { BannerProps } from './types'; |
| 7 | + |
| 8 | +import useIsMobile from 'lib/hooks/useIsMobile'; |
| 9 | +import { Image } from 'toolkit/chakra/image'; |
| 10 | + |
| 11 | +const PUBLISHER_KEY = 'spk_1dqfv5mkgwpwl58zcaziklpurezud8'; |
| 12 | + |
| 13 | +const SpecifyBanner = ({ className, platform, address, onEmpty }: BannerProps & { address: string; onEmpty: () => void }) => { |
| 14 | + const isMobileViewport = useIsMobile(); |
| 15 | + const isMobile = platform === 'mobile' || isMobileViewport; |
| 16 | + const [ ad, setAd ] = React.useState<SpecifyAd | null>(null); |
| 17 | + React.useEffect(() => { |
| 18 | + const fetchContent = async() => { |
| 19 | + try { |
| 20 | + const specify = new Specify({ |
| 21 | + publisherKey: PUBLISHER_KEY, |
| 22 | + }); |
| 23 | + const content = await specify.serve( |
| 24 | + [ address as `0x${ string }` ], |
| 25 | + { imageFormat: isMobile ? ImageFormat.SHORT_BANNER : ImageFormat.LONG_BANNER }, |
| 26 | + ); |
| 27 | + if (content?.imageUrl) { |
| 28 | + setAd(content); |
| 29 | + } else { |
| 30 | + onEmpty(); |
| 31 | + } |
| 32 | + } catch (error) { |
| 33 | + onEmpty(); |
| 34 | + } |
| 35 | + }; |
| 36 | + |
| 37 | + fetchContent(); |
| 38 | + }, [ address, isMobile, onEmpty ]); |
| 39 | + |
| 40 | + const handleClick = React.useCallback(() => { |
| 41 | + window.open(ad?.ctaUrl, '_blank'); |
| 42 | + }, [ ad?.ctaUrl ]); |
| 43 | + |
| 44 | + if (!ad) return null; |
| 45 | + |
| 46 | + return ( |
| 47 | + <Image |
| 48 | + src={ ad.imageUrl } |
| 49 | + alt={ ad.headline } |
| 50 | + cursor="pointer" |
| 51 | + onClick={ handleClick } |
| 52 | + className={ className } |
| 53 | + /> |
| 54 | + ); |
| 55 | +}; |
| 56 | + |
| 57 | +export default chakra(SpecifyBanner); |
0 commit comments