DAO-823: User wants to see which address have delegated stRIF to "Vot…

…ing power delegated" (#364)

* add delegation section

* check if it's not delegate to himself

* fix subtitle

* rename hook

src/app/communities/HolderColumn.tsx

@@ -0,0 +1,23 @@
+import { Span } from '@/components/Typography'
+import { EXPLORER_URL } from '@/lib/constants'
+import { RxExternalLink } from 'react-icons/rx'
+
+interface HolderColumnProps {
+  address: string
+  rns?: string
+  image?: string
+}
+
+export const HolderColumn = ({ address, rns, image }: HolderColumnProps) => (
+  <a
+    href={`${EXPLORER_URL}/address/${address}`}
+    target="_blank"
+    className="flex items-center gap-1.5 text-white"
+  >
+    <img src={image || '/images/treasury/holders.png'} width={24} height={24} alt="Holders Image" />
+    <Span className="underline text-left overflow-hidden whitespace-nowrap text-[14px]">
+      {rns || address}
+    </Span>
+    <RxExternalLink size={18} />
+  </a>
+)

src/app/communities/NftHoldersSection.tsx

@@ -10,27 +10,7 @@ import { useState } from 'react'
 import { TableIcon } from '@/app/communities/TableIcon'
 import { SquareIcon } from '@/app/communities/SquareIcon'
 import { ErrorMessageAlert } from '@/components/ErrorMessageAlert/ErrorMessageAlert'
-
-interface HolderColumnProps {
-  address: string
-  rns?: string
-  image?: string
-}
-const HolderColumn = ({ address, rns, image }: HolderColumnProps) => {
-  return (
-    <a
-      href={`${EXPLORER_URL}/address/${address}`}
-      target="_blank"
-      className="flex items-center gap-1.5 text-white"
-    >
-      <img src={image || '/images/treasury/holders.png'} width={24} height={24} alt="Holders Image" />
-      <Span className="underline text-left overflow-hidden whitespace-nowrap text-[14px]">
-        {rns || address}
-      </Span>
-      <RxExternalLink size={18} />
-    </a>
-  )
-}
+import { HolderColumn } from './HolderColumn'
 
 interface IdNumberColumnProps {
   id: string

src/app/user/Delegation/DelegationSection.tsx

@@ -0,0 +1,29 @@
+import { HolderColumn } from '@/app/communities/HolderColumn'
+import { Table } from '@/components/Table'
+import { HeaderTitle } from '@/components/Typography'
+import { useAccount } from 'wagmi'
+import { RenderTotalBalance } from '../Balances/RenderTotalBalance'
+import { BalancesProvider } from '../Balances/context/BalancesContext'
+import { useGetDelegates } from './hooks/useGetDelegates'
+
+export const DelegationSection = () => {
+  const { address } = useAccount()
+  const { delegateeAddress } = useGetDelegates(address)
+
+  if (!delegateeAddress || delegateeAddress === address) {
+    return null
+  }
+
+  const delegatee = {
+    'Voting Power Delegated': <HolderColumn address={delegateeAddress} />,
+    Amount: <RenderTotalBalance symbol="stRIF" />,
+  }
+  return (
+    <>
+      <HeaderTitle className="mb-6">Delegation</HeaderTitle>
+      <BalancesProvider>
+        <Table data={[delegatee]} />
+      </BalancesProvider>
+    </>
+  )
+}

src/app/user/Delegation/hooks/useGetDelegates.tsx

@@ -0,0 +1,21 @@
+import { StRIFTokenAbi } from '@/lib/abis/StRIFTokenAbi'
+import { tokenContracts } from '@/lib/contracts'
+import { Address } from 'viem'
+import { useReadContract } from 'wagmi'
+
+const stRifContract = {
+  abi: StRIFTokenAbi,
+  address: tokenContracts.stRIF,
+}
+
+export const useGetDelegates = (address: Address | undefined) => {
+  const { data: delegateeAddress } = useReadContract(
+    address && {
+      ...stRifContract,
+      functionName: 'delegates',
+      args: [address],
+    },
+  )
+
+  return { delegateeAddress }
+}

src/app/user/Delegation/index.ts

@@ -0,0 +1 @@
+export * from './DelegationSection'

src/app/user/page.tsx

@@ -9,6 +9,7 @@ import { withBuilderButton, useGetBuilderToGauge } from '@/app/collective-reward
 import { TxStatusMessage } from '@/components/TxStatusMessage'
 import { zeroAddress } from 'viem'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
+import { DelegationSection } from './Delegation'
 
 type MyHoldingsProps = {
   showBuilderButton?: boolean
@@ -18,6 +19,7 @@ const MyHoldings = ({ showBuilderButton = false }: MyHoldingsProps) => (
   <>
     <TxStatusMessage messageType="staking" />
     <BalancesSection showBuilderButton={showBuilderButton} />
+    <DelegationSection />
     <CommunitiesSection />
   </>
 )

src/components/Table/index.ts

@@ -1,2 +1,2 @@
 export * from './components'
-export { Table } from './Table'
+export * from './Table'