PNPM Audit

__tests__/components/CollectionDelegationComponent.test.tsx

@@ -60,6 +60,28 @@ describe("CollectionDelegationComponent", () => {
     expect(setSection).toHaveBeenCalledWith(DelegationCenterSection.CENTER);
   });
 
+  it("renders the top back button before the collection title", () => {
+    render(
+      <CollectionDelegationComponent
+        collection={collection}
+        setSection={setSection}
+      />
+    );
+
+    const heading = screen.getByRole("heading", {
+      name: "Test Collection",
+      level: 1,
+    });
+    const topBackButton = screen.getAllByRole("button", {
+      name: /Back to Delegation Center/i,
+    })[0];
+
+    expect(
+      topBackButton.compareDocumentPosition(heading) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+  });
+
   it("shows fetching messages initially", () => {
     render(
       <CollectionDelegationComponent

__tests__/components/nextGen/NextGenTokenImage.test.tsx

@@ -12,6 +12,10 @@ jest.mock("@/hooks/isMobileScreen", () => ({
 
 jest.mock("@/components/user/utils/UserCICAndLevel", () => ({
   __esModule: true,
+  UserCICAndLevelSize: {
+    SMALL: "SMALL",
+    MEDIUM: "MEDIUM",
+  },
   default: () => <div data-testid="cic" />,
 }));
 import { render, screen } from "@testing-library/react";

app/layout.tsx

@@ -7,6 +7,8 @@ import "@/components/drops/create/lexical/lexical.styles.scss";
 import "@/styles/Home.module.scss";
 import "@/styles/seize-bootstrap.scss";
 import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
 import "@/styles/swiper.scss";
 //keep this last so that we can override the styles of the above css files
 import "@/styles/animations.scss";

components/delegation/CollectionDelegation.tsx

@@ -839,7 +839,7 @@ export default function CollectionDelegationComponent(props: Readonly<Props>) {
   function printSubDelegations() {
     return (
       <>
-        <h5 className="pt-5 pb-1">
+        <h5 className="pt-4 pb-1">
           Use A Delegation Manager (For Delegations or Consolidations)
         </h5>
         <Accordion
@@ -910,7 +910,7 @@ export default function CollectionDelegationComponent(props: Readonly<Props>) {
   function printConsolidations() {
     return (
       <>
-        <h5 className="pt-5 pb-1">Consolidations</h5>
+        <h5 className="pt-4 pb-1">Consolidations</h5>
         <Accordion
           alwaysOpen
           className={`${styles["collectionDelegationsAccordion"]}`}
@@ -1200,7 +1200,7 @@ export default function CollectionDelegationComponent(props: Readonly<Props>) {
     return (
       <Container className="no-padding">
         <Row className={styles["delegationsTableScrollContainer"]}>
-          <Col className="pb-3">
+          <Col>
             <Table className={styles["delegationsTable"]}>
               <tbody>
                 {delegations > 0 ? (
@@ -1379,7 +1379,7 @@ export default function CollectionDelegationComponent(props: Readonly<Props>) {
     return (
       <Container className="no-padding">
         <Row className={styles["delegationsTableScrollContainer"]}>
-          <Col className="pb-3">
+          <Col>
             <Table className={styles["delegationsTable"]}>
               <tbody>
                 {delegations > 0 ? (
@@ -1762,13 +1762,8 @@ export default function CollectionDelegationComponent(props: Readonly<Props>) {
         <Col>
           {props.collection && (
             <Container>
-              <Row>
+              <Row className={styles["collectionDelegationBackRow"]}>
                 <Col>
-                  <h1 className="mb-0">{props.collection.title}</h1>
-                </Col>
-              </Row>
-              <Row className="pb-4">
-                <Col className="d-flex align-items-center justify-content-start">
                   <button
                     className={styles["backBtn"]}
                     onClick={() =>
@@ -1782,6 +1777,11 @@ export default function CollectionDelegationComponent(props: Readonly<Props>) {
                   </button>
                 </Col>
               </Row>
+              <Row className={styles["collectionDelegationTitleRow"]}>
+                <Col>
+                  <h1 className="mb-0">{props.collection.title}</h1>
+                </Col>
+              </Row>
               {!showUpdateDelegation &&
                 !showCreateNewDelegationWithSub &&
                 !showCreateNewSubDelegationWithSub &&
@@ -1803,7 +1803,9 @@ export default function CollectionDelegationComponent(props: Readonly<Props>) {
                             }
                           >
                             <FontAwesomeIcon icon={faCircleArrowLeft} />
-                            Back to Delegation Center
+                            <span className="font-smaller">
+                              Back to Delegation Center
+                            </span>
                           </button>
                         </Col>
                       </Row>

components/delegation/Delegation.module.scss

@@ -43,6 +43,15 @@
 }
 
 .collectionDelegationsAccordion {
+  --bs-accordion-bg: #{variables.$very-dark-grey};
+  --bs-accordion-border-color: transparent;
+  --bs-accordion-btn-bg: #{variables.$almost-very-dark-grey};
+  --bs-accordion-active-bg: #{variables.$almost-very-dark-grey};
+  --bs-accordion-btn-color: #{variables.$font-color};
+  --bs-accordion-active-color: #{variables.$font-color};
+  --bs-accordion-body-padding-x: 1rem;
+  --bs-accordion-body-padding-y: 0.75rem;
+
   h1,
   h2,
   h3,
@@ -54,11 +63,16 @@
   button {
     font-weight: bold;
   }
+
+  :global(.accordion-body) {
+    background-color: variables.$very-dark-grey;
+    color: variables.$font-color;
+  }
 }
 
 .collectionDelegationsAccordionItem {
   border-radius: 0 !important;
-  background-color: rgb(25, 25, 25);
+  background-color: variables.$very-dark-grey;
 }
 
 .collectionDelegationsAccordionItemDisabled {
@@ -329,19 +343,31 @@
   cursor: pointer;
   text-decoration: none;
   font-size: 20px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  line-height: 1.2;
 
   svg {
     width: 20px;
     height: 20px;
-    margin-right: 8px;
-    margin-top: -2px;
+    flex-shrink: 0;
   }
 
   &:hover {
     color: variables.$font-color-h;
   }
 }
 
+.collectionDelegationBackRow {
+  padding-bottom: 12px;
+}
+
+.collectionDelegationTitleRow {
+  padding-bottom: 32px;
+}
+
 .leftBorder {
   height: 100%;
   border-left: 1px solid variables.$lighter-grey;
@@ -648,6 +674,6 @@
 }
 
 .delegationAccordionBlock {
-  padding: 15px;
+  padding: 12px 15px 10px;
   background-color: variables.$very-dark-grey !important;
 }

components/nextGen/collections/nextgenToken/NextGenTokenImage.tsx

@@ -1,5 +1,10 @@
 import type { NextGenTokenRarityType } from "@/components/nextGen/nextgen_helpers";
-import UserCICAndLevel from "@/components/user/utils/UserCICAndLevel";
+import ProfileAvatar, {
+  ProfileBadgeSize,
+} from "@/components/common/profile/ProfileAvatar";
+import UserCICAndLevel, {
+  UserCICAndLevelSize,
+} from "@/components/user/utils/UserCICAndLevel";
 import {
   ETHEREUM_ICON_TEXT,
   NEXTGEN_MEDIA_BASE_URL,
@@ -11,7 +16,7 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import Link from "next/link";
-import { Col, Container, Row } from "react-bootstrap";
+import type { CSSProperties } from "react";
 import { Tooltip } from "react-tooltip";
 import { TraitScore } from "./NextGenTokenAbout";
 
@@ -44,11 +49,37 @@ export function NextGenTokenImage(
   function getOwnerInfo() {
     let ownerInfoDisplay;
     if (props.show_owner_info) {
+      const handleOrWallet =
+        props.token.normalised_handle ?? formatAddress(props.token.owner);
+      const profileHref = `/${props.token.normalised_handle ?? props.token.owner}`;
+      const initial =
+        handleOrWallet.trim().charAt(0) || "?";
       const ownerInfo = (
-        <span className="d-flex align-items-center gap-2">
-          <UserCICAndLevel level={props.token.level} color="black" />
-          {props.token.normalised_handle ?? formatAddress(props.token.owner)}
-        </span>
+        <div className="tailwind-scope tw-inline-flex tw-min-w-0 tw-max-w-full tw-items-center tw-gap-2.5">
+          <ProfileAvatar
+            pfpUrl={undefined}
+            size={ProfileBadgeSize.SMALL}
+            alt={`${handleOrWallet} profile`}
+            fallbackContent={
+              <span className="tw-text-xs tw-font-semibold tw-uppercase tw-text-iron-300">
+                {initial}
+              </span>
+            }
+          />
+          <div className="tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2">
+            <Link
+              href={profileHref}
+              onClick={(e) => e.stopPropagation()}
+              className="tw-truncate tw-text-sm tw-font-semibold tw-leading-none tw-text-iron-50 tw-no-underline desktop-hover:hover:tw-text-iron-200"
+            >
+              {handleOrWallet}
+            </Link>
+            <UserCICAndLevel
+              level={props.token.level}
+              size={UserCICAndLevelSize.SMALL}
+            />
+          </div>
+        </div>
       );
 
       ownerInfoDisplay = (
@@ -76,40 +107,43 @@ export function NextGenTokenImage(
             place="right"
             delayShow={250}
             style={{
-              backgroundColor: "#1F2937",
-              color: "white",
-              padding: "4px 8px",
+              backgroundColor: "#26272B",
+              color: "#F4F4F5",
+              padding: "10px 12px",
+              maxWidth: "min(280px, calc(100vw - 24px))",
+              fontSize: "12px",
+              lineHeight: "1.35",
+              borderRadius: "8px",
+              border: "1px solid rgba(255, 255, 255, 0.15)",
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.5)",
+              ...({ "--rt-opacity": 1 } as CSSProperties),
             }}
           >
-            <Container>
-              <Row className="pt-2 pb-2">
-                <Col>{ownerInfo}</Col>
-              </Row>
-              <Row className="pt-1">
-                <Col>
+            <div className="tw-flex tw-flex-col tw-gap-1.5 tw-text-left">
+              <div className="tw-border-b tw-border-white/10 tw-pb-1.5">
+                {ownerInfo}
+              </div>
+              <div className="tw-flex tw-flex-col tw-gap-1 tw-font-semibold">
+                <span>
                   Opensea:{" "}
                   {props.token.opensea_price > 0
                     ? `${props.token.opensea_price} ${ETHEREUM_ICON_TEXT}`
                     : "Not Listed"}
-                </Col>
-              </Row>
-              <Row className="pt-1">
-                <Col>
+                </span>
+                <span>
                   Blur:{" "}
                   {props.token.blur_price > 0
                     ? `${props.token.blur_price} ${ETHEREUM_ICON_TEXT}`
                     : "Not Listed"}
-                </Col>
-              </Row>
-              <Row className="pt-1">
-                <Col>
+                </span>
+                <span>
                   Magic Eden:{" "}
                   {props.token.me_price > 0
                     ? `${props.token.me_price} ${ETHEREUM_ICON_TEXT}`
                     : "Not Listed"}
-                </Col>
-              </Row>
-            </Container>
+                </span>
+              </div>
+            </div>
           </Tooltip>
         </button>
       );

components/user/subscriptions/UserPageSubscriptionsBalance.tsx

@@ -64,7 +64,13 @@ export default function UserPageSubscriptionsBalance(
                 </div>
                 {props.details && props.details.balance > 0 && (
                   <>
-                    ({(props.details.balance / MEMES_MINT_PRICE).toFixed(0)}{" "}
+                    (
+                    {(props.details.balance / MEMES_MINT_PRICE).toLocaleString(
+                      undefined,
+                      {
+                        maximumFractionDigits: 0,
+                      }
+                    )}{" "}
                     cards)
                   </>
                 )}

jest.config.js

@@ -41,6 +41,7 @@ const config = {
     "<rootDir>/tests/", // Ignore Playwright tests folder
     "<rootDir>/e2e/", // Ignore Playwright e2e folder
   ],
+  modulePathIgnorePatterns: ["<rootDir>/.next/"],
   // Transformation - use ts-jest
   transform: {
     // Use ts-jest for ts/tsx files