Realms.World
diff --git a/apps/nextjs/src/app/_components/NumberSelect.tsx b/apps/nextjs/src/app/_components/NumberSelect.tsx
index dcf8ece4..4071812b 100644
--- a/apps/nextjs/src/app/_components/NumberSelect.tsx
+++ b/apps/nextjs/src/app/_components/NumberSelect.tsx
@@ -23,7 +23,7 @@ const NumberSelect = ({ onChange, min, max }: Props) => {
max={max}
onChange={handleNumber1Change}
placeholder="Enter a number"
- className="mt-1 block w-full rounded-md bg-black/60 p-2 focus:outline-none focus:ring-2 focus:ring-blue-100"
+ className="bg-dark-green focus:ring-bright-yellow/70 block w-full rounded-md border p-2 focus:outline-none focus:ring-2"
/>
);
};
diff --git a/apps/nextjs/src/app/_components/SideMenu.tsx b/apps/nextjs/src/app/_components/SideMenu.tsx
index 6924dabb..3f046d0a 100644
--- a/apps/nextjs/src/app/_components/SideMenu.tsx
+++ b/apps/nextjs/src/app/_components/SideMenu.tsx
@@ -2,45 +2,45 @@
import Link from "next/link";
import { useRouter } from "next/navigation";
+import Album from "@/icons/album.svg";
+import Bridge from "@/icons/bridge.svg";
+import Coins from "@/icons/coins.svg";
+import Crown from "@/icons/crown.svg";
import Discord from "@/icons/discord.svg";
+import Gamepad from "@/icons/gamepad.svg";
import RWLogo from "@/icons/rw-logo.svg";
-import {
- Backpack,
- Coins,
- DoorOpen,
- Github,
- Map,
- Twitter,
- X,
-} from "lucide-react";
+import SideHeaderImg from "@/icons/side-header.svg";
+import { Github, Twitter, X } from "lucide-react";
import { useUIContext } from "../providers/UIProvider";
import { Button } from "./ui/button";
+import { ScrollArea } from "./ui/scroll-area";
+import { WalletSheet } from "./wallet/WalletSheet";
const Sidebar = () => {
const { isSidebarOpen, toggleSidebar } = useUIContext();
const router = useRouter();
const menu = [
- {
- name: "Collections",
- href: "/collection",
- icon:
,
- },
{
name: "Games",
href: "/games",
- icon:
,
+ icon:
,
+ },
+ {
+ name: "Collections",
+ href: "/collection",
+ icon:
,
},
{
name: "Bridge",
href: "/bridge",
- icon:
,
+ icon:
,
},
{
name: "Staking",
href: "/staking",
- icon:
,
+ icon:
,
},
];
@@ -70,53 +70,76 @@ const Sidebar = () => {
+
-
-
+
+
+
+
+
+
+
+
+ {menu.map((item, index) => {
+ return (
+
- );
- })}
-
- {social.map((item, index) => {
- return (
-
- );
- })}
+
+
+
+
+ {social.map((item, index) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+ Connect Wallet
+
+
+
+
+
+
);
diff --git a/apps/nextjs/src/app/_components/TopNav.tsx b/apps/nextjs/src/app/_components/TopNav.tsx
index 3e6d372b..ce17116e 100644
--- a/apps/nextjs/src/app/_components/TopNav.tsx
+++ b/apps/nextjs/src/app/_components/TopNav.tsx
@@ -1,11 +1,11 @@
"use client";
-import { Button } from "./ui/button";
-import { useMotionValueEvent, useScroll } from "framer-motion";
import { useState } from "react";
+import { useMotionValueEvent, useScroll } from "framer-motion";
import { Menu } from "lucide-react";
+
import { useUIContext } from "../providers/UIProvider";
-import { WalletSheet } from "./wallet/WalletSheet";
+import { Button } from "./ui/button";
export const TopNav = () => {
const { scrollY } = useScroll();
@@ -20,15 +20,12 @@ export const TopNav = () => {
return (
-
);
diff --git a/apps/nextjs/src/app/_components/modal/stepper.tsx b/apps/nextjs/src/app/_components/modal/stepper.tsx
index 98ff7261..3f76f9cc 100644
--- a/apps/nextjs/src/app/_components/modal/stepper.tsx
+++ b/apps/nextjs/src/app/_components/modal/stepper.tsx
@@ -1,10 +1,10 @@
"use client";
-import { Step, StepLabel, Stepper as MuiStepper } from "@mui/material";
-import PropTypes from "prop-types";
-import React from "react";
+import React from "react";
+import { Stepper as MuiStepper, Step, StepLabel } from "@mui/material";
+import { blue, blueGrey, lightBlue } from "@mui/material/colors";
import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { blue, lightBlue, blueGrey } from "@mui/material/colors";
+import PropTypes from "prop-types";
export interface StepperProps {
children: React.ReactNode;
@@ -18,10 +18,14 @@ export const StepperTheme: React.FC
= ({
styleOverrides: {
root: {
".MuiSvgIcon-root": {
- color: blueGrey,
+ color: "#4D4E46",
fontSize: "32px",
+
"&.Mui-completed, &.Mui-active": {
- color: blueGrey,
+ color: "#FBE1BB",
+ },
+ ".MuiStepIcon-text": {
+ fill: blueGrey,
},
},
},
@@ -45,7 +49,7 @@ export const StepperTheme: React.FC = ({
"&.MuiStepLabel-alternativeLabel": {
marginTop: "8px",
fontWeight: "900",
- color: "white",
+ color: "#FBE1BB",
},
},
},
diff --git a/apps/nextjs/src/app/_components/ui/button.tsx b/apps/nextjs/src/app/_components/ui/button.tsx
index 8ed47efa..6206c8a2 100644
--- a/apps/nextjs/src/app/_components/ui/button.tsx
+++ b/apps/nextjs/src/app/_components/ui/button.tsx
@@ -7,7 +7,7 @@ import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
const buttonVariants = cva(
- "active:scale-95 inline-flex items-center justify-center rounded-md transition-colors disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-bright-yellow/60 dark:data-[state=open]:bg-medium-dark-green uppercase border border-transparent ",
+ "active:scale-95 inline-flex items-center justify-center rounded-md transition-colors disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:text-bright-yellow/60 data-[state=open]:bg-medium-dark-green uppercase border border-transparent ",
{
variants: {
variant: {
@@ -19,8 +19,7 @@ const buttonVariants = cva(
"bg-transparent border hover:bg-bright-yellow/50 border-medium-dark-green",
subtle:
"bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-gray-700 dark:text-slate-100 border",
- ghost:
- "bg-transparent hover:bg-gray-700 dark:text-bright-yellow dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent hover:border",
+ ghost: "bg-transparent hover:text-flamingo hover:border",
link: "bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent",
},
size: {
diff --git a/apps/nextjs/src/app/_components/ui/dialog.tsx b/apps/nextjs/src/app/_components/ui/dialog.tsx
index 4f793fde..883f37b5 100644
--- a/apps/nextjs/src/app/_components/ui/dialog.tsx
+++ b/apps/nextjs/src/app/_components/ui/dialog.tsx
@@ -39,7 +39,7 @@ const DialogOverlay = React.forwardRef<
asChild
>
diff --git a/apps/nextjs/src/app/_components/ui/scroll-area.tsx b/apps/nextjs/src/app/_components/ui/scroll-area.tsx
index d16a334a..744b4d4e 100644
--- a/apps/nextjs/src/app/_components/ui/scroll-area.tsx
+++ b/apps/nextjs/src/app/_components/ui/scroll-area.tsx
@@ -39,7 +39,7 @@ const ScrollBar = React.forwardRef<
)}
{...props}
>
-
+
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
diff --git a/apps/nextjs/src/app/_components/ui/switch.tsx b/apps/nextjs/src/app/_components/ui/switch.tsx
index 6e761747..d444bdb1 100644
--- a/apps/nextjs/src/app/_components/ui/switch.tsx
+++ b/apps/nextjs/src/app/_components/ui/switch.tsx
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
["variant"];
+ textClass?: string;
+ buttonClass?: string;
}) => {
const { connectors, isLoading } = useConnect();
const modal = useModal({
@@ -31,32 +35,38 @@ export const EthereumLoginButton = ({
{({ show, isConnected, isConnecting, truncatedAddress, ensName }) => (
)}
diff --git a/apps/nextjs/src/app/_components/wallet/StarknetLoginButton.tsx b/apps/nextjs/src/app/_components/wallet/StarknetLoginButton.tsx
index 96b1892e..ec1bbae2 100644
--- a/apps/nextjs/src/app/_components/wallet/StarknetLoginButton.tsx
+++ b/apps/nextjs/src/app/_components/wallet/StarknetLoginButton.tsx
@@ -3,13 +3,21 @@ import { useUIContext } from "@/app/providers/UIProvider";
import StarknetLogo from "@/icons/starknet.svg";
import { shortenHex } from "@/utils/utils";
import { useAccount as useL2Account } from "@starknet-react/core";
+import type { VariantProps } from "class-variance-authority";
+import type { buttonVariants } from "../ui/button";
import { Button } from "../ui/button";
export const StarknetLoginButton = ({
openAccount = false,
+ variant,
+ textClass,
+ buttonClass,
}: {
openAccount?: boolean;
+ variant?: VariantProps["variant"];
+ textClass?: string;
+ buttonClass?: string;
}) => {
const { address, isConnected } = useL2Account();
const { isAccountOpen, toggleAccount, toggleStarknetLogin } = useUIContext();
@@ -22,19 +30,20 @@ export const StarknetLoginButton = ({
return (
);
diff --git a/apps/nextjs/src/app/_components/wallet/WalletSheet.tsx b/apps/nextjs/src/app/_components/wallet/WalletSheet.tsx
index f0d20290..6184ea96 100644
--- a/apps/nextjs/src/app/_components/wallet/WalletSheet.tsx
+++ b/apps/nextjs/src/app/_components/wallet/WalletSheet.tsx
@@ -104,14 +104,24 @@ export const WalletSheet = () => {
];
return (
<>
-
-
-
+
+
+
-
+
{
networkName: string,
networkLogo: JSX.Element,
isWithdraw: boolean,
+ isL2?: boolean,
) => {
return (
<>
@@ -57,7 +58,7 @@ export const Transfer = ({ action }: { action: string }) => {
{
);
};
- const renderL1Network = () => {
+ const renderL1Network = (action) => {
return renderNetwork(
"Ethereum",
,
- false,
+ action != "withdraw",
);
};
- const renderL2Network = () => {
+ const renderL2Network = (action) => {
return renderNetwork(
"Starknet",
,
+ action == "withdraw",
true,
);
};
@@ -107,7 +109,9 @@ export const Transfer = ({ action }: { action: string }) => {
<>
- {action == "withdraw" ? renderL2Network() : renderL1Network()}
+ {action == "withdraw"
+ ? renderL2Network(action)
+ : renderL1Network(action)}
{renderTokenInput()}
{/*allowance: {allowance?.toString()}*/}
@@ -128,26 +132,29 @@ export const Transfer = ({ action }: { action: string }) => {
- {action == "withdraw" ? renderL1Network() : renderL2Network()}
+ {action == "withdraw"
+ ? renderL1Network(action)
+ : renderL2Network(action)}
+
+
+ {!l1Account && }
+ {!l2Account && }
+ {l1Account && l2Account && (
+
+ )}
-
- {!l1Account &&
}
- {!l2Account &&
}
- {l1Account && l2Account && (
-
- )}
);
diff --git a/apps/nextjs/src/app/collection/AttributesDropdown.tsx b/apps/nextjs/src/app/collection/AttributesDropdown.tsx
index c1aca7fc..b1ac7d0d 100644
--- a/apps/nextjs/src/app/collection/AttributesDropdown.tsx
+++ b/apps/nextjs/src/app/collection/AttributesDropdown.tsx
@@ -37,54 +37,56 @@ export const AttributesDropdown = ({ address, attributes }: any) => {
{attribute.key}
- {attribute.kind === "string" && (
-
- {attribute.values.map((a: any, i: any) => {
- return (
-
- );
- })}
-
- )}
+
+ {attribute.kind === "string" && (
+
+ {attribute.values.map((a: any, i: any) => {
+ return (
+
+ );
+ })}
+
+ )}
- {attribute.kind === "number" && (
-
-
- handleAttributeClick(attribute.key, value)
- }
- />
-
-
- )}
+ {attribute.kind === "number" && (
+
+
+ handleAttributeClick(attribute.key, value)
+ }
+ />
+
+
+ )}
+
On Sale
% Owned
-
-
- {owner.address === stakingAddresses[NETWORK_NAME].v1Galleon
- ? "Galleon Staking"
- : owner.address ===
+
+ {owners?.map((owner) => (
+
+
+
+ {owner.address === stakingAddresses[NETWORK_NAME].v1Galleon
+ ? "Galleon Staking"
+ : owner.address ===
stakingAddresses[NETWORK_NAME].v2Carrack.toLowerCase()
? "Carrack Staking"
: shortenHex(owner.address, 8)}
-
-
-
{owner.ownership.tokenCount}
-
{owner.ownership.onSaleCount}
-
- {((owner.ownership.tokenCount / 8000) * 100).toFixed(2)}
-
+
{owner.ownership.tokenCount}
+ {owner.ownership.onSaleCount}
+ {((owner.ownership.tokenCount / 8000) * 100).toFixed(2)}
+
+ ))}
+
{cards.map((card, index) => (
-
+
{card.component}
))}
diff --git a/apps/nextjs/src/app/collection/[id]/(list)/layout.tsx b/apps/nextjs/src/app/collection/[id]/(list)/layout.tsx
index 5d266268..86016056 100644
--- a/apps/nextjs/src/app/collection/[id]/(list)/layout.tsx
+++ b/apps/nextjs/src/app/collection/[id]/(list)/layout.tsx
@@ -72,6 +72,7 @@ export default function RootLayout({
{
+export const GameCard = async ({ game }: GameCardProps) => {
+ const gameIconPng = `/games/${game.id}/icon.png`;
+
+ const isImageFound = async (imageName: string) => {
+ return await fetch(
+ (process.env.VERCEL_URL
+ ? "https://" + process.env.VERCEL_URL
+ : "http://localhost:3000") + imageName,
+ {
+ method: "HEAD",
+ },
+ );
+ };
+ let imageName;
+ const result = await isImageFound(gameIconPng);
+ if (result.status === 200) {
+ imageName = gameIconPng;
+ } else {
+ imageName = `/games/${game.id}/icon.svg`;
+ }
+
return (
-
-
{game.name}
-
{game.description}
+
-
*/}
);
};
diff --git a/apps/nextjs/src/app/games/[id]/GameScreenshots.tsx b/apps/nextjs/src/app/games/[id]/GameScreenshots.tsx
new file mode 100644
index 00000000..4ca905ad
--- /dev/null
+++ b/apps/nextjs/src/app/games/[id]/GameScreenshots.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { promises as fs } from "fs";
+import path from "path";
+import { useEffect, useState } from "react";
+import { Carousel } from "@/app/_components/ui/carousel";
+
+export const GameScreenshots = async ({ id }: { id: string }) => {
+ const [screenshotList, setScreenshotList] =
+ useState<{ src: string; alt: string }[]>();
+ useEffect(() => {
+ const fetchData = async () => {
+ const data = await fs.readdir(path.join(dir));
+ setScreenshotList(
+ data.map((image, index) => ({
+ src: `/games/${id}/screenshots/${image}`,
+ alt: `${id} Screenshot ${index}`,
+ })),
+ );
+ };
+
+ const dirRelativeToPublicFolder = `games/${id}/screenshots`;
+ const dir = path.resolve("public", dirRelativeToPublicFolder);
+ fetchData();
+ //TODO not working in Vercel production
+ }, []);
+ return (
+ <>
+ {screenshotList && (
+
+ )}
+
+ );
+};
diff --git a/apps/nextjs/src/app/games/[id]/page.tsx b/apps/nextjs/src/app/games/[id]/page.tsx
index 9b8b9a3e..3d7d8c92 100644
--- a/apps/nextjs/src/app/games/[id]/page.tsx
+++ b/apps/nextjs/src/app/games/[id]/page.tsx
@@ -9,7 +9,8 @@ import {
TabsList,
TabsTrigger,
} from "@/app/_components/ui/tabs";
-import { games } from "@/constants/games";
+
+import { CHAIN_IDS_TO_NAMES, games } from "@realms-world/constants";
export async function generateMetadata({
params,
@@ -25,13 +26,19 @@ export async function generateMetadata({
export default async function Page({ params }: { params: { id: string } }) {
const game = games.find((game) => game.id === params.id);
- /* const dirRelativeToPublicFolder = `games/${params.id}/screenshots`;
+ /*const dirRelativeToPublicFolder = `games/${params.id}/screenshots`;
const dir = path.resolve("public", dirRelativeToPublicFolder);
const screenshotFiles = await fs.readdir(path.join(dir));
const screenshotList = screenshotFiles.map((image, index) => ({
src: `/games/${params.id}/screenshots/${image}`,
alt: `${game?.name} Screenshot ${index}`,
- }));*/ //TODO not working in Vercel production
+ })); */ //TODO not working in Vercel production
+
+ const screenshotList = new Array(game?.screenshotLength);
+ const list = [...screenshotList].map((image, index) => ({
+ src: `/games/${params.id}/screenshots/${index + 1}.png`,
+ alt: `${game?.name} Screenshot ${index + 1}`,
+ }));
const tabs = [
{
@@ -40,13 +47,18 @@ export default async function Page({ params }: { params: { id: string } }) {
},
{
- name: "Tokens",
+ name: "Assets",
content: (
- {game?.compatibleTokens?.map((token, index) => (
-
@@ -60,17 +72,16 @@ export default async function Page({ params }: { params: { id: string } }) {
{game && (
<>
- {game.screenshots && (
-
+ {game.screenshotLength && (
+
)}
- {game?.chains.map((a, i) =>
chain: {a}
)}
+ {game?.chains.map((a, i) => (
+
+ chain: {CHAIN_IDS_TO_NAMES[a].replace(/_/g, " ")}
+
+ ))}
|
status: {game?.status}
@@ -86,11 +97,11 @@ export default async function Page({ params }: { params: { id: string } }) {
White paper
)}
- {game?.links.website && (
+ {game?.links.homepage && (