add ad

src/components/ad/AdBanner.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getClient, getUnit } from './ad';
+
+const props = defineProps({
+  id: { type: String, required: true},
+  unit: { type: String, required: true},
+  width: { type: String },
+  height: { type: String },
+});
+
+const show = ref(false)
+onMounted(() => {
+  const adClient = getClient();
+  const adUnitId = getUnit(props.unit);
+  show.value = adClient !== undefined && adUnitId !== undefined;
+
+  if(show.value) {
+    adClient.showBannerAd({
+        adUnitId,
+        containerId: props.id,
+    });
+  }
+});
+
+</script>
+<template>
+  <div v-show="show" class="grid justify-items-center">
+    <div :id="id" :style="{ width, height }" class="mt-6"></div>
+  </div>
+</template>

src/components/ad/ad.ts

@@ -0,0 +1,49 @@
+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",
+    },
+    "ping.pub": {
+        "banner": "6883877a-ccae-4a08-b457-7e30b3465a8c",
+    },
+    "testnet.ping.pub": {
+        "banner": "1644951b-5022-4544-8a85-11aef8a8f645",
+    },
+}
+
+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 ads[ad]
+    }
+}

src/modules/wallet/accounts.vue

@@ -12,6 +12,7 @@ import {
   scanCompatibleAccounts,
   type LocalKey,
 } from './utils';
+import AdBanner from '@/components/ad/AdBanner.vue';
 
 const dashboard = useDashboard();
 const chainStore = useBlockchain()
@@ -221,6 +222,8 @@ async function loadBalances(chainName: string, endpoint: string, address: string
       </div>
     </div>
 
+    <AdBanner id="home-banner-ad" unit="banner" width="970px" height="90px" />
+
     <div class="overflow-x-auto">
       <div v-for="{ key, subaccounts } in accounts" class="bg-base-100 rounded-md my-5 py-5">
         <div class="flex justify-self-center">

src/modules/wallet/keplr.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useDashboard, type ChainConfig, useBlockchain } from '@/stores';
 import { CosmosRestClient } from '@/libs/client';
 import { onMounted } from 'vue';
+import AdBanner from '@/components/ad/AdBanner.vue';
 
 const error = ref("")
 const conf = ref("")
@@ -85,6 +86,7 @@ function suggest() {
 
 <template>
     <div class="bg-base-100 p-4 rounded text-center">
+        <AdBanner id="home-banner-ad" unit="banner" width="970px" height="90px" />
         <div class="flex">
             <select v-model="selected" class="select select-bordered mx-5" @change="initParamsForKeplr">
                 <option v-for="c in dashboard.chains" :value="c">

src/modules/wallet/portfolio.vue

@@ -9,6 +9,7 @@ import DonutChart from '@/components/charts/DonutChart.vue';
 import ApexCharts from 'vue3-apexcharts';
 import { get } from '@/libs';
 import { getMarketPriceChartConfig } from '@/components/charts/apexChartConfig';
+import AdBanner from '@/components/ad/AdBanner.vue';
 
 const format = useFormatter();
 const conf = ref(
@@ -216,6 +217,7 @@ const currencySign = computed(() => {
 </script>
 <template>
   <div class="overflow-x-auto w-full rounded-md">
+
     <div class="flex flex-wrap justify-between bg-base-100 p-5">
       <div class="min-w-0">
         <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">
@@ -255,8 +257,8 @@ const currencySign = computed(() => {
           <ApexCharts type="area" height="280" :options="chartConfig" :series="changeData" />
         </div>
       </div>
-
       <div class="overflow-x-auto mt-4">
+      <AdBanner class="bg-base-200" id="home-banner-ad" unit="banner" width="970px" height="90px" />
         <table class="table w-full">
           <thead class="bg-base-200">
             <tr>

src/modules/wallet/suggest.vue

@@ -4,6 +4,7 @@ import { suggestChain } from '@leapwallet/cosmos-snap-provider';
 import { useDashboard, type ChainConfig, useBlockchain, NetworkType } from '@/stores';
 import { CosmosRestClient } from '@/libs/client';
 import { onMounted } from 'vue';
+import AdBanner from '@/components/ad/AdBanner.vue';
 
 const error = ref("")
 const conf = ref("")
@@ -168,5 +169,7 @@ function suggest() {
                 If the chain is not offically support on Keplr/Metamask Snap, you can submit these parameters to enable Keplr/Metamask Snap.
             </div>
         </div>
+
+        <AdBanner id="home-banner-ad" unit="banner" width="970px" height="90px" />
     </div>
 </template>

src/pages/index.vue

@@ -6,7 +6,9 @@ import {
   type ChainConfig,
 } from '@/stores/useDashboard';
 import ChainSummary from '@/components/ChainSummary.vue';
-import { computed, ref } from 'vue';
+import AdBanner from '@/components/ad/AdBanner.vue';
+
+import { computed, onMounted, ref } from 'vue';
 import { useBlockchain } from '@/stores';
 
 const dashboard = useDashboard();
@@ -33,6 +35,7 @@ const featured = computed(() => {
 })
 
 const chainStore = useBlockchain()
+
 </script>
 <template>
   <div class="">
@@ -88,6 +91,8 @@ 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>
@@ -114,4 +119,4 @@ const chainStore = useBlockchain()
  .logo path{
   fill: #171d30;
 }
-</style>
+</style>@/components/ad/ad