feat: 💄 Show dao token balance on profiles (#332)

Co-authored-by: melMass <mel@melmassadian.com>

src/constants.ts

@@ -136,8 +136,10 @@ export const UKRAINE_FUNDING_CONTRACT = 'KT1DWnLiUkNtAQDErXxudFEH63JC6mqg3HEx'
 export const PAKISTAN_FUNDING_CONTRACT = 'KT1Jpf2TAcZS7QfBraQMBeCxjFhH6kAdDL4z'
 export const IRAN_FUNDING_CONTRACT = 'KT1KYfj97fpdomqyKsZSBdSVvh9afh93b4Ge'
 export const QUAKE_FUNDING_CONTRACT = 'KT1X1jyohFrZyDYWvCPXw9KvWxk2VDwxyg2g'
-export const MOROCCO_QUAKE_FUNDING_CONTRACT = 'KT1RwXEP8Sj1UQDHPG4oEjRohBdzG2R7FCpA'
+export const MOROCCO_QUAKE_FUNDING_CONTRACT =
+  'KT1RwXEP8Sj1UQDHPG4oEjRohBdzG2R7FCpA'
 
+export const DAO_TOKEN_CONTRACT = 'KT1QrtA753MSv8VGxkDrKKyJniG5JtuHHbtV'
 export const DAO_TOKEN_CLAIM_CONTRACT = 'KT1NrfV4e2qWqFrnrKyPTJth5wq2KP9VyBei'
 export const DISTRIBUTION_MAPPING_IPFS_PATH =
   'QmbRmck8A5sBYQC7WEuK8dApnGQGXBhyPEgQpLm8ftfAtL'

src/data/api.ts

@@ -1,4 +1,8 @@
-import { HEN_CONTRACT_FA2, CLAIMED_DAO_TOKENS_BIGMAP_ID } from '@constants'
+import {
+  HEN_CONTRACT_FA2,
+  DAO_TOKEN_CONTRACT,
+  CLAIMED_DAO_TOKENS_BIGMAP_ID,
+} from '@constants'
 import axios from 'axios'
 export const BaseTokenFieldsFragment = `
 fragment baseTokenFields on tokens {
@@ -322,13 +326,35 @@ export const GetUserMetadata = async (walletAddr: string) => {
   return tzktData
 }
 
+/**
+ * Get User DAO token balance
+ */
+export async function getDaoTokenBalance(walletAddr: string) {
+  const parameters = {
+    'token.contract': DAO_TOKEN_CONTRACT,
+    'token.tokenId': '0',
+    account: walletAddr,
+    select: 'balance',
+  }
+  const response = await axios
+    .get(import.meta.env.VITE_TZKT_API + '/v1/tokens/balances', {
+      params: parameters,
+    })
+    .catch((error) =>
+      console.log('Error while querying the account token balance:', error)
+    )
+
+  return response?.data[0] ? parseInt(response.data[0]) / 1e6 : 0
+}
 
 /**
  * Get User claimed tokens
  */
 export async function getClaimedDaoTokens(walletAddr: string) {
   const response = await axios.get(
-    `https://api.tzkt.io/v1/bigmaps/${CLAIMED_DAO_TOKENS_BIGMAP_ID}/keys/${walletAddr}`)
+    import.meta.env.VITE_TZKT_API +
+      `/v1/bigmaps/${CLAIMED_DAO_TOKENS_BIGMAP_ID}/keys/${walletAddr}`
+  )
 
-  return response? parseInt(response.data.value) : 0
+  return response ? parseInt(response.data.value) : 0
 }

src/pages/profile/index.jsx

@@ -5,7 +5,7 @@ import { Page } from '@atoms/layout'
 import { useParams, useSearchParams, Outlet } from 'react-router-dom'
 import useSWR from 'swr'
 import { getUser } from '@data/api'
-import { GetUserMetadata } from '@data/api'
+import { GetUserMetadata, getDaoTokenBalance } from '@data/api'
 import useSettings from '@hooks/use-settings'
 import { validateAddress, ValidationResult } from '@taquito/utils'
 import Profile from './profile'
@@ -55,6 +55,9 @@ async function fetchUserInfo(addressOrSubjkt, type = 'user_address') {
     user.subjkt = holder.name
   }
 
+  const daoTokenBalance = await getDaoTokenBalance(user.address)
+  user.daoTokenBalance = daoTokenBalance
+
   return user
 }
 export const useDisplayStore = create(

src/pages/profile/profile.jsx

@@ -40,6 +40,13 @@ export default function Profile({ user }) {
             {isAddressCopied && 'Copied!'}
           </div>
 
+          {user.daoTokenBalance >= 0 && (
+            <p>
+              {Math.round(user.daoTokenBalance * 10) / 10}{' '}
+              <a href="claim">TEIA</a>
+            </p>
+          )}
+
           <div className={styles.socials}>
             {user.twitter && (
               <Button