token view, responsive fixes, refine account sidebar

BibliothecaDAO · Oct 21, 2024 · 563386a · 563386a
1 parent 90c1fd1
commit 563386a
Show file tree

Hide file tree

Showing 20 changed files with 438 additions and 322 deletions.
diff --git a/apps/frontinus/package.json b/apps/frontinus/package.json
@@ -15,10 +15,10 @@
     "@parcel/watcher": "^2.4.1",
     "@realms-world/tailwind-config": "workspace:*",
     "@realms-world/tsconfig": "workspace:*",
-    "@tanstack/router-plugin": "^1.69.1",
+    "@tanstack/router-plugin": "^1.74.2",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.3",
     "vite": "^5.4.9",
     "vite-tsconfig-paths": "^5.0.1"
   },
@@ -31,10 +31,10 @@
     "@starknet-react/core": "^3.0.3",
     "@tanstack/react-query": "^5.59.15",
     "@tanstack/react-query-devtools": "^5.59.15",
-    "@tanstack/react-router": "^1.73.0",
-    "@tanstack/react-router-with-query": "^1.73.0",
-    "@tanstack/router-devtools": "^1.73.0",
-    "@tanstack/start": "^1.73.0",
+    "@tanstack/react-router": "^1.74.4",
+    "@tanstack/react-router-with-query": "^1.74.4",
+    "@tanstack/router-devtools": "^1.74.4",
+    "@tanstack/start": "^1.74.4",
     "date-fns": "^4.1.0",
     "get-starknet-core": "^3.3.4",
     "graphql": "^16.9.0",

diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@ark-project/react": "1.1.2",
     "@avnu/avnu-sdk": "^2.1.1",
+    "@cartridge/connector": "^0.4.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@keystatic/core": "^0.5.36",
@@ -27,7 +28,6 @@
     "@mui/material": "^5.15.15",
     "@mui/styles": "^5.15.15",
     "@next/mdx": "^14.2.15",
-    "@cartridge/connector": "^0.4.0",
     "@rainbow-me/rainbowkit": "^2",
     "@realms-world/api": "workspace:*",
     "@realms-world/auth": "workspace:*",
@@ -49,13 +49,14 @@
     "@trpc/react-query": "11.0.0-rc.477",
     "@trpc/server": "11.0.0-rc.477",
     "@vercel/analytics": "^1.3.1",
+    "blockies-ts": "^1.0.0",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
     "date-fns": "3.6.0",
     "embla-carousel-autoplay": "8.3.0",
     "embla-carousel-react": "8.3.0",
     "eslint-config-next": "^15.0.0-rc.1",
-    "framer-motion": "^11.5.4",
+    "framer-motion": "^11.11.9",
     "frames.js": "^0.15.1",
     "gray-matter": "^4.0.3",
     "keccak256": "^1.0.6",

diff --git a/apps/nextjs/src/app/(app)/account/_components/StarknetAccountLogin.tsx b/apps/nextjs/src/app/(app)/account/_components/StarknetAccountLogin.tsx
@@ -1,10 +1,10 @@
 import { StarknetLoginButton } from "@/app/_components/wallet/StarknetLoginButton";
 import {
   Card,
-  CardFooter,
-  CardTitle,
   CardContent,
+  CardFooter,
   CardHeader,
+  CardTitle,
 } from "@realms-world/ui/components/ui/card";
 import { useAccount as useStarknetAccount } from "@starknet-react/core";
 
@@ -19,14 +19,12 @@ export const StarknetAccountLogin = () => {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <p>
-          Sign in with your wallet to access:
-          <ul className="mt-1 list-inside list-disc">
-            <li>veLords</li>
-            <li>L2 Assets and Marketplaces</li>
-            <li>Delegation and Lords Rewards for Realms</li>
-          </ul>
-        </p>
+        Sign in with your wallet to access:
+        <ul className="mt-1 list-inside list-disc">
+          <li>veLords</li>
+          <li>L2 Assets and Marketplaces</li>
+          <li>Delegation and Lords Rewards for Realms</li>
+        </ul>
       </CardContent>
       <CardFooter>
         {!isStarknetConnected && (

diff --git a/apps/nextjs/src/app/(app)/account/_components/sidebar/NavUser.tsx b/apps/nextjs/src/app/(app)/account/_components/sidebar/NavUser.tsx
@@ -1,4 +1,7 @@
+import ProfilePicture from "@/app/_components/ProfilePicture";
 import { StarknetLoginButton } from "@/app/_components/wallet/StarknetLoginButton";
+import EthereumLogo from "@/icons/ethereum.svg";
+import StarknetLogo from "@/icons/starknet.svg";
 import { shortenHex } from "@/utils/utils";
 import {
   Avatar,
@@ -29,6 +32,7 @@ import {
   LogOut,
   Sparkles,
 } from "lucide-react";
+import { useAccount as useL1Account } from "wagmi";
 
 export function NavUser({
   user,
@@ -40,12 +44,11 @@ export function NavUser({
   };
 }) {
   const { address } = useAccount();
+  const { address: l1Address } = useL1Account();
+
   const { isMobile } = useSidebar();
 
   const { disconnect } = useDisconnect();
-  {
-    address && shortenHex(address, 8);
-  }
   return (
     <>
       {address ? (
@@ -57,9 +60,8 @@ export function NavUser({
                   size="lg"
                   className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                 >
-                  <Avatar className="h-8 w-8 rounded-lg">
-                    <AvatarImage src={user?.avatar} alt={user?.name} />
-                    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                  <Avatar>
+                    <ProfilePicture address={address} />
                   </Avatar>
                   <div className="grid flex-1 text-left text-sm leading-tight">
                     <span className="truncate font-semibold">
@@ -77,9 +79,8 @@ export function NavUser({
               >
                 <DropdownMenuLabel className="p-0 font-normal">
                   <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                    <Avatar className="h-8 w-8 rounded-lg">
-                      <AvatarImage src={user?.avatar} alt={user?.name} />
-                      <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                    <Avatar>
+                      <StarknetLogo />
                     </Avatar>
                     <div className="grid flex-1 text-left text-sm leading-tight">
                       <span className="truncate font-semibold">
@@ -89,8 +90,23 @@ export function NavUser({
                     </div>
                   </div>
                 </DropdownMenuLabel>
+                {l1Address && (
+                  <DropdownMenuLabel className="p-0 font-normal">
+                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                      <Avatar>
+                        <EthereumLogo />
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {shortenHex(l1Address, 8)}
+                        </span>
+                        <span className="truncate text-xs">{user?.email}</span>
+                      </div>
+                    </div>
+                  </DropdownMenuLabel>
+                )}
                 <DropdownMenuSeparator />
-                <DropdownMenuGroup>
+                {/*<DropdownMenuGroup>
                   <DropdownMenuItem>
                     <Sparkles />
                     Upgrade to Pro
@@ -111,8 +127,8 @@ export function NavUser({
                     Notifications
                   </DropdownMenuItem>
                 </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
+              <DropdownMenuSeparator />*/}
+                <DropdownMenuItem onClick={() => disconnect()}>
                   <LogOut />
                   Log out
                 </DropdownMenuItem>

diff --git a/apps/nextjs/src/app/(app)/account/layout.tsx b/apps/nextjs/src/app/(app)/account/layout.tsx
@@ -24,8 +24,8 @@ export default async function RootLayout({
     () => import("@/app/_components/modal/NftBridgeModal"),
   );
   const sidebarState =
-    (await cookies()).get(SIDEBAR_STATE_COOKIE)?.value ?? "true";
-  const isSidebarOpen = sidebarState === "true";
+    (await cookies()).get(SIDEBAR_STATE_COOKIE)?.value ?? "false";
+  const isSidebarOpen = sidebarState !== "true";
 
   return (
     <SessionProvider>

diff --git a/apps/nextjs/src/app/(app)/collection/CollectionsList.tsx b/apps/nextjs/src/app/(app)/collection/CollectionsList.tsx
@@ -4,16 +4,16 @@ import { SUPPORTED_L1_CHAIN_ID } from "@/constants/env";
 import { CollectionAddresses } from "@realms-world/constants";
 
 import { getCollections } from "@/lib/reservoir/getCollections";*/
-import { REALMS_L2_COLLECTIONS } from "@realms-world/constants/src/Collections";
 import { ArkCollectionCardFetcher } from "@/app/_components/ArkCollectionCardFetcher";
+import { REALMS_L2_COLLECTIONS } from "@realms-world/constants/src/Collections";
 
 export const metadata = {
   title: "Lootverse Collections",
   description:
     "Various collections of the Lootverse - Created for adventurers by Bibliotheca DAO",
 };
 
-export default async function CollectionsList() {
+export default function CollectionsList() {
   /*const { collections } = await getCollections([
     {
       contract: CollectionAddresses.realms[

diff --git a/apps/nextjs/src/app/(app)/collection/ViewOnMarketplace.tsx b/apps/nextjs/src/app/(app)/collection/ViewOnMarketplace.tsx
@@ -1,18 +1,33 @@
+import Link from "next/link";
 import { Button } from "@realms-world/ui/components/ui/button";
-import Link from "next/link"
+import { ShoppingCart } from "lucide-react";
 
-export const ViewOnMarketplace = ({ collection, tokenId }: { collection: string, tokenId?: number }) => {
-    // Define the base URL
-    const baseURL = 'https://market.realms.world/';
+export const ViewOnMarketplace = ({
+  collection,
+  tokenId,
+  icon,
+}: {
+  collection: string;
+  tokenId?: number | string;
+  icon?: boolean;
+}) => {
+  // Define the base URL
+  const baseURL = "https://market.realms.world/";
 
-    // Construct the URL based on whether `tokenId` is provided
-    const url = tokenId
-        ? `${baseURL}token/${collection}/${tokenId}`
-        : `${baseURL}collection/${collection}`;
+  // Construct the URL based on whether `tokenId` is provided
+  const url = tokenId
+    ? `${baseURL}token/${collection}/${tokenId}`
+    : `${baseURL}collection/${collection}`;
 
-    return (
-        <Link href={url}>
-            <Button className="w-full">View on Marketplace</Button>
-        </Link>
-    )
-}
+  return (
+    <Link href={url}>
+      {icon ? (
+        <Button>
+          <ShoppingCart />
+        </Button>
+      ) : (
+        <Button className="w-full">View on Marketplace</Button>
+      )}
+    </Link>
+  );
+};
diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/CollectionFilters.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/CollectionFilters.tsx
@@ -1,20 +1,20 @@
 "use client";
-import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 
+import type { Filters } from "@/types/ark";
+import { useState } from "react";
+import { getCollectionTraits } from "@/lib/ark/getCollectionTraits";
+import { useArkClient } from "@/lib/ark/useArkClient";
 import { Button } from "@realms-world/ui/components/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogTitle,
 } from "@realms-world/ui/components/ui/dialog";
 import { ScrollArea } from "@realms-world/ui/components/ui/scroll-area";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 
-import type { Filters } from "@/types/ark";
-import { getCollectionTraits } from "@/lib/ark/getCollectionTraits";
-import CollectionFiltersTrait from "./CollectionFiltersTrait";
-import { useArkClient } from "@/lib/ark/useArkClient";
 import CollectionFiltersContent from "./CollectionFiltersContent";
-import { useState } from "react";
+import CollectionFiltersTrait from "./CollectionFiltersTrait";
 
 interface CollectionFiltersProps {
   collectionAddress: string;
@@ -91,7 +91,7 @@ export default function CollectionFilters({
   const showTraitsSection = data && Object.keys(data).length > 0;
 
   return (
-    <ScrollArea className="!sticky top-[var(--site-header-height)] z-10 hidden h-[calc(100vh-var(--site-header-height)-var(--site-footer-height))] w-72 flex-shrink-0 border-r border-border lg:block">
+    <ScrollArea className="!sticky top-[var(--site-header-height)] z-10 hidden h-[calc(100vh-var(--site-header-height))] w-72 flex-shrink-0 border-r border-border lg:block">
       <CollectionFiltersContent buyNow={buyNow} setBuyNow={setBuyNow} />
       {showTraitsSection && (
         <div className="">

diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Card.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Card.tsx
@@ -1,25 +1,26 @@
-import Image from "next/image";
+import type { CollectionToken, PortfolioToken } from "@/types/ark";
 import Link from "next/link";
 import { AnimatedMap } from "@/app/_components/AnimatedMap";
+import Media from "@/app/_components/Media";
+import { SUPPORTED_L2_CHAIN_ID } from "@/constants/env";
 import { useLordsPrice } from "@/hooks/lords/useLordsPrice";
-import type { CollectionToken, PortfolioToken } from "@/types/ark";
-
+import { useTokenListing } from "@/hooks/market/useTokenListing";
+import { useTokenMetadata } from "@/hooks/market/useTokenMetadata";
 import { useStarkDisplayName } from "@/hooks/useStarkName";
 import LordsIcon from "@/icons/lords.svg";
-
-import type { RouterOutputs } from "@realms-world/api";
+import {
+  CollectionAddresses,
+  getCollectionFromAddress,
+} from "@realms-world/constants";
 import { Button } from "@realms-world/ui/components/ui/button";
 import { cn, formatNumber } from "@realms-world/utils";
+import { Info } from "lucide-react";
+import { formatEther } from "viem";
 
-import { CardAction } from "./CardAction";
-import { useTokenListing } from "@/hooks/market/useTokenListing";
-import { useTokenMetadata } from "@/hooks/market/useTokenMetadata";
 import { ViewOnMarketplace } from "../../ViewOnMarketplace";
-import Media from "@/app/_components/Media";
+import { CardAction } from "./CardAction";
 import RealmResources from "./RealmResources";
-import { CollectionAddresses } from "@realms-world/constants";
-import { SUPPORTED_L2_CHAIN_ID } from "@/constants/env";
-import { formatEther } from "viem";
+
 export const L2ERC721Card = ({
   token,
   layout = "grid",
@@ -49,7 +50,7 @@ export const L2ERC721Card = ({
           {token.metadata?.image ? (
             <Media
               src={token.metadata.image}
-              alt={token.metadata.name ?? `beasts-${token.token_id}`}
+              alt={token.metadata.name}
               mediaKey={token.metadata.image_key}
               className={isGrid ? "mx-auto" : ""}
               width={imageSize}
@@ -73,10 +74,20 @@ export const L2ERC721Card = ({
             />
             {
               !selectable && (
-                <ViewOnMarketplace
-                  collection={token.contract_address ?? ""}
-                  tokenId={token.token_id}
-                />
+                <div className="flex gap-x-4">
+                  <ViewOnMarketplace
+                    collection={token.collection_address}
+                    icon
+                    tokenId={token.token_id}
+                  />
+                  <Link
+                    href={`/collection/${getCollectionFromAddress(token.collection_address)}/${token.token_id}`}
+                  >
+                    <Button>
+                      <Info />
+                    </Button>
+                  </Link>
+                </div>
               )
               /* <CardAction token={token} />*/
             }
@@ -168,7 +179,7 @@ const GridDetails = ({
       {token.metadata?.attributes &&
         token.collection_address ==
           CollectionAddresses.realms[SUPPORTED_L2_CHAIN_ID] && (
-          <RealmResources traits={token.metadata?.attributes} />
+          <RealmResources traits={token.metadata.attributes} />
         )}
     </div>
   </div>