latest

packages/nextjs/app/rep-tokens-demo/_components/configs/NavBarCardConfig.ts

@@ -21,7 +21,7 @@ export const imageConfigProps = {
     card: "rounded-lg bg-slate-300 p-1",
     value: "rounded mx-auto",
   },
-  imageProperties: new ImageProps("Token", 256, 256),
+  imageProperties: new ImageProps("Token", 120, 120),
 } as ImageValueCardConfigProp;
 
 export const tokenCardValuesProps = {

packages/nextjs/components/Header.tsx

@@ -4,6 +4,10 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { StylizedTokenGroupCard } from "./rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
+import { ReputationComponent } from "./rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
+import { useRepTokens } from "./rep-tokens/hooks/Hooks";
+import { useAccount } from "wagmi";
 import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
@@ -67,6 +71,16 @@ export const Header = () => {
     useCallback(() => setIsDrawerOpen(false), []),
   );
 
+  const { address } = useAccount();
+
+  const { tokensData } = useRepTokens(address);
+
+  for (let i = 0; i < tokensData.tokens.length; i++) {
+    tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
+  }
+
+  const widgetComponents: ReputationComponent[] = ["Balance", "Image"];
+
   return (
     <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
@@ -106,6 +120,12 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
+        <StylizedTokenGroupCard
+          tokens={tokensData.tokens}
+          components={widgetComponents}
+          isBalanceOverlayed={true}
+          size="xs"
+        />
         <RainbowKitCustomConnectButton />
         <FaucetButton />
       </div>

packages/nextjs/components/rep-tokens/cards/stylized-cards/BalanceImageOverlay.tsx

@@ -6,13 +6,14 @@ type BalanceProps = {
   balance: number;
   image: string;
   color?: Color;
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 };
 
-export const BalanceImageOverlay = ({ balance, image }: BalanceProps) => {
+export const BalanceImageOverlay = ({ balance, image, size = "base" }: BalanceProps) => {
   return (
     <div className="relative">
-      <StylizedBalanceCard value={Number(balance)} isOverlay />
-      <StylizedImageCard src={image} />
+      <StylizedBalanceCard value={Number(balance)} isOverlay={true} size={size} />
+      <StylizedImageCard src={image} size={size} />
     </div>
   );
 };

packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedAddressCard.tsx

@@ -15,7 +15,7 @@ export const StylizedAddressCard = ({
   isGroup = false,
 }: AddressCardProps) => {
   return (
-    <div className={`rounded-lg flex items-center justify-center bg-${color}-300 ${isGroup ? "mx-4 mt-4" : ""}`}>
+    <div className={`rounded-lg flex items-center justify-center bg-${color}-300 ${isGroup ? "mt-4" : ""}`}>
       <Address address={address} textColor={textColor} />
     </div>
   );

packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard.tsx

@@ -4,18 +4,49 @@ type BalanceProps = {
   value: number;
   color?: Color;
   isOverlay?: boolean;
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 };
 
-export const StylizedBalanceCard = ({ value, color = "slate", isOverlay }: BalanceProps) => {
+const normalSizeMap = {
+  xs: "2xl",
+  sm: "4xl",
+  base: "4xl",
+  lg: 9,
+  xl: 10,
+  "2xl": 12,
+  "3xl": 15,
+};
+
+const overlaidSizeMap = {
+  xs: "2xl",
+  sm: "4xl",
+  base: "9xl",
+  lg: 9,
+  xl: 10,
+  "2xl": 12,
+  "3xl": 15,
+};
+
+const overlaidCardSizeMap = {
+  xs: "inset-x-0 -inset-y-3",
+  sm: "inset-0",
+  base: "inset-5",
+  lg: "",
+  xl: "",
+  "2xl": "",
+  "3xl": "",
+};
+
+export const StylizedBalanceCard = ({ value, color = "slate", isOverlay, size = "base" }: BalanceProps) => {
   let cardClasses;
   let textClasses;
 
   if (isOverlay) {
-    cardClasses = "absolute inset-10 items-center justify-center";
-    textClasses = "text-9xl mx-auto text-center text-black";
+    cardClasses = `absolute ${overlaidCardSizeMap[size]} items-center justify-center`;
+    textClasses = `text-${overlaidSizeMap[size]} mx-auto text-center text-black`;
   } else {
     cardClasses = `rounded-lg bg-${color}-300`;
-    textClasses = "text-4xl mx-auto text-center text-black";
+    textClasses = `text-${normalSizeMap[size]} mx-auto text-center text-black`;
   }
 
   return (

packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedImageCard.tsx

@@ -1,13 +1,43 @@
 import Image from "next/image";
+import { Color } from "./Stylized";
 
 export interface ImageCardPropsInternal {
   src: string;
   alt?: string;
-  width?: number;
-  height?: number;
   imageClassName?: string;
+  color?: Color;
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 }
 
-export const StylizedImageCard = ({ src, alt = "Token Image", width = 512, height = 512 }: ImageCardPropsInternal) => {
-  return <Image className="rounded-lg mx-auto" src={src} alt={alt} width={width} height={height} />;
+const sizeMap = {
+  xs: 32,
+  sm: 64,
+  base: 256,
+  lg: 9,
+  xl: 10,
+  "2xl": 12,
+  "3xl": 15,
+};
+
+const cardSizeMap = {
+  xs: "p-1",
+  sm: "p-2",
+  base: "p-2",
+  lg: 9,
+  xl: 10,
+  "2xl": 12,
+  "3xl": 15,
+};
+
+export const StylizedImageCard = ({
+  src,
+  alt = "Token Image",
+  size = "base",
+  color = "slate",
+}: ImageCardPropsInternal) => {
+  return (
+    <div className={`rounded-lg bg-${color}-300 ${cardSizeMap[size]}`}>
+      <Image className="rounded-lg mx-auto" src={src} alt={alt} width={sizeMap[size]} height={sizeMap[size]} />
+    </div>
+  );
 };

packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx

@@ -1,9 +1,25 @@
 import { Color } from "./Stylized";
 
+export type Size = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+
 export interface TokenCardInternalProps {
   color?: Color;
+  size?: Size;
+  children?: React.ReactNode;
 }
 
-export const StylizedTokenCard = ({ color = "slate", children }: any) => {
-  return <div className={`bg-${color}-600 rounded-lg relative p-5 m-4 w-64`}>{children}</div>;
+const sizeMap = {
+  xs: "",
+  sm: "px-1 py-1 w-20",
+  base: "p-5 m-4 w-64",
+  lg: "",
+  xl: "",
+  "2xl": "",
+  "3xl": "",
+};
+
+export const StylizedTokenCard = ({ color = "slate", size = "base", children }: TokenCardInternalProps) => {
+  "rounded-lg bg-slate-600 px-1 py-1 relative w-20";
+
+  return <div className={`bg-${color}-600 rounded-lg ${sizeMap[size]} relative p-1`}>{children}</div>;
 };

packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx

@@ -11,8 +11,20 @@ export interface TokenCardInternalProps {
   components?: ReputationComponent[];
   color?: Color;
   isBalanceOverlayed?: boolean;
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+  children?: React.ReactNode;
 }
 
+const sizeMap = {
+  xs: "p-1",
+  sm: "p-5",
+  base: "p-5",
+  lg: "",
+  xl: "",
+  "2xl": "",
+  "3xl": "",
+};
+
 export type ReputationComponent =
   | "Balance"
   | "Image"
@@ -38,7 +50,8 @@ export const StylizedTokenGroupCard = ({
   color = "slate",
   isBalanceOverlayed,
   children,
-}: any) => {
+  size = "base",
+}: TokenCardInternalProps) => {
   const output: any[] = [];
 
   for (let i = 0; i < tokens?.length; i++) {
@@ -59,13 +72,17 @@ export const StylizedTokenGroupCard = ({
 
           if (doesImageComponentExist) {
             cardContent.push(
-              <BalanceImageOverlay key={j} balance={Number(tokens[i]?.balance)} image={tokens[i]?.image} />,
+              <BalanceImageOverlay key={j} balance={Number(tokens[i]?.balance)} image={tokens[i]?.image} size={size} />,
             );
           } else {
-            cardContent.push(<StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} />);
+            cardContent.push(
+              <StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} size={size} />,
+            );
           }
         } else {
-          cardContent.push(<StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} />);
+          cardContent.push(
+            <StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} size={size} />,
+          );
         }
       }
 
@@ -78,7 +95,7 @@ export const StylizedTokenGroupCard = ({
 
       if (!isBalanceOverlayed) {
         if (components[j] === "Image") {
-          cardContent.push(<StylizedImageCard key={j} src={tokens[i]?.image} />);
+          cardContent.push(<StylizedImageCard key={j} src={tokens[i]?.image} size={size} />);
         }
       }
 
@@ -116,14 +133,18 @@ export const StylizedTokenGroupCard = ({
       }
     }
 
-    const card = <StylizedTokenCard key={i}>{cardContent}</StylizedTokenCard>;
+    const card = (
+      <StylizedTokenCard key={i} size={size}>
+        {cardContent}
+      </StylizedTokenCard>
+    );
     output.push(card);
   }
 
   return (
-    <div className={`bg-${color}-800 flex flex-col rounded-lg`}>
+    <div className={`bg-${color}-900 flex flex-col rounded-lg ${sizeMap[size]}`}>
       {children}
-      <div className={`flex justify-center`}>{output}</div>
+      <div className={`flex justify-center ${sizeMap[size]} bg-${color}-800 `}>{output}</div>
     </div>
   );
 };

packages/nextjs/components/rep-tokens/hooks/Hooks.tsx

@@ -97,9 +97,11 @@ export function useFetches(uris: string[]) {
 
       const arr = [];
       for (let i = 0; i < uris.length; i++) {
-        const response = await fetch(uris[i]);
-        const responseJson = await response.json();
-        arr.push(responseJson);
+        try {
+          const response = await fetch(uris[i]);
+          const responseJson = await response.json();
+          arr.push(responseJson);
+        } catch (e) {}
       }
 
       setResponses([...arr]);