Add Unnote image ability (#8626)

packages/page-preimages/src/Preimages/Free.tsx

@@ -0,0 +1,43 @@
+// Copyright 2017-2022 @polkadot/app-preimages authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Preimage } from '../types';
+
+import React, { useMemo } from 'react';
+
+import { TxButton } from '@polkadot/react-components';
+import { useAccounts, useApi } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  className?: string;
+  value: Preimage;
+}
+
+function Free ({ className, value: { count, deposit, proposalHash, status } }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const { allAccounts } = useAccounts();
+  const isAvailable = useMemo(
+    () => count === 0 && status && status.isUnrequested && deposit && allAccounts.includes(deposit.who),
+    [allAccounts, count, deposit, status]
+  );
+
+  if (!isAvailable || !deposit) {
+    return null;
+  }
+
+  return (
+    <TxButton
+      accountId={deposit.who}
+      className={className}
+      icon='minus'
+      label={t<string>('Unnote')}
+      params={[proposalHash]}
+      tx={api.tx.preimage.unnotePreimage}
+    />
+  );
+}
+
+export default React.memo(Free);

packages/page-preimages/src/Preimages/Preimage.tsx

@@ -9,6 +9,7 @@ import { formatNumber } from '@polkadot/util';
 
 import usePreimage from '../usePreimage';
 import Call from './Call';
+import Free from './Free';
 import Hash from './Hash';
 
 interface Props {
@@ -29,9 +30,12 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
       <td className='number'>
         {info?.status?.type}
       </td>
-      <td className='number'>
+      <td className='number media--1400'>
         {info && info.count !== 0 && formatNumber(info.count)}
       </td>
+      <td className='button'>
+        {info && <Free value={info} />}
+      </td>
     </tr>
   );
 }

packages/page-preimages/src/Preimages/index.tsx

@@ -28,7 +28,8 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
     [undefined, 'media--1300'],
     [t('size')],
     [t('status')],
-    [t('count')]
+    [t('count'), 'media--1400'],
+    []
   ]);
 
   return (