cleaned up props

ATXDAO · Jan 27, 2024 · 2155d3b · 2155d3b
1 parent 5d29a4e
commit 2155d3b
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 79 deletions.
diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -1,4 +1,4 @@
-import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
+import { BaseImageProps } from "../rep-tokens/cards/property-cards/ImageCard";
 import {
   BaseElementConfigProp,
   ImageElementConfigProp,
@@ -21,7 +21,7 @@ export const imageProps = {
     container: "bg-slate-300 p-1",
     value: "rounded mx-auto",
   },
-  imageProperties: new ImageProperties("Token", 256, 256),
+  imageProperties: new BaseImageProps("Token", 256, 256),
   isPrettyLoading: true,
 } as ImageElementConfigProp;
 

diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx
@@ -1,29 +1,29 @@
 import { ElementClasses } from "../../types/Types";
 
 export interface BalanceCardProps {
-  props: BigIntProps;
+  props: BigIntCardProps;
 }
 
-export interface BigIntProps {
+export interface BigIntCardProps {
   value: bigint;
   classes?: ElementClasses;
   isPrettyLoading?: boolean;
 }
 
-export const BalanceCard = ({ value, classes, isPrettyLoading }: BigIntProps) => {
+export const BalanceCard = ({ props }: BalanceCardProps) => {
   let output;
 
-  isPrettyLoading
-    ? value !== undefined
-      ? (output = Number(value))
+  props?.isPrettyLoading
+    ? props?.value !== undefined
+      ? (output = Number(props?.value))
       : (output = "Loading Balance...")
-    : value !== undefined
-    ? (output = Number(value))
+    : props?.value !== undefined
+    ? (output = Number(props?.value))
     : (output = 0);
 
   return (
-    <div className={classes?.container}>
-      <p className={classes?.value}>{output}</p>
+    <div className={props?.classes?.container}>
+      <p className={props?.classes?.value}>{output}</p>
     </div>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx
@@ -2,13 +2,17 @@ import Image from "next/image";
 import { ElementClasses } from "../../types/Types";
 
 export interface ImageCardProps {
+  props: ImageProps;
+}
+
+export interface ImageProps {
   value: string;
-  properties?: ImageProperties;
+  properties?: BaseImageProps;
   classes?: ElementClasses;
   isPrettyLoading?: boolean;
 }
 
-export class ImageProperties {
+export class BaseImageProps {
   alt: string;
   height: number;
   width: number;
@@ -19,27 +23,27 @@ export class ImageProperties {
   }
 }
 
-export const ImageCard = ({ value, properties, classes, isPrettyLoading }: ImageCardProps) => {
+export const ImageCard = ({ props }: ImageCardProps) => {
   const output = (
-    <div className={classes?.container}>
+    <div className={props?.classes?.container}>
       <Image
-        className={classes?.value}
-        src={value}
-        alt={properties?.alt || "Image"}
-        width={properties?.width}
-        height={properties?.height}
+        className={props?.classes?.value}
+        src={props?.value}
+        alt={props?.properties?.alt || "Image"}
+        width={props?.properties?.width}
+        height={props?.properties?.height}
       />
     </div>
   );
   return (
-    <div className={classes?.container}>
-      {isPrettyLoading ? (
-        value !== undefined && value !== "" ? (
+    <div className={props?.classes?.container}>
+      {props?.isPrettyLoading ? (
+        props?.value !== undefined && props?.value !== "" ? (
           output
         ) : (
           <p>Loading Image...</p>
         )
-      ) : value !== undefined && value !== "" ? (
+      ) : props?.value !== undefined && props?.value !== "" ? (
         output
       ) : (
         <p></p>

diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx
@@ -1,17 +1,21 @@
 import { ElementClasses } from "../../types/Types";
 
 export interface StringCardProps {
+  props: StringProps;
+}
+
+export interface StringProps {
   value?: string;
   classes?: ElementClasses;
   isPrettyLoading?: boolean;
 }
 
-export const StringCard = ({ value, classes, isPrettyLoading }: StringCardProps) => {
-  const output = isPrettyLoading ? (value !== undefined ? value : "Loading...") : value;
+export const StringCard = ({ props }: StringCardProps) => {
+  const output = props?.isPrettyLoading ? (props?.value !== undefined ? props?.value : "Loading...") : props?.value;
 
   return (
-    <div className={classes?.container}>
-      <p className={classes?.value}>{output}</p>
+    <div className={props?.classes?.container}>
+      <p className={props?.classes?.value}>{output}</p>
     </div>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
@@ -1,66 +1,32 @@
 // import { Token } from "../../hooks/Hooks";
 // import { ElementClasses } from "../../types/Types";
 import { BalanceCard } from "../property-cards/BalanceCard";
-import { BigIntProps } from "../property-cards/BalanceCard";
+import { BigIntCardProps } from "../property-cards/BalanceCard";
 import { ImageCard } from "../property-cards/ImageCard";
-import { ImageCardProps } from "../property-cards/ImageCard";
+import { ImageProps } from "../property-cards/ImageCard";
 // import { ImageProperties } from "../property-cards/ImageCard";
-import { StringCard } from "../property-cards/StringCard";
-import { StringCardProps } from "../property-cards/StringCard";
+import { StringCard, StringProps } from "../property-cards/StringCard";
 import { Address } from "~~/components/scaffold-eth";
 
 export interface BaseTokenCardProps {
   elementsProps: BaseTokenCardElementsProps;
 }
 
 export interface BaseTokenCardElementsProps {
-  balanceProp?: BigIntProps;
-  nameProp?: StringCardProps;
-  descriptionProp?: StringCardProps;
-  imageProp?: ImageCardProps;
-  addressProp?: StringCardProps;
+  balanceProp?: BigIntCardProps;
+  nameProp?: StringProps;
+  descriptionProp?: StringProps;
+  imageProp?: ImageProps;
+  addressProp?: StringProps;
 }
 
 export const BaseTokenCard = ({ elementsProps }: BaseTokenCardProps) => {
   return (
     <>
-      {elementsProps?.balanceProp ? (
-        <BalanceCard
-          value={elementsProps?.balanceProp?.value}
-          classes={elementsProps?.balanceProp?.classes}
-          isPrettyLoading={elementsProps?.balanceProp?.isPrettyLoading}
-        />
-      ) : (
-        <></>
-      )}
-      {elementsProps?.imageProp ? (
-        <ImageCard
-          value={elementsProps?.imageProp?.value}
-          properties={elementsProps?.imageProp?.properties}
-          classes={elementsProps?.imageProp?.classes}
-          isPrettyLoading={elementsProps?.imageProp?.isPrettyLoading}
-        />
-      ) : (
-        <></>
-      )}
-      {elementsProps?.nameProp ? (
-        <StringCard
-          value={elementsProps?.nameProp?.value}
-          classes={elementsProps?.nameProp?.classes}
-          isPrettyLoading={elementsProps?.nameProp?.isPrettyLoading}
-        />
-      ) : (
-        <></>
-      )}
-      {elementsProps?.descriptionProp ? (
-        <StringCard
-          value={elementsProps?.descriptionProp?.value}
-          classes={elementsProps?.descriptionProp?.classes}
-          isPrettyLoading={elementsProps?.descriptionProp?.isPrettyLoading}
-        />
-      ) : (
-        <></>
-      )}
+      {elementsProps?.balanceProp ? <BalanceCard props={elementsProps?.balanceProp} /> : <></>}
+      {elementsProps?.imageProp ? <ImageCard props={elementsProps?.imageProp} /> : <></>}
+      {elementsProps?.nameProp ? <StringCard props={elementsProps?.nameProp} /> : <></>}
+      {elementsProps?.descriptionProp ? <StringCard props={elementsProps?.descriptionProp} /> : <></>}
       {elementsProps?.addressProp ? <Address props={elementsProps?.addressProp} /> : <></>}
     </>
   );

diff --git a/packages/nextjs/components/rep-tokens/types/Types.tsx b/packages/nextjs/components/rep-tokens/types/Types.tsx
@@ -1,4 +1,4 @@
-import { ImageProperties } from "../cards/property-cards/ImageCard";
+import { BaseImageProps } from "../cards/property-cards/ImageCard";
 
 export interface ElementClasses {
   container?: string;
@@ -12,7 +12,7 @@ export interface BaseElementConfigProp {
 }
 
 export interface ImageElementConfigProp extends BaseElementConfigProp {
-  imageProperties: ImageProperties;
+  imageProperties: BaseImageProps;
 }
 
 export interface TokenElementsConfigProps {

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { StringCardProps } from "../rep-tokens/cards/property-cards/StringCard";
+import { StringProps } from "../rep-tokens/cards/property-cards/StringCard";
 // import { ElementClasses } from "../rep-tokens/types/Types";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { isAddress } from "viem";
@@ -16,7 +16,7 @@ type TAddressProps = {
   format?: "short" | "long";
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
   // classes?: ElementClasses;
-  props?: StringCardProps;
+  props?: StringProps;
 };
 
 const blockieSizeMap = {