BEPRO 2.13 (#994)

components/If.tsx

@@ -1,9 +1,9 @@
-import {ReactElement, useEffect, useState} from "react";
+import {ReactNode, useEffect, useState} from "react";
 
 interface IfProps {
   condition: boolean | (() => boolean);
-  otherwise?: ReactElement;
-  children: ReactElement;
+  otherwise?: ReactNode;
+  children: ReactNode;
 }
 
 export default function If({condition, children, otherwise}: IfProps) {

components/bounties/list-recent-issues.tsx

@@ -1,8 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useReducer } from "react";
 
 import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+
+import PlusIcon from "assets/icons/plus-icon";
 
 import LoadingList from "components/bounties/loading-list";
+import ContractButton from "components/contract-button";
 import CustomContainer from "components/custom-container";
 import IssueListItem from "components/issue-list-item";
 import NothingFound from "components/nothing-found";
@@ -12,42 +16,126 @@ import { IssueBigNumberData } from "interfaces/issue-data";
 import useApi from "x-hooks/use-api";
 import { useNetwork } from "x-hooks/use-network";
 
+interface BountiesStates {
+  openBounties?: IssueBigNumberData[];
+  loadingOpenBounties?: boolean;
+  fundingBounties?: IssueBigNumberData[];
+  loadingFundingBounties?: boolean;
+}
+
 export default function ListRecentIssues() {
   const { t } = useTranslation(["bounty"]);
+  const { push } = useRouter();
+
+  const [bounties, updateBounties] = useReducer((prev: BountiesStates, next: Partial<BountiesStates>) => {
+    return { ...prev, ...next };
+  },
+                                                {
+      openBounties: [],
+      loadingOpenBounties: false,
+      loadingFundingBounties: false,
+      fundingBounties: [],
+                                                });
 
-  const [loading, setLoading] = useState<boolean>(false);
-  const [bounties, setBounties] = useState<IssueBigNumberData[]>();
-
   const { networkName } = useNetwork();
   const { searchRecentIssues } = useApi();
 
-  useEffect(() => {
+  function numberOfColumns(numberBounties: number) {
+    if (numberBounties === 1) return 8;
+    if (numberBounties === 2) return 4;
+
+    return 12;
+  }
+
+  async function handleSearchRecentIssues(type: "open" | "funding") {
+    const isOpen = type === "open";
+    const setLoading = (state: boolean) =>
+      updateBounties(isOpen
+          ? { loadingOpenBounties: state }
+          : { loadingFundingBounties: state });
+    const setBounties = (data: IssueBigNumberData[]) =>
+      updateBounties(isOpen ? { openBounties: data } : { fundingBounties: data });
+
     setLoading(true);
-    searchRecentIssues({ networkName })
+    searchRecentIssues({ networkName, state: type })
       .then(setBounties)
-      .catch(err => {
+      .catch((err) => {
         console.debug(err);
         setLoading(false);
       })
       .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    handleSearchRecentIssues("open");
+    handleSearchRecentIssues("funding");
   }, [networkName]);
 
-  return (
-    <CustomContainer>
-      <div className="d-flex mt-2 p-1">
-        <h4 className="mt-1">{t("recent-bounties")}</h4>
-      </div>
-
-      <LoadingList loading={loading} />
-      <div className="row gy-3 mb-3 mt-1">
-        {bounties &&
-          bounties?.map((bounty) => (
-            <div className="col-md-4 col" key={bounty.id}>
-              <IssueListItem issue={bounty} key={bounty.id} size="sm" />
-            </div>
-          ))}
-        {bounties?.length === 0 && <NothingFound description={t("recent-bounties-empty")}/>}
+  function renderNothingFound(type: "open" | "funding") {
+    const isOpen = type === "open";
+    const lenBounties = isOpen
+      ? bounties.openBounties?.length
+      : bounties.fundingBounties?.length || 0;
+
+    return (
+      <div className={`col-md-${numberOfColumns(lenBounties)}`}>
+        <NothingFound
+          description={isOpen ? t("not-found-bounty") : t("not-found-funding")}
+          type="dashed"
+        >
+          <div className="d-flex justify-content-center">
+            <ContractButton
+              onClick={() => push('/create-bounty')}
+              textClass="text-white-50"
+              className="read-only-button bg-gray-850 border-gray-850 mt-3"
+            >
+              <PlusIcon className="text-gray-400" />
+              <span>{isOpen ? t("create-bounty") : t("create-funding")}</span>
+            </ContractButton>
+          </div>
+        </NothingFound>
       </div>
-    </CustomContainer>
+    );
+  }
+
+  function renderBounties(type: "open" | "funding") {
+    const isOpen = type === "open";
+
+    const currentBounties = isOpen
+      ? bounties.openBounties
+      : bounties.fundingBounties;
+    const loadingState = isOpen
+      ? bounties.loadingOpenBounties
+      : bounties.loadingFundingBounties;
+
+    return (
+      <CustomContainer>
+        <div className="d-flex mt-2 p-1">
+          <h4 className="mt-1">
+            {isOpen ? t("recent-bounties") : t("recent-funding")}
+          </h4>
+        </div>
+
+        <LoadingList loading={loadingState} />
+        <div className="row gy-3 mb-3 mt-1">
+          {currentBounties &&
+            currentBounties?.map((bounty) => (
+              <div className="col-md-4 col" key={bounty.id}>
+                <IssueListItem issue={bounty} key={bounty.id} size="sm" />
+              </div>
+            ))}
+          {currentBounties?.length < 3 &&
+            !loadingState &&
+            renderNothingFound(isOpen ? "open" : "funding")}
+        </div>
+      </CustomContainer>
+    );
+  }
+
+  return (
+    <>
+      {renderBounties("open")}
+      {renderBounties("funding")}
+    </>
   );
 }

components/contextual-span.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, SVGProps } from "react";
+import { ReactNode, SVGProps, useState } from "react";
 
 import clsx from "clsx";
 
@@ -7,7 +7,9 @@ import InfoIconEmpty from "assets/icons/info-icon-empty";
 import SuccessIcon from "assets/icons/success-icon";
 import WarningIcon from "assets/icons/warning-icon";
 
-import { FlexRow } from "components/profile/wallet-balance";
+import Button from "components/button";
+import If from "components/If";
+import { FlexColumn, FlexRow } from "components/profile/wallet-balance";
 
 interface ContextualSpanProps {
   children: ReactNode;
@@ -16,6 +18,7 @@ interface ContextualSpanProps {
   className?: string;
   classNameIcon?: string;
   isAlert?: boolean;
+  isDismissable?: boolean;
 }
 
 export function ContextualSpan({
@@ -25,11 +28,16 @@ export function ContextualSpan({
   className = "",
   isAlert,
   classNameIcon,
+  isDismissable = false
 }: ContextualSpanProps) {
+  const [visible, setVisible] = useState(true);
+
   const contextColor = color || context;
-  const CLASSES = clsx("p family-Regular font-weight-medium border-radius-4 align-items-center mx-0 px-1", 
-                       `text-${contextColor} ${className}`,
-                       isAlert && `bg-${contextColor}-25 py-2 border border-${contextColor}`);
+  const CLASSES = clsx([
+    "p family-Regular font-weight-medium border-radius-4 align-items-center mx-0",
+    `text-${contextColor} ${className}`,
+    isAlert && `bg-${contextColor}-25 p-3 border border-${contextColor} border-radius-8 justify-content-between`
+  ]);
 
   const Icon = (props: SVGProps<SVGSVGElement>) => {
     const icons = {
@@ -43,12 +51,36 @@ export function ContextualSpan({
     return icons[context](props);
   };
 
+  function hide() {
+    setVisible(false);
+  }
+
+  if (isAlert && isDismissable && !visible)
+    return <></>;
+
   return(
     <FlexRow className={CLASSES}>
-      <span className={`mr-1 svg-${contextColor} ${classNameIcon}`}>
-        <Icon width={12} height={12} />
-      </span>
-      {children}
+      <FlexColumn>
+        <FlexRow className="align-items-center">
+          <span className={`mr-1 svg-${contextColor} ${classNameIcon}`}>
+            <Icon width={12} height={12} />
+          </span>
+
+          {children}
+        </FlexRow>
+      </FlexColumn>
+
+      <If condition={isAlert && isDismissable}>
+        <FlexColumn>
+          <Button
+            transparent
+            onClick={hide}
+            className={`svg-${contextColor} p-0 not-svg`}
+          >
+            <CloseIcon width={10} height={10} />
+          </Button>
+        </FlexColumn>
+      </If>
     </FlexRow>
   );
 }

components/custom-network/new-network-stepper.tsx

@@ -61,7 +61,7 @@ function NewNetwork() {
   const { tokensLocked, details, github, tokens, settings, isSettingsValidated, cleanStorage } = useNetworkSettings();
 
   const isSetupPage = router?.pathname?.toString()?.includes("setup");
-    
+
   const creationSteps = [
     { id: 1, name: t("custom-network:modals.loader.steps.deploy-network") },
     { id: 1, name: t("custom-network:modals.loader.steps.changing-draft-time") },
@@ -102,7 +102,7 @@ function NewNetwork() {
       colors: JSON.stringify(settings.theme.colors),
       logoIcon: await psReadAsText(details.iconLogo.value.raw),
       fullLogo: await psReadAsText(details.fullLogo.value.raw),
-      repositories: 
+      repositories:
         JSON.stringify(github.repositories
           .filter((repo) => repo.checked)
           .filter((repo) => repo?.userPermission === "ADMIN")
@@ -147,7 +147,7 @@ function NewNetwork() {
       setCreatingNetwork(1);
       await handleChangeNetworkParameter("draftTime", draftTime, deployedNetworkAddress);
     }
-    
+
     if (disputableTime !== DEFAULT_DISPUTE_TIME) {
       setCreatingNetwork(2);
       await handleChangeNetworkParameter("disputableTime", disputableTime, deployedNetworkAddress);
@@ -199,10 +199,10 @@ function NewNetwork() {
 
     setCreatingNetwork(10);
     cleanStorage?.();
-    await processEvent(RegistryEvents.NetworkRegistered, state.connectedChain?.registry, { 
-      fromBlock: registrationTx.blockNumber 
+    await processEvent(RegistryEvents.NetworkRegistered, state.connectedChain?.registry, {
+      fromBlock: registrationTx.blockNumber
     })
-      .then(() => router.push(getURLWithNetwork("/", { 
+      .then(() => router.push(getURLWithNetwork("/", {
         network: payload.name,
         chain: state.connectedChain?.shortName
       })))
@@ -223,7 +223,7 @@ function NewNetwork() {
 
   function checkHasNetwork() {
     dispatch(changeLoadState(true));
-    
+
     state.Service?.active.getNetworkAdressByCreator(state.currentUser.walletAddress)
       .then(networkAddress => setHasNetwork(!isZeroAddress(networkAddress)))
       .catch(console.debug)
@@ -234,12 +234,10 @@ function NewNetwork() {
     const walletAddress = state.currentUser?.walletAddress;
     const connectedChain = state.connectedChain;
 
-    if (!state.Service?.active || !walletAddress || !connectedChain) return;
-
-    if (walletAddress && connectedChain.name === UNSUPPORTED_CHAIN) {
-      dispatch(changeNeedsToChangeChain(true));
-      return;
-    }
+    if (!state.Service?.active ||
+        !walletAddress ||
+        !connectedChain ||
+        connectedChain?.name === UNSUPPORTED_CHAIN) return;
 
     checkHasNetwork();
   }, [state.Service?.active, state.currentUser, state.connectedChain]);