reorg, single card bugfix, removed demo page, moved demo page content…

…s to home page
ATXDAO · Feb 1, 2024 · 65e4c52 · 65e4c52
1 parent 608a9d8
commit 65e4c52
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 97 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,59 +1,10 @@
-import Link from "next/link";
+import { RepTokensDemo } from "./rep-tokens-demo/_components/RepTokensDemo";
 import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
 const Home: NextPage = () => {
   return (
     <>
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5">
-          <h1 className="text-center mb-8">
-            <span className="block text-2xl mb-2">Welcome to</span>
-            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
-          </h1>
-          <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/app/page.tsx
-            </code>
-          </p>
-          <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.sol
-            </code>{" "}
-            in{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/hardhat/contracts
-            </code>
-          </p>
-        </div>
-
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contract
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
+      <RepTokensDemo />
     </>
   );
 };

diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { tokenCardConfigProps as singleCardConfig } from "./SingleCardConfig";
+import { tokenCardConfigProps as singleCardConfig } from "./configs/SingleCardConfig";
 import { useAccount } from "wagmi";
-import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig";
-import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig";
-import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/NavBarCardConfig";
+import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardConfig";
+import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardWithNumberOverlayConfig";
+import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/configs/NavBarCardConfig";
 import { TokenCard } from "~~/components/rep-tokens/cards/token-card/TokenCard";
 import { TokenGroupCard } from "~~/components/rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "~~/components/rep-tokens/hooks/Hooks";
@@ -66,12 +66,10 @@ export function RepTokensDemo() {
 
   const singleCard0 = buildTokenCard(tokensData?.tokens[0], tokensData.address, singleCardConfig);
 
+  console.log(singleCard0);
+
   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] ">
-        <div></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>
           <TokenCard props={singleCard0} />

diff --git a/...demo/_components/MainTokensCardConfig.tsx → ...omponents/configs/MainTokensCardConfig.ts b/...demo/_components/MainTokensCardConfig.tsx → ...omponents/configs/MainTokensCardConfig.ts
@@ -1,11 +1,11 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+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";
+} from "../../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,

diff --git a/...MainTokensCardWithNumberOverlayConfig.tsx → .../MainTokensCardWithNumberOverlayConfig.ts b/...MainTokensCardWithNumberOverlayConfig.tsx → .../MainTokensCardWithNumberOverlayConfig.ts
@@ -1,11 +1,11 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+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";
+} from "../../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,

diff --git a/...ens-demo/_components/NavBarCardConfig.tsx → ...o/_components/configs/NavBarCardConfig.ts b/...ens-demo/_components/NavBarCardConfig.tsx → ...o/_components/configs/NavBarCardConfig.ts
@@ -1,11 +1,11 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+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";
+} from "../../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,

diff --git a/...ens-demo/_components/SingleCardConfig.tsx → ...o/_components/configs/SingleCardConfig.ts b/...ens-demo/_components/SingleCardConfig.tsx → ...o/_components/configs/SingleCardConfig.ts
@@ -1,15 +1,15 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import { ImageProps } from "../../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
   TokenCardConfigProps,
   TokenCardValuesConfigProps,
   ValueCardConfigProps,
-} from "../../../components/rep-tokens/types/Types";
+} from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,
   classes: {
-    card: "bg-red-300 rounded-lg bg-slate-300",
+    card: "rounded-lg bg-red-300",
     value: "text-4xl mx-auto text-center text-black",
   },
   isPrettyLoading: true,
@@ -18,7 +18,7 @@ export const balanceProps = {
 export const imageProps = {
   isRendering: true,
   classes: {
-    card: "bg-cyan-300 rounded-lg bg-slate-300 p-1",
+    card: "rounded-lg bg-cyan-300  p-1",
     value: "rounded-lg mx-auto",
   },
   imageProperties: new ImageProps("Token", 256, 256),
@@ -28,7 +28,7 @@ export const imageProps = {
 export const nameProps = {
   isRendering: true,
   classes: {
-    card: "bg-lime-300 rounded-lg bg-slate-300",
+    card: "rounded-lg bg-lime-300 ",
     value: "text-1xl text-center object-center mx-auto font-bold break-all text-black",
   },
   isPrettyLoading: true,
@@ -37,7 +37,7 @@ export const nameProps = {
 export const descriptionProps = {
   isRendering: true,
   classes: {
-    card: "bg-violet-300 rounded-lg bg-slate-300",
+    card: "rounded-lg bg-violet-300",
     value: "text-1xl mx-auto text-center break-words text-black",
   },
   isPrettyLoading: true,
@@ -46,7 +46,7 @@ export const descriptionProps = {
 export const addressProps = {
   isRendering: true,
   classes: {
-    card: "bg-pink-300 rounded-lg flex items-center justify-center bg-slate-300",
+    card: "rounded-lg flex items-center justify-center bg-pink-300",
     value: " ml-1.5 text-base font-normal text-cyan-800",
   },
   isPrettyLoading: true,

diff --git a/packages/nextjs/app/rep-tokens-demo/page.tsx b/packages/nextjs/app/rep-tokens-demo/page.tsx
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -24,10 +24,6 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/debug",
     icon: <BugAntIcon className="h-4 w-4" />,
   },
-  {
-    label: "Rep Tokens Demo",
-    href: "/rep-tokens-demo",
-  },
 ];
 
 export const HeaderMenuLinks = () => {

diff --git a/packages/nextjs/components/rep-tokens/cards/value-cards/BalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/value-cards/BalanceCard.tsx
@@ -13,6 +13,8 @@ export interface BigIntCardPropsInternal {
 export const BalanceCard = ({ props }: BigIntCardPropsInternal) => {
   let output;
 
+  console.log(props);
+
   props?.isPrettyLoading
     ? props?.value !== undefined
       ? (output = Number(props?.value))