Sort bounties in descending order (#4421)

packages/page-bounties/src/Bounties.spec.tsx

@@ -220,6 +220,24 @@ describe('Bounties', () => {
     expect(queryAllByText('No open bounties')).toHaveLength(0);
   });
 
+  it('renders bounties in order from newest to oldest', async () => {
+    const bounty1 = bountyInStatus('Proposed');
+    const bounty2 = bountyInStatus('Proposed');
+    const bounty3 = bountyInStatus('Proposed');
+
+    const { findAllByTestId } = renderBounties({ bounties: [
+      { bounty: bounty1, description: 'bounty 2', index: anIndex(2), proposals: [] },
+      { bounty: bounty2, description: 'bounty 1', index: anIndex(1), proposals: [] },
+      { bounty: bounty3, description: 'bounty 3', index: anIndex(3), proposals: [] }
+    ] });
+
+    const descriptions = await findAllByTestId('description');
+
+    expect(descriptions[0].textContent).toEqual('bounty 3');
+    expect(descriptions[1].textContent).toEqual('bounty 2');
+    expect(descriptions[2].textContent).toEqual('bounty 1');
+  });
+
   describe('create bounty modal', () => {
     it('validates bounty length', async () => {
       const { findByTestId, findByText } = renderBounties({ maximumReasonLength: 5 });

packages/page-bounties/src/Bounties.tsx

@@ -38,16 +38,18 @@ function Bounties (): React.ReactElement {
         empty={bounties && t<string>('No open bounties')}
         header={headerRef.current}
       >
-        {bounties && bestNumber && bounties.map(({ bounty, description, index, proposals }) => (
-          <Bounty
-            bestNumber={bestNumber}
-            bounty={bounty}
-            description={description}
-            index={index}
-            key={index.toNumber()}
-            proposals={proposals}
-          />
-        ))}
+        {bounties && bestNumber &&
+        bounties.sort((a, b) => b.index.cmp(a.index))
+          .map(({ bounty, description, index, proposals }) => (
+            <Bounty
+              bestNumber={bestNumber}
+              bounty={bounty}
+              description={description}
+              index={index}
+              key={index.toNumber()}
+              proposals={proposals}
+            />
+          ))}
       </Table>
     </>
   );

packages/page-bounties/src/Bounty.tsx

@@ -66,7 +66,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
             )}
           </div>
         </td>
-        <td>{truncateTitle(description, 30)}</td>
+        <td data-testid='description'>{truncateTitle(description, 30)}</td>
         <td><FormatBalance value={value} /></td>
         <td>{curator ? <AddressSmall value={curator} /> : EMPTY_CELL}</td>
         <td><DueBlocks dueBlocks={blocksUntilUpdate} /></td>