add itheum dashboard widget

src/extensions/itheum/register.ts

@@ -2,6 +2,7 @@ import { App } from './src/App'
 import { Contracts } from './src/contracts'
 import { LogoBlack } from './meta/LogoBlack'
 import { LogoWhite } from './meta/LogoWhite'
+import { DashboardWidget } from './src/widgets/DashboardWidget'
 import type { ExtensionConfig, ExtensionInfo } from '../../shared/types'
 
 export const ItheumExtension = (config: ExtensionConfig): ExtensionInfo => ({
@@ -17,6 +18,7 @@ export const ItheumExtension = (config: ExtensionConfig): ExtensionInfo => ({
   Contracts: Contracts(config),
   AppRoot: App,
   WidgetRoots: {
+    Dashboard: DashboardWidget,
   },
   Developer: {
     Name: 'PeerMe',

src/extensions/itheum/src/config.ts

@@ -11,6 +11,7 @@ export const Config = {
     Claims: 'https://peerme.io/abis/itheum/claims.abi.json',
     Marketplace: 'https://peerme.io/abis/itheum/data_market.abi.json',
     DataNft: 'https://peerme.io/abis/itheum/datanftmint.abi.json',
+    Coalition: 'https://peerme.io/abis/itheum/data-coalition.abi.json',
   },
 
   TokenId: (network: Network) => {
@@ -26,6 +27,7 @@ export const Config = {
   },
 
   Urls: {
+    Web: 'https://itheum.io',
     MarketplaceOffer: (network: Network, offerId: number) => {
       if (network === 'devnet') return `${DexDevnetUrl}/dataNfts/marketplace/DATANFTFT2-71ac28-7e/offer-${offerId}`
       if (network === 'testnet') return '#'

src/extensions/itheum/src/contracts.tsx

@@ -6,18 +6,24 @@ import { AddOfferActionPreview } from './previews/AddOfferActionPreview'
 import { AcceptOfferActionPreview } from './previews/AcceptOfferActionPreview'
 import { Network, ExtensionScInfo, ExtensionConfig } from '../../../shared/types'
 
-const getClaimsContractAddress = (network: Network) => {
+export const getClaimsContractAddress = (network: Network) => {
   if (network === 'devnet') return 'erd1qqqqqqqqqqqqqpgqwu6qz3skzzdnmvnkknjngvrprpt4fwzffsxsr8ecca'
   if (network === 'testnet') return '#'
   return 'erd1qqqqqqqqqqqqqpgqnsmrn5q08eqth3fy8el87sgdj0mkhwdwl2jqnf59cg'
 }
 
-const getMarketContractAddress = (network: Network) => {
+export const getMarketContractAddress = (network: Network) => {
   if (network === 'devnet') return 'erd1qqqqqqqqqqqqqpgqlhewm06p4c9qhq32p239hs45dvry948tfsxshx3e0l'
   if (network === 'testnet') return '#'
   return 'erd1qqqqqqqqqqqqqpgqay2r64l9nhhvmaqw4qanywfd0954w2m3c77qm7drxc'
 }
 
+export const getCoalitionContractAddress = (network: Network) => {
+  if (network === 'devnet') return 'erd1qqqqqqqqqqqqqpgqv9w6vmvtqjrscx00swr6n8exwkn7vpsdl3ts6xxuqh'
+  if (network === 'testnet') return '#'
+  return '#'
+}
+
 export const Contracts = (config: ExtensionConfig): ExtensionScInfo => ({
   // Claims
   Claim: {
@@ -58,4 +64,10 @@ export const Contracts = (config: ExtensionConfig): ExtensionScInfo => ({
     Endpoint: 'viewPagedOffers',
     AbiUrl: Config.Abis.Marketplace,
   },
+  // Coalition
+  GetInfo: {
+    Address: getCoalitionContractAddress(config.network),
+    Endpoint: 'getInfo',
+    AbiUrl: Config.Abis.Coalition,
+  },
 })

src/extensions/itheum/src/helpers.ts

@@ -1,8 +1,8 @@
 import BigNumber from 'bignumber.js'
 import { numberToPaddedHex } from '@peerme/core-ts'
 import { AbiRegistry, BinaryCodec } from '@multiversx/sdk-core'
-import { ClaimInfo, DataNftMetadata, MarketRequirements, OfferInfo } from './types'
 import { NonFungibleTokenOfAccountOnNetwork } from '@multiversx/sdk-network-providers'
+import { ClaimInfo, CoalitionInfo, DataNftMetadata, MarketRequirements, OfferInfo } from './types'
 
 export const toTypedMarketRequirements = (value: any): MarketRequirements => ({
   acceptedTokens: value.accepted_tokens.map((v: any) => v.toString()),
@@ -22,6 +22,13 @@ export const toTypedClaimInfo = (value: any): ClaimInfo =>
     lastModified: value.date.toNumber() * 1000,
   } as ClaimInfo)
 
+export const toTypedCoalitionInfo = (value: any): CoalitionInfo => ({
+  aggregator: value.aggregator.toString(),
+  categories: value.categories.map((v: any) => v.toString()),
+  admins: value.admins.map((v: any) => v.toString()),
+  delegators: value.delegators.toNumber(),
+})
+
 export const isValidItheumMarketplaceUrl = (str: string) => {
   const pattern = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[\:?\d]*)\S*$/
   return pattern.test(str)

src/extensions/itheum/src/types.ts

@@ -47,3 +47,10 @@ export type DataNftMetadata = {
   nonce: number
   collection: string
 }
+
+export type CoalitionInfo = {
+  aggregator: string
+  categories: string[]
+  admins: string[]
+  delegators: number
+}

src/extensions/itheum/src/widgets/DashboardWidget.tsx

@@ -0,0 +1,76 @@
+import clsx from 'clsx'
+import { Config } from '../config'
+import { Theme } from '@peerme/web-ui'
+import { CoalitionInfo } from '../types'
+import { useScQuery } from '@peerme/core-ts'
+import { toTypedCoalitionInfo } from '../helpers'
+import React, { useEffect, useState } from 'react'
+import { WidgetRootProps } from '../../../../shared/types'
+import { Contracts, getCoalitionContractAddress } from '../contracts'
+
+export function DashboardWidget(props: WidgetRootProps) {
+  const [info, setInfo] = useState<CoalitionInfo | null>(null)
+  const infoQuery = useScQuery(props.config.walletConfig, Contracts(props.config).GetInfo)
+
+  useEffect(() => {
+    infoQuery.query([getCoalitionContractAddress(props.config.network)]).then((data) => {
+      const value = data.firstValue?.valueOf()
+      if (!value) return
+      setInfo(toTypedCoalitionInfo(value))
+    })
+  }, [])
+
+  return (
+    <section>
+      <h2 className={clsx(Theme.TextSize.Large)}>Data Coalition</h2>
+      <p className="mb-2">
+        This Peering is a Data Coalition utilizing the{' '}
+        <a href={Config.Urls.Web} target="_blank" rel="noopener">
+          Itheum
+        </a>{' '}
+        protocol.
+      </p>
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+        <div className={clsx('px-4 py-2', Theme.Background.Subtle, Theme.BorderRadius.Subtle)}>
+          <h3 className={clsx('mb-2', Theme.TextSize.Base)}>My Data NFTs</h3>
+          <_Button onClick={() => {}} inverted>
+            View
+          </_Button>
+        </div>
+        <div className={clsx('px-4 py-2', Theme.Background.Subtle, Theme.BorderRadius.Subtle)}>
+          <h3 className={clsx('mb-2', Theme.TextSize.Base)}>Stake Itheum</h3>
+          <_Button onClick={() => {}} inverted>
+            Stake
+          </_Button>
+        </div>
+        <div className={clsx('px-4 py-2', Theme.Background.Subtle, Theme.BorderRadius.Subtle)}>
+          <h3 className={clsx('mb-1', Theme.TextSize.Base)}>Data Providers</h3>
+          <strong className={clsx(Theme.TextSize.Huge, Theme.TextColor.Intense)}>
+            {info?.delegators !== undefined ? info.delegators : '-'}
+          </strong>
+        </div>
+        <div className={clsx('px-4 py-2', Theme.Background.Subtle, Theme.BorderRadius.Subtle)}>
+          <h3 className={clsx('mb-2', Theme.TextSize.Base)}>Data Categories</h3>
+          <strong className={clsx(Theme.TextSize.Huge, Theme.TextColor.Intense)}>-</strong>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function _Button(props: { children: string; onClick: () => void; inverted?: boolean }) {
+  return (
+    <button
+      onClick={props.onClick}
+      type="button"
+      className={clsx(
+        'duration-400 relative inline-flex items-center justify-center rounded-xl px-3 py-1 text-lg transition',
+        props.inverted
+          ? 'text-blue-500 hover:text-blue-400 dark:bg-gray-700 dark:hover:bg-gray-200'
+          : 'bg-blue-500 tracking-wide text-white hover:bg-blue-600'
+      )}
+    >
+      {props.children}
+    </button>
+  )
+}