mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
Render only one ad banner container on home page (#3120)
This commit is contained in:
tom goriunov
+19
-14
@@ -9,23 +9,25 @@ NEXT_PUBLIC_APP_PORT=3000
|
||||
NEXT_PUBLIC_APP_ENV=development
|
||||
NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
|
||||
|
||||
# Clusters feature
|
||||
NEXT_PUBLIC_CLUSTERS_API_HOST=https://api.clusters.xyz
|
||||
NEXT_PUBLIC_CLUSTERS_CDN_URL=https://cdn.clusters.xyz
|
||||
|
||||
# Instance ENVs
|
||||
NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['talentprotocol', 'efp', 'webacy', 'deepdao', 'humanpassport', 'trustblock', 'smartmuv', 'blockscoutbadges', 'etherscore', 'bubblemaps', 'goplus', 'gitpoap', 'kwik', 'drops', 'humanode']
|
||||
NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={"id":"728471","width":"728","height":"90"}
|
||||
NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={"id":"728470","width":"320","height":"100"}
|
||||
NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
|
||||
NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY=true
|
||||
NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['talentprotocol','drops','blockscoutbadges','gitpoap','efp','etherscore','webacy','humanpassport','trustblock','smartmuv','bubblemaps','humanode','deepdao']
|
||||
NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/widgets/config.json
|
||||
NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
|
||||
NEXT_PUBLIC_API_BASE_PATH=/
|
||||
NEXT_PUBLIC_API_HOST=eth.blockscout.com
|
||||
NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
|
||||
NEXT_PUBLIC_BEACON_CHAIN_VALIDATOR_URL_TEMPLATE=https://beaconcha.in/validator/{pk}
|
||||
NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
|
||||
NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
|
||||
NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
|
||||
NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swapscout','icon':'swap','dappId':'swapscout'},{'text':'Revokescout','icon':'integration/partial','dappId':'revokescout'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]
|
||||
NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','url':'https://eth.blockscout.com/essential-dapps/swap?utm_source=defi-dropdown-&utm_medium=swap'},{'text':'Revoke','icon':'integration/partial','dappId':'revokescout'}, {'text': 'Multisend', 'icon': 'token', 'url': 'https://eth.blockscout.com/essential-dapps/multisend?utm_source=defi-dropdown-multisend&utm_medium=multisend'}]
|
||||
NEXT_PUBLIC_DEX_POOLS_ENABLED=true
|
||||
NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth.json
|
||||
NEXT_PUBLIC_FEATURED_NETWORKS_ALL_LINK=https://chains.blockscout.com/
|
||||
NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/eth-mainnet.json
|
||||
NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/sherblockHolmesBadge
|
||||
NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG={'name': 'Need gas?', 'url_template': 'https://www.gas.zip?utm_source=blockscout', 'logo': 'https://blockscout-content.s3.amazonaws.com/smolrefuel-logo-action-button.png'}
|
||||
@@ -37,26 +39,27 @@ NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
|
||||
NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
|
||||
NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
|
||||
NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Launch your own fully functioning blockchain explorer in minutes. <a href="https://deploy.blockscout.com/?utm_source=blockscout_ad">Deploy now</a></p>
|
||||
NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/0xdeval/b27a4aecaad513fa033e37430a4f9a47/raw/3a2fa70068ea27c3e6d58dc4cdbeb732968d62f3/revokescout-banner.html
|
||||
NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://eth.blockscout.com/apps/revokescout?chainId=1
|
||||
NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/0xdeval/1a7395339d20b603b9c1d0ee929f23dc/raw/55e2eebef3ba3ef064842d15555b59d5ba8cbcc7/badges-banner.html
|
||||
NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://badges.blockscout.com/badges-list?utm_source=blockscout-explorer&utm_medium=marketplace-banner
|
||||
NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
|
||||
NEXT_PUBLIC_MARKETPLACE_ENABLED=true
|
||||
# NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '1923', '42793', '59144'], 'fee': '0.004', 'integrator': 'blockscout'}, 'multisend': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '59144', '7000'], 'posthogKey': 'phc_7O4WGsecqqDO1PeaKayHAxUWN1PjheOmQCiDxEMcmkx', 'posthogHost': 'https://us.i.posthog.com'}}
|
||||
NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
|
||||
NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
|
||||
NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554'], 'fee': '0.004', 'integrator': 'blockscout'}, 'revoke': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554']}, 'multisend': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554']}}
|
||||
NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
|
||||
NEXT_PUBLIC_METASUITES_ENABLED=true
|
||||
# NEXT_PUBLIC_MIXPANEL_CONFIG_OVERRIDES={"record_sessions_percent": 0.5,"record_heatmap_data": true}
|
||||
NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'},{'name': 'zapper', 'url_template': 'https://zapper.xyz/account/{address}', 'logo': 'https://blockscout-content.s3.amazonaws.com/zapper-icon.png'}]
|
||||
NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
|
||||
NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/pools']
|
||||
NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
|
||||
NEXT_PUBLIC_NAVIGATION_PROMO_BANNER_CONFIG={"img_url": {"small": "https://blockscout-merits-images.s3.us-east-1.amazonaws.com/banners/sidemenu-banner-small.png", "large": "https://blockscout-merits-images.s3.us-east-1.amazonaws.com/banners/sidemenu-banner-big.png"}, "link_url": "https://www.blockscout.com/?utm_source=blockscout&utm_medium=side-menu-banner"}
|
||||
NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
|
||||
NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
|
||||
NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
|
||||
NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Moralis','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/moralis.png','baseUrl':'https://moralis.com/','paths':{'token':'/chain/ethereum/token/price'}},{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/eth/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Blockchair','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/blockchair.png','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'Sentio','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/sentio.png','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}}, {'title':'0xPPL','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/0xPPL.png','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}}, {'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}} ]
|
||||
NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Moralis','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/moralis.png','baseUrl':'https://explorer.moralis.com/','paths':{'token':'/chain/ethereum/token/price'}},{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/eth/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Blockchair','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/blockchair.png','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'Sentio','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/sentio.png','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}}, {'title':'0xPPL','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/0xPPL.png','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}}, {'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}},{'title':'BlobScan','logo':'https://raw.githubusercontent.com/Blobscan/blobscan/main/.github/assets/logo.svg','baseUrl':'https://blobscan.com','paths':{'blob':'/blob'}} ]
|
||||
NEXT_PUBLIC_NETWORK_ID=1
|
||||
NEXT_PUBLIC_NETWORK_NAME=Ethereum
|
||||
NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.eth.gateway.fm
|
||||
NEXT_PUBLIC_NETWORK_SHORT_NAME=Ethereum
|
||||
NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
|
||||
NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
|
||||
NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/eth.jpg
|
||||
@@ -68,8 +71,10 @@ NEXT_PUBLIC_SAVE_ON_GAS_ENABLED=true
|
||||
NEXT_PUBLIC_STATS_API_BASE_PATH=/stats-service
|
||||
NEXT_PUBLIC_STATS_API_HOST=https://eth.blockscout.com
|
||||
NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
|
||||
NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST=https://user-ops-indexer-eth-main.k8s-prod-1.blockscout.com
|
||||
NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS=['solidity','vyper','yul','geas']
|
||||
NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
|
||||
NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'},{'name':'Rarible','collection_url':'https://rarible.com/collection/{hash}/items','instance_url':'https://rarible.com/token/{hash}:{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/rarible.png'},{'name':'Blur','collection_url':'https://blur.io/eth/collection/{hash}','instance_url':'https://blur.io/eth/asset/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/blur.png'},{'name':'MagicEden','collection_url':'https://magiceden.io/collections/ethereum/{hash}','instance_url':'https://magiceden.io/item-details/ethereum/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/magiceden.png'}]
|
||||
NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://storage.googleapis.com/opensea-static/Logomark/Logomark-Blue.svg'},{'name':'Rarible','collection_url':'https://rarible.com/collection/{hash}/items','instance_url':'https://rarible.com/token/{hash}:{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/rarible.png'},{'name':'Blur','collection_url':'https://blur.io/eth/collection/{hash}','instance_url':'https://blur.io/eth/asset/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/blur.png'},{'name':'MagicEden','collection_url':'https://magiceden.io/collections/ethereum/{hash}','instance_url':'https://magiceden.io/item-details/ethereum/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/magiceden.png'}]
|
||||
NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED=true
|
||||
NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
|
||||
NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
|
||||
NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
|
||||
@@ -32,8 +32,8 @@ export function ad(): CspDev.DirectiveDescriptor {
|
||||
// adbutler
|
||||
'servedbyadbutler.com',
|
||||
`'sha256-${ Base64.stringify(sha256(connectAdbutler)) }'`,
|
||||
`'sha256-${ Base64.stringify(sha256(placeAd(undefined) ?? '')) }'`,
|
||||
`'sha256-${ Base64.stringify(sha256(placeAd('mobile') ?? '')) }'`,
|
||||
`'sha256-${ Base64.stringify(sha256(placeAd(false) ?? '')) }'`,
|
||||
`'sha256-${ Base64.stringify(sha256(placeAd(true) ?? '')) }'`,
|
||||
|
||||
// slise
|
||||
'*.slise.xyz',
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Box, Flex, Heading } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import config from 'configs/app';
|
||||
import useIsMobile from 'lib/hooks/useIsMobile';
|
||||
import RewardsButton from 'ui/rewards/RewardsButton';
|
||||
import AdBanner from 'ui/shared/ad/AdBanner';
|
||||
import SearchBar from 'ui/snippets/searchBar/SearchBarDesktop';
|
||||
@@ -17,6 +18,9 @@ const TEXT_COLOR_DEFAULT = 'white';
|
||||
const BORDER_DEFAULT = 'none';
|
||||
|
||||
const HeroBanner = () => {
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const background = {
|
||||
_light:
|
||||
config.UI.homepage.heroBanner?.background?.[0] ||
|
||||
@@ -88,7 +92,7 @@ const HeroBanner = () => {
|
||||
<SearchBar isHeroBanner/>
|
||||
</Box>
|
||||
</Box>
|
||||
<AdBanner platform="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden" display={{ base: 'none', lg: 'block ' }}/>
|
||||
{ !isMobile && <AdBanner format="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden"/> }
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
+3
-1
@@ -2,6 +2,7 @@ import { Box, Flex } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import config from 'configs/app';
|
||||
import useIsMobile from 'lib/hooks/useIsMobile';
|
||||
import HeroBanner from 'ui/home/HeroBanner';
|
||||
import ChainIndicators from 'ui/home/indicators/ChainIndicators';
|
||||
import LatestArbitrumL2Batches from 'ui/home/latestBatches/LatestArbitrumL2Batches';
|
||||
@@ -14,6 +15,7 @@ import AdBanner from 'ui/shared/ad/AdBanner';
|
||||
const rollupFeature = config.features.rollup;
|
||||
|
||||
const Home = () => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const leftWidget = (() => {
|
||||
if (rollupFeature.isEnabled && !rollupFeature.homepage.showLatestBlocks) {
|
||||
@@ -35,7 +37,7 @@ const Home = () => {
|
||||
<Stats/>
|
||||
<ChainIndicators/>
|
||||
</Flex>
|
||||
<AdBanner mt={ 6 } mx="auto" display={{ base: 'flex', lg: 'none' }} justifyContent="center"/>
|
||||
{ isMobile && <AdBanner mt={ 6 } mx="auto" justifyContent="center" format="mobile"/> }
|
||||
<Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 6 }>
|
||||
{ leftWidget }
|
||||
<Box flexGrow={ 1 }>
|
||||
|
||||
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
|
||||
|
||||
import config from 'configs/app';
|
||||
import { useRewardsContext } from 'lib/contexts/rewards';
|
||||
import useIsMobile from 'lib/hooks/useIsMobile';
|
||||
import { Alert } from 'toolkit/chakra/alert';
|
||||
import { Button } from 'toolkit/chakra/button';
|
||||
import { Link } from 'toolkit/chakra/link';
|
||||
@@ -25,6 +26,7 @@ const RewardsDashboard = () => {
|
||||
const { balancesQuery, apiToken, referralsQuery, rewardsConfigQuery, dailyRewardQuery, isInitialized } = useRewardsContext();
|
||||
const { nextAchievementText, isLoading: isBadgesLoading, badgesQuery } = useStreakBadges();
|
||||
const streakModal = useDisclosure();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const [ isError, setIsError ] = useState(false);
|
||||
|
||||
@@ -59,7 +61,7 @@ const RewardsDashboard = () => {
|
||||
) }
|
||||
mb={ 0 }
|
||||
/>
|
||||
<AdBanner platform="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden" display={{ base: 'none', lg: 'block ' }}/>
|
||||
{ !isMobile && <AdBanner format="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden"/> }
|
||||
</Flex>
|
||||
<Flex flexDirection="column" alignItems="flex-start" w="full" gap={ 6 }>
|
||||
{ isError && <Alert status="error">Failed to load some data. Please try again later.</Alert> }
|
||||
|
||||
@@ -28,7 +28,7 @@ const DetailedInfoSponsoredItem = ({ isLoading }: Props) => {
|
||||
Sponsored
|
||||
</DetailedInfo.ItemLabel>
|
||||
<DetailedInfo.ItemValue mt={{ base: 0, lg: 1 }}>
|
||||
<AdBanner isLoading={ isLoading }/>
|
||||
<AdBanner format="responsive" isLoading={ isLoading }/>
|
||||
</DetailedInfo.ItemValue>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { chakra } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import type { BannerPlatform } from './types';
|
||||
import type { BannerFormat } from './types';
|
||||
|
||||
import config from 'configs/app';
|
||||
import { useAppContext } from 'lib/contexts/app';
|
||||
@@ -14,10 +14,10 @@ const feature = config.features.adsBanner;
|
||||
interface Props {
|
||||
className?: string;
|
||||
isLoading?: boolean;
|
||||
platform?: BannerPlatform;
|
||||
format?: BannerFormat;
|
||||
}
|
||||
|
||||
const AdBanner = ({ className, isLoading, platform }: Props) => {
|
||||
const AdBanner = ({ className, isLoading, format }: Props) => {
|
||||
const provider = useAppContext().adBannerProvider;
|
||||
|
||||
const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
|
||||
@@ -31,7 +31,7 @@ const AdBanner = ({ className, isLoading, platform }: Props) => {
|
||||
className={ className }
|
||||
isLoading={ isLoading }
|
||||
provider={ provider }
|
||||
platform={ platform }
|
||||
format={ format }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { chakra } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import type { BannerPlatform } from './types';
|
||||
import type { BannerFormat } from './types';
|
||||
import type { AdBannerProviders } from 'types/client/adProviders';
|
||||
|
||||
import config from 'configs/app';
|
||||
@@ -21,11 +21,11 @@ const isSpecifyEnabled = feature.isEnabled && feature.isSpecifyEnabled;
|
||||
interface Props {
|
||||
className?: string;
|
||||
isLoading?: boolean;
|
||||
platform?: BannerPlatform;
|
||||
format?: BannerFormat;
|
||||
provider: AdBannerProviders;
|
||||
}
|
||||
|
||||
const AdBannerContent = ({ className, isLoading, provider, platform }: Props) => {
|
||||
const AdBannerContent = ({ className, isLoading, provider, format }: Props) => {
|
||||
const { address: addressWC, isConnecting } = useAccount();
|
||||
const profileQuery = useProfileQuery();
|
||||
const [ showSpecify, setShowSpecify ] = React.useState(isSpecifyEnabled);
|
||||
@@ -39,15 +39,15 @@ const AdBannerContent = ({ className, isLoading, provider, platform }: Props) =>
|
||||
const content = (() => {
|
||||
if (showSpecify) {
|
||||
const isLoading = address ? false : profileQuery.isLoading || isConnecting;
|
||||
return <SpecifyBanner platform={ platform } address={ address } onEmpty={ handleEmptySpecify } isLoading={ isLoading }/>;
|
||||
return <SpecifyBanner format={ format } address={ address } onEmpty={ handleEmptySpecify } isLoading={ isLoading }/>;
|
||||
}
|
||||
switch (provider) {
|
||||
case 'adbutler':
|
||||
return <AdbutlerBanner platform={ platform }/>;
|
||||
return <AdbutlerBanner format={ format }/>;
|
||||
case 'coinzilla':
|
||||
return <CoinzillaBanner platform={ platform }/>;
|
||||
return <CoinzillaBanner format={ format }/>;
|
||||
case 'slise':
|
||||
return <SliseBanner platform={ platform }/>;
|
||||
return <SliseBanner format={ format }/>;
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
@@ -19,29 +19,17 @@ import {
|
||||
|
||||
const feature = config.features.adsBanner;
|
||||
|
||||
const AdbutlerBanner = ({ className, platform }: BannerProps) => {
|
||||
const AdbutlerBanner = ({ className, format = 'responsive' }: BannerProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
const isMobileViewport = useIsMobile();
|
||||
const isMobile = platform === 'mobile' || isMobileViewport;
|
||||
|
||||
// On the home page there are two ad banners
|
||||
// - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
|
||||
// - another - a regular ad banner, should be hidden on desktop devices
|
||||
// The Adbutler provider doesn't work properly with 2 banners with the same id on the page
|
||||
// So we use this flag to skip ad initialization for the first home page banner on mobile devices
|
||||
// For all other pages this is not the case
|
||||
const isHidden = (isMobileViewport && platform === 'mobile');
|
||||
const isMobile = format === 'mobile' || (format === 'responsive' && isMobileViewport);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!('adButler' in feature)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isHidden) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isBrowser() && window.AdButler) {
|
||||
const abkw = window.abkw || '';
|
||||
if (!window.AdButler.ads) {
|
||||
@@ -67,28 +55,24 @@ const AdbutlerBanner = ({ className, platform }: BannerProps) => {
|
||||
);
|
||||
}, opt: { place: plc++, keywords: abkw, domain: 'servedbyadbutler.com', click: 'CLICK_MACRO_PLACEHOLDER' } });
|
||||
}
|
||||
}, [ router, isMobile, isHidden ]);
|
||||
}, [ router, isMobile ]);
|
||||
|
||||
if (!('adButler' in feature)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getElementId = (id: string) => id + (platform ? `_${ platform }` : '');
|
||||
const getElementId = (id: string) => id + (format ? `_${ format }` : '');
|
||||
|
||||
return (
|
||||
<Flex
|
||||
className={ className }
|
||||
id={ getElementId('adBanner') }
|
||||
h={ platform === 'mobile' ? `${ MOBILE_BANNER_HEIGHT }px` : `${ DESKTOP_BANNER_HEIGHT }px` }
|
||||
w={ platform === 'mobile' ? `${ MOBILE_BANNER_WIDTH }px` : `${ DESKTOP_BANNER_WIDTH }px` }
|
||||
h={ isMobile ? `${ MOBILE_BANNER_HEIGHT }px` : `${ DESKTOP_BANNER_HEIGHT }px` }
|
||||
w={ isMobile ? `${ MOBILE_BANNER_WIDTH }px` : `${ DESKTOP_BANNER_WIDTH }px` }
|
||||
>
|
||||
{ !isHidden && (
|
||||
<>
|
||||
<Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
|
||||
<Script strategy="lazyOnload" id="ad-butler-2">{ placeAd(platform) }</Script>
|
||||
<div id="ad-banner"></div>
|
||||
</>
|
||||
) }
|
||||
<Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
|
||||
<Script strategy="lazyOnload" id="ad-butler-2">{ placeAd(isMobile) }</Script>
|
||||
<div id="ad-banner"></div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,55 +14,39 @@ import {
|
||||
MOBILE_BANNER_HEIGHT,
|
||||
} from './consts';
|
||||
|
||||
const CoinzillaBanner = ({ className, platform }: BannerProps) => {
|
||||
const CoinzillaBanner = ({ className, format = 'responsive' }: BannerProps) => {
|
||||
const isInBrowser = isBrowser();
|
||||
const isMobileViewport = useIsMobile();
|
||||
|
||||
// On the home page there are two ad banners
|
||||
// - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
|
||||
// - another - a regular ad banner, should be hidden on desktop devices
|
||||
// The Coinzilla provider doesn't work properly with 2 banners with the same id on the page
|
||||
// So we use this flag to skip ad initialization for the first home page banner on mobile devices
|
||||
// For all other pages this is not the case
|
||||
const isHidden = (isMobileViewport && platform === 'mobile');
|
||||
const isMobile = format === 'mobile' || (format === 'responsive' && isMobileViewport);
|
||||
|
||||
const { width, height } = (() => {
|
||||
switch (platform) {
|
||||
case 'desktop':
|
||||
return { width: DESKTOP_BANNER_WIDTH, height: DESKTOP_BANNER_HEIGHT };
|
||||
case 'mobile':
|
||||
return { width: MOBILE_BANNER_WIDTH, height: MOBILE_BANNER_HEIGHT };
|
||||
default:
|
||||
return { width: undefined, height: undefined };
|
||||
if (isMobile) {
|
||||
return { width: MOBILE_BANNER_WIDTH, height: MOBILE_BANNER_HEIGHT };
|
||||
}
|
||||
|
||||
return { width: DESKTOP_BANNER_WIDTH, height: DESKTOP_BANNER_HEIGHT };
|
||||
})();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isInBrowser && !isHidden) {
|
||||
if (isInBrowser) {
|
||||
window.coinzilla_display = window.coinzilla_display || [];
|
||||
const cDisplayPreferences = {
|
||||
zone: '26660bf627543e46851',
|
||||
width: width ? String(width) : DESKTOP_BANNER_WIDTH.toString(),
|
||||
height: height ? String(height) : DESKTOP_BANNER_HEIGHT.toString(),
|
||||
width: width.toString(),
|
||||
height: height.toString(),
|
||||
};
|
||||
window.coinzilla_display.push(cDisplayPreferences);
|
||||
}
|
||||
}, [ isInBrowser, isHidden, platform, width, height ]);
|
||||
}, [ isInBrowser, width, height ]);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
className={ className }
|
||||
id={ 'adBanner' + (platform ? `_${ platform }` : '') }
|
||||
id={ 'adBanner' + (format ? `_${ format }` : '') }
|
||||
h={ height ? `${ height }px` : { base: `${ MOBILE_BANNER_HEIGHT }px`, lg: `${ DESKTOP_BANNER_HEIGHT }px` } }
|
||||
w={ width ? `${ width }px` : undefined }
|
||||
>
|
||||
{ !isHidden && (
|
||||
<>
|
||||
<Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
|
||||
<div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
|
||||
</>
|
||||
) }
|
||||
<Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
|
||||
<div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -13,9 +13,9 @@ import {
|
||||
MOBILE_BANNER_WIDTH,
|
||||
} from './consts';
|
||||
|
||||
const SliseBanner = ({ className, platform }: BannerProps) => {
|
||||
const SliseBanner = ({ className, format = 'responsive' }: BannerProps) => {
|
||||
|
||||
if (platform === 'desktop') {
|
||||
if (format === 'desktop') {
|
||||
return (
|
||||
<Flex className={ className } h={ `${ DESKTOP_BANNER_HEIGHT }px` }>
|
||||
<SliseAd
|
||||
@@ -27,7 +27,7 @@ const SliseBanner = ({ className, platform }: BannerProps) => {
|
||||
);
|
||||
}
|
||||
|
||||
if (platform === 'mobile') {
|
||||
if (format === 'mobile') {
|
||||
return (
|
||||
<Flex
|
||||
className={ className }
|
||||
|
||||
@@ -23,9 +23,9 @@ type Props = BannerProps & {
|
||||
isLoading: boolean;
|
||||
};
|
||||
|
||||
const SpecifyBanner = ({ className, platform, address, onEmpty, isLoading }: Props) => {
|
||||
const SpecifyBanner = ({ className, format = 'responsive', address, onEmpty, isLoading }: Props) => {
|
||||
const isMobileViewport = useIsMobile();
|
||||
const isMobile = platform === 'mobile' || isMobileViewport;
|
||||
const isMobile = format === 'mobile' || (format === 'responsive' && isMobileViewport);
|
||||
const [ ad, setAd ] = React.useState<SpecifyAd | null>(null);
|
||||
const [ isFetching, setIsFetching ] = React.useState(true);
|
||||
|
||||
@@ -62,15 +62,10 @@ const SpecifyBanner = ({ className, platform, address, onEmpty, isLoading }: Pro
|
||||
}, [ ad?.ctaUrl ]);
|
||||
|
||||
const { width, height } = (() => {
|
||||
switch (platform) {
|
||||
case 'desktop':
|
||||
return { width: DESKTOP_BANNER_WIDTH, height: DESKTOP_BANNER_HEIGHT };
|
||||
case 'mobile':
|
||||
return { width: MOBILE_BANNER_WIDTH, height: MOBILE_BANNER_HEIGHT };
|
||||
default:
|
||||
return { width: undefined, height: undefined };
|
||||
if (isMobile) {
|
||||
return { width: MOBILE_BANNER_WIDTH, height: MOBILE_BANNER_HEIGHT };
|
||||
}
|
||||
|
||||
return { width: DESKTOP_BANNER_WIDTH, height: DESKTOP_BANNER_HEIGHT };
|
||||
})();
|
||||
|
||||
if (isLoading || isFetching) {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
/* eslint-disable max-len */
|
||||
import type { BannerPlatform } from './types';
|
||||
|
||||
import config from 'configs/app';
|
||||
|
||||
@@ -7,14 +6,14 @@ export const ADBUTLER_ACCOUNT = 182226;
|
||||
|
||||
export const connectAdbutler = `if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}`;
|
||||
|
||||
export const placeAd = ((platform: BannerPlatform | undefined) => {
|
||||
export const placeAd = ((isMobile: boolean | undefined) => {
|
||||
const feature = config.features.adsBanner;
|
||||
|
||||
if (!('adButler' in feature)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (platform === 'mobile') {
|
||||
if (isMobile) {
|
||||
return `
|
||||
var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
|
||||
var abkw = window.abkw || '';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export type BannerPlatform = 'mobile' | 'desktop';
|
||||
export type BannerFormat = 'mobile' | 'desktop' | 'responsive';
|
||||
|
||||
export interface BannerProps {
|
||||
className?: string;
|
||||
platform?: BannerPlatform;
|
||||
format?: BannerFormat;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user