add ad

src/components/ad/AdBanner.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const aa = computed(() => {
+  const hostname = location.hostname
+  if (hostname === 'testnet.ping.pub') {
+    return '2396360'
+  } else if (hostname === 'ping.pub') {
+    return '2395639'
+  } else {
+    return '2396360'
+  }
+});
+</script>
 <template>
-  <div></div>
+  <iframe :data-aa='`${aa}`' :src="`//acceptable.a-ads.com/${aa}`" style='border:0px; padding:0; width:100%; height:70px; overflow:hidden; margin-bottom: 5px; background-color: transparent;'></iframe>
 </template>

src/components/ad/ad.ts

@@ -1,56 +0,0 @@
-import { PersonaAdSDK } from '@personaxyz/ad-sdk';
-
-interface ADConfig {
-    apiKey: string;
-    environment: string;
-}
-
-export const confs: Record<string, ADConfig> = {
-    "localhost": {
-        apiKey: 'XXXX_api_key_staging_XXXX', // An actual API key is generated once you register an app with us.
-        environment: 'staging', // use value 'production' when going live
-    },
-    "ping.pub": {
-        apiKey: 'persona-pub-0x6ca028de83d9bc438bb3fd7f9620f36b',
-        environment: 'production',
-    },
-    "testnet.ping.pub": {
-        apiKey: 'persona-pub-0x14e9ba8ca5a658ba409fc0059ebc3711',
-        environment: 'production',
-    }
-}
-
-
-export const UNITS: Record<string, Record<string, string>> = {
-    "localhost": {
-        "banner": "3a094192-4c7b-4761-a50c-bd9b6a67e987",
-        "banner_mobile": "e6b82a11-6a94-46c0-a9d2-cf730159a5e6",
-        "popup": "e6b82a11-6a94-46c0-a9d2-cf730159a5e6"
-    },
-    "ping.pub": {
-        "banner": "6883877a-ccae-4a08-b457-7e30b3465a8c",
-        "banner_mobile": "a95c6b55-5e2a-49eb-8993-a488513b2d10",
-    },
-    "testnet.ping.pub": {
-        "banner": "1644951b-5022-4544-8a85-11aef8a8f645",
-        "banner_mobile": "81e0527f-475a-42a4-bb9a-ed9967c5d06f",
-        "popup": "bd77a47c-30fc-4592-9d37-616d4f66964d",
-        "popup_mobile": "bd77a47c-30fc-4592-9d37-616d4f66964d"
-    },
-    
-}
-
-export function getClient() {
-    const conf = confs[location.hostname]
-    if(conf) {
-        const sdk = new PersonaAdSDK(conf)
-        return sdk.getClient()
-    }
-}
-
-export function getUnit(ad: string): string | undefined {
-    const ads =  UNITS[location.hostname]
-    if(ads) {
-        return window.innerWidth > 600 ? ads[ad] : ads[`${ad}_mobile`]
-    }
-}

src/layouts/components/DefaultLayout.vue

@@ -16,6 +16,7 @@ import NavBarI18n from './NavBarI18n.vue';
 import NavBarWallet from './NavBarWallet.vue';
 import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '../types';
 import dayjs from 'dayjs';
+import AdBanner from '@/components/ad/AdBanner.vue';
 
 const dashboard = useDashboard();
 dashboard.initial();
@@ -70,6 +71,10 @@ const behind = computed(() => {
 
 dayjs()
 
+const show_ad = computed(() => {
+  return location.hostname.indexOf('ping.pub') > 0
+})
+
 </script>
 
 <template>
@@ -340,7 +345,10 @@ dayjs()
           </div>
         <RouterView v-slot="{ Component }">
           <Transition mode="out-in">
-            <Component :is="Component" />
+            <div>
+              <AdBanner v-if="show_ad"/>
+              <Component :is="Component" />
+            </div>
           </Transition>
         </RouterView>
       </div>

src/modules/[chain]/index.vue

@@ -263,8 +263,6 @@ const amount = computed({
       </div>
     </div>
 
-    <AdBanner id="chain-home-banner-ad" unit="banner" width="970px" height="90px" />
-
     <div v-if="blockchain.supportModule('governance')" class="bg-base-100 rounded mt-4 shadow">
       <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
         {{ $t('index.active_proposals') }}

src/pages/index.vue

@@ -91,8 +91,6 @@ const chainStore = useBlockchain()
       />
     </div>
 
-    <AdBanner id="home-banner-ad" unit="banner" width="970px" height="90px" />
-
     <div class="text-center text-base mt-6 text-primary">
       <h2 class="mb-6">{{ $t('pages.description') }}</h2>
     </div>