abstracted out card props

ATXDAO · Jan 26, 2024 · 3fa7513 · 3fa7513
1 parent 445ce43
commit 3fa7513
Show file tree

Hide file tree

Showing 9 changed files with 332 additions and 2,066 deletions.
diff --git a/packages/foundry/script/Deploy.s.sol b/packages/foundry/script/Deploy.s.sol
@@ -1,6 +1,8 @@
 //SPDX-License-Identifier: MIT
 pragma solidity ^0.8.19;
 
+import {console} from "forge-std/console.sol";
+
 import {ScaffoldETHDeploy} from "./DeployHelpers.s.sol";
 // import {DeployRepTokensInstanceWithData} from "./DeployRepTokensInstanceWithData.s.sol";
 import {ReputationTokensStandalone} from "@atxdao/contracts/reputation/ReputationTokensStandalone.sol";
@@ -105,22 +107,33 @@ contract DeployScript is ScaffoldETHDeploy {
         );
         mintOperations.operations[1] = IReputationTokensInternal.TokenOperation(
             1,
-            90
+            45
         );
         instance.mint(mintOperations);
 
-        Hats hatsInstance = new Hats("Hats", "");
+        // Hats hatsInstance = new Hats("Hats", "ipfs");
 
-        hatsInstance.mintTopHat(
-            0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266,
-            "",
-            ""
-        );
+        // uint256 topHatId = hatsInstance.mintTopHat(
+        //     0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266,
+        //     "",
+        //     ""
+        // );
+
+        // uint256 newHatId = hatsInstance.createHat(
+        //     topHatId,
+        //     "Details...",
+        //     100,
+        //     0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266,
+        //     0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266,
+        //     true,
+        //     ""
+        // );
+
+        // console.log(topHatId);
+        // console.log(newHatId);
 
         vm.stopBroadcast();
 
         exportDeployments();
     }
-
-    function test() public {}
 }
diff --git a/packages/nextjs/components/rep-tokens-demo/Index.tsx b/packages/nextjs/components/rep-tokens-demo/Index.tsx
@@ -1,17 +1,64 @@
 import { useRepTokens } from "./tokens/Hooks";
+import { Token } from "./tokens/Hooks";
+import { TBaseTokenCardBooleanSet } from "./tokens/token-card/BaseTokenCard";
 import { ImageProperties } from "./tokens/token-card/ImageCard";
-import { TokensCard } from "./tokens/tokens-card/TokensCard";
+import { TTokenCardPrettifyLoadingProps } from "./tokens/token-card/TokenCard";
+import { TTokenCardPropss } from "./tokens/token-card/TokenCard";
+import { TTokenCardPropertiesClasses } from "./tokens/token-card/TokenCard";
+import {
+  tokenCardPrettifyLoadingProps as mainTokenCardPrettifyLoadingProps,
+  tokenCardPropertiesClasses as mainTokenCardPropertiesClasses,
+  tokenCardRenderProps as mainTokenCardRenderProps,
+  tokensCardPrettifyLoadingProps as mainTokensCardPrettifyLoadingProps,
+  tokensCardPropertiesClasses as mainTokensCardPropertiesClassess,
+  tokensCardRenderProps as mainTokensCardRenderProps,
+} from "./tokens/tokens-card/MainTokensCardConfig";
+import {
+  tokenCardPrettifyLoadingProps as mainNumberOverlayTokenCardPrettifyLoadingProps,
+  tokenCardPropertiesClasses as mainNumberOverlayTokenCardPropertiesClasses,
+  tokenCardRenderProps as mainNumberOverlayTokenCardRenderProps,
+  tokensCardPrettifyLoadingProps as mainNumberOverlayTokensCardPrettifyLoadingProps,
+  tokensCardPropertiesClasses as mainNumberOverlayTokensCardPropertiesClassess,
+  tokensCardRenderProps as mainNumberOverlayTokensCardRenderProps,
+} from "./tokens/tokens-card/MainTokensCardWithNumberOverlayConfig";
 import {
-  mainCardPropertiesClasses,
-  mainCardRenderProps,
-  mainCardWithNumberOverlayPropertiesClasses,
-  navBarPropertiesClasses,
-  navBarRenderProps,
-  prettifyLoadingProps,
-} from "./tokens/tokens-card/TokensCardConfig";
+  tokenCardPrettifyLoadingProps as navBarTokenCardPrettifyLoadingProps,
+  tokenCardPropertiesClasses as navBarTokenCardPropertiesClasses,
+  tokenCardRenderProps as navBarTokenCardRenderProps,
+  tokensCardPrettifyLoadingProps as navBarTokensCardPrettifyLoadingProps,
+  tokensCardPropertiesClasses as navBarTokensCardPropertiesClassess,
+  tokensCardRenderProps as navBarTokensCardRenderProps,
+} from "./tokens/tokens-card/NavBarCardConfig";
+import { TokensCard } from "./tokens/tokens-card/TokensCard";
 import { useAccount } from "wagmi";
 
+function buildTokensCard(
+  tokens: Token[],
+  imageProperties?: ImageProperties,
+  propertiesClasses?: TTokenCardPropertiesClasses,
+  renderProps?: TBaseTokenCardBooleanSet,
+  prettifyLoadingProps?: TTokenCardPrettifyLoadingProps,
+) {
+  const arr = [];
+  for (let i = 0; i < tokens.length; i++) {
+    const tokenCardProp: TTokenCardPropss = {
+      token: tokens[i],
+      imageProperties,
+      prettifyLoadingProps: prettifyLoadingProps,
+      propertiesClasses,
+      renderProps,
+    };
+
+    arr.push(tokenCardProp);
+  }
+
+  return arr;
+}
+
 export const Index = () => {
+  const navBarCardImageProperties = new ImageProperties("Token", 64, 64);
+  const mainCardImageProperties = new ImageProperties("Token", 256, 256);
+
   const { address } = useAccount();
 
   const { tokensData } = useRepTokens(address);
@@ -20,43 +67,64 @@ export const Index = () => {
     tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
   }
 
-  const navBarCardImageProperties = new ImageProperties("Token", 64, 64);
-  const mainCardImageProperties = new ImageProperties("Token", 256, 256);
+  const navBarTokenCard = buildTokensCard(
+    tokensData.tokens,
+    navBarCardImageProperties,
+    navBarTokenCardPropertiesClasses,
+    navBarTokenCardRenderProps,
+    navBarTokenCardPrettifyLoadingProps,
+  );
+
+  const mainTokenCard = buildTokensCard(
+    tokensData.tokens,
+    mainCardImageProperties,
+    mainTokenCardPropertiesClasses,
+    mainTokenCardRenderProps,
+    mainTokenCardPrettifyLoadingProps,
+  );
+
+  const mainNumberOverlayTokenCard = buildTokensCard(
+    tokensData.tokens,
+    mainCardImageProperties,
+    mainNumberOverlayTokenCardPropertiesClasses,
+    mainNumberOverlayTokenCardRenderProps,
+    mainNumberOverlayTokenCardPrettifyLoadingProps,
+  );
 
   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>
           <TokensCard
-            tokensData={tokensData}
-            imageProperties={navBarCardImageProperties}
-            prettifyLoadingProps={prettifyLoadingProps}
-            propertiesClasses={navBarPropertiesClasses}
-            renderProps={navBarRenderProps}
+            address={tokensData.address}
+            tokensProps={navBarTokenCard}
+            propertiesClasses={navBarTokensCardPropertiesClassess}
+            renderProps={navBarTokensCardRenderProps}
+            prettifyLoadingProps={navBarTokensCardPrettifyLoadingProps}
           />
         </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>
           <TokensCard
-            tokensData={tokensData}
-            imageProperties={mainCardImageProperties}
-            prettifyLoadingProps={prettifyLoadingProps}
-            propertiesClasses={mainCardPropertiesClasses}
-            renderProps={mainCardRenderProps}
+            address={tokensData.address}
+            tokensProps={mainTokenCard}
+            propertiesClasses={mainTokensCardPropertiesClassess}
+            renderProps={mainTokensCardRenderProps}
+            prettifyLoadingProps={mainTokensCardPrettifyLoadingProps}
           />
         </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>
           <TokensCard
-            tokensData={tokensData}
-            imageProperties={mainCardImageProperties}
-            prettifyLoadingProps={prettifyLoadingProps}
-            propertiesClasses={mainCardWithNumberOverlayPropertiesClasses}
-            renderProps={mainCardRenderProps}
+            address={tokensData.address}
+            tokensProps={mainNumberOverlayTokenCard}
+            propertiesClasses={mainNumberOverlayTokensCardPropertiesClassess}
+            renderProps={mainNumberOverlayTokensCardRenderProps}
+            prettifyLoadingProps={mainNumberOverlayTokensCardPrettifyLoadingProps}
           />
         </div>
       </div>

diff --git a/...mo/tokens/token-card/DefaultTokenCard.tsx → ...kens-demo/tokens/token-card/TokenCard.tsx b/...mo/tokens/token-card/DefaultTokenCard.tsx → ...kens-demo/tokens/token-card/TokenCard.tsx
@@ -6,7 +6,15 @@ import {
 } from "./BaseTokenCard";
 import { ImageProperties } from "./ImageCard";
 
-type TTokenCardProps = {
+export interface TTokenCardPropss {
+  token: Token;
+  imageProperties?: ImageProperties;
+  propertiesClasses?: TTokenCardPropertiesClasses;
+  prettifyLoadingProps?: TTokenCardPrettifyLoadingProps;
+  renderProps?: TBaseTokenCardBooleanSet;
+}
+
+export type TTokenCardProps = {
   token: Token;
   imageProperties?: ImageProperties;
   propertiesClasses?: TTokenCardPropertiesClasses;

diff --git a/packages/nextjs/components/rep-tokens-demo/tokens/tokens-card/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/tokens/tokens-card/MainTokensCardConfig.tsx
@@ -0,0 +1,52 @@
+import { TBaseTokenCardBooleanSet } from "../token-card/BaseTokenCard";
+import { TTokenCardPrettifyLoadingProps, TTokenCardPropertiesClasses } from "../token-card/TokenCard";
+import { TTokenGroupCardPrettifyLoadingProps, TTokensCardRenderProps } from "./TokensCard";
+import { TTokenCardGroupPropertiesClasses } from "./TokensCard";
+
+export const tokensCardRenderProps = {
+  address: true,
+} as TTokensCardRenderProps;
+
+export const tokenCardRenderProps = {
+  balance: true,
+  image: true,
+  name: true,
+  description: true,
+} as TBaseTokenCardBooleanSet;
+
+export const tokensCardPropertiesClasses = {
+  card: "bg-base-300 flex flex-col items-center",
+  container: "flex justify-center",
+} as TTokenCardGroupPropertiesClasses;
+
+export const tokenCardPropertiesClasses = {
+  card: "px-5 py-5 w-64",
+  baseTokenCardPropertyClasses: {
+    balance: {
+      value: "text-4xl 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 TTokenCardPropertiesClasses;
+
+export const tokensCardPrettifyLoadingProps = {
+  card: true,
+} as TTokenGroupCardPrettifyLoadingProps;
+
+export const tokenCardPrettifyLoadingProps = {
+  card: false,
+  baseTokenCardPrettifyLoadingProps: {
+    balance: false,
+    image: false,
+    name: false,
+    description: false,
+  },
+} as TTokenCardPrettifyLoadingProps;
diff --git a/...s/components/rep-tokens-demo/tokens/tokens-card/MainTokensCardWithNumberOverlayConfig.tsx b/...s/components/rep-tokens-demo/tokens/tokens-card/MainTokensCardWithNumberOverlayConfig.tsx
@@ -0,0 +1,53 @@
+import { TBaseTokenCardBooleanSet } from "../token-card/BaseTokenCard";
+import { TTokenCardPrettifyLoadingProps, TTokenCardPropertiesClasses } from "../token-card/TokenCard";
+import { TTokenGroupCardPrettifyLoadingProps, TTokensCardRenderProps } from "./TokensCard";
+import { TTokenCardGroupPropertiesClasses } from "./TokensCard";
+
+export const tokensCardRenderProps = {
+  address: true,
+} as TTokensCardRenderProps;
+
+export const tokenCardRenderProps = {
+  balance: true,
+  image: true,
+  name: true,
+  description: true,
+} as TBaseTokenCardBooleanSet;
+
+export const tokensCardPropertiesClasses = {
+  card: "bg-base-300 flex flex-col items-center",
+  container: "flex justify-center",
+} as TTokenCardGroupPropertiesClasses;
+
+export const tokenCardPropertiesClasses = {
+  card: "px-5 py-5 relative w-64",
+  baseTokenCardPropertyClasses: {
+    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 TTokenCardPropertiesClasses;
+
+export const tokensCardPrettifyLoadingProps = {
+  card: true,
+} as TTokenGroupCardPrettifyLoadingProps;
+
+export const tokenCardPrettifyLoadingProps = {
+  card: false,
+  baseTokenCardPrettifyLoadingProps: {
+    balance: false,
+    image: false,
+    name: false,
+    description: false,
+  },
+} as TTokenCardPrettifyLoadingProps;
diff --git a/packages/nextjs/components/rep-tokens-demo/tokens/tokens-card/NavBarCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/tokens/tokens-card/NavBarCardConfig.tsx
@@ -0,0 +1,47 @@
+import { TBaseTokenCardBooleanSet } from "../token-card/BaseTokenCard";
+import { TTokenCardPrettifyLoadingProps, TTokenCardPropertiesClasses } from "../token-card/TokenCard";
+import { TTokenGroupCardPrettifyLoadingProps, TTokensCardRenderProps } from "./TokensCard";
+import { TTokenCardGroupPropertiesClasses } from "./TokensCard";
+
+export const tokensCardPropertiesClasses = {
+  card: "bg-base-300 flex flex-col items-center",
+  container: "flex justify-center",
+} as TTokenCardGroupPropertiesClasses;
+
+export const tokenCardPropertiesClasses = {
+  card: "px-1 py-1 relative w-20",
+  baseTokenCardPropertyClasses: {
+    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 TTokenCardPropertiesClasses;
+
+export const tokenCardRenderProps = {
+  balance: true,
+  image: true,
+  name: false,
+  description: false,
+} as TBaseTokenCardBooleanSet;
+
+export const tokensCardRenderProps = {
+  address: true,
+} as TTokensCardRenderProps;
+
+export const tokensCardPrettifyLoadingProps = {
+  card: true,
+} as TTokenGroupCardPrettifyLoadingProps;
+
+export const tokenCardPrettifyLoadingProps = {
+  card: false,
+  baseTokenCardPrettifyLoadingProps: {
+    balance: false,
+    image: false,
+    name: false,
+    description: false,
+  },
+} as TTokenCardPrettifyLoadingProps;