From 0271fa05f6cb9280f2198d1b5b8eb77d5b1358f2 Mon Sep 17 00:00:00 2001
From: Jacob Homanics <homanicsjake@gmail.com>
Date: Fri, 5 Apr 2024 23:58:31 -0500
Subject: [PATCH] added indications for deprecated cards

---
 .../_components/RepTokensDemo.tsx             |   4 +-
 .../stylized-cards/StylizedTokenCard.tsx      |  44 ++----
 .../stylized-cards/StylizedTokenGroupCard.tsx |   4 +-
 .../StylizedTokenGroupCard3.tsx               | 142 ------------------
 .../StylizedTokenCard.tsx}                    |  44 +++---
 .../{ => deprecated}/StylizedTokenCard2.tsx   |   0
 .../StylizedTokenGroupCard2.tsx               |   0
 .../deprecated/StylizedTokenGroupCard3.tsx    |  69 +++++++++
 8 files changed, 114 insertions(+), 193 deletions(-)
 delete mode 100644 packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard3.tsx
 rename packages/nextjs/components/rep-tokens/cards/stylized-cards/{StylizedTokenCard3.tsx => deprecated/StylizedTokenCard.tsx} (55%)
 rename packages/nextjs/components/rep-tokens/cards/stylized-cards/{ => deprecated}/StylizedTokenCard2.tsx (100%)
 rename packages/nextjs/components/rep-tokens/cards/stylized-cards/{ => deprecated}/StylizedTokenGroupCard2.tsx (100%)
 create mode 100644 packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenGroupCard3.tsx

diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index 4a001d6..f6382e6 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -7,7 +7,7 @@ import { StylizedAddressCard } from "~~/components/rep-tokens/cards/stylized-car
 // import { StylizedStringCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedStringCard";
 // import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard";
 // import { StylizedTokenCard2 } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard2";
-import { StylizedTokenCard3 } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard3";
+import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard";
 import {
   // ReputationComponent,
   StylizedTokenGroupCard,
@@ -101,7 +101,7 @@ export function RepTokensDemo() {
         <MaxMintAmountPerTxCard token={token} />
 
         <p className="text-center text-4xl">Single Card</p>
-        <StylizedTokenCard3 token={token} />
+        <StylizedTokenCard token={token} />
 
         <p className="text-center text-4xl">Multi-Card</p>
         <StylizedTokenGroupCard
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
index ea97308..47304d0 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
@@ -1,10 +1,13 @@
 import { Token } from "../../hooks/Hooks";
 import { BalanceImageOverlay } from "./BalanceImageOverlay";
-import { StylizedAddressCard } from "./StylizedAddressCard";
-import { StylizedBalanceCard } from "./StylizedBalanceCard";
-import { StylizedImageCard } from "./StylizedImageCard";
-import { StylizedStringCard } from "./StylizedStringCard";
 import { ReputationComponent } from "./StylizedTokenGroupCard";
+import { AddressCard } from "./token-properties/AddressCard";
+import { BalanceCard } from "./token-properties/BalanceCard";
+import { DescriptionCard } from "./token-properties/DescriptionCard";
+import { ImageCard } from "./token-properties/ImageCard";
+import { MaxMintAmountPerTxCard } from "./token-properties/MaxMintAmountPerTxCard";
+import { NameCard } from "./token-properties/NameCard";
+import { TokenTypeCard } from "./token-properties/TokenTypeCard";
 
 export type Size = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 
@@ -28,7 +31,6 @@ const sizeMap = {
 
 export const StylizedTokenCard = ({
   size = "base",
-  // children,
   token,
   components = ["Balance", "Image", "Name", "Description", "Address", "TokenType", "MaxMintAmountPerTx"],
   isBalanceOverlayed = false,
@@ -53,53 +55,39 @@ export const StylizedTokenCard = ({
             <BalanceImageOverlay key={j} balance={Number(token?.balance)} image={token?.image} size={size} />,
           );
         } else {
-          cardContent.push(
-            <StylizedBalanceCard key={j} value={Number(token?.balance)} isOverlay={false} size={size} />,
-          );
+          cardContent.push(<BalanceCard key={j} token={token} isOverlay={false} size={size} />);
         }
       } else {
-        cardContent.push(<StylizedBalanceCard key={j} value={Number(token?.balance)} isOverlay={false} size={size} />);
+        cardContent.push(<BalanceCard key={j} token={token} isOverlay={false} size={size} />);
       }
     }
 
     if (!isBalanceOverlayed) {
       if (components[j] === "Image") {
-        cardContent.push(<StylizedImageCard key={j} src={token?.image} size={size} />);
+        cardContent.push(<ImageCard key={j} token={token} />);
       }
     }
 
     if (components[j] === "Name") {
-      cardContent.push(<StylizedStringCard key={j} value={token?.name} type="bold" />);
+      cardContent.push(<NameCard key={j} token={token} />);
     }
 
     if (components[j] === "Description") {
-      cardContent.push(<StylizedStringCard key={j} value={token?.description} />);
+      cardContent.push(<DescriptionCard key={j} token={token} />);
     }
 
     if (components[j] === "TokenType") {
-      cardContent.push(
-        <StylizedStringCard key={j} value={`Token Type: ${token?.properties?.tokenType?.toString()}`} />,
-      );
+      cardContent.push(<TokenTypeCard key={j} token={token} />);
     }
 
     if (components[j] === "MaxMintAmountPerTx") {
-      cardContent.push(
-        <StylizedStringCard
-          key={j}
-          value={`Max Mint Amount Per Tx: ${token?.properties?.maxMintAmountPerTx?.toString()}`}
-        />,
-      );
+      cardContent.push(<MaxMintAmountPerTxCard key={j} token={token} />);
     }
 
     if (components[j] === "Address") {
-      cardContent.push(<StylizedAddressCard key={j} address={token?.address} />);
+      cardContent.push(<AddressCard key={j} token={token} />);
     }
   }
 
-  return (
-    <div className={`bg-base-100 rounded-lg ${sizeMap[size]} relative p-1`}>
-      {/* {children} */}
-      {cardContent}
-    </div>
-  );
+  return <div className={`bg-base-100 rounded-lg ${sizeMap[size]} relative p-1`}>{cardContent}</div>;
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
index db86daa..acd1eeb 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
@@ -1,5 +1,5 @@
 import { TokenGroup } from "../../hooks/Hooks";
-import { StylizedTokenCard3 } from "./StylizedTokenCard3";
+import { StylizedTokenCard } from "./StylizedTokenCard";
 
 export interface TokenCardInternalProps {
   tokens: TokenGroup;
@@ -41,7 +41,7 @@ export const StylizedTokenGroupCard = ({
 
   for (let i = 0; i < tokens?.tokens?.length; i++) {
     const card = (
-      <StylizedTokenCard3
+      <StylizedTokenCard
         key={i}
         size={size}
         token={tokens.tokens[i]}
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard3.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard3.tsx
deleted file mode 100644
index ff7c786..0000000
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard3.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-// import { BalanceImageOverlay } from "./BalanceImageOverlay";
-// import { StylizedAddressCard } from "./StylizedAddressCard";
-// import { StylizedBalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard";
-// import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedImageCard";
-// import { StylizedStringCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedStringCard";
-import {
-  /*Token,*/
-  TokenGroup,
-} from "../../hooks/Hooks";
-import { StylizedTokenCard3 } from "./StylizedTokenCard3";
-
-// import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard";
-
-export interface TokenCardInternalProps {
-  tokens: TokenGroup;
-  components?: ReputationComponent[];
-  isBalanceOverlayed?: boolean;
-  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
-  children?: React.ReactNode;
-}
-
-const sizeMap = {
-  xs: "p-1",
-  sm: "p-5",
-  base: "p-5",
-  lg: "",
-  xl: "",
-  "2xl": "",
-  "3xl": "",
-};
-
-export type ReputationComponent =
-  | "Balance"
-  | "Image"
-  | "Name"
-  | "Description"
-  | "Address"
-  | "TokenType"
-  | "MaxMintAmountPerTx";
-
-export const StylizedTokenGroupCard3 = ({
-  tokens,
-  components = ["Balance", "Image", "Name", "Description", "Address", "TokenType", "MaxMintAmountPerTx"],
-  isBalanceOverlayed,
-  children,
-  size = "base",
-}: TokenCardInternalProps) => {
-  const output: any[] = [];
-
-  for (let i = 0; i < tokens?.tokens?.length; i++) {
-    // const cardContent: any[] = [];
-
-    // for (let j = 0; j < components?.length; j++) {
-    //   if (components[j] === "Balance") {
-    //     if (isBalanceOverlayed) {
-    //       let doesImageComponentExist;
-    //       for (let k = 0; k < components?.length; k++) {
-    //         if (k === j) continue;
-
-    //         if (components[k] === "Image") {
-    //           doesImageComponentExist = true;
-    //           break;
-    //         }
-    //       }
-
-    //       if (doesImageComponentExist) {
-    //         cardContent.push(
-    //           <BalanceImageOverlay key={j} balance={Number(tokens[i]?.balance)} image={tokens[i]?.image} size={size} />,
-    //         );
-    //       } else {
-    //         cardContent.push(
-    //           <StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} size={size} />,
-    //         );
-    //       }
-    //     } else {
-    //       cardContent.push(
-    //         <StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} size={size} />,
-    //       );
-    //     }
-    //   }
-
-    //   if (!isBalanceOverlayed) {
-    //     if (components[j] === "Image") {
-    //       cardContent.push(<StylizedImageCard key={j} src={tokens[i]?.image} size={size} />);
-    //     }
-    //   }
-
-    //   if (components[j] === "Name") {
-    //     cardContent.push(<StylizedStringCard key={j} value={tokens[i]?.name} type="bold" />);
-    //   }
-
-    //   if (components[j] === "Description") {
-    //     cardContent.push(<StylizedStringCard key={j} value={tokens[i]?.description} />);
-    //   }
-
-    //   if (components[j] === "IsSoulbound") {
-    //     cardContent.push(
-    //       <StylizedStringCard key={j} value={`Soulbound: ${tokens[i]?.properties.isSoulbound.toString()}`} />,
-    //     );
-    //   }
-
-    //   if (components[j] === "IsRedeemable") {
-    //     cardContent.push(
-    //       <StylizedStringCard key={j} value={`Redeemable: ${tokens[i]?.properties.isRedeemable.toString()}`} />,
-    //     );
-    //   }
-
-    //   if (components[j] === "MaxMintAmountPerTx") {
-    //     cardContent.push(
-    //       <StylizedStringCard
-    //         key={j}
-    //         value={`Max Mint Amount Per Tx: ${tokens[i]?.properties.maxMintAmountPerTx.toString()}`}
-    //       />,
-    //     );
-    //   }
-
-    //   if (components[j] === "Address") {
-    //     cardContent.push(<StylizedAddressCard key={j} address={tokens[i].address} />);
-    //   }
-    // }
-
-    const card = (
-      <StylizedTokenCard3
-        key={i}
-        size={size}
-        token={tokens.tokens[i]}
-        components={components}
-        isBalanceOverlayed={isBalanceOverlayed}
-      >
-        {/* {cardContent} */}
-      </StylizedTokenCard3>
-    );
-    output.push(card);
-  }
-
-  return (
-    <div className={`bg-base-100 flex flex-col rounded-lg ${sizeMap[size]}`}>
-      {children}
-      <div className={`flex flex-wrap justify-center ${sizeMap[size]} rounded-lg bg-base-200`}>{output}</div>
-    </div>
-  );
-};
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard3.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenCard.tsx
similarity index 55%
rename from packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard3.tsx
rename to packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenCard.tsx
index 92d45b3..3edba2d 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard3.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenCard.tsx
@@ -1,13 +1,10 @@
-import { Token } from "../../hooks/Hooks";
-import { BalanceImageOverlay } from "./BalanceImageOverlay";
-import { ReputationComponent } from "./StylizedTokenGroupCard";
-import { AddressCard } from "./token-properties/AddressCard";
-import { BalanceCard } from "./token-properties/BalanceCard";
-import { DescriptionCard } from "./token-properties/DescriptionCard";
-import { ImageCard } from "./token-properties/ImageCard";
-import { MaxMintAmountPerTxCard } from "./token-properties/MaxMintAmountPerTxCard";
-import { NameCard } from "./token-properties/NameCard";
-import { TokenTypeCard } from "./token-properties/TokenTypeCard";
+import { Token } from "../../../hooks/Hooks";
+import { BalanceImageOverlay } from "../BalanceImageOverlay";
+import { StylizedAddressCard } from "../StylizedAddressCard";
+import { StylizedBalanceCard } from "../StylizedBalanceCard";
+import { StylizedImageCard } from "../StylizedImageCard";
+import { StylizedStringCard } from "../StylizedStringCard";
+import { ReputationComponent } from "../StylizedTokenGroupCard";
 
 export type Size = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 
@@ -29,7 +26,7 @@ const sizeMap = {
   "3xl": "",
 };
 
-export const StylizedTokenCard3 = ({
+export const StylizedTokenCard = ({
   size = "base",
   // children,
   token,
@@ -56,37 +53,46 @@ export const StylizedTokenCard3 = ({
             <BalanceImageOverlay key={j} balance={Number(token?.balance)} image={token?.image} size={size} />,
           );
         } else {
-          cardContent.push(<BalanceCard key={j} token={token} isOverlay={false} size={size} />);
+          cardContent.push(
+            <StylizedBalanceCard key={j} value={Number(token?.balance)} isOverlay={false} size={size} />,
+          );
         }
       } else {
-        cardContent.push(<BalanceCard key={j} token={token} isOverlay={false} size={size} />);
+        cardContent.push(<StylizedBalanceCard key={j} value={Number(token?.balance)} isOverlay={false} size={size} />);
       }
     }
 
     if (!isBalanceOverlayed) {
       if (components[j] === "Image") {
-        cardContent.push(<ImageCard key={j} token={token} />);
+        cardContent.push(<StylizedImageCard key={j} src={token?.image} size={size} />);
       }
     }
 
     if (components[j] === "Name") {
-      cardContent.push(<NameCard key={j} token={token} />);
+      cardContent.push(<StylizedStringCard key={j} value={token?.name} type="bold" />);
     }
 
     if (components[j] === "Description") {
-      cardContent.push(<DescriptionCard key={j} token={token} />);
+      cardContent.push(<StylizedStringCard key={j} value={token?.description} />);
     }
 
     if (components[j] === "TokenType") {
-      cardContent.push(<TokenTypeCard key={j} token={token} />);
+      cardContent.push(
+        <StylizedStringCard key={j} value={`Token Type: ${token?.properties?.tokenType?.toString()}`} />,
+      );
     }
 
     if (components[j] === "MaxMintAmountPerTx") {
-      cardContent.push(<MaxMintAmountPerTxCard key={j} token={token} />);
+      cardContent.push(
+        <StylizedStringCard
+          key={j}
+          value={`Max Mint Amount Per Tx: ${token?.properties?.maxMintAmountPerTx?.toString()}`}
+        />,
+      );
     }
 
     if (components[j] === "Address") {
-      cardContent.push(<AddressCard key={j} token={token} />);
+      cardContent.push(<StylizedAddressCard key={j} address={token?.address} />);
     }
   }
 
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard2.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenCard2.tsx
similarity index 100%
rename from packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard2.tsx
rename to packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenCard2.tsx
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard2.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenGroupCard2.tsx
similarity index 100%
rename from packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard2.tsx
rename to packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenGroupCard2.tsx
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenGroupCard3.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenGroupCard3.tsx
new file mode 100644
index 0000000..2659cd9
--- /dev/null
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/deprecated/StylizedTokenGroupCard3.tsx
@@ -0,0 +1,69 @@
+// // import { BalanceImageOverlay } from "./BalanceImageOverlay";
+// // import { StylizedAddressCard } from "./StylizedAddressCard";
+// // import { StylizedBalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard";
+// // import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedImageCard";
+// // import { StylizedStringCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedStringCard";
+// import {
+//   /*Token,*/
+//   TokenGroup,
+// } from "../../hooks/Hooks";
+// import { StylizedTokenCard } from "./StylizedTokenCard";
+
+// // import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard";
+
+// export interface TokenCardInternalProps {
+//   tokens: TokenGroup;
+//   components?: ReputationComponent[];
+//   isBalanceOverlayed?: boolean;
+//   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+//   children?: React.ReactNode;
+// }
+
+// const sizeMap = {
+//   xs: "p-1",
+//   sm: "p-5",
+//   base: "p-5",
+//   lg: "",
+//   xl: "",
+//   "2xl": "",
+//   "3xl": "",
+// };
+
+// export type ReputationComponent =
+//   | "Balance"
+//   | "Image"
+//   | "Name"
+//   | "Description"
+//   | "Address"
+//   | "TokenType"
+//   | "MaxMintAmountPerTx";
+
+// export const StylizedTokenGroupCard3 = ({
+//   tokens,
+//   components = ["Balance", "Image", "Name", "Description", "Address", "TokenType", "MaxMintAmountPerTx"],
+//   isBalanceOverlayed,
+//   children,
+//   size = "base",
+// }: TokenCardInternalProps) => {
+//   const output: any[] = [];
+
+//   for (let i = 0; i < tokens?.tokens?.length; i++) {
+//     const card = (
+//       <StylizedTokenCard
+//         key={i}
+//         size={size}
+//         token={tokens.tokens[i]}
+//         components={components}
+//         isBalanceOverlayed={isBalanceOverlayed}
+//       ></StylizedTokenCard>
+//     );
+//     output.push(card);
+//   }
+
+//   return (
+//     <div className={`bg-base-100 flex flex-col rounded-lg ${sizeMap[size]}`}>
+//       {children}
+//       <div className={`flex flex-wrap justify-center ${sizeMap[size]} rounded-lg bg-base-200`}>{output}</div>
+//     </div>
+//   );
+// };