Project eviction based on rent (#3885)

packages/page-contracts/src/Contracts/Contract.tsx

@@ -3,15 +3,16 @@
 
 import { ContractCallOutcome } from '@polkadot/api-contract/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ContractInfo } from '@polkadot/types/interfaces';
+import { BlockNumber, ContractInfo } from '@polkadot/types/interfaces';
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import keyring from '@polkadot/ui-keyring';
 import { ContractPromise } from '@polkadot/api-contract';
 import { AddressInfo, AddressMini, Button, Forget } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
+import { BlockToTime } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
-import { isUndefined } from '@polkadot/util';
+import { formatNumber, isFunction, isUndefined } from '@polkadot/util';
 
 import Messages from '../shared/Messages';
 import { useTranslation } from '../translate';
@@ -30,9 +31,20 @@ function transformInfo (optInfo: Option<ContractInfo>): ContractInfo | null {
 function Contract ({ className, contract, index, onCall }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
   const info = useCall<ContractInfo | null>(api.query.contracts.contractInfoOf, [contract.address], { transform: transformInfo });
+  const [evictAt, setEvictAt] = useState<BlockNumber | null>(null);
   const [isForgetOpen, toggleIsForgetOpen] = useToggle();
 
+  useEffect((): void => {
+    if (info && isFunction(api.rpc.contracts?.rentProjection)) {
+      api.rpc.contracts
+        .rentProjection(contract.address)
+        .then((value) => setEvictAt(value.unwrapOr(null)))
+        .catch(() => undefined);
+    }
+  }, [api, contract, info]);
+
   const _onCall = useCallback(
     (messageIndex: number, resultCb: (messageIndex: number, result?: ContractCallOutcome) => void) => onCall(index, messageIndex, resultCb),
     [index, onCall]
@@ -97,6 +109,14 @@ function Contract ({ className, contract, index, onCall }: Props): React.ReactEl
             : t<string>('Not on-chain')
         )}
       </td>
+      <td className='number together media--1100'>
+        {bestNumber && evictAt && (
+          <>
+            <BlockToTime blocks={evictAt.sub(bestNumber)} />
+            #{formatNumber(evictAt)}
+          </>
+        )}
+      </td>
       <td className='button'>
         <Button
           icon='trash'

packages/page-contracts/src/Contracts/index.tsx

@@ -41,6 +41,7 @@ function Contracts ({ contracts: keyringContracts }: Props): React.ReactElement<
     [t('contracts'), 'start'],
     [undefined, undefined, 2],
     [t('status'), 'start'],
+    [undefined, 'media--1100'],
     []
   ]);