dex-guru · NemeZZiZZ · Mar 8, 2024
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.43.9",
+    "react-script-hook": "^1.7.2",
     "react-syntax-highlighter": "15.5.0",
     "react-tooltip": "5.21.3",
     "react-transition-group": "^4.4.5",

diff --git a/src/components/Ad/Ad.module.scss b/src/components/Ad/Ad.module.scss
@@ -1,7 +1,9 @@
 .container {
   height: 90px;
+  width: 728px;
+  margin: 0 auto;
 
-  iframe {
-    margin: 0 auto;
+  @media (max-width: 760px) {
+    display: none;
   }
 }
diff --git a/src/components/Ad/Ad.tsx b/src/components/Ad/Ad.tsx
@@ -1,48 +1,45 @@
-import { FC } from 'react'
+'use client'
 
-import { SliseAd } from '@slise/embed-react'
-import { useDimensionsRef } from 'rooks'
+import { FC, useCallback, useEffect, useRef } from 'react'
 
-import { ChainConfigModel } from '@/__generated__/resolvers-types'
-import { checkChainFeature } from '@/lib/utils'
+import useScript from 'react-script-hook'
 
 import styles from './Ad.module.scss'
 
-const Ad: FC<{ chainConfig: ChainConfigModel }> = ({ chainConfig }) => {
-  const [ref, dimensions] = useDimensionsRef({ updateOnScroll: false })
-
-  if (checkChainFeature(chainConfig, 'no_ads')) {
-    return null
-  }
-
-  const isMobile = (dimensions?.width || 0) < 728
-
-  const content = !!dimensions ? (
-    <>
-      {!isMobile && (
-        <SliseAd
-          slotId="leaderboard"
-          pub="pub-23"
-          format="728x90"
-          style={{ width: '728px', height: '90px' }}
-        />
-      )}
-      {isMobile && (
-        <SliseAd
-          slotId="mobile"
-          pub="pub-23"
-          format="270x90"
-          style={{ width: '270px', height: '90px' }}
-        />
-      )}
-    </>
-  ) : null
-
-  return (
-    <div className={styles.container} ref={ref}>
-      {content}
-    </div>
-  )
+export type SevioAdProps = {
+  zone: string
+  adType: string
+  inventoryId: string
+  accountId: string
+
+  style?: React.CSSProperties
+  __overrideSevioHost?: string
+}
+
+export const Ad: FC = () => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const zone = '7aecae46-d352-4bab-8fa2-aaf53481cdd7'
+  const adType = 'banner'
+  const inventoryId = '2b61ac91-467e-4230-ae17-91acd647a900'
+  const accountId = '012bff72-4fdf-4622-8741-9ddfbdc582fe'
+
+  const addSlot = useCallback(() => {
+    const wnd = window as Window & typeof globalThis & { sevioads: [[SevioAdProps]] }
+    wnd.sevioads = (wnd.sevioads || []) as [[SevioAdProps]]
+    wnd.sevioads.push([{ zone, adType, inventoryId, accountId }])
+  }, [accountId, adType, inventoryId, zone])
+
+  const [loading, error] = useScript({
+    src: 'https://cdn.adx.ws/scripts/loader.js',
+    checkForExisting: true,
+    async: true,
+  })
+
+  useEffect(() => {
+    !loading && !error && ref?.current && addSlot()
+  }, [addSlot, loading, error])
+
+  return <div className={styles.container} data-zone={zone} ref={ref} />
 }
 
 export default Ad
diff --git a/src/components/Ad/index.ts b/src/components/Ad/index.ts
@@ -1,5 +1,3 @@
-import dynamic from 'next/dynamic'
-
-const Ad = dynamic(() => import('./Ad'), { ssr: false })
+import Ad from './Ad'
 
 export default Ad
diff --git a/src/components/AddressView/AddressView.tsx b/src/components/AddressView/AddressView.tsx
@@ -141,7 +141,7 @@ const AddressView: FC<IAddressViewProps> = ({
               ]}
             />
 
-            <Ad chainConfig={chain.config} />
+            <Ad />
 
             <TabPanel
               tabs={[

diff --git a/src/components/ContractView/ContractView.tsx b/src/components/ContractView/ContractView.tsx
@@ -422,7 +422,7 @@ const ContractView: FC<IContractViewProps> = ({
             />
           </Grid>
 
-          <Ad chainConfig={chain.config} />
+          <Ad />
 
           <TabPanel
             tabs={[

diff --git a/src/pages/api/sevio.tsx b/src/pages/api/sevio.tsx
@@ -0,0 +1,25 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+const handler = (req: NextApiRequest, res: NextApiResponse) => {
+  res.status(200).send(`
+      <html>
+        <body>
+          <style>html,body {margin:0; padding:0; background:transparent; text-align:center}</style>
+          <script async src="https://cdn.adx.ws/scripts/loader.js"></script>
+          <div class="sevioads" data-zone="7aecae46-d352-4bab-8fa2-aaf53481cdd7"></div>
+          <script>
+              window.sevioads = window.sevioads || [];
+              var sevioads_preferences = [];
+              sevioads_preferences[0] = {};
+              sevioads_preferences[0].zone = "7aecae46-d352-4bab-8fa2-aaf53481cdd7";
+              sevioads_preferences[0].adType = "banner";
+              sevioads_preferences[0].inventoryId = "2b61ac91-467e-4230-ae17-91acd647a900";
+              sevioads_preferences[0].accountId = "012bff72-4fdf-4622-8741-9ddfbdc582fe";
+              sevioads.push(sevioads_preferences);
+          </script>
+        </body>
+      </html>
+`)
+}
+
+export default handler
diff --git a/src/pages/block/[block].tsx b/src/pages/block/[block].tsx
@@ -65,7 +65,7 @@ const Block: NextPage<IBlockProps> = ({ data, chainConfig, chainStats }) => {
                 address={data?.number.toString()}
               />
             }>
-            <Ad chainConfig={chainConfig} />
+            <Ad />
 
             <BlockOverview data={data} chainConfig={chainConfig} chainStats={chainStats} />
           </DetailsView>

diff --git a/src/pages/blocks.tsx b/src/pages/blocks.tsx
@@ -97,7 +97,7 @@ const BlockPage: NextPage<IBlocksProps> = (props) => {
             ]}
           />
 
-          <Ad chainConfig={props.chainConfig} />
+          <Ad />
 
           <DataTable
             header={

diff --git a/src/pages/charts/[slug].tsx b/src/pages/charts/[slug].tsx
@@ -39,7 +39,7 @@ const ChartsDetailsPage: NextPage<СhartsDetailsPageProps> = ({ chainConfig, das
 
         {!!dashboard && <Dashboard data={dashboard} params={{ network: chainConfig.shortName }} />}
 
-        <Ad chainConfig={chainConfig} />
+        <Ad />
       </Page>
     </>
   )

diff --git a/src/pages/charts/index.tsx b/src/pages/charts/index.tsx
@@ -187,7 +187,7 @@ const ChartsPage: NextPage<ChartsPageProps> = ({ chainConfig, dashboards }) => {
       </Head>
       <Page chainConfig={chainConfig}>
         <DetailsView title={pageTitle}>
-          <Ad chainConfig={chainConfig} />
+          <Ad />
 
           <TabPanel
             tabs={tabs}

diff --git a/src/pages/csr.tsx b/src/pages/csr.tsx
@@ -80,7 +80,7 @@ const CSRStats: NextPage<CSRStatsProps> = ({ csrStats, chainConfig }) => {
           </Card>
         </Grid>
 
-        <Ad chainConfig={chainConfig} />
+        <Ad />
 
         <Card title={`${chainConfig.name} Emissions`}>
           <CommonChart

diff --git a/src/pages/gastracker.tsx b/src/pages/gastracker.tsx
@@ -45,7 +45,7 @@ const GasTrackerPage: NextPage<GasTrackerPageProps> = ({ dashboard, chainConfig,
           <GasPrice chainConfig={chainConfig} chainStats={chainStats} onChange={setGasData} />
         </DetailsView>
 
-        <Ad chainConfig={chainConfig} />
+        <Ad />
 
         {!!dashboard && checkChainFeature(chainConfig, 'charts') && (
           <Dashboard

diff --git a/src/pages/holdings/[address].tsx b/src/pages/holdings/[address].tsx
@@ -79,7 +79,7 @@ const HoldingsPage: NextPage<HoldingsPageServerProps> = ({
             chainConfig={chainConfig}>
             <Summary stats={renderStats()} />
 
-            <Ad chainConfig={chainConfig} />
+            <Ad />
 
             <TokensDataTable address={address} />
           </DetailsView>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -209,7 +209,7 @@ const Index: NextPage<IndexProps> = (props) => {
           />
         )}
 
-        <Ad chainConfig={chainConfig} />
+        <Ad />
 
         <Grid>
           <Card

diff --git a/src/pages/tokens.tsx b/src/pages/tokens.tsx
@@ -79,7 +79,7 @@ const TopTokensPage: NextPage<ITopTokensProps> = (props) => {
 
       <Page chainConfig={props.chainConfig}>
         <DetailsView title="ERC-20 Top Tokens">
-          <Ad chainConfig={props.chainConfig} />
+          <Ad />
 
           <DataTable
             isLoading={loading}

diff --git a/src/pages/tokentxns.tsx b/src/pages/tokentxns.tsx
@@ -32,7 +32,7 @@ const Txs: NextPage<ITxsProps> = (props) => {
 
       <Page chainConfig={props.chainConfig}>
         <DetailsView title="ERC-20 Token TXns">
-          <Ad chainConfig={props.chainConfig} />
+          <Ad />
 
           <Erc20DataTable />
         </DetailsView>

diff --git a/src/pages/tx/[tx].tsx b/src/pages/tx/[tx].tsx
@@ -81,7 +81,7 @@ const TxPage: NextPage<ITxProps> = (props) => {
             header={
               <OpenWith type={'tx'} chainConfig={props.chainConfig} address={props.data?.hash} />
             }>
-            <Ad chainConfig={props.chainConfig} />
+            <Ad />
 
             <TabPanel
               tabs={[

diff --git a/src/pages/txs.tsx b/src/pages/txs.tsx
@@ -176,7 +176,7 @@ const Txs: NextPage<ITxsProps> = ({ block, ...props }) => {
             />
           )}
 
-          <Ad chainConfig={props.chainConfig} />
+          <Ad />
 
           <TabPanel value={currentTab} tabs={tabs} />
         </DetailsView>

diff --git a/src/pages/txsInternal.tsx b/src/pages/txsInternal.tsx
@@ -67,7 +67,7 @@ const BlockPage: NextPage<IBlocksProps> = (props) => {
 
       <Page chainConfig={props.chainConfig}>
         <DetailsView title="Contract Internal Transactions">
-          <Ad chainConfig={props.chainConfig} />
+          <Ad />
 
           <DataTable
             isLoading={loading}
-Original file line number
+Diff line change
@@ Expand Up / @@ -141,7 +141,7 @@ const AddressView: FC<IAddressViewProps> = ({ @@
                   ]}
                 />
-                <Ad chainConfig={chain.config} />
+                <Ad />
                 <TabPanel
                   tabs={[
@@ Expand Down @@