No contributions to past crowdloans (#4953)

* No contributions to past crowdloans

* Past status to completed

* Remove extra var

packages/page-parachains/src/Crowdloan/Fund.tsx

@@ -58,7 +58,7 @@ function Fund ({ bestNumber, className, isOngoing, value: { info: { cap, deposit
     [cap, raised]
   );
 
-  const canContribute = blocksLeft && !isCapped && !isWinner && retiring.isFalse;
+  const canContribute = isOngoing && blocksLeft && !isCapped && !isWinner && retiring.isFalse;
   const canDissolve = raised.isZero() || isRetired;
 
   return (
@@ -75,7 +75,9 @@ function Fund ({ bestNumber, className, isOngoing, value: { info: { cap, deposit
               : blocksLeft
                 ? isCapped
                   ? t<string>('Capped')
-                  : t<string>('Active')
+                  : isOngoing
+                    ? t<string>('Active')
+                    : t<string>('Past')
                 : t<string>('Ended')
         }
       </td>

packages/page-parachains/src/Crowdloan/Funds.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type BN from 'bn.js';
-import type { Campaign } from '../types';
+import type { Campaign, LeasePeriod } from '../types';
 
 import React, { useMemo, useRef } from 'react';
 
@@ -14,19 +14,22 @@ import Fund from './Fund';
 interface Props {
   bestNumber?: BN;
   className?: string;
+  leasePeriod?: LeasePeriod;
   value: Campaign[] | null;
 }
 
-function extractLists (value: Campaign[] | null): [Campaign[] | null, Campaign[] | null] {
-  return value
+function extractLists (value: Campaign[] | null, leasePeriod?: LeasePeriod): [Campaign[] | null, Campaign[] | null] {
+  const currentPeriod = leasePeriod?.currentPeriod;
+
+  return value && currentPeriod
     ? [
-      value.filter(({ isCapped, isEnded, isWinner }) => !(isCapped || isEnded || isWinner)),
-      value.filter(({ isCapped, isEnded, isWinner }) => (isCapped || isEnded || isWinner))
+      value.filter(({ firstSlot, isCapped, isEnded, isWinner }) => !(isCapped || isEnded || isWinner) && currentPeriod.lt(firstSlot)),
+      value.filter(({ firstSlot, isCapped, isEnded, isWinner }) => (isCapped || isEnded || isWinner) || currentPeriod.gte(firstSlot))
     ]
     : [null, null];
 }
 
-function Funds ({ bestNumber, className, value }: Props): React.ReactElement<Props> {
+function Funds ({ bestNumber, className, leasePeriod, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const headerActiveRef = useRef([
@@ -47,8 +50,8 @@ function Funds ({ bestNumber, className, value }: Props): React.ReactElement<Pro
   ]);
 
   const [active, ended] = useMemo(
-    () => extractLists(value),
-    [value]
+    () => extractLists(value, leasePeriod),
+    [leasePeriod, value]
   );
 
   return (

packages/page-parachains/src/Crowdloan/index.tsx

@@ -42,6 +42,7 @@ function Crowdloan ({ auctionInfo, campaigns: { activeCap, activeRaised, funds,
       </Button.Group>
       <Funds
         bestNumber={bestNumber}
+        leasePeriod={leasePeriod}
         value={funds}
       />
     </div>