fixed yarn snapshot and more intuitive with single token cards

.github/workflows/lint.yaml

@@ -43,8 +43,8 @@ jobs:
       - name: Run tests
         run: yarn test -vvv
 
-      # - name: Run snapshot
-      #   run: forge snapshot
+      - name: Run snapshot
+        run: yarn snapshot
 
       - name: Run nextjs lint
         run: yarn next:lint --max-warnings=0

package.json

@@ -16,6 +16,7 @@
     "fork": "yarn workspace @se-2/foundry fork",
     "foundry:lint": "yarn workspace @se-2/foundry lint",
     "foundry:test": "yarn workspace @se-2/foundry test",
+    "foundry:snapshot": "yarn workspace @se-2/foundry snapshot",
     "generate": "yarn workspace @se-2/foundry generate",
     "postinstall": "husky install",
     "next:check-types": "yarn workspace @se-2/nextjs check-types",
@@ -24,6 +25,7 @@
     "precommit": "lint-staged",
     "prepare": "install-self-peers -- --ignore-scripts",
     "start": "yarn workspace @se-2/nextjs dev",
+    "snapshot": "yarn foundry:snapshot",
     "test": "yarn foundry:test",
     "vercel": "yarn workspace @se-2/nextjs vercel",
     "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo",

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

@@ -10,6 +10,11 @@ import {
   ReputationComponent,
   StylizedTokenGroupCard,
 } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
+import { DescriptionCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/DescriptionCard";
+import { MaxMintAmountPerTxCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/MaxMintAmountPerTxCard";
+import { NameCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/NameCard";
+import { RedeemableCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/RedeemableCard";
+import { SoulboundCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/SoulboundCard";
 import { useRepTokens } from "~~/components/rep-tokens/hooks/Hooks";
 import { useScaffoldContract, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 
@@ -73,14 +78,21 @@ export function RepTokensDemo() {
         <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
         <StylizedImageCard src={tokensData.tokens[0]?.image} />
 
-        <StylizedStringCard value={tokensData.tokens[0]?.name} type="bold" />
-        <StylizedStringCard value={tokensData.tokens[0]?.description} />
+        <NameCard token={tokensData.tokens[0]} />
+        <DescriptionCard token={tokensData.tokens[0]} />
         <StylizedAddressCard address={tokensData.tokens[0]?.address} />
-        <StylizedStringCard value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-        <StylizedStringCard value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`} />
-        <StylizedStringCard
-          value={`Max Mint Amount Per Tx \n${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
-        />
+        <MaxMintAmountPerTxCard token={tokensData.tokens[0]} />
+        <SoulboundCard token={tokensData.tokens[0]} />
+        <RedeemableCard token={tokensData.tokens[0]} />
+
+        {/* <StylizedStringCard value={tokensData.tokens[0]?.name} type="bold" />
+        <StylizedStringCard value={tokensData.tokens[0]?.description} /> */}
+        {/* <StylizedStringCard value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
+        <StylizedStringCard value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`} /> */}
+
+        {/* <StylizedStringCard
+          value={`Max Mint Amount Per Tx: \n${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
+        />*/}
         <p className="text-center text-4xl">Single Card</p>
 
         <StylizedTokenCard>

packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/DescriptionCard.tsx

@@ -0,0 +1,11 @@
+import { StylizedStringCard } from "../StylizedStringCard";
+import { Token } from "~~/components/rep-tokens/hooks/Hooks";
+
+type Props = {
+  token: Token;
+  type?: "default" | "bold";
+};
+
+export const DescriptionCard = ({ token, type = "default" }: Props) => {
+  return <StylizedStringCard value={token?.description} type={type} />;
+};

packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/MaxMintAmountPerTxCard.tsx

@@ -0,0 +1,16 @@
+import { StylizedStringCard } from "../StylizedStringCard";
+import { Token } from "~~/components/rep-tokens/hooks/Hooks";
+
+type Props = {
+  token: Token;
+  type?: "default" | "bold";
+};
+
+export const MaxMintAmountPerTxCard = ({ token, type = "default" }: Props) => {
+  return (
+    <StylizedStringCard
+      value={`Max Mint Amount Per Tx: ` + token?.properties?.maxMintAmountPerTx?.toString()}
+      type={type}
+    />
+  );
+};

packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/NameCard.tsx

@@ -0,0 +1,11 @@
+import { StylizedStringCard } from "../StylizedStringCard";
+import { Token } from "~~/components/rep-tokens/hooks/Hooks";
+
+type Props = {
+  token: Token;
+  type?: "default" | "bold";
+};
+
+export const NameCard = ({ token, type = "bold" }: Props) => {
+  return <StylizedStringCard value={token?.name} type={type} />;
+};

packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/RedeemableCard.tsx

@@ -0,0 +1,11 @@
+import { StylizedStringCard } from "../StylizedStringCard";
+import { Token } from "~~/components/rep-tokens/hooks/Hooks";
+
+type Props = {
+  token: Token;
+  type?: "default" | "bold";
+};
+
+export const RedeemableCard = ({ token, type = "default" }: Props) => {
+  return <StylizedStringCard value={`Redeemable: ` + token?.properties?.isRedeemable?.toString()} type={type} />;
+};

packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/SoulboundCard.tsx

@@ -0,0 +1,11 @@
+import { StylizedStringCard } from "../StylizedStringCard";
+import { Token } from "~~/components/rep-tokens/hooks/Hooks";
+
+type Props = {
+  token: Token;
+  type?: "default" | "bold";
+};
+
+export const SoulboundCard = ({ token, type = "default" }: Props) => {
+  return <StylizedStringCard value={`Soulbound: ` + token?.properties?.isSoulbound?.toString()} type={type} />;
+};