chore: split up summarybox

Author: vacekj

packages/grant-explorer/src/features/round/ViewCartPage/SummaryBox.tsx

@@ -0,0 +1,46 @@
+import { BigNumber, ethers } from "ethers";
+import React from "react";
+import { PayoutToken } from "../../api/types";
+type SummaryBoxProps = {
+  payoutTokenPrice: number | undefined;
+  totalDonation: BigNumber;
+  selectedPayoutToken: PayoutToken;
+};
+export function Summary({
+  payoutTokenPrice,
+  totalDonation,
+  selectedPayoutToken,
+}: SummaryBoxProps) {
+  const totalDonationInUSD =
+    payoutTokenPrice &&
+    Number(
+      ethers.utils.formatUnits(totalDonation, selectedPayoutToken.decimal)
+    ) * Number(payoutTokenPrice.toFixed(2));
+
+  return (
+    <div className="shrink mb-5 block px-[16px] py-4 rounded-lg shadow-lg bg-white border border-violet-400 font-semibold">
+      <h2 className="text-xl border-b-2 pb-2">Summary</h2>
+      <div className="flex justify-between mt-4">
+        <p>Your Contribution</p>
+        <p>
+          <span data-testid={"totalDonation"} className="mr-2">
+            {ethers.utils.formatUnits(
+              totalDonation,
+              selectedPayoutToken.decimal
+            )}
+          </span>
+          <span data-testid={"summaryPayoutToken"}>
+            {selectedPayoutToken.name}
+          </span>
+        </p>
+      </div>
+      {payoutTokenPrice && (
+        <div className="flex flex-row-reverse mt-2">
+          <p className="text-[14px] text-grey-400">
+            $ {totalDonationInUSD?.toFixed(2)}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

packages/grant-explorer/src/features/round/ViewCartPage/ViewCartPage.tsx

@@ -43,6 +43,7 @@ import { ConfirmationModalBody } from "./ConfirmationModalBody";
 import { InfoModalBody } from "./InfoModalBody";
 import { Header } from "./Header";
 import { ApplyTooltip } from "./ApplyTooltip";
+import { Summary } from "./SummaryBox";
 
 export default function ViewCart() {
   const { chainId, roundId } = useParams();
@@ -313,7 +314,11 @@ export default function ViewCart() {
     return (
       <div className="order-first md:order-last">
         <div>
-          <Summary />
+          <Summary
+            payoutTokenPrice={payoutTokenPrice}
+            selectedPayoutToken={selectedPayoutToken}
+            totalDonation={totalDonation}
+          />
           <Button
             $variant="solid"
             data-testid="handle-confirmation"
@@ -564,41 +569,6 @@ export default function ViewCart() {
     );
   }
 
-  function Summary() {
-    const totalDonationInUSD =
-      payoutTokenPrice &&
-      Number(
-        ethers.utils.formatUnits(totalDonation, selectedPayoutToken.decimal)
-      ) * Number(payoutTokenPrice.toFixed(2));
-
-    return (
-      <div className="shrink mb-5 block px-[16px] py-4 rounded-lg shadow-lg bg-white border border-violet-400 font-semibold">
-        <h2 className="text-xl border-b-2 pb-2">Summary</h2>
-        <div className="flex justify-between mt-4">
-          <p>Your Contribution</p>
-          <p>
-            <span data-testid={"totalDonation"} className="mr-2">
-              {ethers.utils.formatUnits(
-                totalDonation,
-                selectedPayoutToken.decimal
-              )}
-            </span>
-            <span data-testid={"summaryPayoutToken"}>
-              {selectedPayoutToken.name}
-            </span>
-          </p>
-        </div>
-        {payoutTokenPrice && (
-          <div className="flex flex-row-reverse mt-2">
-            <p className="text-[14px] text-grey-400">
-              $ {totalDonationInUSD?.toFixed(2)}
-            </p>
-          </div>
-        )}
-      </div>
-    );
-  }
-
   function updateDonations(
     projectRegistryId: string,
     amount: string,