From 39d889f029a45fb06b9a26712c451f415eb9f777 Mon Sep 17 00:00:00 2001
From: RedBeardEth <90423049+RedBeardEth@users.noreply.github.com>
Date: Tue, 8 Oct 2024 14:25:22 +1100
Subject: [PATCH] fix keystatic

---
 apps/nextjs/env.ts                            |   1 +
 .../assets/PortfolioItemsFiltersPanel.tsx     |   1 -
 apps/nextjs/src/app/(app)/bridge/page.tsx     |   6 +-
 apps/nextjs/src/app/(app)/page.tsx            |   2 -
 .../src/app/(app)/staking/RealmsTable.tsx     | 399 --------------
 .../app/(app)/staking/StakingContainer.tsx    | 499 ------------------
 apps/nextjs/src/app/(app)/staking/page.tsx    |  45 --
 7 files changed, 4 insertions(+), 949 deletions(-)
 delete mode 100644 apps/nextjs/src/app/(app)/staking/RealmsTable.tsx
 delete mode 100644 apps/nextjs/src/app/(app)/staking/StakingContainer.tsx
 delete mode 100644 apps/nextjs/src/app/(app)/staking/page.tsx

diff --git a/apps/nextjs/env.ts b/apps/nextjs/env.ts
index 4cd6ab3e..f37134df 100644
--- a/apps/nextjs/env.ts
+++ b/apps/nextjs/env.ts
@@ -44,6 +44,7 @@ export const env = createEnv({
     NEXT_PUBLIC_ALCHEMY_API: z.string(),
     NEXT_PUBLIC_ETHPLORER_APIKEY: z.string(),
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_GITHUB_REPO_NAME: z.string().optional(),
     NEXT_PUBLIC_GITHUB_REPO_OWNER: z.string().optional(),
     NEXT_PUBLIC_ARK_MARKETPLACE_API: z.string().url(),
     NEXT_PUBLIC_ARK_ORDERBOOK_API: z.string().url(),
diff --git a/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsFiltersPanel.tsx b/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsFiltersPanel.tsx
index 030303fd..abbe470f 100644
--- a/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsFiltersPanel.tsx
+++ b/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsFiltersPanel.tsx
@@ -28,7 +28,6 @@ export default function PortfolioItemsFitlersPanel({
         <PortfolioItemsFiltersContent
           walletAddress={walletAddress}
           className="h-full px-5 py-3"
-          selectable
           // walletCollectionsInitialData={walletCollectionsInitialData}
         />
       </div>
diff --git a/apps/nextjs/src/app/(app)/bridge/page.tsx b/apps/nextjs/src/app/(app)/bridge/page.tsx
index 39b1c8a2..3983d94b 100644
--- a/apps/nextjs/src/app/(app)/bridge/page.tsx
+++ b/apps/nextjs/src/app/(app)/bridge/page.tsx
@@ -29,15 +29,15 @@ export default function Page({
   return (
     <div className="relative z-10 p-2">
       <h2 className="mx-auto mb-6 text-center">The Lords Bridge</h2>
-      <div className=" container mx-auto w-full flex-col rounded-lg border bg-background p-2 md:w-[500px]">
+      <div className="container mx-auto w-full flex-col rounded-lg border bg-background p-2 md:w-[500px]">
         <div className="mb-2 flex w-full justify-center space-x-2 rounded text-xl">
           {tabs.map((tab) => (
             <NavLink
               className={cn(
                 "w-full text-base",
                 action === tab.link
-                  ? "bg-medium-dark-green !text-bright-yellow hover:!bg-white/50"
-                  : "!text-bright-yellow/40",
+                  ? "hover:bg-bg-bright-yellow cursor-default !text-medium-dark-green/80"
+                  : "bg-medium-dark-green !text-bright-yellow hover:bg-bright-yellow/50",
               )}
               size={"lg"}
               key={tab.name}
diff --git a/apps/nextjs/src/app/(app)/page.tsx b/apps/nextjs/src/app/(app)/page.tsx
index 2ea1f4e2..1bc68aad 100644
--- a/apps/nextjs/src/app/(app)/page.tsx
+++ b/apps/nextjs/src/app/(app)/page.tsx
@@ -1,7 +1,5 @@
 import Link from "next/link";
 import { GameCard } from "@/app/(app)/games/GameCard";
-import DojoDark from "@/icons/mark-dark.svg";
-import Starknet from "@/icons/starknet.svg";
 import { Button } from "@realms-world/ui/components/ui/button";
 
 import {
diff --git a/apps/nextjs/src/app/(app)/staking/RealmsTable.tsx b/apps/nextjs/src/app/(app)/staking/RealmsTable.tsx
deleted file mode 100644
index 806cfd52..00000000
--- a/apps/nextjs/src/app/(app)/staking/RealmsTable.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-import type { Realm } from "@/types/subgraph";
-import * as React from "react";
-import Box from "@mui/material/Box";
-import Checkbox from "@mui/material/Checkbox";
-import { grey } from "@mui/material/colors";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import IconButton from "@mui/material/IconButton";
-import { alpha } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import TableSortLabel from "@mui/material/TableSortLabel";
-import Toolbar from "@mui/material/Toolbar";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import { visuallyHidden } from "@mui/utils";
-import { ListFilter, Trash } from "lucide-react";
-
-import { Switch } from "@realms-world/ui/components/ui/switch";
-
-function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
-}
-
-type Order = "asc" | "desc";
-
-function getComparator<Key extends keyof Pick<Realm, "id" | "name">>(
-  order: Order,
-  orderBy: Key,
-): (a: Pick<Realm, "id" | "name">, b: Pick<Realm, "id" | "name">) => number {
-  return order === "desc"
-    ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
-}
-
-interface HeadCell {
-  disablePadding: boolean;
-  id: keyof Pick<Realm, "id" | "name">;
-  label: string;
-  numeric: boolean;
-}
-
-const headCells: readonly HeadCell[] = [
-  {
-    id: "id",
-    numeric: true,
-    disablePadding: true,
-    label: "Realm ID",
-  },
-  {
-    id: "name",
-    numeric: false,
-    disablePadding: false,
-    label: "Name",
-  },
-];
-
-interface EnhancedTableProps {
-  numSelected: number;
-  onRequestSort: (
-    event: React.MouseEvent<unknown>,
-    property: keyof Pick<Realm, "id" | "name">,
-  ) => void;
-  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  order: Order;
-  orderBy: keyof Pick<Realm, "id" | "name">;
-  rowCount: number;
-}
-
-function EnhancedTableHead(props: EnhancedTableProps) {
-  const {
-    onSelectAllClick,
-    order,
-    orderBy,
-    numSelected,
-    rowCount,
-    onRequestSort,
-  } = props;
-  const createSortHandler =
-    (property: keyof Pick<Realm, "id" | "name">) =>
-      (event: React.MouseEvent<unknown>) => {
-        onRequestSort(event, property);
-      };
-
-  return (
-    <TableHead>
-      <TableRow>
-        <TableCell
-          sx={{ backgroundColor: "#4D4E46", color: "rgb(251, 225, 187)" }}
-          padding="checkbox"
-        >
-          <Checkbox
-            color="primary"
-            indeterminate={numSelected > 0 && numSelected < rowCount}
-            checked={rowCount > 0 && numSelected === rowCount}
-            onChange={onSelectAllClick}
-            inputProps={{
-              "aria-label": "select all realms",
-            }}
-          />
-        </TableCell>
-        {headCells.map((headCell, index) => (
-          <TableCell
-            key={headCell.id}
-            sx={{
-              backgroundColor: "#4D4E46",
-              color: "rgb(251, 225, 187) !important",
-              textTransform: "uppercase",
-              fontWeight: "800",
-            }}
-            align={headCell.numeric && index != 0 ? "right" : "left"}
-            padding={headCell.disablePadding ? "none" : "normal"}
-            sortDirection={orderBy === headCell.id ? order : false}
-          >
-            <TableSortLabel
-              active={orderBy === headCell.id}
-              direction={orderBy === headCell.id ? order : "asc"}
-              onClick={createSortHandler(headCell.id)}
-              sx={{
-                color: "rgb(251, 225, 187) !important",
-                ".MuiTableSortLabel-icon": { color: "white !important" },
-              }}
-            >
-              {headCell.label}
-              {orderBy === headCell.id ? (
-                <Box component="span" sx={visuallyHidden}>
-                  {order === "desc" ? "sorted descending" : "sorted ascending"}
-                </Box>
-              ) : null}
-            </TableSortLabel>
-          </TableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
-}
-
-interface EnhancedTableToolbarProps {
-  numSelected: number;
-}
-
-function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
-  const { numSelected } = props;
-
-  return (
-    <Toolbar
-      sx={{
-        pl: { sm: 2 },
-        pr: { xs: 1, sm: 1 },
-        minHeight: { xs: 40, sm: 40 },
-        ...(numSelected > 0 && {
-          bgcolor: (theme) =>
-            alpha(
-              theme.palette.primary.main,
-              theme.palette.action.activatedOpacity,
-            ),
-        }),
-      }}
-    >
-      {numSelected > 0 ? (
-        <Typography
-          sx={{ flex: "1 1 100%" }}
-          color="inherit"
-          variant="subtitle1"
-          component="div"
-        >
-          {numSelected} selected
-        </Typography>
-      ) : (
-        <div></div>
-      )}
-      {numSelected > 0 ? (
-        <Tooltip title="Delete">
-          <IconButton /*onClick={() => setSelected([])}*/>
-            <Trash color="white" />
-          </IconButton>
-        </Tooltip>
-      ) : (
-        <Tooltip title="Filter list">
-          <IconButton>
-            <ListFilter />
-          </IconButton>
-        </Tooltip>
-      )}
-    </Toolbar>
-  );
-}
-
-export default function RealmsTable({
-  realms,
-  selectedRealms,
-  onSelectRealms,
-}: {
-  realms: Pick<Realm, "id" | "name">[];
-  selectedRealms: readonly string[];
-  onSelectRealms: (realms: readonly string[]) => void;
-}) {
-  const [order, setOrder] = React.useState<Order>("asc");
-  const [orderBy, setOrderBy] =
-    React.useState<keyof Pick<Realm, "id" | "name">>("id");
-  const [page, setPage] = React.useState(0);
-  const [dense, setDense] = React.useState(false);
-  const [rowsPerPage, setRowsPerPage] = React.useState(20);
-
-  const rows: Pick<Realm, "id" | "name">[] = realms;
-
-  const handleRequestSort = (
-    event: React.MouseEvent<unknown>,
-    property: keyof Pick<Realm, "id" | "name">,
-  ) => {
-    const isAsc = orderBy === property && order === "asc";
-    setOrder(isAsc ? "desc" : "asc");
-    setOrderBy(property);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = rows.map((n) => n.id);
-      onSelectRealms(newSelected);
-      return;
-    }
-    onSelectRealms([]);
-  };
-
-  const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
-    const selectedIndex = selectedRealms.indexOf(name);
-    let newSelected: readonly string[] = [];
-
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selectedRealms, name);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selectedRealms.slice(1));
-    } else if (selectedIndex === selectedRealms.length - 1) {
-      newSelected = newSelected.concat(selectedRealms.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(
-        selectedRealms.slice(0, selectedIndex),
-        selectedRealms.slice(selectedIndex + 1),
-      );
-    }
-
-    onSelectRealms(newSelected);
-  };
-
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleChangeDense = (event: boolean) => {
-    setDense(event);
-  };
-
-  const isSelected = (name: string) => selectedRealms.indexOf(name) !== -1;
-
-  // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows =
-    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
-  const visibleRows = React.useMemo(
-    () =>
-      rows
-        .sort(getComparator(order, orderBy))
-        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
-    [order, orderBy, page, rowsPerPage, rows],
-  );
-
-  return (
-    <Box sx={{ width: "100%" }}>
-      <EnhancedTableToolbar numSelected={selectedRealms.length} />
-      <TableContainer sx={{ maxHeight: { sm: 440 } }}>
-        <Table
-          stickyHeader
-          //sx={{ minWidth: 450 }}
-          aria-labelledby="tableTitle"
-          size={dense ? "small" : "medium"}
-        >
-          <EnhancedTableHead
-            numSelected={selectedRealms.length}
-            order={order}
-            orderBy={orderBy}
-            onSelectAllClick={handleSelectAllClick}
-            onRequestSort={handleRequestSort}
-            rowCount={rows.length}
-          />
-          <TableBody>
-            {visibleRows.map((row, index) => {
-              const isItemSelected = isSelected(row.id);
-              const labelId = `enhanced-table-checkbox-${index}`;
-
-              return (
-                <TableRow
-                  hover
-                  onClick={(event) => handleClick(event, row.id)}
-                  role="checkbox"
-                  aria-checked={isItemSelected}
-                  tabIndex={-1}
-                  key={row.name}
-                  selected={isItemSelected}
-                  sx={{
-                    cursor: "pointer",
-                    "&:hover": {
-                      backgroundColor: `rgba(158,158,158, 0.4) !important`,
-                    },
-                    "&.Mui-selected": {
-                      backgroundColor: `rgba(158,158,158, 0.25) !important`,
-                      "&:hover": {
-                        backgroundColor: `rgba(158,158,158, 0.4) !important`,
-                      },
-                    },
-                  }}
-                >
-                  <TableCell padding="checkbox">
-                    <Checkbox
-                      color="primary"
-                      className="!text-bright-yellow"
-                      checked={isItemSelected}
-                      inputProps={{
-                        "aria-labelledby": labelId,
-                      }}
-                    />
-                  </TableCell>
-                  <TableCell
-                    component="th"
-                    id={labelId}
-                    scope="row"
-                    padding="none"
-                    align="left"
-                    className=""
-                  >
-                    <span className="text-bright-yellow">{row.id}</span>
-                  </TableCell>
-                  <TableCell align="left">
-                    <span className="text-bright-yellow">{row.name}</span>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-            {emptyRows > 0 && (
-              <TableRow
-                style={{
-                  height: (dense ? 33 : 53) * emptyRows,
-                }}
-              >
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <div className="flex justify-between">
-        <FormControlLabel
-          className="!sm:min-h-[25px] -top-20 [&>*]:!text-sm"
-          control={
-            <Switch
-              checked={dense}
-              onCheckedChange={(event) => handleChangeDense(event)}
-              className="mr-2 w-[39px]"
-            />
-          }
-          label="Dense view"
-        />
-        <TablePagination
-          rowsPerPageOptions={[20]}
-          component="div"
-          count={rows.length}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          sx={{}}
-          nextIconButtonProps={{
-            sx: { "&.Mui-disabled": { color: `${grey[600]} !important` } },
-          }}
-          backIconButtonProps={{
-            sx: { "&.Mui-disabled": { color: `${grey[600]} !important` } },
-          }}
-          className="!text-bright-yellow"
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-        />
-      </div>
-    </Box>
-  );
-}
diff --git a/apps/nextjs/src/app/(app)/staking/StakingContainer.tsx b/apps/nextjs/src/app/(app)/staking/StakingContainer.tsx
deleted file mode 100644
index c6caa0d3..00000000
--- a/apps/nextjs/src/app/(app)/staking/StakingContainer.tsx
+++ /dev/null
@@ -1,499 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-"use client";
-
-import type { Realm } from "@/types/subgraph";
-import { useEffect, useState } from "react";
-import { ERC721 } from "@/abi/L1/ERC721";
-import { paymentPoolAbi } from "@/abi/L1/PaymentPool";
-import { GalleonStaking } from "@/abi/L1/v1GalleonStaking";
-import { CarrackStaking } from "@/abi/L1/v2CarrackStaking";
-import { NETWORK_NAME, SUPPORTED_L1_CHAIN_ID } from "@/constants/env";
-import { stakingAddresses } from "@/constants/staking";
-import Lords from "@/icons/lords.svg";
-import { useQuery } from "@tanstack/react-query";
-import { Loader, Loader2 } from "lucide-react";
-import { formatEther, parseEther } from "viem";
-import {
-  useAccount,
-  useReadContract,
-  useWaitForTransactionReceipt,
-  useWriteContract,
-} from "wagmi";
-
-import { Collections, getCollectionAddresses } from "@realms-world/constants";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTrigger,
-} from "@realms-world/ui/components/ui/dialog";
-import { Button } from "@realms-world/ui/components/ui/button";
-import { Alert } from "@realms-world/ui/components/ui/alert";
-import { PaymentPoolV2 } from "../../_components/staking/PaymentPoolV2";
-import { EthereumLoginButton } from "../../_components/wallet/EthereumLoginButton";
-import RealmsTable from "./RealmsTable";
-
-const galleonAddress = stakingAddresses[NETWORK_NAME]
-  .v1Galleon as `0x${string}`;
-const carrackAddress = stakingAddresses[NETWORK_NAME]
-  .v2Carrack as `0x${string}`;
-const realmsAddress = getCollectionAddresses(Collections.REALMS)?.[
-  SUPPORTED_L1_CHAIN_ID
-];
-
-export const StakingContainer = () => {
-  const { address: addressL1, isConnected } = useAccount();
-  const [hexProof, setHexProof] = useState<`0x${string}` | undefined>();
-  const [poolTotal, setPoolTotal] = useState<bigint>();
-  const address = addressL1 ? addressL1.toLowerCase() : "0x";
-
-  const { data: realmsData, isLoading: realmsDataIsLoading } = useQuery({
-    queryKey: ["UsersRealms" + address],
-    queryFn: async () =>
-      await fetch(`/api/subgraph/getRealms?address=${address}`, {
-        method: "POST",
-      })
-        .then((res) => res.json())
-        .then((res) => {
-          return res.data;
-        }),
-    enabled: !!addressL1,
-    refetchInterval: 10000,
-  });
-
-  const { data: lordsAvailableData, isLoading: isGalleonLordsLoading } =
-    useReadContract({
-      address: stakingAddresses[NETWORK_NAME].v1Galleon as `0x${string}`,
-      abi: GalleonStaking,
-      functionName: "lordsAvailable",
-      args: [address as `0x${string}`],
-    });
-
-  const { isPending: isGalleonClaimLoading, writeContract: claimGalleonLords } =
-    useWriteContract();
-
-  const { data: carrackLordsAvailableData, isLoading: isCarrackLordsLoading } =
-    useReadContract({
-      address: stakingAddresses[NETWORK_NAME].v2Carrack as `0x${string}`,
-      abi: CarrackStaking,
-      functionName: "lordsAvailable",
-      args: [address as `0x${string}`],
-    });
-
-  const { isPending: isCarrackClaimLoading, writeContract: claimCarrackLords } =
-    useWriteContract();
-
-  const {
-    isPending: isPoolClaimLoading,
-    writeContract: claimPoolLords,
-    error: poolClaimError,
-  } = useWriteContract();
-
-  const { data: poolBalanceData, isLoading: poolBalanceLoading } =
-    useReadContract({
-      address: stakingAddresses[NETWORK_NAME].paymentPool as `0x${string}`,
-      abi: paymentPoolAbi,
-      functionName: "balanceForProofWithAddress",
-      args: hexProof &&
-        addressL1 && [addressL1.toLowerCase() as `0x${string}`, hexProof],
-      // query: { enabled: !!address && !!poolTotal }
-    });
-  useEffect(() => {
-    const fetchStakingData = async () => {
-      if (addressL1) {
-        try {
-          const response = await fetch(`/api/staking/${addressL1}`);
-          const data: { proof: `0x${string}`; amount: number } =
-            await response.json();
-          setHexProof(data.proof);
-          if (data.amount) {
-            setPoolTotal(parseEther(data.amount.toString()));
-          } else {
-            setPoolTotal(0n);
-          }
-        } catch (error) {
-          console.error("Error fetching staking data:", error);
-        }
-      }
-    };
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    fetchStakingData();
-  }, [addressL1]);
-
-  if (isConnected && addressL1) {
-    return (
-      <div className="text-center">
-        {poolClaimError && (
-          <Alert variant="warning">{poolClaimError.message.toString()}</Alert>
-        )}
-        <div className="col-span-2 flex flex-col ">
-          <h3>Your Realms</h3>
-          <div className="flex flex-col rounded border bg-background pb-8 pt-6">
-            {realmsDataIsLoading ? (
-              "Loading"
-            ) : (
-              <>
-                <span className="text-2xl">
-                  {realmsData?.wallet?.realmsHeld ?? 0}
-                </span>
-                <span className="mb-4">Realms Available</span>
-                <StakingModal realms={realmsData?.realms} />
-              </>
-            )}
-          </div>
-        </div>
-        <h3 className="mt-10">Epoch 35-109 Rewards</h3>
-        <PaymentPoolV2 />
-        <h3 className="mt-10">Galleon</h3>
-        <div className="flex-col pb-2 text-lg">
-          <span className="bg-background px-2 py-1">
-            Rewards: 49x $LORDS per epoch
-          </span>
-          <br />
-          <span className="bg-background px-2 py-1">
-            Redemption: Claimable after each fully staked epoch (1 week)
-          </span>
-        </div>
-        <div className="grid grid-cols-2 gap-4 sm:gap-6">
-          <div className="flex flex-col justify-center rounded border bg-background pb-8 pt-6">
-            {realmsDataIsLoading ? (
-              "Loading"
-            ) : (
-              <>
-                <span className="text-2xl">
-                  {realmsData?.wallet?.bridgedRealmsHeld ?? 0}
-                </span>
-                <span className="mb-4">Realms Staked</span>
-                <StakingModal
-                  unstake
-                  type="galleon"
-                  realms={realmsData?.bridgedRealms}
-                />
-              </>
-            )}
-          </div>
-          <div className="flex flex-col rounded border bg-background pb-8 pt-6">
-            <span className="pb-4 text-lg">Lords Available</span>
-
-            {!isGalleonLordsLoading && typeof lordsAvailableData == "bigint" ? (
-              <div className="flex items-center justify-center">
-                <span className="mr-6 text-sm">Epoch 1-10:</span>
-                <span className="mr-3 flex">
-                  <Lords className="mr-2 h-5 w-5 fill-current" />
-                  {formatEther(lordsAvailableData)}
-                </span>
-                <Button
-                  disabled={
-                    lordsAvailableData == 0n ||
-                    isGalleonClaimLoading ||
-                    isCarrackClaimLoading
-                  }
-                  size={"sm"}
-                  className="self-center"
-                  variant={"outline"}
-                  onClick={() =>
-                    claimGalleonLords({
-                      address: stakingAddresses[NETWORK_NAME]
-                        .v1Galleon as `0x${string}`,
-                      abi: GalleonStaking,
-                      functionName: "claimLords",
-                    })
-                  }
-                >
-                  {isGalleonClaimLoading || isCarrackClaimLoading ? (
-                    <>
-                      <Loader2 className="h-5 w-5 animate-spin" />
-                      Claiming
-                    </>
-                  ) : (
-                    "Claim"
-                  )}
-                </Button>
-              </div>
-            ) : (
-              "Loading"
-            )}
-
-            <div className="mt-2 flex items-center justify-center">
-              <span className="mr-6 text-sm">Epoch 11-35:</span>
-              <span className="mr-3 flex">
-                <Lords className="mr-2 h-5 w-5 fill-current" />
-                {poolBalanceLoading ? (
-                  <Loader className="h-5 w-5" />
-                ) : poolBalanceData != undefined && poolTotal ? (
-                  <>
-                    {formatEther(poolBalanceData).toLocaleString()} /{" "}
-                    {formatEther(poolTotal).toLocaleString()}
-                  </>
-                ) : (
-                  0
-                )}
-              </span>
-              {poolBalanceData != undefined && hexProof && (
-                <Button
-                  disabled={!poolBalanceData || poolBalanceData == 0n}
-                  size={"sm"}
-                  className="self-center"
-                  variant={"outline"}
-                  onClick={() => {
-                    claimPoolLords({
-                      address: stakingAddresses[NETWORK_NAME]
-                        .paymentPool as `0x${string}`,
-                      abi: paymentPoolAbi,
-                      functionName: "withdraw",
-                      args: [poolBalanceData, hexProof],
-                    });
-                  }}
-                >
-                  {isPoolClaimLoading ? (
-                    <>
-                      <Loader2 className="h-5 w-5 animate-spin" />
-                      Claiming
-                    </>
-                  ) : (
-                    "Claim"
-                  )}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-        {realmsData?.bridgedV2Realms.length ??
-          (carrackLordsAvailableData && carrackLordsAvailableData[0] > 0n) ? (
-          <div className="mt-10 flex flex-col">
-            <h3>Carrack</h3>
-            <div className="pb-2 text-lg">
-              <span className="bg-background px-2 py-1">
-                Rewards: 49x $LORDS per epoch
-              </span>
-              <br />
-            </div>
-
-            <div className="mt-10 flex flex-col">
-              <div className="grid grid-cols-2 gap-4 sm:gap-6">
-                <div className="flex flex-col justify-center rounded border bg-background pb-8 pt-6">
-                  {realmsDataIsLoading ? (
-                    "Loading"
-                  ) : (
-                    <>
-                      <span className="text-2xl">
-                        {realmsData?.wallet?.bridgedV2RealmsHeld ?? 0}
-                      </span>
-                      <span className="mb-4">Staked Realms:</span>
-                      <StakingModal
-                        unstake
-                        type="carrack"
-                        realms={realmsData?.bridgedV2Realms}
-                      />
-                    </>
-                  )}
-                </div>
-                <div className="flex flex-col rounded border bg-background pb-8 pt-6">
-                  <span className="pb-4 text-lg">Lords Available</span>
-
-                  {isCarrackLordsLoading ? (
-                    "Loading"
-                  ) : (
-                    <>
-                      <span className="flex justify-center text-2xl">
-                        <Lords className="mr-2 h-8 w-8 fill-current" />
-                        {formatEther(carrackLordsAvailableData?.[0] ?? 0n)}
-                      </span>
-                      <span className="mb-4 text-sm">Epoch 35+</span>
-
-                      <Button
-                        size={"lg"}
-                        disabled={
-                          !carrackLordsAvailableData?.[0] ||
-                          carrackLordsAvailableData[0] == 0n
-                        }
-                        className="self-center"
-                        variant={"outline"}
-                        onClick={() =>
-                          claimCarrackLords({
-                            address: stakingAddresses[NETWORK_NAME]
-                              .v2Carrack as `0x${string}`,
-                            abi: CarrackStaking,
-                            functionName: "claimLords",
-                          })
-                        }
-                      >
-                        Claim
-                      </Button>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-  return (
-    <div className="col-span-2 mx-auto mt-24 flex flex-col text-center">
-      <h1>Realms (NFT) Staking for $LORDS rewards</h1>
-      <h3 className="mb-12">Login to your Ethereum Wallet</h3>
-      <EthereumLoginButton variant={"default"} />
-    </div>
-  );
-};
-
-const StakingModal = ({
-  realms,
-  unstake,
-  type,
-}: {
-  realms?: Pick<Realm, "id" | "name">[];
-  unstake?: boolean;
-  type?: "galleon" | "carrack";
-}) => {
-  const [shipType, setShipType] = useState<"galleon" | "carrack">();
-  const [selectedRealms, setSelectedRealms] = useState<readonly string[]>([]);
-  const { address } = useAccount();
-
-  const { writeContractAsync: boardGalleon, isPending: isBoardGalleonPending } =
-    useWriteContract();
-  const { writeContractAsync: exitGalleon, isPending: isExitGalleonPending } =
-    useWriteContract();
-  const { writeContractAsync: exitCarrack, isPending: isExitCarrackPending } =
-    useWriteContract();
-  const {
-    writeContractAsync: approveGalleon,
-    isPending: isGalleonApproveLoading,
-    data: approveGalleonData,
-  } = useWriteContract();
-  const { data: isGalleonApprovedData, refetch: refetchGalleonApprovedData } =
-    useReadContract({
-      address: realmsAddress as `0x${string}`,
-      abi: ERC721,
-      functionName: "isApprovedForAll",
-      args: address && [address, galleonAddress],
-    });
-
-  const { isSuccess } = useWaitForTransactionReceipt({
-    hash: approveGalleonData,
-  });
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    refetchGalleonApprovedData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSuccess]);
-
-  const isApproved = isGalleonApprovedData;
-
-  const onApproveClick = async () => {
-    if (!isApproved) {
-      await approveGalleon({
-        address: realmsAddress as `0x${string}`,
-        abi: ERC721,
-        functionName: "setApprovalForAll",
-        args: [galleonAddress, true],
-      });
-    }
-  };
-  const onButtonClick = async () => {
-    if (!unstake) {
-      await boardGalleon({
-        address: galleonAddress,
-        abi: GalleonStaking,
-        functionName: "boardShip",
-        args: [selectedRealms.map(BigInt)],
-      });
-    } else {
-      const exitFunction =
-        shipType === "galleon"
-          ? exitGalleon({
-            address: galleonAddress,
-            abi: GalleonStaking,
-            functionName: "exitShip",
-            args: [selectedRealms.map(BigInt)],
-          })
-          : exitCarrack({
-            address: carrackAddress,
-            abi: CarrackStaking,
-            functionName: "exitShip",
-            args: [selectedRealms.map(BigInt)],
-          });
-      await exitFunction;
-    }
-    setSelectedRealms([]);
-  };
-  const isPending =
-    isGalleonApproveLoading ||
-    isExitGalleonPending ||
-    isExitCarrackPending ||
-    isBoardGalleonPending;
-
-  const onSelectRealms = (realms: readonly string[]) => {
-    setSelectedRealms(realms);
-  };
-  useEffect(() => {
-    if (type) {
-      setShipType(type);
-    }
-  }, [type]);
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button
-          disabled={!realms?.length}
-          className="self-center"
-          size={"lg"}
-          variant={"outline"}
-        >
-          {unstake ? "Unstake" : "Stake"} Realms
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-h-full w-full sm:!max-h-[720px]">
-        <DialogHeader>
-          <h6 className="my-0 py-0">
-            {unstake ? "Exit" : "Board"} the{" "}
-            <span className="capitalize">{shipType ?? "Ship"}</span>
-          </h6>
-        </DialogHeader>
-        {shipType && realms ? (
-          <>
-            <div className="flex flex-col self-center">
-              <RealmsTable
-                realms={realms}
-                selectedRealms={selectedRealms}
-                onSelectRealms={onSelectRealms}
-              />
-            </div>
-            {!unstake && !isApproved ? (
-              <Button onClick={onApproveClick} size={"lg"}>
-                Approve Realm Staking Contract
-              </Button>
-            ) : (
-              <Button onClick={onButtonClick} disabled={isPending} size={"lg"}>
-                {isPending && <Loader className="mr-2 animate-spin" />}
-                {unstake ? "Unstake" : "Stake"} Realms
-              </Button>
-            )}
-          </>
-        ) : (
-          <div className="flex flex-col self-center">
-            <h5>The Galleon</h5>
-            <div className="pb-2 text-lg">Rewards: 49x $LORDS per epoch.</div>
-            <Alert variant="warning">
-              Lords earnt after epoch 35 are locked until the DAO approves the
-              migration to Starknet.
-            </Alert>
-            <Button
-              className="my-3"
-              onClick={() => setShipType("galleon")}
-              variant={"outline"}
-            >
-              Board The Galleon
-            </Button>
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/apps/nextjs/src/app/(app)/staking/page.tsx b/apps/nextjs/src/app/(app)/staking/page.tsx
deleted file mode 100644
index 3e941dd4..00000000
--- a/apps/nextjs/src/app/(app)/staking/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import type { Metadata } from "next";
-import { NETWORK_NAME } from "@/constants/env";
-import { stakingAddresses } from "@/constants/staking";
-import { getWalletRealmsHeld } from "@/lib/subgraph/getWalletRealmsHeld";
-
-import { StakingContainer } from "./StakingContainer";
-
-export const metadata: Metadata = {
-  title: "Realm NFT Staking for $LORDS rewards",
-};
-const galleonAddress = stakingAddresses[NETWORK_NAME].v1Galleon;
-const carrackAddress = stakingAddresses[NETWORK_NAME].v2Carrack;
-
-export default async function Page() {
-  const totalStakedRealmsData = await getWalletRealmsHeld({
-    addresses: [galleonAddress, carrackAddress],
-  });
-  const totalStakedRealms = totalStakedRealmsData?.wallets?.reduce(
-    (total: number, wallet: { realmsHeld: string }) => {
-      return total + parseInt(wallet.realmsHeld, 10);
-    },
-    0,
-  );
-  return (
-    <div className="mx-auto mt-24 sm:max-w-3xl">
-      <StakingContainer />
-      <div className="mt-12 flex flex-col text-center">
-        <h3>Data</h3>
-        <div className="rounded border bg-background pb-8 pt-6 ">
-          {/*<p>Current Epoch:</p>*/}
-          <p>Total Realms Staked: {totalStakedRealms}</p>
-          <p>
-            Galleon: {totalStakedRealmsData?.wallets[0]?.realmsHeld} / Carrack:{" "}
-            {totalStakedRealmsData?.wallets[1]?.realmsHeld}
-          </p>
-        </div>
-      </div>
-      {/*<p>Lords to be claimed on Starknet:</p>*/}
-    </div>
-  );
-}