mirror of
https://github.com/hanzonet/explore.git
synced 2026-10-30 18:16:57 +00:00
tom goriunovandGitHub
18b419ef34
* change hero section * add AdBanner to hero block * show icon instead of text on "connect wallet" button on md desktops * redesign stats widgets * new design for home page charts * fix skeletons * update demo values * disable getit provider * fixes for adbutler provider * show token logo placeholder for secondary coin logo * add width to hype banner * update demo values * remove letter spacing for large headings * indicators block fixes * update icons * update screenshots
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { Flex, chakra } from '@chakra-ui/react';
|
|
import { Banner, setWalletAddresses } from '@hypelab/sdk-react';
|
|
import Script from 'next/script';
|
|
import React from 'react';
|
|
|
|
import type { BannerProps } from './types';
|
|
|
|
import useAccount from 'lib/web3/useAccount';
|
|
|
|
import { hypeInit } from './hypeBannerScript';
|
|
|
|
const DESKTOP_BANNER_SLUG = 'b1559fc3e7';
|
|
const MOBILE_BANNER_SLUG = '668ed80a9e';
|
|
|
|
const HypeBanner = ({ className, platform }: BannerProps) => {
|
|
const { address } = useAccount();
|
|
|
|
React.useEffect(() => {
|
|
if (address) {
|
|
setWalletAddresses([ address ]);
|
|
}
|
|
}, [ address ]);
|
|
|
|
const banner = (() => {
|
|
switch (platform) {
|
|
case 'desktop': {
|
|
return (
|
|
<Flex className={ className } w="728px" h="90px">
|
|
<Banner placement={ DESKTOP_BANNER_SLUG }/>
|
|
</Flex>
|
|
);
|
|
}
|
|
case 'mobile': {
|
|
return (
|
|
<Flex className={ className } w="320px" h="50px">
|
|
<Banner placement={ MOBILE_BANNER_SLUG }/>
|
|
</Flex>
|
|
);
|
|
}
|
|
default: {
|
|
return (
|
|
<>
|
|
<Flex className={ className } w="728px" h="90px" display={{ base: 'none', lg: 'flex' }}>
|
|
<Banner placement={ DESKTOP_BANNER_SLUG }/>
|
|
</Flex>
|
|
<Flex className={ className } w="320px" h="50px" display={{ base: 'flex', lg: 'none' }}>
|
|
<Banner placement={ MOBILE_BANNER_SLUG }/>
|
|
</Flex>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
})();
|
|
|
|
return (
|
|
<>
|
|
<Script
|
|
id="hypelab"
|
|
strategy="afterInteractive"
|
|
>
|
|
{ hypeInit }
|
|
</Script>
|
|
{ banner }
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default chakra(HypeBanner);
|