added indications for deprecated cards

ATXDAO · Apr 6, 2024 · 0271fa0 · 0271fa0
1 parent 7986e20
commit 0271fa0
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 193 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/...rds/stylized-cards/StylizedTokenCard3.tsx → ...ed-cards/deprecated/StylizedTokenCard.tsx b/...rds/stylized-cards/StylizedTokenCard3.tsx → ...ed-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/...rds/stylized-cards/StylizedTokenCard2.tsx → ...d-cards/deprecated/StylizedTokenCard2.tsx b/...rds/stylized-cards/StylizedTokenCard2.tsx → ...d-cards/deprecated/StylizedTokenCard2.tsx
diff --git a/...tylized-cards/StylizedTokenGroupCard2.tsx → ...ds/deprecated/StylizedTokenGroupCard2.tsx b/...tylized-cards/StylizedTokenGroupCard2.tsx → ...ds/deprecated/StylizedTokenGroupCard2.tsx