Loaf ark

.github/workflows/ci.yml

@@ -24,6 +24,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install pnpm
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
+
       - name: Setup
         uses: ./tooling/github/setup
 
@@ -32,26 +37,52 @@ jobs:
         run: cp .env.example .env
 
       - name: Lint
-        run: bun lint && bun lint:ws
+        run: pnpm lint && pnpm ws
 
   format:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install pnpm
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
+
       - name: Setup
         uses: ./tooling/github/setup
 
       - name: Format
-        run: bun format
+        run: pnpm format
 
   typecheck:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install pnpm
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
+
       - name: Setup
         uses: ./tooling/github/setup
 
       - name: Typecheck
         run: turbo typecheck
+
+  knip:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
+
+      - name: Setup
+        uses: ./tooling/github/setup
+
+      - name: Knip
+        run: pnpm knip

apps/nextjs/src/app/_components/BaseCard.tsx

@@ -7,7 +7,7 @@ export const BaseCard = ({
 }) => {
   return (
     <div
-      className={`${className} border-4 bg-theme-gray-light shadow-sm shadow-black transition-all duration-200 hover:border-bright-yellow`}
+      className={`${className} border rounded  shadow-sm shadow-black transition-all duration-200 hover:border-bright-yellow`}
     >
       {children}
     </div>

apps/nextjs/src/app/_components/Footer.tsx

@@ -106,14 +106,14 @@ export const Footer = () => {
           </div>
         </div>
         <hr className="my-6 border sm:mx-auto lg:my-8 " />
-        <div className="sm:flex sm:items-center sm:justify-between">
-          <span className="text-sm sm:text-center">
+        <div className="flex  sm:items-center justify-between">
+          <span className="text-sm sm:text-center  self-center">
             © {new Date().getFullYear()}{" "}
             <a href="https://flowbite.com/" className="hover:underline">
               BibliothecaDAO
             </a>
           </span>
-          <div className="mt-4 flex sm:mt-0 sm:justify-center">
+          <div className="mt-4 flex sm:mt-0 sm:justify-center self-center">
             <a href="https://discord.gg/realmsworld" className="ms-5 ">
               <svg
                 className="h-4 w-4"

apps/nextjs/src/app/_components/PageLayout.tsx

@@ -23,10 +23,10 @@ const baseLayerWrapperVariants = cva([], {
 
 export const PageLayout = ({ title, children, size }: PageLayoutProps) => {
   return (
-    <div className="relative flex w-full flex-col space-y-6 pt-24 sm:pl-32">
+    <div className="relative flex w-full flex-col space-y-6 pt-24 sm:pl-32 ">
       <div
         className={cn(
-          "container mx-auto px-4",
+          "container mx-auto px-8",
           baseLayerWrapperVariants({ size }),
         )}
       >

apps/nextjs/src/app/_components/SideMenu.tsx

@@ -77,24 +77,23 @@ const Sidebar = () => {
 
   return (
     <div
-      className={`${
-        isSidebarOpen ? "bg-background" : "hidden"
-      } z-100 group fixed bottom-0 top-0 z-20 h-screen w-screen flex-col border-r-[3px] bg-background transition-all duration-500 md:flex md:w-[102px] md:hover:w-60`}
+      className={`${isSidebarOpen ? "bg-background" : "hidden"
+        } z-100 group fixed bottom-0 top-0 z-20 h-screen w-screen flex-col sm:border-r-[3px] bg-background transition-all duration-500 md:flex md:w-[102px] md:hover:w-60`}
     >
-      <div className="absolute mx-4">
+      <div className="absolute mx-4 hidden sm:block">
         <SideHeaderImg className="w-full opacity-0 group-hover:opacity-100" />
       </div>
       <Link
-        className="absolute z-20 mx-auto flex w-full justify-center p-4 font-sans-serif text-xl font-semibold group-hover:pt-2.5 sm:text-2xl"
+        className="absolute z-20 mx-auto  w-full justify-center p-4 font-sans-serif text-xl font-semibold group-hover:pt-2.5 sm:text-2xl  hidden sm:flex"
         href="/"
         onClick={toggleSidebar}
       >
         <Crown className="absolute w-14 group-hover:opacity-0" />
         <RWLogo className="absolute w-[152px] fill-white opacity-0 transition-all duration-500 group-hover:opacity-100" />
       </Link>
       <div className="mt-[60px] h-full w-full border-t-[3px] pb-3">
-        <div className="relative z-10 m-2 mt-0 h-full border-[3px] border-t-0 border-solid border-transparent group-hover:!border-medium-dark-green">
-          <div className="relative flex h-full flex-col items-center">
+        <div className="relative z-10 m-2 mt-0 h-full sm:border-[3px] border-t-0 border-solid border-transparent group-hover:!border-medium-dark-green">
+          <div className="relative flex h-full flex-col items-center mt-8">
             <ScrollArea className="w-full">
               <div className="relative z-[2] inline-flex w-full flex-[0_0_auto] flex-col items-start justify-center gap-[17px] px-4 md:mb-6 md:mt-10">
                 {menu.map((item, index) => {
@@ -120,12 +119,12 @@ const Sidebar = () => {
             </ScrollArea>
 
             <div className="w-full px-2">
-              <hr className="mb-4 border-b-[3px]" />
+              {/* <hr className="mb-4 sm:border-b-[3px]" /> */}
             </div>
             <Button
               asChild
               variant={"outline"}
-              className="mt-3 flex h-16 flex-col p-2 pt-3 font-sans"
+              className="mt-3 flex h-16 flex-col p-2 sm:pt-3 font-sans  text-xl"
             >
               <Link href="/swap">
                 <div className="h-8">
@@ -135,15 +134,15 @@ const Sidebar = () => {
               </Link>
             </Button>
 
-            <div className="my-3 flex pt-8 sm:mt-auto sm:flex-col sm:space-y-2">
+            {/* <div className="my-3 flex sm:mt-auto sm:flex-col gap-3">
               {social.map((item, index) => {
                 return (
                   <Link href={item.href} target="_blank" key={index}>
                     {item.icon}
                   </Link>
                 );
               })}
-            </div>
+            </div> */}
           </div>
         </div>
       </div>

apps/nextjs/src/app/_components/TopNav.tsx

@@ -6,7 +6,7 @@ import PieChart from "@/icons/pie-chart.svg";
 import RealmsL3 from "@/icons/realms_l3.svg";
 import { useUIStore } from "@/providers/UIStoreProvider";
 import { HammerIcon, Menu /*, ShieldQuestion*/ } from "lucide-react";
-
+import Crown from "@/icons/crown.svg";
 import {
   Button,
   NavigationMenu,
@@ -65,10 +65,11 @@ export const TopNav = () => {
       id="topnav"
       className={`fixed z-[100] w-full border-b-[3px] bg-background p-3 pl-4 sm:pl-8 md:pl-32`}
     >
-      <div className="flex justify-between">
+      <div className="flex justify-between w-full">
         <Button className="md:hidden" onClick={toggleSidebar}>
           <Menu className="w-8" />
         </Button>
+        <Crown className="sm:hidden w-14 group-hover:opacity-0" />
       </div>
       <div className="hidden w-auto justify-end sm:flex">
         <div className="mr-12">

apps/nextjs/src/app/blog/PostPreview.tsx

@@ -19,8 +19,8 @@ const PostPreview = (props: PostMetadata) => {
         <div className="align-center p-4">
           <Badge> {props.date}</Badge>
 
-          <h4 className="my-4 text-2xl">{props.title}</h4>
-          <p>{props.subtitle}</p>
+          <h4 className="my-4 text-2xl font-sans">{props.title}</h4>
+          <p className="text-opacity-60">{props.subtitle}</p>
         </div>
       </Link>
     </Card>

apps/nextjs/src/app/collection/[id]/(list)/L2CollectionSummary.tsx

@@ -66,7 +66,7 @@ export default async function L2CollectionSummary({
     : [];
 
   return (
-    <div className="px-4 sm:mt-10 sm:flex">
+    <div className="px-4 sm:flex">
       <div className="flex-none self-center sm:pr-10">
         <Image
           src={`/collections/${collectionId}.svg`}
@@ -78,7 +78,7 @@ export default async function L2CollectionSummary({
       </div>
 
       <div>
-        <h1>{CollectionDetails[collectionId as Collections].displayName}</h1>
+        <h1 className="text-3xl sm:text-4xl">{CollectionDetails[collectionId as Collections].displayName}</h1>
         <ContractDetailsList contract_details={contract_details} />
 
         {compatibleGames.length > 0 && (

apps/nextjs/src/app/collection/[id]/(list)/layout.tsx

@@ -44,7 +44,7 @@ export default function RootLayout({
             <NavLink
               key={tab.name}
               variant={"link"}
-              className="hover:text-flamingo/70"
+
               size={"sm"}
               exact
               href={`/collection/${params.id}${tab.link && "/" + tab.link}`}

apps/nextjs/src/app/events/EventCard.tsx

@@ -39,7 +39,7 @@ export const EventCard = ({ event }: { event: Event }) => {
           </Badge>
         </div>
 
-        <h5 className="mb-3 text-2xl">{event.name}</h5>
+        <h5 className="mb-3 text-2xl font-display">{event.name}</h5>
         <p>{event.description}</p>
         <div className="mt-auto flex w-full justify-between self-end">
           <Button asChild size={"xs"} variant="default">

apps/nextjs/src/app/games/GameCard.tsx

@@ -18,7 +18,7 @@ export const GameCard = async ({ game }: GameCardProps) => {
   const isImageFound = async (imageName: string) => {
     return await fetch(
       (env.VERCEL_URL ? "https://" + env.VERCEL_URL : "http://localhost:3000") +
-        imageName,
+      imageName,
       {
         method: "HEAD",
       },
@@ -53,7 +53,7 @@ export const GameCard = async ({ game }: GameCardProps) => {
           alt={game.name}
           width={800}
           height={400}
-          className="absolute bottom-0 top-0 h-full w-full object-cover brightness-75 transition-all duration-300 group-hover:filter-none"
+          className="absolute bottom-0 rounded top-0 h-full w-full object-cover brightness-75 transition-all duration-300 group-hover:filter-none"
         />
         <div className="relative flex h-full max-w-full flex-col items-center justify-center  object-contain">
           <Image
@@ -66,7 +66,7 @@ export const GameCard = async ({ game }: GameCardProps) => {
           <p className="mt-2  text-lg font-semibold">{game.description}</p>
         </div>
         <div className="invisible z-10 opacity-0 duration-300 group-hover:visible group-hover:-translate-y-3 group-hover:opacity-100">
-          <Button variant={"default"}>Explore</Button>
+          <Button variant={"outline"}>Explore</Button>
         </div>
       </Link>
     </BaseCard>

apps/nextjs/src/app/games/[id]/layout.tsx

@@ -18,7 +18,7 @@ export default function RootLayout({
     ")";
   return (
     <div
-      className="mt-32 h-full w-full"
+      className="mt-24 h-full w-full"
       style={
         {
           "--image-url": imageUrl,

apps/nextjs/src/app/games/[id]/page.tsx

@@ -203,7 +203,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   ];
 
   return (
-    <main className="container mx-auto px-4">
+    <main className="container mx-auto px-8">
       <Breadcrumb>
         <BreadcrumbList>
           <BreadcrumbItem>
@@ -218,7 +218,7 @@ export default async function Page({ params }: { params: { id: string } }) {
 
       <div className="flex flex-wrap">
         <div className="my-4 w-full">
-          <h1 className="text-4xl font-bold">{game?.name}</h1>
+          <h1 className="text-3xl sm:text-5xl">{game?.name}</h1>
         </div>
 
         <div className="mb-8 flex w-full space-x-2 font-sans uppercase">
@@ -230,9 +230,9 @@ export default async function Page({ params }: { params: { id: string } }) {
 
         {game && (
           <>
-            <div className="w-full sm:w-9/12 sm:pr-8">
+            <div className="w-full sm:w-9/12 sm:pr-8 px-12">
               {game.screenshotLength && (
-                <Carousel className="h-96 w-full sm:max-h-[750px] sm:min-h-[750px]">
+                <Carousel className="sm:h-96 w-full sm:max-h-[750px] sm:min-h-[750px]">
                   <CarouselContent>
                     {list.map((image, index) => (
                       <CarouselItem key={index}>
@@ -241,7 +241,7 @@ export default async function Page({ params }: { params: { id: string } }) {
                           alt={image.alt}
                           width={1096}
                           height={750}
-                          className="h-full w-full object-cover"
+                          className="h-full w-full object-cover rounded border"
                         />
                       </CarouselItem>
                     ))}

apps/nextjs/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inconsolata, Jost } from "next/font/google";
+import { Bebas_Neue, Inconsolata, Jost, Space_Mono } from "next/font/google";
 import Sidebar from "@/app/_components/SideMenu";
 import { Analytics } from "@vercel/analytics/react";
 
@@ -21,14 +21,14 @@ import { TRPCReactProvider } from "@/trpc/react";
 import { Toaster, TooltipProvider } from "@realms-world/ui";
 import { ArkClientProvider } from "@/lib/ark/useArkClient";
 
-const silkscreen = Jost({
+const silkscreen = Bebas_Neue({
   subsets: ["latin"],
   variable: "--font-silkscreen",
   weight: ["400"],
   display: "swap",
 });
 
-const inconsolata = Inconsolata({
+const inconsolata = Space_Mono({
   subsets: ["latin"],
   variable: "--font-inconsolata",
   weight: "400",

apps/nextjs/src/app/loading.tsx

@@ -5,7 +5,7 @@ export default function Loading() {
   return (
     <div className="mx-auto flex h-screen w-full flex-wrap justify-center px-4 sm:px-10">
       <Image
-        src="/pink_crown.svg"
+        src="/pink_crown.gif"
         className="self-center"
         alt="logo"
         width={100}