Campaign logic

src/components/assets/Account.vue

@@ -3,13 +3,12 @@
     <div class="container">
       <div class="row--details">
         <div class="column-account-name">
-          <au-icon
+          <!-- <au-icon
             v-if="isAccountUnified"
             :native-address="unifiedAccount?.nativeAddress"
             :icon-url="unifiedAccount?.avatarUrl"
-          />
+          /> -->
           <img
-            v-else-if="iconWallet"
             width="24"
             :src="iconWallet"
             alt="wallet-icon"
@@ -94,7 +93,7 @@ import { $api } from 'src/boot/api';
 import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
 import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
 import ZkAstr from 'src/components/assets/ZkAstr.vue';
-import AuIcon from 'src/components/header/modals/account-unification/AuIcon.vue';
+// import AuIcon from 'src/components/header/modals/account-unification/AuIcon.vue';
 import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
 import { supportWalletObj } from 'src/config/wallets';
 import {
@@ -117,7 +116,6 @@ export default defineComponent({
     NativeAssetList,
     EvmNativeToken,
     ZkAstr,
-    AuIcon,
   },
   props: {
     ttlErc20Amount: {

src/components/dapp-staking/my-staking/DynamicAdsArea.vue

@@ -19,7 +19,7 @@
         },
       }"
     >
-      <swiper-slide v-for="(item, index) in items" :key="index">
+      <swiper-slide v-for="(item, index) in combinedCampaigns" :key="index">
         <div
           class="card--swiper"
           @click="item.link !== undefined ? goToLink(item.link) : goDappPageLink(item.address)"
@@ -35,41 +35,33 @@
               </div>
               <div class="text--name">{{ item.name }}</div>
             </div>
-            <div class="text--description">{{ item.description }}</div>
+            <div class="text--description">{{ item.shortDescription }}</div>
           </div>
         </div>
       </swiper-slide>
     </swiper>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watchEffect, computed } from 'vue';
-import dappPromotions from 'src/data/dapp_promotions.json';
+import { defineComponent } from 'vue';
 import { networkParam, Path } from 'src/router/routes';
 import { useRouter } from 'vue-router';
+import { useCampaign } from 'src/hooks';
 
 // Import Swiper
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper/modules';
 
-interface Data {
-  name: string;
-  description: string;
-  img: string;
-  link?: string;
-  address?: string;
-}
-
 export default defineComponent({
   components: {
     Swiper,
     SwiperSlide,
   },
   setup() {
-    const items = ref<Data[]>([]);
     const router = useRouter();
+    const { combinedCampaigns } = useCampaign();
 
     const goToLink = (link: string): void => {
       window.open(link, '_blank');
@@ -81,37 +73,9 @@ export default defineComponent({
       router.push(url);
     };
 
-    // dummy data
-    const newListing = [
-      {
-        address: '0x95f506e72777efcb3c54878bb4160b00cd11cd84',
-        name: 'Lucky',
-        description:
-          'New listing1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum.',
-        img: '/images/dapp_promotions/new.webp',
-      },
-      {
-        address: '0x95f506e72777efcb3c54878bb4160b00cd11cd84',
-        name: 'Lucky',
-        description:
-          'New listing2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum.',
-        img: '/images/dapp_promotions/new.webp',
-      },
-    ];
-
-    const maxLength = Math.max(newListing.length, dappPromotions.length);
-    for (let i = 0; i < maxLength; i++) {
-      if (i < newListing.length) {
-        items.value.push(newListing[i]);
-      }
-      if (i < dappPromotions.length) {
-        items.value.push(dappPromotions[i]);
-      }
-    }
-
     return {
       modules: [Navigation],
-      items,
+      combinedCampaigns,
       goToLink,
       goDappPageLink,
     };

src/data/dapp_promotions.json

@@ -1,62 +1,14 @@
 [
   {
-    "name":"Beyond Club",
-    "description": "Campaign1",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign1.webp"
+    "name": "Algem - Liquid Staking",
+    "shortDescription": "Receive one liquid nASTR token for every ASTR token you stake. Then use nASTR to yield farm on the ecosystem to maximize your earnings.",
+    "link": "https://www.algem.io/",
+    "img": "images/dapp_promotions/algem.jpg"
   },
   {
-    "name":"Beyond Club",
-    "description": "Campaign2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign2.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign3",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign3.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign4",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign4.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign5",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign5.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign6",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign6.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign7",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign7.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign8",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign8.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign9",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign9.webp"
-  },
-  {
-    "name":"Beyond Club",
-    "description": "Campaign10",
-    "link": "https://astar.network/",
-    "img": "/images/dapp_promotions/campaign10.webp"
+    "name": "ASTR token, value and utility",
+    "shortDescription": "How the ASTR Token Brings Utility and Value to the Astar Ecosystem",
+    "link": "https://astar.network/blog/how-the-astr-token-brings-utility-and-value-to-the-astar-39387",
+    "img": "https://ipfs.subsocial.network/ipfs/bafybeig2o6zjlnxnwgdv6xkcgu4w5tn7wdre26kimpc2w2ldrum66cotw4"
   }
 ]

src/hooks/dapps-staking/useCampaign.ts

@@ -0,0 +1,45 @@
+import { computed } from 'vue';
+import { useStore } from 'src/store';
+import { Campaign, DappCombinedInfo } from 'src/v2/models';
+import dappPromotions from 'src/data/dapp_promotions.json';
+
+export function useCampaign() {
+  const dappsInCampaign = 5;
+  const store = useStore();
+
+  // Latest registered dApps.
+  const newListings = computed<Campaign[]>(() =>
+    (<DappCombinedInfo[]>store.getters['dapps/getAllDapps'])
+      .filter((x) => !!x.dapp)
+      .sort((x, y) => Number(y.dapp?.creationTime ?? 0) - Number(x.dapp?.creationTime ?? 0))
+      .splice(0, dappsInCampaign)
+      .map(
+        (x) =>
+          <Campaign>{
+            name: x.dapp?.name,
+            shortDescription: x.dapp?.shortDescription,
+            link: x.dapp?.url,
+            img: x.dapp?.imagesUrl ? x.dapp.imagesUrl[0] : 'images/noimage.png',
+            address: x.contract.address,
+          }
+      )
+  );
+
+  // Combine latest dApps with dApp promotions.
+  const combinedCampaigns = computed<Campaign[]>(() => {
+    const result: Campaign[] = [];
+    const minLen = Math.min(newListings.value.length, dappPromotions.length);
+
+    for (let i = 0; i < minLen; i++) {
+      result.push(newListings.value[i], dappPromotions[i]);
+    }
+    result.push(...newListings.value.slice(minLen), ...dappPromotions.slice(minLen));
+
+    return result;
+  });
+
+  return {
+    newListings,
+    combinedCampaigns,
+  };
+}

src/hooks/index.ts

@@ -32,6 +32,7 @@ export * from './dapps-staking/useStakingList';
 export * from './dapps-staking/useSignPayload';
 export * from './dapps-staking/useDappRedirect';
 export * from './dapps-staking/useDispatchGetDapps';
+export * from './dapps-staking/useCampaign';
 export * from './wallet/useWalletIcon';
 export * from './wallet/useEvmWallet';
 export * from './wallet/useLedger';

src/v2/models/DappsStaking.ts

@@ -59,3 +59,11 @@ export interface AccountLedger {
 export interface DappStakingConstants {
   maxEraStakeValues: number;
 }
+
+export interface Campaign {
+  name: string;
+  shortDescription: string;
+  link?: string;
+  img: string;
+  address?: string;
+}