allocation list

src/@utils/aquarius.ts

@@ -215,6 +215,28 @@ export async function getAssetsFromDtList(
   }
 }
 
+export async function getAssetsFromNftList(
+  nftList: string[],
+  chainIds: number[],
+  cancelToken: CancelToken
+): Promise<Asset[]> {
+  try {
+    if (!(nftList.length > 0)) return
+
+    const baseParams = {
+      chainIds,
+      filters: [getFilterTerm('nftAddress', nftList)],
+      ignorePurgatory: true
+    } as BaseQueryParams
+    const query = generateBaseQuery(baseParams)
+
+    const queryResult = await queryMetadata(query, cancelToken)
+    return queryResult?.results
+  } catch (error) {
+    LoggerInstance.error(error.message)
+  }
+}
+
 export async function retrieveDDOListByDIDs(
   didList: string[],
   chainIds: number[],

src/@utils/veAllocation.ts

@@ -1,4 +1,5 @@
 import { AllLocked } from 'src/@types/subgraph/AllLocked'
+import { OwnAllocations } from 'src/@types/subgraph/OwnAllocations'
 import { gql, OperationResult } from 'urql'
 import { fetchData, getQueryContext } from './subgraph'
 import axios from 'axios'
@@ -8,6 +9,9 @@ import {
   getNetworkType,
   NetworkType
 } from '@hooks/useNetworkMetadata'
+import { getAssetsFromNftList } from './aquarius'
+import { chainIdsSupported } from 'app.config'
+import { Asset } from '@oceanprotocol/lib'
 const AllLocked = gql`
   query AllLocked {
     veOCEANs(first: 1000) {
@@ -16,10 +20,31 @@ const AllLocked = gql`
   }
 `
 
-interface TotalVe {
+const OwnAllocations = gql`
+  query OwnAllocations($address: String) {
+    veAllocations(where: { allocationUser: $address }) {
+      id
+      nftAddress
+      allocated
+    }
+  }
+`
+
+export interface TotalVe {
   totalLocked: number
   totalAllocated: number
 }
+export interface Allocation {
+  nftAddress: string
+  allocation: number
+}
+export interface AssetWithOwnAllocation {
+  did: string
+  nftAddress: string
+  allocation: number
+  name: string
+  symbol: string
+}
 
 export function getVeChainNetworkId(assetNetworkId: number): number {
   const networkData = getNetworkDataById(networkdata, assetNetworkId)
@@ -55,3 +80,57 @@ export async function getTotalAllocatedAndLocked(): Promise<TotalVe> {
   )
   return totals
 }
+
+export async function getOwnAllocations(
+  networkId: number,
+  userAddress: string
+): Promise<Allocation[]> {
+  const allocations: Allocation[] = []
+
+  const queryContext = getQueryContext(networkId)
+  const fetchedAllocations: OperationResult<OwnAllocations, any> =
+    await fetchData(
+      OwnAllocations,
+      {
+        address: userAddress.toLowerCase()
+      },
+      queryContext
+    )
+
+  fetchedAllocations.data?.veAllocations.forEach((x) =>
+    allocations.push({
+      nftAddress: x.nftAddress,
+      allocation: x.allocated / 100
+    })
+  )
+  return allocations
+}
+
+export async function getOwnAssetsWithAllocation(
+  networkId: number,
+  userAddress: string
+): Promise<AssetWithOwnAllocation[]> {
+  const assetsWithAllocations: AssetWithOwnAllocation[] = []
+  const allocations = await getOwnAllocations(networkId, userAddress)
+  const assets = await getAssetsFromNftList(
+    allocations.map((x) => x.nftAddress),
+    chainIdsSupported,
+    null
+  )
+  assets?.forEach((asset: Asset) => {
+    const allocation = allocations.find(
+      (x) => x.nftAddress.toLowerCase() === asset.nftAddress.toLowerCase()
+    )
+    console.log('allocation', allocation, asset)
+
+    assetsWithAllocations.push({
+      did: asset.id,
+      nftAddress: asset.nftAddress,
+      allocation: allocation.allocation,
+      name: asset.metadata.name,
+      symbol: asset.datatokens[0].symbol
+    })
+  })
+
+  return assetsWithAllocations
+}

src/components/Asset/AssetActions/VeAllocation/AssetAllocationList.module.css

@@ -0,0 +1,59 @@
+.display {
+  composes: selection from '@shared/FormFields/AssetSelection/index.module.css';
+}
+
+.display [class*='loaderWrap'] {
+  margin: calc(var(--spacer) / 3);
+}
+
+.scroll {
+  composes: scroll from '@shared/FormFields/AssetSelection/index.module.css';
+  margin-top: 0;
+  border-top: none;
+  width: 100%;
+}
+
+.row {
+  composes: row from '@shared/FormFields/AssetSelection/index.module.css';
+}
+
+.row:last-child {
+  border-bottom: none;
+}
+
+.row:first-child {
+  border-top: none;
+}
+
+.row:hover {
+  background-color: var(--background-content);
+}
+
+.info {
+  display: block;
+  width: 100%;
+}
+
+.title {
+  composes: title from '@shared/FormFields/AssetSelection/index.module.css';
+}
+
+.hover:hover {
+  color: var(--color-primary);
+}
+
+.price {
+  composes: price from '@shared/FormFields/AssetSelection/index.module.css';
+}
+
+.price [class*='symbol'] {
+  font-size: calc(var(--font-size-small) / 1.2) !important;
+}
+
+.did {
+  composes: did from '@shared/FormFields/AssetSelection/index.module.css';
+}
+
+.empty {
+  composes: empty from '@shared/FormFields/AssetSelection/index.module.css';
+}

src/components/Asset/AssetActions/VeAllocation/AssetAllocationList.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import Dotdotdot from 'react-dotdotdot'
+import Link from 'next/link'
+import PriceUnit from '@shared/Price/PriceUnit'
+import Loader from '@shared/atoms/Loader'
+import styles from './AssetAllocationList.module.css'
+import { AssetWithOwnAllocation } from '@utils/veAllocation'
+
+function Empty() {
+  return <div className={styles.empty}>No assets found.</div>
+}
+
+export default function AssetAllocationList({
+  assets
+}: {
+  assets: AssetWithOwnAllocation[]
+}): JSX.Element {
+  return (
+    <div className={styles.display}>
+      <div className={styles.scroll}>
+        {!assets ? (
+          <Loader />
+        ) : assets && !assets.length ? (
+          <Empty />
+        ) : (
+          assets.map((asset: AssetWithOwnAllocation) => (
+            <Link href={`/asset/${asset.did}`} key={asset.did}>
+              <a className={styles.row}>
+                <div className={styles.info}>
+                  <h3 className={styles.title}>
+                    <Dotdotdot clamp={1} tagName="span">
+                      {asset.name}
+                    </Dotdotdot>
+                  </h3>
+                  <Dotdotdot clamp={1} tagName="code" className={styles.did}>
+                    {asset.symbol} | {asset.did}
+                  </Dotdotdot>
+                </div>
+                <PriceUnit
+                  price={Number(asset.allocation)}
+                  size="small"
+                  symbol="%"
+                  className={styles.price}
+                />
+              </a>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

src/components/Asset/AssetActions/VeAllocation/FormAdd.tsx

@@ -9,6 +9,7 @@ import { FormAddAllocation } from '.'
 import { useAsset } from '@context/Asset'
 import { getOceanConfig } from '@utils/ocean'
 import { VeAllocate } from '@oceanprotocol/lib'
+import { getVeChainNetworkId } from '@utils/veAllocation'
 
 export default function FormAdd({ amount }: { amount: number }): ReactElement {
   const [isOnCorrectNetwork, setIsOnCorrectNetwork] = useState(true)
@@ -20,11 +21,12 @@ export default function FormAdd({ amount }: { amount: number }): ReactElement {
   const [field, meta] = useField('amount')
   useEffect(() => {
     async function init() {
-      const config = getOceanConfig(5)
-      const veAllocation = new VeAllocate(
-        '0x3EFDD8f728c8e774aB81D14d0B2F07a8238960f4',
-        web3
-      )
+      const veNetworkId = getVeChainNetworkId(asset.chainId)
+      const config = getOceanConfig(veNetworkId)
+      console.log('ve config', config)
+      const veAllocation = new VeAllocate(config.veAllocate, web3)
+      const totalAllocation = await veAllocation.getTotalAllocation(accountId)
+      console.log('totalAllocation', totalAllocation)
       const allocation = await veAllocation.getVeAllocation(
         accountId,
         asset.nftAddress,

src/components/Asset/AssetActions/VeAllocation/index.tsx

@@ -9,6 +9,14 @@ import * as Yup from 'yup'
 import styles from './index.module.css'
 import Loader from '@shared/atoms/Loader'
 import Button from '@shared/atoms/Button'
+import SuccessConfetti from '@shared/SuccessConfetti'
+import ExplorerLink from '@shared/ExplorerLink'
+import {
+  AssetWithOwnAllocation,
+  getOwnAssetsWithAllocation,
+  getVeChainNetworkId
+} from '@utils/veAllocation'
+import AssetAllocationList from './AssetAllocationList'
 export interface FormAddAllocation {
   amount: number
 }
@@ -29,11 +37,27 @@ export default function VeAllocation(): ReactElement {
   const { asset } = useAsset()
   const [allocation, setAllocation] = useState(0)
   const [isLoading, setIsLoading] = useState(false)
+  const [txId, setTxId] = useState<string>()
+  const [veNetworkId, setVeNetworkId] = useState(0)
+  const [assetsWithAllocation, setAssetsWithAllocation] =
+    useState<AssetWithOwnAllocation[]>()
+  useEffect(() => {
+    async function init() {
+      const veNetworkId = getVeChainNetworkId(asset.chainId)
+      setVeNetworkId(veNetworkId)
+      const assetsWithAllocation = await getOwnAssetsWithAllocation(
+        veNetworkId,
+        accountId
+      )
 
+      console.log(assetsWithAllocation)
+      setAssetsWithAllocation(assetsWithAllocation)
+    }
+    init()
+  }, [asset, accountId])
   async function handleUpdateAllocation(amount: number, resetForm: () => void) {
-    console.log('submit')
-
-    const config = getOceanConfig(5)
+    const config = getOceanConfig(veNetworkId)
+    console.log('ve config', config)
     const veAllocation = new VeAllocate(
       '0x3EFDD8f728c8e774aB81D14d0B2F07a8238960f4',
       web3
@@ -44,6 +68,7 @@ export default function VeAllocation(): ReactElement {
       asset.nftAddress,
       asset.chainId
     )
+    setTxId(tx.transactionHash)
   }
   return (
     <Formik
@@ -73,6 +98,19 @@ export default function VeAllocation(): ReactElement {
               </Button>
             )}
           </div>
+          {txId && (
+            <SuccessConfetti
+              className={styles.success}
+              success="Update succesfull"
+              action={
+                <ExplorerLink networkId={veNetworkId} path={`/tx/${txId}`}>
+                  View transaction
+                </ExplorerLink>
+              }
+            />
+          )}
+          <h3 className={styles.text}>Assets with allocation</h3>
+          <AssetAllocationList assets={assetsWithAllocation} />
         </>
       )}
     </Formik>