Merge pull request #117 from verida/feature/19-badge-related-components

Feature/19 badge related components

src/components/atoms/HexagonBase.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+type HexagonBaseProps = {
+  rounded?: boolean;
+} & React.ComponentPropsWithoutRef<"div">;
+
+export const HexagonBase: React.FunctionComponent<HexagonBaseProps> = (
+  props
+) => {
+  const { rounded = false, ...otherProps } = props;
+
+  // FIXME: Display the Verida Badges correctly in a rounded hexagonal shape and get rid of the 'rounded' prop
+
+  return (
+    <div
+      {...otherProps}
+      style={{
+        clipPath: rounded
+          ? "path('M154.466 13.0153C149.97 5.26921 141.674 0.5 132.698 0.5L61.3019 0.5C52.326 0.5 44.0299 5.26921 39.5341 13.0153L3.88118 74.4438C-0.627062 82.2113 -0.627061 91.7887 3.88118 99.5562L39.5341 160.985C44.0299 168.731 52.326 173.5 61.3019 173.5H132.698C141.674 173.5 149.97 168.731 154.466 160.985L190.119 99.5562C194.627 91.7887 194.627 82.2113 190.119 74.4438L154.466 13.0153Z')"
+          : "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
+        // For some reason the tailwind aspect-ratio class was not working, so put it in style
+        aspectRatio: rounded ? "10/8.969072" : "10/8.66025",
+      }}
+    ></div>
+  );
+};

src/components/atoms/index.ts

@@ -7,6 +7,7 @@ export * from "./ButtonLink";
 export * from "./ButtonLinkBase";
 export * from "./ChainIconContainer";
 export * from "./Chip";
+export * from "./HexagonBase";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./IconButtonLink";

src/components/molecules/BadgeMosaicItem.tsx

@@ -0,0 +1,38 @@
+import { HexagonBase } from "components/atoms";
+import { Badge } from "lib/types";
+import React from "react";
+import { Link } from "react-router-dom";
+
+type HexagonProps = {
+  badge: Badge;
+  to: string;
+  disableShadow?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<"li">, "className">;
+
+export const BadgeMosaicItem: React.FunctionComponent<HexagonProps> = (
+  props
+) => {
+  const { badge, to, disableShadow = false, ...otherProps } = props;
+
+  return (
+    <li
+      {...otherProps}
+      className="relative w-[calc(4/3_*_100%)] -translate-x-[calc(1/8_*_100%)] odd:-translate-y-1/2"
+    >
+      <HexagonBase className="flex items-center justify-center">
+        <Link to={to} className="h-full w-full">
+          <img
+            src={badge.media}
+            alt={badge.tokenLabel}
+            className="h-full w-full object-cover"
+          />
+        </Link>
+      </HexagonBase>
+      {!disableShadow && (
+        <div className="absolute inset-0 -z-10 w-full blur-lg">
+          <HexagonBase className="w-full bg-badge-purple" />
+        </div>
+      )}
+    </li>
+  );
+};

src/components/molecules/index.ts

@@ -1,7 +1,7 @@
 export * from "./AssetDetailsPropertyItem";
 export * from "./AssetDetailsPropertyList";
 export * from "./AssetPriceChip";
-export * from "./BadgeCard";
+export * from "./BadgeMosaicItem";
 export * from "./ChainIcon";
 export * from "./CollectibleCard";
 export * from "./CopyToClipboardButton";

src/components/organisms/BadgeMosaic.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Badge } from "lib/types";
+import { BadgeMosaicItem } from "components/molecules";
+
+type BadgeMosaicProps = {
+  badges: Badge[];
+} & React.ComponentPropsWithoutRef<"div">;
+
+export const BadgeMosaic: React.FunctionComponent<BadgeMosaicProps> = (
+  props
+) => {
+  const { badges, ...containerProps } = props;
+
+  // For n columns:
+  //   grid width = (3 * n) / (3 * n + 1) * 100%
+  //   grid margin-top = sqrt(3) / (3 * n + 1) * 100%
+  return (
+    <div {...containerProps}>
+      <ul className="mx-auto mt-[calc(1.73205/7_*_100%)] grid w-[calc(6/7_*_100%)] grid-cols-2 sm:mt-[calc(1.73205/13_*_100%)] sm:w-[calc(12/13_*_100%)] sm:grid-cols-4">
+        {badges.map((badge) => (
+          <BadgeMosaicItem
+            key={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+            badge={badge}
+            to={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};

src/components/organisms/BadgesSection.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from "react";
 import { useIntl } from "react-intl";
-import { BadgeCard, ProfileSectionWrapper } from "components/molecules";
+import { BadgeMosaicItem, ProfileSectionWrapper } from "components/molecules";
 import { Badge } from "lib/types";
-import { Button } from "components/atoms";
-import { Link, useNavigate } from "react-router-dom";
+import { Button, HexagonBase } from "components/atoms";
+import { useNavigate } from "react-router-dom";
 import { MAX_BADGES_IN_PROFILE_SECTION } from "lib/constants";
 
 type BadgesSectionProps = {
@@ -54,30 +54,48 @@ export const BadgesSection: React.FC<BadgesSectionProps> = ({ badges }) => {
       title={sectionTitle}
       badgeValue={badges.length}
       onClickMore={handleClickMore}
+      style={{ marginBottom: "-1rem" }}
     >
-      <ul className="grid snap-x snap-mandatory auto-cols-[160px] gap-2 overflow-x-auto max-sm:grid-flow-col sm:grid-cols-4">
-        {truncatedBadgeList.map((badge) => (
-          <li
-            key={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
-            className="snap-start transition-all"
+      <div className="overflow-x-auto">
+        <div className="min-w-[664px] pb-4">
+          <ul
+            className={`mx-auto mt-[calc(1.73205/13_*_100%)] grid w-[calc(12/13_*_100%)] sm:mt-[calc(1.73205/13_*_100%)] sm:grid-cols-4 ${
+              hasMore
+                ? "grid-cols-[repeat(5,_calc(3/13_*_664px))]"
+                : "grid-cols-4"
+            }`}
           >
-            <Link
-              to={`badges/${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
-            >
-              <BadgeCard variant="standard" badge={badge} />
-            </Link>
-          </li>
-        ))}
-        {hasMore && (
-          <li
-            key="showAllButton"
-            className="aspect-square snap-start transition-all sm:hidden"
-          >
-            {showAllButton}
-          </li>
-        )}
-      </ul>
-      {hasMore && <div className="mt-4 max-sm:hidden">{showAllButton}</div>}
+            {truncatedBadgeList.map((badge) => (
+              <BadgeMosaicItem
+                key={`${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+                badge={badge}
+                to={`badges/${badge.chainId}/${badge.contractAddress}/${badge.tokenId}`}
+                disableShadow // FIXME: Enable shadow under tiles by fixing edges underlapping
+              />
+            ))}
+            {/* FIXME: Use rounded hexagonal shape, see HexagonBase */}
+            {hasMore && (
+              <>
+                <li
+                  key="placeholder"
+                  className="relative col-start-5 col-end-5 row-start-1 row-end-1 w-[calc(4/3_*_100%)] -translate-x-[calc(1/8_*_100%)] -translate-y-1/2 sm:hidden"
+                >
+                  <HexagonBase className="w-full"></HexagonBase>
+                </li>
+                <li
+                  key="showAllButton"
+                  className="relative w-[calc(4/3_*_100%)] -translate-x-[calc(1/8_*_100%)] -translate-y-1/2 sm:hidden"
+                >
+                  <HexagonBase rounded className="w-full">
+                    {showAllButton}
+                  </HexagonBase>
+                </li>
+              </>
+            )}
+          </ul>
+        </div>
+        {hasMore && <div className="my-4 max-sm:hidden">{showAllButton}</div>}
+      </div>
     </ProfileSectionWrapper>
   );
 };

src/components/organisms/CollectiblesSection.tsx

@@ -56,14 +56,14 @@ export const CollectiblesSection: React.FC<CollectiblesSectionProps> = (
     </Button>
   );
 
-  // TODO: Handle click on collectible when collectible page implemented
   return (
     <ProfileSectionWrapper
       title={sectionTitle}
       badgeValue={collectibles.length}
       onClickMore={handleClickMore}
+      style={{ marginBottom: "-1rem" }}
     >
-      <ul className="grid snap-x snap-mandatory auto-cols-[160px] gap-2 overflow-x-auto max-sm:grid-flow-col sm:grid-cols-4">
+      <ul className="grid snap-x snap-mandatory auto-cols-[160px] gap-2 overflow-x-auto pb-4 max-sm:grid-flow-col sm:grid-cols-4">
         {truncatedCollectiblesList.map((collectible) => (
           <li
             key={`${collectible.chainId}/${collectible.contractAddress}/${collectible.tokenId}`}
@@ -85,7 +85,7 @@ export const CollectiblesSection: React.FC<CollectiblesSectionProps> = (
           </li>
         )}
       </ul>
-      {hasMore && <div className="mt-4 max-sm:hidden">{showAllButton}</div>}
+      {hasMore && <div className="my-4 max-sm:hidden">{showAllButton}</div>}
     </ProfileSectionWrapper>
   );
 };

src/components/organisms/index.ts

@@ -1,6 +1,6 @@
 export * from "./AssetDetailsMainInfo";
 export * from "./BadgeDetailsProperties";
-export * from "./BadgeGrid";
+export * from "./BadgeMosaic";
 export * from "./BadgesSection";
 export * from "./CollectibleDetailsProperties";
 export * from "./CollectibleGrid";

src/components/pages/BadgeListView.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PageWrapper, RedirectionCard } from "components/molecules";
-import { BadgeGrid } from "components/organisms";
+import { BadgeMosaic } from "components/organisms";
 import { useBadges, useProfileData } from "lib/hooks";
 import { useIntl } from "react-intl";
 import { useParams } from "react-router-dom";
@@ -47,7 +47,7 @@ export const BadgeListView: React.FunctionComponent = () => {
   return (
     <PageWrapper title={pageTitle} badgeValue={badges?.length}>
       {badges?.length ? (
-        <BadgeGrid className="pt-2" badges={badges} />
+        <BadgeMosaic className="pt-2" badges={badges} />
       ) : (
         <RedirectionCard
           redirectPath={redirectPath}