Allow endorsements in countdown (#3197)

packages/page-treasury/src/Overview/Tip.tsx

@@ -98,42 +98,39 @@ function Tip ({ bestNumber, className = '', hash, isMember, members, tip }: Prop
           </Expander>
         )}
       </td>
-      <td className='button'>
+      <td className='button together'>
         {closesAt
-          ? bestNumber && (
-            closesAt.gt(bestNumber)
-              ? (
-                <div className='closingTimer'>
-                  <BlockToTime blocks={closesAt.sub(bestNumber)} />
-                  #{formatNumber(closesAt)}
-                </div>
-              )
-              : (
-                <TipClose
-                  hash={hash}
-                  isMember={isMember}
-                  members={members}
-                />
-              )
+          ? (bestNumber && closesAt.gt(bestNumber)) && (
+            <div className='closingTimer'>
+              <BlockToTime blocks={closesAt.sub(bestNumber)} />
+              #{formatNumber(closesAt)}
+            </div>
+          )
+          : finder && (
+            <TxButton
+              accountId={finder}
+              icon='times'
+              isDisabled={!isFinder}
+              label={t('Cancel')}
+              params={[hash]}
+              tx='treasury.retractTip'
+            />
+          )
+        }
+        {(!closesAt || !bestNumber || closesAt.gt(bestNumber))
+          ? (
+            <TipEndorse
+              hash={hash}
+              isMember={isMember}
+              members={members}
+            />
           )
           : (
-            <>
-              {finder && (
-                <TxButton
-                  accountId={finder}
-                  icon='times'
-                  isDisabled={!isFinder}
-                  label={t('Cancel')}
-                  params={[hash]}
-                  tx='treasury.retractTip'
-                />
-              )}
-              <TipEndorse
-                hash={hash}
-                isMember={isMember}
-                members={members}
-              />
-            </>
+            <TipClose
+              hash={hash}
+              isMember={isMember}
+              members={members}
+            />
           )
         }
       </td>
@@ -151,6 +148,7 @@ function Tip ({ bestNumber, className = '', hash, isMember, members, tip }: Prop
 
 export default React.memo(styled(Tip)`
   .closingTimer {
+    display: inline-block;
     padding: 0 0.5rem;
   }
 `);

packages/page-treasury/src/Overview/Tips.tsx

@@ -8,7 +8,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { Option } from '@polkadot/types';
-import { BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Tip from './Tip';
@@ -34,7 +33,15 @@ function Tips ({ className = '', hashes, isMember, members }: Props): React.Reac
       optTips
         .map((opt, index): [string, OpenTip | null] => [hashes[index], opt.unwrapOr(null)])
         .filter((val): val is [string, OpenTip] => !!val[1])
-        .sort((a, b) => a[1].closes.unwrapOr(BN_ZERO).cmp(b[1].closes.unwrapOr(BN_ZERO)))
+        .sort((a, b) =>
+          a[1].closes.isNone
+            ? b[1].closes.isNone
+              ? 0
+              : -1
+            : b[1].closes.isSome
+              ? b[1].closes.unwrap().cmp(a[1].closes.unwrap())
+              : 1
+        )
     );
   }, [hashes, optTips]);