this has really turned into something

ATXDAO · Apr 5, 2024 · a191ded · a191ded
1 parent 264b4b7
commit a191ded
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 39 deletions.
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -114,6 +114,18 @@ export function RepTokensDemo() {
             <RedeemableCard token={token} />
             <MaxMintAmountPerTxCard token={token} />
           </div>
+
+          <div>
+            <p className="text-center text-4xl">Individual Components 3</p>
+            <BalanceCard balance={token?.balance} />
+            <ImageCard src={token?.image} />
+            <NameCard name={token?.name} />
+            <DescriptionCard description={token?.description} />
+            <AddressCard address={token?.address} />
+            <SoulboundCard isSoulbound={token?.properties?.isSoulbound} />
+            <RedeemableCard isRedeemable={token?.properties?.isRedeemable} />
+            <MaxMintAmountPerTxCard maxMintAmountPerTx={token?.properties?.maxMintAmountPerTx} />
+          </div>
         </div>
 
         <div className="flex">

diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
@@ -86,20 +86,22 @@ export const StylizedTokenCard = ({
     }
 
     if (components[j] === "IsSoulbound") {
-      cardContent.push(<StylizedStringCard key={j} value={`Soulbound: ${token?.properties.isSoulbound.toString()}`} />);
+      cardContent.push(
+        <StylizedStringCard key={j} value={`Soulbound: ${token?.properties?.isSoulbound?.toString()}`} />,
+      );
     }
 
     if (components[j] === "IsRedeemable") {
       cardContent.push(
-        <StylizedStringCard key={j} value={`Redeemable: ${token?.properties.isRedeemable.toString()}`} />,
+        <StylizedStringCard key={j} value={`Redeemable: ${token?.properties?.isRedeemable?.toString()}`} />,
       );
     }
 
     if (components[j] === "MaxMintAmountPerTx") {
       cardContent.push(
         <StylizedStringCard
           key={j}
-          value={`Max Mint Amount Per Tx: ${token?.properties.maxMintAmountPerTx.toString()}`}
+          value={`Max Mint Amount Per Tx: ${token?.properties?.maxMintAmountPerTx?.toString()}`}
         />,
       );
     }

diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/AddressCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/AddressCard.tsx
@@ -2,9 +2,10 @@ import { StylizedAddressCard } from "../StylizedAddressCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  address?: string;
 };
 
-export const AddressCard = ({ token }: Props) => {
-  return <StylizedAddressCard address={token?.address} />;
+export const AddressCard = ({ token, address = "" }: Props) => {
+  return <StylizedAddressCard address={token ? token?.address : address} />;
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/BalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/BalanceCard.tsx
@@ -2,9 +2,10 @@ import { StylizedBalanceCard } from "../StylizedBalanceCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  balance?: bigint;
 };
 
-export const BalanceCard = ({ token }: Props) => {
-  return <StylizedBalanceCard value={Number(token?.balance)} />;
+export const BalanceCard = ({ token, balance }: Props) => {
+  return <StylizedBalanceCard value={token ? Number(token?.balance) : Number(balance)} />;
 };
diff --git a/...es/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/DescriptionCard.tsx b/...es/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/DescriptionCard.tsx
@@ -2,10 +2,12 @@ import { StylizedStringCard } from "../StylizedStringCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  description?: string;
+
   type?: "default" | "bold";
 };
 
-export const DescriptionCard = ({ token, type = "default" }: Props) => {
-  return <StylizedStringCard value={token?.description} type={type} />;
+export const DescriptionCard = ({ token, description = "", type = "default" }: Props) => {
+  return <StylizedStringCard value={token ? token?.description : description} type={type} />;
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/ImageCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/ImageCard.tsx
@@ -2,10 +2,11 @@ import { StylizedImageCard } from "../StylizedImageCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  src?: string;
   alt?: string;
 };
 
-export const ImageCard = ({ token }: Props) => {
-  return <StylizedImageCard src={token?.image} />;
+export const ImageCard = ({ token, src = "" }: Props) => {
+  return <StylizedImageCard src={token ? token?.image : src} />;
 };
diff --git a/...js/components/rep-tokens/cards/stylized-cards/token-properties/MaxMintAmountPerTxCard.tsx b/...js/components/rep-tokens/cards/stylized-cards/token-properties/MaxMintAmountPerTxCard.tsx
@@ -2,14 +2,17 @@ import { StylizedStringCard } from "../StylizedStringCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  maxMintAmountPerTx?: number;
   type?: "default" | "bold";
 };
 
-export const MaxMintAmountPerTxCard = ({ token, type = "default" }: Props) => {
+export const MaxMintAmountPerTxCard = ({ token, maxMintAmountPerTx, type = "default" }: Props) => {
   return (
     <StylizedStringCard
-      value={`Max Mint Amount Per Tx: ` + token?.properties?.maxMintAmountPerTx?.toString()}
+      value={
+        `Max Mint Amount Per Tx: ` + (token ? token?.properties?.maxMintAmountPerTx?.toString() : maxMintAmountPerTx)
+      }
       type={type}
     />
   );

diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/NameCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/NameCard.tsx
@@ -2,10 +2,11 @@ import { StylizedStringCard } from "../StylizedStringCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  name?: string;
   type?: "default" | "bold";
 };
 
-export const NameCard = ({ token, type = "bold" }: Props) => {
-  return <StylizedStringCard value={token?.name} type={type} />;
+export const NameCard = ({ token, name = "", type = "bold" }: Props) => {
+  return <StylizedStringCard value={token ? token?.name : name} type={type} />;
 };
diff --git a/...ges/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/RedeemableCard.tsx b/...ges/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/RedeemableCard.tsx
@@ -2,10 +2,16 @@ import { StylizedStringCard } from "../StylizedStringCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  isRedeemable?: boolean;
   type?: "default" | "bold";
 };
 
-export const RedeemableCard = ({ token, type = "default" }: Props) => {
-  return <StylizedStringCard value={`Redeemable: ` + token?.properties?.isRedeemable?.toString()} type={type} />;
+export const RedeemableCard = ({ token, isRedeemable, type = "default" }: Props) => {
+  return (
+    <StylizedStringCard
+      value={`Redeemable: ` + (token ? token?.properties?.isRedeemable?.toString() : isRedeemable?.toString())}
+      type={type}
+    />
+  );
 };
diff --git a/...extjs/components/rep-tokens/cards/stylized-cards/token-properties/ReputationImageCard.tsx b/...extjs/components/rep-tokens/cards/stylized-cards/token-properties/ReputationImageCard.tsx
diff --git a/...ages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/SoulboundCard.tsx b/...ages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/SoulboundCard.tsx
@@ -2,10 +2,16 @@ import { StylizedStringCard } from "../StylizedStringCard";
 import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 
 type Props = {
-  token: Token;
+  token?: Token;
+  isSoulbound?: boolean;
   type?: "default" | "bold";
 };
 
-export const SoulboundCard = ({ token, type = "default" }: Props) => {
-  return <StylizedStringCard value={`Soulbound: ` + token?.properties?.isSoulbound?.toString()} type={type} />;
+export const SoulboundCard = ({ token, isSoulbound, type = "default" }: Props) => {
+  return (
+    <StylizedStringCard
+      value={`Soulbound: ` + (token ? token?.properties?.isSoulbound?.toString() : isSoulbound?.toString())}
+      type={type}
+    />
+  );
 };