added main overlay back in

packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx → packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx

@@ -1,11 +1,11 @@
-import { ImageProps } from "../rep-tokens/cards/value-cards/ImageCard";
+import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
   TokenCardConfigProps,
   TokenCardValuesConfigProps,
   ValueCardConfigProps,
-} from "../rep-tokens/types/Types";
-import { TokenGroupCardConfigProps } from "../rep-tokens/types/Types";
+} from "../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,

packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx

@@ -0,0 +1,111 @@
+// import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard";
+// import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
+// export const tokensCardPropertiesClasses = {
+//   card: "bg-base-300 flex flex-col items-center",
+//   container: "flex justify-center",
+// } as TokenGroupCardElementsClasses;
+// export const tokenCardPropertiesClasses = {
+//   card: "px-5 py-5 relative w-64",
+//   baseTokenCardElementsClasses: {
+//     balance: {
+//       container: "absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/3",
+//       value: "text-9xl mx-auto text-center",
+//     },
+//     name: {
+//       value: "text-1xl text-center object-center mx-auto font-bold break-all",
+//     },
+//     description: {
+//       value: "text-1xl mx-auto text-center break-words",
+//     },
+//     image: {
+//       value: "rounded mx-auto",
+//     },
+//   },
+// } as TokenCardClasses;
+import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import {
+  ImageValueCardConfigProp,
+  TokenCardConfigProps,
+  TokenCardValuesConfigProps,
+  ValueCardConfigProps,
+} from "../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/Types";
+
+export const balanceProps = {
+  isRendering: true,
+  classes: {
+    card: "absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/3",
+    value: "text-9xl mx-auto text-center text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const imageProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-slate-300 p-1",
+    value: "rounded mx-auto",
+  },
+  imageProperties: new ImageProps("Token", 256, 256),
+  isPrettyLoading: true,
+} as ImageValueCardConfigProp;
+
+export const nameProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-slate-300",
+    value: "text-1xl text-center object-center mx-auto font-bold break-all text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const descriptionProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-slate-300",
+    value: "text-1xl mx-auto text-center break-words text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const addressProps = {
+  isRendering: true,
+  classes: {
+    card: "flex items-center justify-center bg-slate-300",
+    value: "ml-1.5 text-base font-normal text-cyan-800",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const tokenCardValuesProps = {
+  balanceProps,
+  imageProps,
+  nameProps,
+  descriptionProps,
+  addressProps,
+} as TokenCardValuesConfigProps;
+
+export const tokenCardProps = {
+  isRendering: true,
+  cardClasses: "bg-slate-600 px-5 py-5 relative w-64",
+  valuesProps: tokenCardValuesProps,
+} as TokenCardConfigProps;
+
+export const tokenGroupCardConfigProps = {
+  isRendering: true,
+  cardClasses: {
+    card: "bg-slate-900 flex flex-col items-center p-5",
+    value: "bg-slate-800 flex justify-center p-5",
+  },
+  address: {
+    isRendering: true,
+    classes: {
+      card: "my-5 flex items-center justify-center bg-slate-300",
+      value: "ml-1.5 text-base font-normal text-cyan-800",
+    },
+    isPrettyLoading: true,
+  } as ValueCardConfigProps,
+
+  isPrettyLoading: true,
+  tokenCardProps,
+} as TokenGroupCardConfigProps;

packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useAccount } from "wagmi";
-import { tokenGroupCardConfigProps } from "~~/components/rep-tokens-demo/MainTokensCardConfig";
+import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig";
+import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig";
 import { TokenGroupCard } from "~~/components/rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "~~/components/rep-tokens/hooks/Hooks";
 import { buildTokenCards, buildTokenGroupCard } from "~~/components/rep-tokens/utils/buildTokensCard";
@@ -18,14 +19,32 @@ export function RepTokensDemo() {
   const mainTokenCards = buildTokenCards(
     tokensData.tokens,
     tokensData.address,
-    tokenGroupCardConfigProps.tokenCardProps,
+    mainTokenGroupCardConfigProps.tokenCardProps,
+  );
+  const mainTokenGroupCardProps = buildTokenGroupCard(
+    mainTokenGroupCardConfigProps,
+    mainTokenCards,
+    tokensData.address,
   );
-  const mainTokenGroupCardProps = buildTokenGroupCard(tokenGroupCardConfigProps, mainTokenCards, tokensData.address);
 
-  if (tokenGroupCardConfigProps.address?.isRendering) {
+  if (mainTokenGroupCardConfigProps.address?.isRendering) {
     mainTokenGroupCardProps.addressOutput = <Address props={mainTokenGroupCardProps.addressProps} />;
   }
 
+  const mainTokensOverlayCards = buildTokenCards(
+    tokensData.tokens,
+    tokensData.address,
+    mainTokenGroupOverlayCardConfigProps.tokenCardProps,
+  );
+  const mainTokenGroupOverlayCardProps = buildTokenGroupCard(
+    mainTokenGroupOverlayCardConfigProps,
+    mainTokensOverlayCards,
+    tokensData.address,
+  );
+
+  if (mainTokenGroupOverlayCardConfigProps.address?.isRendering) {
+    mainTokenGroupOverlayCardProps.addressOutput = <Address props={mainTokenGroupOverlayCardProps.addressProps} />;
+  }
   return (
     <>
       {/* <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
@@ -45,16 +64,11 @@ export function RepTokensDemo() {
         </div>
       </div>
 
-      {/* <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
+      <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
         <div>
-          <TokenGroupCard
-            address={tokensData.address}
-            tokenCardsProps={mainNumberOverlayTokenCard}
-            elementsClasses={mainNumberOverlayTokensCardElementsClasses}
-            isBeautifyingTokenGroupCardLoadingProps={mainNumberOverlayTokensCardPrettifyLoadingProps}
-          />
+          <TokenGroupCard props={mainTokenGroupOverlayCardProps} />
         </div>
-      </div> */}
+      </div>
     </>
   );
 }