Bepro 1498 redesign payments page multi network only

components/profile/network-item.tsx

@@ -114,7 +114,7 @@ export default function NetworkItem({
               <FlexRow>
                 {renderAmount()}
                 {handleNetworkLink && (
-                  <Button className="button-gray-850 ms-3">
+                  <Button className="button-gray-850 ms-3" onClick={handleNetworkLink}>
                     <span>{t("go-to-network")}</span>{" "}
                     <ArrowUpRight className="w-9-p h-9-p" />
                   </Button>

components/profile/pages/payments.tsx

@@ -15,14 +15,22 @@ import {useAppState} from "contexts/app-state";
 
 import {formatNumberToCurrency} from "helpers/formatNumber";
 
+import { Network } from "interfaces/network";
 import {Payment} from "interfaces/payments";
 
 import {getCoinPrice} from "services/coingecko";
 
 import useApi from "x-hooks/use-api";
 
+export interface TotalFiatNetworks {
+  tokenAddress: string;
+  value: number;
+  price: number;
+  networkId: number;
+}
+
 export default function PaymentsPage() {
-  const { t } = useTranslation(["common", "profile"]);
+  const { t } = useTranslation(["common", "profile", "custom-network"]);
 
   const defaultOptions = [
     {
@@ -39,8 +47,10 @@ export default function PaymentsPage() {
     },
   ];
 
-  const [totalEuro, setTotalEuro] = useState(0);
+  const [totalFiat, setTotalFiat] = useState(0);
+  const [totalFiatNetworks, setTotalFiatNetworks] = useState<TotalFiatNetworks[]>([])
   const [payments, setPayments] = useState<Payment[]>([]);
+  const [networks, setNetworks] = useState<Network[]>([]);
   const [hasNoConvertedToken, setHasNoConvertedToken] = useState(false);
 
   const {state} = useAppState();
@@ -62,27 +72,43 @@ export default function PaymentsPage() {
   }
 
   useEffect(() => {
-    if (!state.currentUser?.walletAddress || !state.Service?.network?.active?.name) return;
+    if (!state.currentUser?.walletAddress) return;
+
+    getPayments(state.currentUser.walletAddress, startDate, endDate).then(setPayments);
+  }, [state.currentUser?.walletAddress, startDate, endDate]);
 
-    getPayments(state.currentUser.walletAddress, state.Service?.network?.active.name, startDate, endDate)
-      .then(setPayments);
-  }, [state.currentUser?.walletAddress, state.Service?.network?.active?.name, startDate, endDate]);
+  useEffect(() => {
+    if (!payments) return;
+    const allNetworks: Network[] = [];
+    payments.map((payment) => {
+      if (
+        !networks.find((network) => network?.id === payment?.issue?.network?.id) &&
+        !allNetworks.find((network) => network?.id === payment?.issue?.network?.id)
+      ) {
+        allNetworks.push(payment?.issue?.network);
+        setNetworks(allNetworks);
+      }
+    });
+  }, [payments]);
 
   useEffect(() => {
     if (!payments?.length) return;
 
     Promise.all(payments.map(async (payment) => ({
-        tokenAddress: payment.issue.transactionalToken.address,
+        tokenAddress: payment?.issue?.transactionalToken?.address,
         value: payment.ammount,
-        price: await getCoinPrice(payment.issue.transactionalToken.symbol, state?.Settings.currency.defaultFiat),
+        price: await getCoinPrice(payment?.issue?.transactionalToken?.symbol, state?.Settings.currency.defaultFiat),
+        networkId: payment?.issue?.network_id
     }))).then((tokens) => {
       const totalConverted = tokens.reduce((acc, token) => acc + token.value * (token.price || 0),
                                            0);
       const noConverted = !!tokens.find((token) => token.price === undefined);
-
-      setTotalEuro(totalConverted);
+
+      setTotalFiatNetworks(tokens)
+      setTotalFiat(totalConverted);
       setHasNoConvertedToken(noConverted);
     });
+
   }, [payments]);
 
   function onChangeDate(e: ChangeEvent<HTMLInputElement>,
@@ -112,10 +138,10 @@ export default function PaymentsPage() {
                     </span>
                     <div className="caption-large bg-dark-gray py-2 px-3 border-radius-8">
                       <span className="text-white">
-                        {formatNumberToCurrency(totalEuro)}
+                        {formatNumberToCurrency(totalFiat)}
                       </span>
 
-                      <span className="text-gray ml-1">{t("currencies.euro")}</span>
+                      <span className="text-gray ml-1">{state?.Settings?.currency?.defaultFiat}</span>
                     </div>
                   </>
                 )}
@@ -168,9 +194,14 @@ export default function PaymentsPage() {
         </FlexRow>
 
         <FlexRow className="justify-content-center">
-          <FlexColumn>
-            {payments?.length > 0 ? (
-              <PaymentsList payments={payments} />
+          <FlexColumn className="col-12">
+            {networks?.length > 0 ? (
+              <PaymentsList
+                payments={payments}
+                networks={networks}
+                totalNetworks={totalFiatNetworks}
+                symbol={state?.Settings?.currency?.defaultFiat?.toUpperCase()}
+              />
             ) : (
               <NothingFound description={t("filters.no-records-found")} />
             )}
@@ -179,4 +210,4 @@ export default function PaymentsPage() {
       </FlexColumn>
     </ProfileLayout>
   );
-}
+}

components/profile/payment-item.tsx

@@ -15,7 +15,7 @@ export default function PaymentItem({
   handleItemClick,
 }: Payment) {
   const CONTAINER_CLASSES = [
-    "justify-content-between align-items-center bg-transparent",
+    "justify-content-between align-items-center bg-gray-950",
     "border border-dark-gray border-radius-8 mb-2 py-3 px-4",
   ];
 
@@ -38,7 +38,15 @@ export default function PaymentItem({
         </FlexRow>
       </FlexColumn>
 
-      <Button color="light-gray" onClick={() => handleItemClick(issue?.issueId)} outline>
+      <Button
+        color="light-gray"
+        onClick={() =>
+          handleItemClick(issue?.issueId,
+                          issue?.network?.chain?.chainShortName,
+                          issue?.network?.name)
+        }
+        outline
+      >
         <span className="text-white text-nowrap">
           {labelBounty} #{issue?.issueId}
         </span>

components/profile/payments-list.tsx

@@ -3,38 +3,84 @@ import { useRouter } from "next/router";
 
 import PaymentItem from "components/profile/payment-item";
 
+import { Network } from "interfaces/network";
 import { Payment } from "interfaces/payments";
 
-import { useNetwork} from "x-hooks/use-network";
+import { useNetwork } from "x-hooks/use-network";
+
+import NetworkColumns from "./network-columns";
+import NetworkItem from "./network-item";
+import { TotalFiatNetworks } from "./pages/payments";
+import { FlexColumn } from "./wallet-balance";
 
 interface PaymentsListProps {
   payments: Payment[];
+  networks: Network[];
+  totalNetworks: TotalFiatNetworks[];
+  symbol: string;
 }
 
 // TODO: Add InfiniteScroll and pagination
-export default function PaymentsList({ payments }: PaymentsListProps) {
+export default function PaymentsList({
+  payments,
+  networks,
+  totalNetworks,
+  symbol
+}: PaymentsListProps) {
   const { push } = useRouter();
   const { t } = useTranslation(["common", "profile", "bounty"]);
 
   const { getURLWithNetwork } = useNetwork();
 
-  function handleItemClick(issueId: string) {
-    const [repoId, id] = issueId.split('/')
+  function handleItemClick(issueId: string, chainName: string, networkName: string) {
+    const [repoId, id] = issueId.split("/");
+
+    push(getURLWithNetwork("/bounty", { id, repoId, chain: chainName, network: networkName}));
+  }
 
-    push(getURLWithNetwork('/bounty', { id, repoId }));
+  function handleAmount(networkId: number) {
+    return totalNetworks
+      .filter((n) => n?.networkId === networkId)
+      .reduce((acc, token) => acc + token.value * (token.price || 0), 0);
   }
 
-  if (!payments) return null;
+  if (!payments || !networks) return null;
   return (
     <>
-      {payments &&
-        payments?.map((payment: Payment) =>
-          PaymentItem({
-            ...payment,
-            labelToken: t("misc.$token"),
-            labelBounty: t("bounty:label"),
-            handleItemClick
-          }))}
+      <NetworkColumns
+        columns={[
+          t("custom-network:steps.network-information.fields.name.default"),
+          "Total payments",
+          "Network link",
+        ]}
+      />
+      {networks &&
+        networks?.map((network, key) => (
+          <NetworkItem
+            key={key}
+            type="network"
+            networkName={network?.name}
+            iconNetwork={network?.logoIcon}
+            handleNetworkLink={() => {
+              push(getURLWithNetwork("/", { chain: network?.chain?.chainName, network: network?.name }))
+            }}
+            amount={handleAmount(network?.id)}
+            symbol={symbol}
+          >
+            <FlexColumn className="col-12">
+              {payments &&
+                payments
+                  ?.filter((p) => network?.id === p?.issue?.network?.id)
+                  .map((payment: Payment) =>
+                    PaymentItem({
+                      ...payment,
+                      labelToken: t("misc.$token"),
+                      labelBounty: t("bounty:label"),
+                      handleItemClick,
+                    }))}
+            </FlexColumn>
+          </NetworkItem>
+        ))}
     </>
   );
-}
+}

interfaces/payments.ts

@@ -9,5 +9,5 @@ export interface Payment {
   transactionHash: string;
   labelBounty?: string;
   labelToken?: string;
-  handleItemClick: (issueId: string) => void
+  handleItemClick: (issueId: string, chainName: string, networkName: string) => void
 }

pages/api/payments/index.ts

@@ -4,28 +4,18 @@ import {Op} from "sequelize";
 
 import models from "db/models";
 
-import {chainFromHeader} from "helpers/chain-from-header";
 import {resJsonMessage} from "helpers/res-json-message";
 
 import {LogAccess} from "middleware/log-access";
 import {WithValidChainId} from "middleware/with-valid-chain-id";
 import WithCors from "middleware/withCors";
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  const {wallet, networkName, startDate, endDate} = req.query;
+  const {wallet, startDate, endDate} = req.query;
 
-  const chain = await chainFromHeader(req);
+  const networks = await models.network.findAll({});
 
-  const network = await models.network.findOne({
-    where: {
-      name: {
-        [Op.iLike]: String(networkName).replaceAll(" ", "-")
-      },
-      chain_id: {[Op.eq]: +chain?.chainId}
-    }
-  });
-
-  if (!network) return resJsonMessage("Invalid network", res, 404);
+  if (!networks) return resJsonMessage("Network not found", res, 404);
 
   let filter: {
     createdAt?: {
@@ -55,11 +45,19 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
   const payments = await models.userPayments.findAll({
     include: [
-      { 
-        association: "issue", 
-        where: { network_id: network.id },
-        include:[{ association: "transactionalToken" }] 
-      }
+      {
+        association: "issue",
+        where: {
+          network_id: { [Op.in]: networks.map((network) => network.id) },
+        },
+        include: [
+          { association: "transactionalToken" },
+          {
+            association: "network",
+            include: [{ association: "chain", attributes: ["chainShortName"] }],
+          },
+        ],
+      },
     ],
     where: {
       address: {

styles/styles.scss

@@ -271,8 +271,6 @@ li {
   }
 }
 
-
-
 // familys
 .family-Regular {
   font-family: "Space Grotesk", sans-serif;
@@ -574,14 +572,13 @@ label {
 
 
 input[type="date"]::-webkit-calendar-picker-indicator {
-  background-color: $white !important;
   border-radius: 5px;
+  content: url(../assets/CalendarBlank.svg);
 }
 
 input[type="date"]::-webkit-calendar-picker-indicator:hover {
   transform:scale(1.2);
   cursor:pointer;
-  background-color: rgba($white, 0.2);
 }
 
 .input-group-border {

x-hooks/use-api.tsx

@@ -34,7 +34,6 @@ import { Token } from "interfaces/token";
 import {api} from "services/api";
 import { WinStorage } from "services/win-storage";
 
-import {Entities, Events} from "types/dappkit";
 
 import {updateSupportedChains} from "../contexts/reducers/change-supported-chains";
 import {toastError, toastSuccess} from "../contexts/reducers/change-toaster";
@@ -217,9 +216,9 @@ export default function useApi() {
       .catch(() => null);
   }
 
-  async function getPayments(wallet: string, networkName = DEFAULT_NETWORK_NAME, startDate: string, endDate: string) {
+  async function getPayments(wallet: string, startDate: string, endDate: string) {
     const dates = startDate ? { startDate, endDate } : { endDate }
-    const params = new URLSearchParams({ wallet, networkName, ...dates }).toString();
+    const params = new URLSearchParams({ wallet, ...dates }).toString();
 
     return api
       .get<IssueData[]>(`/payments?${params}`)