add itheum coalition category management

src/extensions/itheum/src/coalition/CoalitionTab.tsx

@@ -3,6 +3,7 @@ import { useScQuery } from '@peerme/core-ts'
 import { toTypedCoalitionInfo } from '../helpers'
 import React, { useState, useEffect } from 'react'
 import { useApp } from '../../../../shared/hooks/useApp'
+import { _CategoriesSection } from './_CategoriesSection'
 import { _AggregatorSection } from './_AggregatorSection'
 import { Contracts, getCoalitionContractAddress } from '../contracts'
 
@@ -17,5 +18,10 @@ export function CoalitionTab() {
       .then((data) => setInfo(toTypedCoalitionInfo(data.firstValue?.valueOf())))
   }, [])
 
-  return <>{!!info && <_AggregatorSection info={info} className="mb-4" />}</>
+  return (
+    <>
+      {!!info && <_AggregatorSection info={info} className="mb-4" />}
+      {!!info && <_CategoriesSection info={info} className="mb-4" />}
+    </>
+  )
 }

src/extensions/itheum/src/coalition/_CategoriesSection.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { CoalitionInfo } from '../types'
+import { Contracts } from '../contracts'
+import { useApp } from '../../../../shared/hooks/useApp'
+import { AppSection } from '../../../../shared/ui/elements'
+import { capitalizeFirstLetter } from '@peerme/core-ts'
+import { Button, Input } from '@peerme/web-ui'
+
+type Props = {
+  info: CoalitionInfo
+  className?: string
+}
+
+export function _CategoriesSection(props: Props) {
+  const app = useApp()
+  const [name, setName] = useState('')
+
+  const handleAdd = () =>
+    app.requestProposalAction(
+      Contracts(app.config).AddCategory.Address,
+      Contracts(app.config).AddCategory.Endpoint,
+      0,
+      [name],
+      []
+    )
+
+  const handleRemove = (name: string) =>
+    app.requestProposalAction(
+      Contracts(app.config).RemoveCategory.Address,
+      Contracts(app.config).RemoveCategory.Endpoint,
+      0,
+      [name],
+      []
+    )
+
+  return (
+    <div className={props.className}>
+      <AppSection
+        title="Create Category"
+        description="Data Providers can delegate their data to existing categories."
+        className="mb-4"
+      >
+        <Input placeholder="Category name ..." value={name} onChange={(val) => setName(val)} />
+        {name.length > 0 && (
+          <Button onClick={handleAdd} color="blue" className="mt-4">
+            Create
+          </Button>
+        )}
+      </AppSection>
+      <AppSection title="Our Categories">
+        <ul>
+          {props.info.categories.map((category) => (
+            <li key={category} className="flex items-center justify-between">
+              <span>{capitalizeFirstLetter(category)}</span>
+              <button onClick={() => handleRemove(category)}>Remove</button>
+            </li>
+          ))}
+        </ul>
+      </AppSection>
+    </div>
+  )
+}

src/extensions/itheum/src/contracts.tsx

@@ -5,6 +5,8 @@ import { ClaimActionPreview } from './previews/ClaimActionPreview'
 import { AddOfferActionPreview } from './previews/AddOfferActionPreview'
 import { AcceptOfferActionPreview } from './previews/AcceptOfferActionPreview'
 import { Network, ExtensionScInfo, ExtensionConfig } from '../../../shared/types'
+import { AddCategoryActionPreview } from './previews/coalition/AddCategoryActionPreview'
+import { RemoveCategoryActionPreview } from './previews/coalition/RemoveCategoryActionPreview'
 
 export const getClaimsContractAddress = (network: Network) => {
   if (network === 'devnet') return 'erd1qqqqqqqqqqqqqpgqwu6qz3skzzdnmvnkknjngvrprpt4fwzffsxsr8ecca'
@@ -70,4 +72,16 @@ export const Contracts = (config: ExtensionConfig): ExtensionScInfo => ({
     Endpoint: 'getInfo',
     AbiUrl: Config.Abis.Coalition,
   },
+  AddCategory: {
+    Address: getCoalitionContractAddress(config.network),
+    Endpoint: 'addCategory',
+    AbiUrl: Config.Abis.Coalition,
+    ActionPreview: (action: ProposalAction) => <AddCategoryActionPreview action={action} />,
+  },
+  RemoveCategory: {
+    Address: getCoalitionContractAddress(config.network),
+    Endpoint: 'removeCategory',
+    AbiUrl: Config.Abis.Coalition,
+    ActionPreview: (action: ProposalAction) => <RemoveCategoryActionPreview action={action} />,
+  },
 })

src/extensions/itheum/src/previews/coalition/AddCategoryActionPreview.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ProposalAction } from '@peerme/core-ts'
+import { ActionPreviewHighlight } from '../../../../../shared/ui/elements'
+
+type Props = {
+  action: ProposalAction
+}
+
+export function AddCategoryActionPreview(props: Props) {
+  const category = props.action.arguments[0] as string
+
+  return (
+    <ActionPreviewHighlight>
+      create a new category for our Data Coalition: <strong>{category}</strong>
+    </ActionPreviewHighlight>
+  )
+}

src/extensions/itheum/src/previews/coalition/RemoveCategoryActionPreview.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ProposalAction } from '@peerme/core-ts'
+import { ActionPreviewHighlight } from '../../../../../shared/ui/elements'
+
+type Props = {
+  action: ProposalAction
+}
+
+export function RemoveCategoryActionPreview(props: Props) {
+  const category = props.action.arguments[0] as string
+
+  return (
+    <ActionPreviewHighlight>
+      remove the category <strong>{category}</strong> from our Data Coalition.
+    </ActionPreviewHighlight>
+  )
+}