activity points

iggy-social · Oct 3, 2023 · a8f3625 · a8f3625 · vercel · Oct 3, 2023
1 parent 7843e5b
commit a8f3625
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 13 deletions.
diff --git a/components/keys/KeysList.vue b/components/keys/KeysList.vue
@@ -32,7 +32,7 @@ export default {
 
   data() {
     return {
-      selectedDomains: ["techie", "tekr", "uwami", "nidz", "dbeastco"],
+      featuredKeys: this.$config.keysFeatured,
       domainObjects: [],
       waiting: false
     }
@@ -86,8 +86,8 @@ export default {
         provider
       );
 
-      for (let i = 0; i < this.selectedDomains.length; i++) {
-        const domainName = this.selectedDomains[i];
+      for (let i = 0; i < this.featuredKeys.length; i++) {
+        const domainName = this.featuredKeys[i];
 
         const priceWei = await keysContract.getBuyPriceAfterFee(domainName, 1);
 

diff --git a/components/sidebars/SidebarLeft.vue b/components/sidebars/SidebarLeft.vue
@@ -19,12 +19,22 @@
             {{ getTextWithoutBlankCharacters(userStore.getDefaultDomain) }}
           </h6>
 
+          <!-- Chat tokens -->
           <!--
           <button v-if="userStore.getChatTokenBalanceWei > 0 && $config.chatTokenAddress" class="btn btn-outline-primary btn-sm mt-2 mb-2 disabled">
             {{ userStore.getChatTokenBalance }} {{ $config.chatTokenSymbol }}
           </button>
           -->
 
+          <!-- Activity Points -->
+          <button 
+            v-if="userStore.getCurentUserActivityPoints > 0 && $config.activityPointsAddress" 
+            class="btn btn-outline-primary btn-sm mt-2 mb-2" 
+            @click="fetchActivityPoints"
+          >
+            {{ userStore.getCurentUserActivityPoints }} AP
+          </button>
+
           <hr />
         </div>
 
@@ -81,6 +91,13 @@
             </NuxtLink>
           </li>
 
+          <!-- Activity Points -->
+          <li class="nav-item p-1" @click="closeLeftSidebar" v-if="$config.showFeatures.activityPoints && $config.activityPointsAddress">
+            <NuxtLink class="nav-link" :class="$route.path.startsWith('/activity-points') ? 'active' : ''" aria-current="page" to="/activity-points">
+              <i class="bi bi-award"></i> Activity Points
+            </NuxtLink>
+          </li>
+
           <!-- Send tokens -->
           <li class="nav-item p-1" @click="closeLeftSidebar" v-if="$config.showFeatures.sendTokens">
             <NuxtLink class="nav-link" :class="$route.path.startsWith('/send-tokens') ? 'active' : ''" aria-current="page" to="/send-tokens">
@@ -191,11 +208,13 @@
 
 <script>
 import { useEthers } from 'vue-dapp';
+import { useToast } from "vue-toastification/dist/index.mjs";
 import { useNotificationsStore } from '~/store/notifications';
 import { useChatStore } from '~/store/chat';
 import { useSidebarStore } from '~/store/sidebars';
 import { useUserStore } from '~/store/user';
 import ProfileImage from "~/components/profile/ProfileImage.vue";
+import { getActivityPoints } from '~/utils/balanceUtils';
 import { getTextWithoutBlankCharacters } from '~/utils/textUtils';
 
 export default {
@@ -227,6 +246,8 @@ export default {
   },
   
   methods: {
+    getActivityPoints,
+
     closeLeftSidebar() {
       if (this.isMobile) {
         this.lSidebar.hide();
@@ -235,6 +256,16 @@ export default {
       }
     },
 
+    async fetchActivityPoints() {
+      if (this.$config.activityPointsAddress && this.address) {
+        this.toast.info("Refreshing activity points...", { timeout: 2000 });
+
+        const activityPoints = await this.getActivityPoints(this.address);
+
+        this.userStore.setCurrentUserActivityPoints(activityPoints);
+      }
+    },
+
     selectTagIndex(index) {
       this.chatStore.setSelectedTagIndex(index);
       this.closeLeftSidebar();
@@ -244,12 +275,14 @@ export default {
   setup() {
     const { address, isActivated } = useEthers();
 
+    const toast = useToast();
+
     const chatStore = useChatStore();
     const notificationsStore = useNotificationsStore();
     const sidebarStore = useSidebarStore();
     const userStore = useUserStore();
 
-    return { address, chatStore, isActivated, notificationsStore, sidebarStore, userStore }
+    return { address, chatStore, isActivated, notificationsStore, sidebarStore, toast, userStore }
   },
 }
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -134,6 +134,7 @@ import NavbarMobile from "~/components/navbars/NavbarMobile.vue";
 import SidebarLeft from "~/components/sidebars/SidebarLeft.vue";
 import SidebarRight from "~/components/sidebars/SidebarRight.vue";
 import ChatSettingsModal from "~/components/ChatSettingsModal.vue";
+import { getActivityPoints } from '~/utils/balanceUtils';
 import { getDomainName } from '~/utils/domainUtils';
 import { storeUsername } from '~/utils/storageUtils';
 
@@ -225,6 +226,7 @@ export default {
   },
 
   methods: {
+    getActivityPoints,
     getDomainName, // imported function from utils/domainUtils.js
 
     async connectCoinbase() {
@@ -245,12 +247,12 @@ export default {
 			document.getElementById('closeConnectModal').click();
 		},
 
-    async orbisLogout() {
-      await this.$orbis.logout();
-      this.userStore.setIsConnectedToOrbis(false);
-      this.userStore.setDid(null);
-      this.userStore.setDidParent(null);
-      this.userStore.setOrbisImage(null);
+    async fetchActivityPoints() {
+      if (this.$config.activityPointsAddress) {
+        const activityPoints = await this.getActivityPoints(this.address, this.signer);
+
+        this.userStore.setCurrentUserActivityPoints(activityPoints);
+      }
     },
 
     async fetchChatTokenBalance() {
@@ -328,7 +330,12 @@ export default {
     },
 
     async fetchUserDomain() {
-      if (this.chainId === this.$config.supportedChainId) {
+      if (
+        this.chainId === this.$config.supportedChainId &&
+        this.address != this.userStore.getCurrentUserAddress
+      ) {
+        this.userStore.setCurrentUserAddress(this.address);
+        
         let userDomain;
 
         if (this.signer) {
@@ -337,13 +344,16 @@ export default {
           userDomain = await this.getDomainName(this.address);
         }
 
+        
+
         if (userDomain) {
           this.userStore.setDefaultDomain(userDomain+this.$config.tldName);
           storeUsername(window, this.address, userDomain+this.$config.tldName);
         } else {
           this.userStore.setDefaultDomain(null);
         }
 
+        this.fetchActivityPoints();
         this.fetchChatTokenBalance();
       }
     },
@@ -360,7 +370,15 @@ export default {
     
     onWidthChange() {
       this.width = window.innerWidth;
-    }
+    },
+
+    async orbisLogout() {
+      await this.$orbis.logout();
+      this.userStore.setIsConnectedToOrbis(false);
+      this.userStore.setDid(null);
+      this.userStore.setDidParent(null);
+      this.userStore.setOrbisImage(null);
+    },
   },
 
   setup() {

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -50,6 +50,8 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
+      activityPointsAddress: "0x7d20A0E75B1ac519f500a51351bcb01A07fE3D7d",
+      activityPointsRatio: 1_000_000, 
       airdropClaimDomainsAddress: "0x3ebDBc1D47d4bFe7D08A58123Ab3c85fC7358831", // chat token claim for domain holders contract address
       airdropPostMintersAddress: "0x11608f93Ec226E173754262c04F98Df3Bfaad7Db", // chat token claim for post minters contract address
       blockExplorerBaseUrl: "https://mumbai.polygonscan.com",
@@ -65,8 +67,9 @@ export default defineNuxtConfig({
       iggyPostAddress: "0x63FE8216a66737CFE474DF3949F9081EbD4Bd800",
       iggyPostMinterAddress: "0xF48D3812ceD80bC78C8553d7C3b702b0F0d63903",
       iggyPostStatsAddress: "0xFCF878b629fF0Ef3bC033eFfCfFD39B00c9a68C5",
-      keysAddress: "", // PunkKey contract address 
+      keysAddress: "0x34E7D66455BE3f6f0cCbF3df3b7c56b482530C8E", // FriendKeys contract address 
       keysContext: "kjzl6cwe1jw14akr2rh1j3fhup1ewfr2uyyd6l85qllbe2d5fxywt7d8rqnau6j",
+      keysFeatured: ["tempe", "tekr"],
       linkPreviews: "netlify", // "netlify" or "microlink" (or leave empty for no link previews)
       lpTokenAddress: "0xF874f79eBfB8FEe898a289C4cAa5dc4383873431", // liquidity pool token (token to stake in the staking contract)
       lpTokenSymbol: "LP tokens", // LP token symbol
@@ -114,6 +117,7 @@ export default defineNuxtConfig({
       randomPostsNumber: 1, // number of random post NFTs to show in the sidebar widget
       rpcCustom: process.env.RPC_CUSTOM || "", // Custom RPC URL
       showFeatures: { // show/hide features in sidebars (if you have too many "true", make the sidebar scrollable --> sidebarLeftSticky: false)
+        "activityPoints": true, 
         "airdrop": false, 
         "friendKeys": true, 
         "governance": false,

diff --git a/pages/activity-points.vue b/pages/activity-points.vue
@@ -0,0 +1,78 @@
+<template>
+  <Head>
+    <Title>Activity Points | {{ $config.projectMetadataTitle }}</Title>
+    <Meta property="og:title" :content="'Activity Points | ' + $config.projectMetadataTitle" />
+  </Head>
+
+  <div class="card border scroll-500">
+    <div class="card-body">
+      <p class="fs-3" @click="$router.back()">
+        <i class="bi bi-arrow-left-circle cursor-pointer"></i>
+      </p>
+
+      <h3 class="mb-3 mt-3">Activity Points</h3>
+
+      <p class="text-break mt-3">
+        Your current Activity Points balance:
+      </p>
+
+      <!-- Input field -->
+      <div class="row">
+      <div class="col-md-5">
+        <div class="input-group">
+          <input 
+            :value="userStore.getCurentUserActivityPoints"
+            type="text"
+            class="form-control"
+            disabled
+          >
+
+          <button class="btn btn-primary disabled" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Activity Points
+          </button>
+        </div>
+      </div>
+      </div>
+
+      <p class="text-break mt-4 mb-3">
+        By actively using {{ $config.projectName }} features, you can earn more Activity Points.
+      </p>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { useEthers } from 'vue-dapp';
+import { useUserStore } from '~/store/user';
+import { getActivityPoints } from '~/utils/balanceUtils';
+
+export default {
+  name: 'ActivityPoints',
+
+  mounted() {
+    this.fetchActivityPoints();
+  },
+
+  methods: {
+    getActivityPoints,
+
+    async fetchActivityPoints() {
+      if (this.$config.activityPointsAddress && this.address) {
+        this.toast.info("Refreshing activity points...", { timeout: 2000 });
+
+        const activityPoints = await this.getActivityPoints(this.address);
+
+        this.userStore.setCurrentUserActivityPoints(activityPoints);
+      }
+    }
+  },
+
+  setup() {
+    const { address } = useEthers();
+    const userStore = useUserStore();
+
+    return { address, userStore }
+  },
+}
+</script>
diff --git a/store/user.ts b/store/user.ts
@@ -6,6 +6,8 @@ export const useUserStore = defineStore({
 
   state: () => {
     return {
+      activityPoints: 0, // not in wei
+      address: null,
       chatTokenBalanceWei: BigInt(0),
       defaultDomain: null,
       did: null,
@@ -21,6 +23,14 @@ export const useUserStore = defineStore({
   },
 
   getters: {
+    getCurentUserActivityPoints(state) {
+      return state.activityPoints;
+    },
+
+    getCurrentUserAddress(state) {
+      return state.address;
+    },
+
     getChatTokenBalance(state) {
       const balance = ethers.utils.formatEther(state.chatTokenBalanceWei);
 
@@ -91,6 +101,14 @@ export const useUserStore = defineStore({
       this.chatTokenBalanceWei = balance.toBigInt();
     },
 
+    setCurrentUserActivityPoints(points: any) {
+      this.activityPoints = points;
+    },
+
+    setCurrentUserAddress(address: any) {
+      this.address = address;
+    },
+
     setDefaultDomain(domain: any) {
       this.defaultDomain = domain;
     },

diff --git a/utils/balanceUtils.js b/utils/balanceUtils.js
@@ -1,6 +1,34 @@
 import { ethers } from "ethers";
 import Erc20Abi from "~/assets/abi/Erc20Abi.json";
 
+export async function getActivityPoints(userAddress, signer) {
+  const config = useRuntimeConfig();
+
+  let provider = signer;
+
+  if (!signer) {
+    provider = this.$getFallbackProvider(config.supportedChainId);
+  }
+
+  const activityPointsInterface = new ethers.utils.Interface([
+    "function getTotalWeiSpent(address) view returns (uint256)",
+  ]);
+
+  const activityPointsContract = new ethers.Contract(config.activityPointsAddress, activityPointsInterface, provider);
+
+  const weiSpent = await activityPointsContract.getTotalWeiSpent(userAddress);
+  const ethSpent = ethers.utils.formatEther(weiSpent);
+  let activityPoints = Number(ethSpent) * config.activityPointsRatio;
+
+  if (activityPoints < 1) {
+    activityPoints = activityPoints.toFixed(2);
+  } else {
+    activityPoints = Math.round(activityPoints);
+  }
+
+  return activityPoints;
+}
+
 export async function getTokenAllowance(token, userAddress, beneficiary, signer) {
   const config = useRuntimeConfig();