Collect tokens by publisher (#1120)

* get tokens balance wip

* use ButtonBuy component

* collect and sum base tokens

* delete logs, get tx

* center button

* feedback and loader added

* query by exchangeId

* fixes

* correct token symbol, set balance to 0 after collect

Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com>

src/@utils/feedback.ts

@@ -11,6 +11,13 @@ export function getOrderFeedback(
   }
 }
 
+export function getCollectTokensFeedback(
+  baseTokenSymbol: string,
+  baseTokenBalance: string
+) {
+  return `Collecting ${baseTokenBalance} ${baseTokenSymbol} from asset `
+}
+
 // TODO: customize for compute
 export const computeFeedback: { [key in number]: string } = {
   0: 'Ordering asset...',

src/components/@shared/ButtonBuy/index.tsx

@@ -4,7 +4,7 @@ import styles from './index.module.css'
 import Loader from '../atoms/Loader'
 
 interface ButtonBuyProps {
-  action: 'download' | 'compute'
+  action: 'download' | 'compute' | 'collect'
   disabled: boolean
   hasPreviousOrder: boolean
   hasDatatoken: boolean
@@ -153,6 +153,8 @@ export default function ButtonBuy({
       ? 'Start Compute Job'
       : priceType === 'free' && algorithmPriceType === 'free'
       ? 'Order Compute Job'
+      : action === 'collect'
+      ? `Collect ${dtBalance} ${dtSymbol}`
       : `Buy Compute Job`
 
   return (

src/components/Asset/AssetActions/Download.module.css

@@ -16,3 +16,10 @@
   width: 100%;
   margin-top: calc(var(--spacer));
 }
+
+.collect {
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+  margin-top: calc(var(--spacer) / 2);
+}

src/components/Asset/AssetActions/Download.tsx

@@ -7,16 +7,37 @@ import ButtonBuy from '@shared/ButtonBuy'
 import { secondsToString } from '@utils/ddo'
 import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute'
 import styles from './Download.module.css'
-import { FileMetadata, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
+import {
+  FileMetadata,
+  LoggerInstance,
+  ZERO_ADDRESS,
+  FixedRateExchange
+} from '@oceanprotocol/lib'
 import { order } from '@utils/order'
 import { AssetExtended } from 'src/@types/AssetExtended'
-import { buyDtFromPool, calculateBuyPrice } from '@utils/pool'
+import { buyDtFromPool } from '@utils/pool'
 import { downloadFile } from '@utils/provider'
-import { getOrderFeedback } from '@utils/feedback'
+import { getCollectTokensFeedback, getOrderFeedback } from '@utils/feedback'
 import { getOrderPriceAndFees } from '@utils/accessDetailsAndPricing'
 import { OrderPriceAndFees } from 'src/@types/Price'
 import { toast } from 'react-toastify'
+import { gql, OperationResult } from 'urql'
+import { fetchData, getQueryContext } from '@utils/subgraph'
+import { getOceanConfig } from '@utils/ocean'
+import { FixedRateExchanges } from 'src/@types/subgraph/FixedRateExchanges'
 
+const FixedRateExchangesQuery = gql`
+  query FixedRateExchanges($user: String, $exchangeId: String) {
+    fixedRateExchanges(where: { owner: $user, exchangeId: $exchangeId }) {
+      id
+      owner {
+        id
+      }
+      exchangeId
+      baseTokenBalance
+    }
+  }
+`
 export default function Download({
   asset,
   file,
@@ -40,6 +61,9 @@ export default function Download({
   const [isLoading, setIsLoading] = useState(false)
   const [isOwned, setIsOwned] = useState(false)
   const [validOrderTx, setValidOrderTx] = useState('')
+  const [isCollectLoading, setIsCollectLoading] = useState(false)
+  const [baseTokenBalance, setBaseTokenBalance] = useState(0)
+  const [collectStatusText, setCollectStatusText] = useState('')
   const [orderPriceAndFees, setOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
   useEffect(() => {
@@ -80,6 +104,29 @@ export default function Download({
     isOwned
   ])
 
+  useEffect(() => {
+    if (!accountId || asset.nft.owner !== accountId) return
+    const queryContext = getQueryContext(Number(asset.chainId))
+
+    async function getBaseTokenBalance() {
+      const variables = {
+        user: accountId.toLowerCase(),
+        exchangeId: asset?.accessDetails?.addressOrId
+      }
+      const result: OperationResult<FixedRateExchanges> = await fetchData(
+        FixedRateExchangesQuery,
+        variables,
+        queryContext
+      )
+      result?.data?.fixedRateExchanges[0]?.baseTokenBalance
+        ? setBaseTokenBalance(
+            parseInt(result?.data?.fixedRateExchanges[0]?.baseTokenBalance)
+          )
+        : setBaseTokenBalance(0)
+    }
+    getBaseTokenBalance()
+  }, [accountId, asset?.accessDetails?.addressOrId, asset.chainId, asset.nft])
+
   async function handleOrderOrDownload() {
     setIsLoading(true)
     if (isOwned) {
@@ -127,6 +174,37 @@ export default function Download({
     setIsLoading(false)
   }
 
+  async function handleCollectTokens() {
+    setIsCollectLoading(true)
+    const config = getOceanConfig(asset?.chainId)
+    const fixed = new FixedRateExchange(web3, config.fixedRateExchangeAddress)
+    try {
+      setCollectStatusText(
+        getCollectTokensFeedback(
+          asset.accessDetails.baseToken?.symbol,
+          baseTokenBalance.toString()
+        )
+      )
+
+      const tx = await fixed.collectBT(
+        accountId,
+        asset?.accessDetails?.addressOrId
+      )
+
+      if (!tx) {
+        setIsCollectLoading(false)
+        return
+      }
+      setBaseTokenBalance(0)
+      return tx
+    } catch (error) {
+      LoggerInstance.log(error.message)
+      setIsCollectLoading(false)
+    } finally {
+      setIsCollectLoading(false)
+    }
+  }
+
   const PurchaseButton = () => (
     <ButtonBuy
       action="download"
@@ -149,6 +227,26 @@ export default function Download({
     />
   )
 
+  const CollectTokensButton = () => (
+    <ButtonBuy
+      action="collect"
+      onClick={handleCollectTokens}
+      disabled={baseTokenBalance === 0 || !baseTokenBalance}
+      hasPreviousOrder={false}
+      hasDatatoken={false}
+      dtSymbol={asset?.accessDetails?.baseToken.symbol}
+      dtBalance={baseTokenBalance.toString()}
+      datasetLowPoolLiquidity={false}
+      assetType=""
+      stepText={collectStatusText}
+      assetTimeout=""
+      isConsumable={false}
+      consumableFeedback=""
+      isBalanceSufficient={false}
+      isLoading={isCollectLoading}
+    />
+  )
+
   return (
     <aside className={styles.consume}>
       <div className={styles.info}>
@@ -164,6 +262,9 @@ export default function Download({
           {!isInPurgatory && <PurchaseButton />}
         </div>
       </div>
+      <div className={styles.collect}>
+        {asset.nft.owner === accountId && <CollectTokensButton />}
+      </div>
       {asset?.metadata?.type === 'algorithm' && (
         <AlgorithmDatasetsListForCompute
           algorithmDid={asset.id}