fix account flickering issue

BibliothecaDAO · Oct 16, 2024 · 3f9c2d7 · 3f9c2d7
1 parent 7fe6afd
commit 3f9c2d7
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 15 deletions.
diff --git a/apps/nextjs/src/app/(app)/account/assets/Portfolio.tsx b/apps/nextjs/src/app/(app)/account/assets/Portfolio.tsx
@@ -85,7 +85,6 @@ export const Portfolio = ({
   const viewRef = useRef(null);
   const isInView = useInView(viewRef);
   useEffect(() => {
-    console.log(isInView);
     if (isInView && !isFetchingNextPage) fetchNextPage();
   }, [isInView, fetchNextPage]);
   const {

diff --git a/apps/nextjs/src/app/(app)/account/assets/page.tsx b/apps/nextjs/src/app/(app)/account/assets/page.tsx
@@ -1,8 +1,4 @@
 import type { Metadata } from "next";
-
-import { Collections } from "@realms-world/constants";
-
-import { BridgeNftWrapper } from "./BridgeNftWrapper";
 import { Portfolio } from "./Portfolio";
 
 export function generateMetadata(): Metadata {

diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Card.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Card.tsx
@@ -128,7 +128,7 @@ const TokenAttributes = ({
   const metadata = useTokenMetadata(token);
   if (!metadata?.attributes) return null;
 
-  <table className="min-w-full bg-black font-sans text-xs">
+  <table className="h-full min-w-full bg-black font-sans text-xs">
     <tbody>
       {attributeKeys.map((key: string) => {
         const attribute = metadata.attributes.find(
@@ -164,11 +164,13 @@ const GridDetails = ({
         )*/}
       </div>
     </div>
-    {token.metadata?.attributes &&
-      token.collection_address ==
-        CollectionAddresses.realms[SUPPORTED_L2_CHAIN_ID] && (
-        <RealmResources traits={token.metadata?.attributes} />
-      )}
+    <div className="h-[48px]">
+      {token.metadata?.attributes &&
+        token.collection_address ==
+          CollectionAddresses.realms[SUPPORTED_L2_CHAIN_ID] && (
+          <RealmResources traits={token.metadata?.attributes} />
+        )}
+    </div>
   </div>
 );
 

diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/RealmResources.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/RealmResources.tsx
@@ -1,25 +1,69 @@
 import { ResourceIcon } from "@realms-world/ui/components/ui/resource-icon";
-import { Badge } from "@realms-world/ui/components/ui/badge";
-import Image from "next/image";
 import { TokenMetadataAttribute } from "@/types/ark";
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@realms-world/ui/components/ui/tooltip"; // Assuming you're using a tooltip library
 
 export default function RealmResources({
   traits,
 }: {
   traits: TokenMetadataAttribute[];
 }) {
   const resources = traits.filter((trait) => trait.trait_type === "Resource");
+  const [showMore, setShowMore] = useState(false);
+  const hiddenCount = resources.length - 4;
 
   return (
-    <div className="flex flex-wrap gap-4">
-      {resources.map((resource, index) => (
+    <div className="flex items-center gap-2">
+      {resources.slice(0, 4).map((resource, index) => (
         <div
           key={index}
           className="flex items-center gap-2 rounded-lg bg-secondary p-2"
         >
           <ResourceIcon size="md" resource={resource.value} />
         </div>
       ))}
+      {resources.length > 4 && (
+        <>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  //onClick={() => setShowMore(!showMore)}
+                  className="text-sm underline"
+                >
+                  {`+(${hiddenCount})`}
+                </button>
+              </TooltipTrigger>
+
+              <TooltipContent
+                className="h-16 max-w-48 p-2"
+                id="resource-tooltip"
+                side="top"
+              >
+                <div className="flex items-center gap-2">
+                  {resources.slice(4).map((resource, index) => (
+                    <div key={index} className="flex items-center gap-2">
+                      <div>
+                        <span className="text-xs">{resource.value}</span>
+                        <ResourceIcon
+                          size="md"
+                          withTooltip={false}
+                          resource={resource.value}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </>
+      )}
     </div>
   );
 }