From 9038c8d98405e3df6af53600830cd8f9600a5b0d Mon Sep 17 00:00:00 2001 From: Jacob Homanics Date: Thu, 1 Feb 2024 04:03:55 -0600 Subject: [PATCH] rounded props --- .../_components/MainTokensCardConfig.tsx | 28 ++-- .../MainTokensCardWithNumberOverlayConfig.tsx | 46 ++---- .../_components/NavBarCardConfig.tsx | 38 ++--- .../_components/RepTokensDemo.tsx | 37 ++--- .../components/rep-tokens/types/Types.tsx | 2 +- .../rep-tokens/utils/buildTokensCard.tsx | 131 ++++++++++++------ 6 files changed, 144 insertions(+), 138 deletions(-) diff --git a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx index 1c9827f..819bc7b 100644 --- a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx +++ b/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx @@ -10,7 +10,7 @@ import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/ export const balanceProps = { isRendering: true, classes: { - card: "bg-slate-300", + card: "rounded-lg bg-slate-300", value: "text-4xl mx-auto text-center text-black", }, isPrettyLoading: true, @@ -19,8 +19,8 @@ export const balanceProps = { export const imageProps = { isRendering: true, classes: { - card: "bg-slate-300 p-1", - value: "rounded mx-auto", + card: "rounded-lg bg-slate-300 p-1", + value: "rounded-lg mx-auto", }, imageProperties: new ImageProps("Token", 256, 256), isPrettyLoading: true, @@ -29,7 +29,7 @@ export const imageProps = { export const nameProps = { isRendering: true, classes: { - card: "bg-slate-300", + card: "rounded-lg bg-slate-300", value: "text-1xl text-center object-center mx-auto font-bold break-all text-black", }, isPrettyLoading: true, @@ -38,7 +38,7 @@ export const nameProps = { export const descriptionProps = { isRendering: true, classes: { - card: "bg-slate-300", + card: "rounded-lg bg-slate-300", value: "text-1xl mx-auto text-center break-words text-black", }, isPrettyLoading: true, @@ -47,8 +47,8 @@ export const descriptionProps = { 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", + card: "rounded-lg flex items-center justify-center bg-slate-300", + value: " ml-1.5 text-base font-normal text-cyan-800", }, isPrettyLoading: true, } as ValueCardConfigProps; @@ -61,27 +61,27 @@ export const tokenCardValuesProps = { addressProps, } as TokenCardValuesConfigProps; -export const tokenCardProps = { +export const tokenCardConfigProps = { isRendering: true, - cardClasses: "bg-slate-600 p-5 m-4 w-64", + cardClasses: "rounded-lg bg-slate-600 p-5 m-4 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", + card: "rounded-lg bg-slate-900 flex flex-col items-center p-5", + value: "rounded-lg 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", + card: "rounded-lg my-5 flex items-center justify-center bg-slate-300", + value: "rounded-lg ml-1.5 text-base font-normal text-cyan-800", }, isPrettyLoading: true, } as ValueCardConfigProps, isPrettyLoading: true, - tokenCardProps, + tokenCardConfigProps, } as TokenGroupCardConfigProps; diff --git a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx index 952b1f8..2a02e01 100644 --- a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx +++ b/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx @@ -1,27 +1,3 @@ -// 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, @@ -43,8 +19,8 @@ export const balanceProps = { export const imageProps = { isRendering: true, classes: { - card: "bg-slate-300 p-1", - value: "rounded mx-auto", + card: "rounded-lg bg-slate-300 p-1", + value: "rounded-lg mx-auto", }, imageProperties: new ImageProps("Token", 256, 256), isPrettyLoading: true, @@ -53,7 +29,7 @@ export const imageProps = { export const nameProps = { isRendering: true, classes: { - card: "bg-slate-300", + card: "rounded-lg bg-slate-300", value: "text-1xl text-center object-center mx-auto font-bold break-all text-black", }, isPrettyLoading: true, @@ -62,7 +38,7 @@ export const nameProps = { export const descriptionProps = { isRendering: true, classes: { - card: "bg-slate-300", + card: "rounded-lg bg-slate-300", value: "text-1xl mx-auto text-center break-words text-black", }, isPrettyLoading: true, @@ -71,7 +47,7 @@ export const descriptionProps = { export const addressProps = { isRendering: true, classes: { - card: "flex items-center justify-center bg-slate-300", + card: "rounded-lg flex items-center justify-center bg-slate-300", value: "ml-1.5 text-base font-normal text-cyan-800", }, isPrettyLoading: true, @@ -85,27 +61,27 @@ export const tokenCardValuesProps = { addressProps, } as TokenCardValuesConfigProps; -export const tokenCardProps = { +export const tokenCardConfigProps = { isRendering: true, - cardClasses: "bg-slate-600 p-5 m-4 relative w-64", + cardClasses: "rounded-lg bg-slate-600 p-5 m-4 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", + card: "rounded-lg bg-slate-900 flex flex-col items-center p-5", + value: "rounded-lg bg-slate-800 flex justify-center p-5", }, address: { isRendering: true, classes: { - card: "my-5 flex items-center justify-center bg-slate-300", + card: "rounded-lg 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, + tokenCardConfigProps, } as TokenGroupCardConfigProps; diff --git a/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx index ee848aa..9f5781f 100644 --- a/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx +++ b/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx @@ -1,25 +1,3 @@ -// import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard"; -// import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard"; -// export const tokensCardPropertiesClasses = { -// container: "flex justify-center", -// card: "bg-slate-800 flex flex-col items-center", -// address: { -// container: "flex items-center justify-center bg-slate-600", -// value: "ml-1.5 text-${size} font-normal text-white", -// }, -// } as TokenGroupCardElementsClasses; -// export const tokenCardPropertiesClasses = { -// card: "px-1 py-1 relative w-20 ", -// baseTokenCardElementsClasses: { -// balance: { -// container: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", -// value: "text-4xl text-center justify-center", -// }, -// image: { -// value: "rounded mx-auto", -// }, -// }, -// } as TokenCardClasses; import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard"; import { ImageValueCardConfigProp, @@ -32,7 +10,7 @@ import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/ export const balanceProps = { isRendering: true, classes: { - card: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", + card: "rounded-lg absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", value: "text-4xl mx-auto text-center text-black", }, isPrettyLoading: true, @@ -41,7 +19,7 @@ export const balanceProps = { export const imageProps = { isRendering: true, classes: { - card: "bg-slate-300 p-1", + card: "rounded-lg bg-slate-300 p-1", value: "rounded mx-auto", }, imageProperties: new ImageProps("Token", 256, 256), @@ -53,27 +31,27 @@ export const tokenCardValuesProps = { imageProps, } as TokenCardValuesConfigProps; -export const tokenCardProps = { +export const tokenCardConfigProps = { isRendering: true, - cardClasses: "bg-slate-600 px-1 py-1 relative w-20 ", + cardClasses: "rounded-lg bg-slate-600 px-1 py-1 relative w-20 ", 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", + card: "rounded-lg bg-slate-900 flex flex-col items-center p-5", + value: "rounded-lg bg-slate-800 flex justify-center p-5", }, address: { isRendering: true, classes: { - card: "my-5 flex items-center justify-center bg-slate-300", + card: "rounded-lg 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, + tokenCardConfigProps, } as TokenGroupCardConfigProps; diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx index a923584..4adc8f2 100644 --- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx +++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx @@ -1,12 +1,16 @@ "use client"; import { useAccount } from "wagmi"; -import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig"; +import { + tokenGroupCardConfigProps as mainTokenGroupCardConfigProps, + tokenCardConfigProps, +} 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 { 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"; -import { buildTokenCards, buildTokenGroupCard } from "~~/components/rep-tokens/utils/buildTokensCard"; +import { buildTokenCard, buildTokenCards, buildTokenGroupCard } from "~~/components/rep-tokens/utils/buildTokensCard"; import { Address } from "~~/components/scaffold-eth"; export function RepTokensDemo() { @@ -20,7 +24,7 @@ export function RepTokensDemo() { const mainTokenCards = buildTokenCards( tokensData.tokens, tokensData.address, - mainTokenGroupCardConfigProps.tokenCardProps, + mainTokenGroupCardConfigProps.tokenCardConfigProps, ); const mainTokenGroupCardProps = buildTokenGroupCard( mainTokenGroupCardConfigProps, @@ -35,7 +39,7 @@ export function RepTokensDemo() { const mainTokensOverlayCards = buildTokenCards( tokensData.tokens, tokensData.address, - mainTokenGroupOverlayCardConfigProps.tokenCardProps, + mainTokenGroupOverlayCardConfigProps.tokenCardConfigProps, ); const mainTokenGroupOverlayCardProps = buildTokenGroupCard( mainTokenGroupOverlayCardConfigProps, @@ -50,7 +54,7 @@ export function RepTokensDemo() { const navBarTokenCards = buildTokenCards( tokensData.tokens, tokensData.address, - navBarTokenGroupConfigProps.tokenCardProps, + navBarTokenGroupConfigProps.tokenCardConfigProps, ); const navBarTokenGroupCardProps = buildTokenGroupCard( navBarTokenGroupConfigProps, @@ -62,22 +66,17 @@ export function RepTokensDemo() { navBarTokenGroupCardProps.addressOutput =
; } + const singleCard0 = buildTokenCard(tokensData.tokens[0], tokensData.address, tokenCardConfigProps); + return ( <> - {/*
-
- -
-
*/} +
+
+
- +
@@ -92,6 +91,12 @@ export function RepTokensDemo() { + +
+
+ +
+
); } diff --git a/packages/nextjs/components/rep-tokens/types/Types.tsx b/packages/nextjs/components/rep-tokens/types/Types.tsx index fd50ec7..c45a439 100644 --- a/packages/nextjs/components/rep-tokens/types/Types.tsx +++ b/packages/nextjs/components/rep-tokens/types/Types.tsx @@ -35,5 +35,5 @@ export interface TokenGroupCardConfigProps { cardClasses: CardClasses; address?: ValueCardConfigProps; isPrettyLoading: boolean; - tokenCardProps: TokenCardConfigProps; + tokenCardConfigProps: TokenCardConfigProps; } diff --git a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx index bcc9f23..446922f 100644 --- a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx +++ b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx @@ -21,52 +21,99 @@ export function buildTokenGroupCard(config: TokenGroupCardConfigProps, tokenCard return tokenGroupCard; } +export function buildTokenCard(token: Token, address?: string, tokenCardProps?: TokenCardConfigProps) { + return { + isPrettyLoading: tokenCardProps?.isPrettyLoading, + cardClasses: tokenCardProps?.cardClasses, + valuesProps: { + balanceProps: tokenCardProps?.valuesProps?.balanceProps?.isRendering + ? { + value: token.balance, + classes: tokenCardProps?.valuesProps?.balanceProps?.classes, + isPrettyLoading: tokenCardProps?.valuesProps?.balanceProps?.isPrettyLoading, + } + : undefined, + nameProps: tokenCardProps?.valuesProps?.nameProps?.isRendering + ? { + value: token.name, + classes: tokenCardProps?.valuesProps?.nameProps?.classes, + isPrettyLoading: tokenCardProps?.valuesProps?.nameProps?.isPrettyLoading, + } + : undefined, + descriptionProps: tokenCardProps?.valuesProps?.descriptionProps?.isRendering + ? { + value: token.description, + classes: tokenCardProps?.valuesProps?.descriptionProps?.classes, + isPrettyLoading: tokenCardProps?.valuesProps?.descriptionProps?.isPrettyLoading, + } + : undefined, + imageProps: tokenCardProps?.valuesProps?.imageProps?.isRendering + ? { + value: token.image, + properties: tokenCardProps?.valuesProps?.imageProps?.imageProperties, + classes: tokenCardProps?.valuesProps?.imageProps?.classes, + isPrettyLoading: tokenCardProps?.valuesProps?.imageProps?.isPrettyLoading, + } + : undefined, + addressProps: tokenCardProps?.valuesProps?.addressProps?.isRendering + ? { + value: address, + classes: tokenCardProps?.valuesProps?.addressProps?.classes, + isPrettyLoading: tokenCardProps?.valuesProps?.addressProps?.isPrettyLoading, + } + : undefined, + }, + } as TokenCardProps; +} + export function buildTokenCards(tokens: Token[], address?: string, tokenCardProps?: TokenCardConfigProps) { const arr = []; for (let i = 0; i < tokens.length; i++) { - const tokenCardProp: TokenCardProps = { - isPrettyLoading: tokenCardProps?.isPrettyLoading, - cardClasses: tokenCardProps?.cardClasses, - valuesProps: { - balanceProps: tokenCardProps?.valuesProps?.balanceProps?.isRendering - ? { - value: tokens[i].balance, - classes: tokenCardProps?.valuesProps?.balanceProps?.classes, - isPrettyLoading: tokenCardProps?.valuesProps?.balanceProps?.isPrettyLoading, - } - : undefined, - nameProps: tokenCardProps?.valuesProps?.nameProps?.isRendering - ? { - value: tokens[i].name, - classes: tokenCardProps?.valuesProps?.nameProps?.classes, - isPrettyLoading: tokenCardProps?.valuesProps?.nameProps?.isPrettyLoading, - } - : undefined, - descriptionProps: tokenCardProps?.valuesProps?.descriptionProps?.isRendering - ? { - value: tokens[i].description, - classes: tokenCardProps?.valuesProps?.descriptionProps?.classes, - isPrettyLoading: tokenCardProps?.valuesProps?.descriptionProps?.isPrettyLoading, - } - : undefined, - imageProps: tokenCardProps?.valuesProps?.imageProps?.isRendering - ? { - value: tokens[i].image, - properties: tokenCardProps?.valuesProps?.imageProps?.imageProperties, - classes: tokenCardProps?.valuesProps?.imageProps?.classes, - isPrettyLoading: tokenCardProps?.valuesProps?.imageProps?.isPrettyLoading, - } - : undefined, - addressProps: tokenCardProps?.valuesProps?.addressProps?.isRendering - ? { - value: address, - classes: tokenCardProps?.valuesProps?.addressProps?.classes, - isPrettyLoading: tokenCardProps?.valuesProps?.addressProps?.isPrettyLoading, - } - : undefined, - }, - }; + const tokenCardProp: TokenCardProps = buildTokenCard(tokens[i], address, tokenCardProps); + + // const tokenCardProp: TokenCardProps = { + // isPrettyLoading: tokenCardProps?.isPrettyLoading, + // cardClasses: tokenCardProps?.cardClasses, + // valuesProps: { + // balanceProps: tokenCardProps?.valuesProps?.balanceProps?.isRendering + // ? { + // value: tokens[i].balance, + // classes: tokenCardProps?.valuesProps?.balanceProps?.classes, + // isPrettyLoading: tokenCardProps?.valuesProps?.balanceProps?.isPrettyLoading, + // } + // : undefined, + // nameProps: tokenCardProps?.valuesProps?.nameProps?.isRendering + // ? { + // value: tokens[i].name, + // classes: tokenCardProps?.valuesProps?.nameProps?.classes, + // isPrettyLoading: tokenCardProps?.valuesProps?.nameProps?.isPrettyLoading, + // } + // : undefined, + // descriptionProps: tokenCardProps?.valuesProps?.descriptionProps?.isRendering + // ? { + // value: tokens[i].description, + // classes: tokenCardProps?.valuesProps?.descriptionProps?.classes, + // isPrettyLoading: tokenCardProps?.valuesProps?.descriptionProps?.isPrettyLoading, + // } + // : undefined, + // imageProps: tokenCardProps?.valuesProps?.imageProps?.isRendering + // ? { + // value: tokens[i].image, + // properties: tokenCardProps?.valuesProps?.imageProps?.imageProperties, + // classes: tokenCardProps?.valuesProps?.imageProps?.classes, + // isPrettyLoading: tokenCardProps?.valuesProps?.imageProps?.isPrettyLoading, + // } + // : undefined, + // addressProps: tokenCardProps?.valuesProps?.addressProps?.isRendering + // ? { + // value: address, + // classes: tokenCardProps?.valuesProps?.addressProps?.classes, + // isPrettyLoading: tokenCardProps?.valuesProps?.addressProps?.isPrettyLoading, + // } + // : undefined, + // }, + // }; arr.push(tokenCardProp); }