Use bounty derive (#4193)

* Use derive bounties

* Remove unused description type

* Undo the downgrade of  api version

* Restore yarn.lock

Co-authored-by: Ewa Kowalska <ewcia.kowalska@gmail.com>
Co-authored-by: Krzysztof Jelski <krzysztof@ethworks.io>

packages/page-bounties/src/Bounties.tsx

@@ -1,34 +1,23 @@
 // Copyright 2017-2020 @polkadot/app-bounties authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Bytes, Option } from '@polkadot/types';
-import type { BlockNumber, Bounty as BountyType, BountyIndex } from '@polkadot/types/interfaces';
+import type { DeriveBounties } from '@polkadot/api-derive/types';
+import type { BlockNumber } from '@polkadot/types/interfaces';
 
 import React, { useRef } from 'react';
 
-import { BountyDescription } from '@polkadot/app-bounties/types';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { StorageKey } from '@polkadot/types';
 
 import Bounty from './Bounty';
 import { useTranslation } from './translate';
 
-type BountyEntry = [{ args: [BountyIndex] }, Option<BountyType>];
-type BountyDescriptionEntry = [StorageKey, Option<Bytes>];
-
-const transformBountyDescriptions = {
-  transform: (entries: BountyDescriptionEntry[]): BountyDescription[] => {
-    return entries.map(([key, description]) => ({ description: description.value.toHuman() as string, id: key.args[0] }));
-  }
-};
-
 function Bounties (): React.ReactElement {
   const { t } = useTranslation();
   const { api } = useApi();
 
-  const bounties = useCall<BountyEntry[]>(api.query.treasury.bounties.entries);
-  const bountyDescriptions = useCall<BountyDescription[]>(api.query.treasury.bountyDescriptions.entries, undefined, transformBountyDescriptions);
+  const deriveBounties = useCall<DeriveBounties>(api.derive.treasury.bounties);
+
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
 
   const headerRef = useRef([
@@ -45,14 +34,14 @@ function Bounties (): React.ReactElement {
 
   return (
     <Table
-      empty={bounties && t<string>('No open bounties')}
+      empty={deriveBounties && t<string>('No open bounties')}
       header={headerRef.current}
     >
-      {bounties && bountyDescriptions && bestNumber && bounties.map((bounty: BountyEntry, index: number): React.ReactNode => (
+      {deriveBounties && bestNumber && deriveBounties.map(({ bounty, description }, index) => (
         <Bounty
           bestNumber={bestNumber}
-          bounty={bounty[1].value}
-          description={bountyDescriptions[index]}
+          bounty={bounty}
+          description={description}
           index={index}
           key={index}
         />

packages/page-bounties/src/Bounty.tsx

@@ -6,7 +6,6 @@ import type { BlockNumber, Bounty as BountyType } from '@polkadot/types/interfac
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { BountyDescription } from '@polkadot/app-bounties/types';
 import { AddressSmall, Icon, LinkExternal } from '@polkadot/react-components';
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
@@ -18,7 +17,7 @@ interface Props {
   bestNumber: BlockNumber;
   bounty: BountyType;
   className?: string;
-  description: BountyDescription;
+  description: string;
   index: number;
 }
 
@@ -44,7 +43,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index }: Pro
     <>
       <tr className={className}>
         <td>{bountyStatus}</td>
-        <td>{description.description}</td>
+        <td>{description}</td>
         <td className='column-with-label'/>
         <td><FormatBalance value={value} /></td>
         <td className='column-with-label'/>

packages/page-bounties/src/types.ts

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { AccountId, BlockNumber } from '@polkadot/types/interfaces/runtime';
-import type { Codec } from '@polkadot/types/types';
 
 export interface BountyStatusType {
   beneficiary: string | undefined;
@@ -11,8 +10,3 @@ export interface BountyStatusType {
   unlockAt: number | undefined;
   updateDue: BlockNumber | undefined;
 }
-
-export interface BountyDescription {
-  id: Codec;
-  description: string;
-}