latest

ATXDAO · Apr 6, 2024 · 7c97e53 · 7c97e53
1 parent 34b2a59
commit 7c97e53
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -70,24 +70,27 @@ export function RepTokensDemo() {
   return (
     <>
       <div className="py-5 space-y-5 flex flex-col justify-center items-center bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
-        <p className="text-center text-4xl">Faucet</p>
         <StylizedTokenGroupCard
           tokens={faucetTokens}
           components={widgetComponents}
           isBalanceOverlayed={true}
           size="xs"
+          preChildren={<p className="text-center text-4xl bg-base-200 rounded-lg">Faucet</p>}
+          postChildren={
+            <button
+              className="btn btn-primary btn-sm font-normal gap-1"
+              onClick={async () => {
+                await claim();
+                await refetchUserBalances();
+                await refetchFaucetBalances();
+                await refetchBalance();
+              }}
+            >
+              Claim Tokens
+            </button>
+          }
         />
-        <button
-          className="btn btn-primary btn-sm font-normal gap-1"
-          onClick={async () => {
-            await claim();
-            await refetchUserBalances();
-            await refetchFaucetBalances();
-            await refetchBalance();
-          }}
-        >
-          Claim Tokens
-        </button>
+
         {/* <StylizedTokenGroupCard
           tokens={faucetTokensData.tokens}
           components={widgetComponents}
@@ -186,10 +189,17 @@ export function RepTokensDemo() {
           </div>
         </div>
         <p className="text-center text-4xl">Multi-Card</p>
-        <StylizedTokenGroupCard tokens={tokens} showTopLevelAddress={true} />
+        <StylizedTokenGroupCard
+          tokens={tokens}
+          preChildren={<StylizedAddressCard address={tokens.address} isGroup={true} />}
+        />
 
         <p className="text-center text-4xl">Multi-Card w/ Overlay</p>
-        <StylizedTokenGroupCard tokens={tokens} showTopLevelAddress={true} isBalanceOverlayed={true} />
+        <StylizedTokenGroupCard
+          tokens={tokens}
+          isBalanceOverlayed={true}
+          preChildren={<StylizedAddressCard address={tokens.address} isGroup={true} />}
+        />
 
         <p className="text-center text-4xl">Small</p>
         <StylizedTokenGroupCard tokens={tokens} components={widgetComponents} isBalanceOverlayed={true} size="sm" />

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,14 +1,13 @@
 import { TokenGroup } from "../../hooks/Hooks";
-import { StylizedAddressCard } from "./StylizedAddressCard";
 import { StylizedTokenCard3 } from "./StylizedTokenCard3";
 
 export interface TokenCardInternalProps {
   tokens: TokenGroup;
   components?: ReputationComponent[];
   isBalanceOverlayed?: boolean;
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
-  children?: React.ReactNode;
-  showTopLevelAddress?: boolean;
+  preChildren?: React.ReactNode;
+  postChildren?: React.ReactNode;
 }
 
 const sizeMap = {
@@ -34,9 +33,9 @@ export const StylizedTokenGroupCard = ({
   tokens,
   components = ["Balance", "Image", "Name", "Description", "Address", "TokenType", "MaxMintAmountPerTx"],
   isBalanceOverlayed,
-  children,
+  preChildren,
+  postChildren,
   size = "base",
-  showTopLevelAddress,
 }: TokenCardInternalProps) => {
   const output: any[] = [];
 
@@ -54,10 +53,10 @@ export const StylizedTokenGroupCard = ({
   }
 
   return (
-    <div className={`bg-base-100 flex flex-col rounded-lg ${sizeMap[size]}`}>
-      {showTopLevelAddress ? <StylizedAddressCard address={tokens.address} isGroup={true} /> : <></>}
-      {children}
+    <div className={`bg-base-100 flex flex-col rounded-lg ${sizeMap[size]} space-y-4`}>
+      {preChildren}
       <div className={`flex flex-wrap justify-center ${sizeMap[size]} rounded-lg bg-base-200`}>{output}</div>
+      {postChildren}
     </div>
   );
 };