fix: layout

merkl.config.ts

@@ -150,12 +150,5 @@ export default createConfig({
         },
       }),
     ],
-<<<<<<< HEAD
-    transports: {
-      [zksync.id]: http(),
-      [optimism.id]: http(),
-    },
-=======
->>>>>>> 6e48802 (restore: tabs)
   },
 });

src/components/layout/Header.tsx

@@ -2,15 +2,13 @@ import { Button, Container, Dropdown, Group, Icon, WalletButton, useTheme } from
 import { Image } from "dappkit";
 import customerDarkLogo from "src/customer/assets/images/customer-dark-logo.svg";
 import customerLogo from "src/customer/assets/images/customer-logo.svg";
-import SearchBar from "../element/functions/SearchBar";
 
 import { motion } from "framer-motion";
 import config from "merkl.config";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import SCREENS from "../../../packages/dappkit/src/constants/SCREENS.json";
-import SwitchMode from "../element/SwitchMode";
 import { LayerMenu } from "./LayerMenu";
 
 const container = {
@@ -38,6 +36,7 @@ export default function Header() {
   const mdScreens = useMediaQuery({ maxWidth: SCREENS.lg });
 
   const smScreens = useMediaQuery({ maxWidth: SCREENS.md });
+  const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
 
   const routes = useMemo(() => {
     const { homepage, ...rest } = config.routes;

src/routes/_merkl.opportunities.$chain.$type.$id.(overview).tsx

@@ -1,22 +1,23 @@
 import { Group } from "@ariakit/react";
-import { Space } from "packages/dappkit/src";
+import { Container, Space } from "packages/dappkit/src";
 import CampaignLibrary from "src/components/element/campaign/CampaignLibrary";
 import { ErrorContent } from "src/components/layout/ErrorContent";
 import type { OutletContextOpportunity } from "./_merkl.opportunity.$chain.$type.$id";
+import { useOutletContext } from "@remix-run/react";
 
 export default function Index() {
   const { opportunity } = useOutletContext<OutletContextOpportunity>();
 
   return (
-    <Group>
+    <Container>
       <Space size="md" />
       <CampaignLibrary opportunity={opportunity} />
       {/* <Group className="grid grid-cols-1 gap-md md:grid-cols-[1fr,300px]"> */}
       {/* <Group className="flex-col">
           <Participate opportunity={opportunity as Opportunity} />
         </Group> */}
       {/* </Group> */}
-    </Group>
+    </Container>
   );
 }
 

src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard.tsx

@@ -1,6 +1,6 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, useLoaderData } from "@remix-run/react";
-import { Group, Text } from "packages/dappkit/src";
+import { Container, Group, Space, Text } from "packages/dappkit/src";
 import Tooltip from "packages/dappkit/src/components/primitives/Tooltip";
 import LeaderboardLibrary from "src/components/element/leaderboard/LeaderboardLibrary";
 // import { ChainService } from "src/api/services/chain.service";
@@ -51,7 +51,8 @@ export default function Index() {
   const { leaderboard } = useLoaderData<typeof loader>();
 
   return (
-    <>
+    <Container>
+      <Space size="lg"/>
       <Group size="lg">
         <Group className="flex-col border-2 flex-1">
           <Tooltip helper={null}>
@@ -67,8 +68,8 @@ export default function Index() {
           <Text size={"xl"}>400k</Text>
         </Group>
       </Group>
-
+      <Space size="lg"/>
       <LeaderboardLibrary leaderboard={leaderboard} />
-    </>
+    </Container>
   );
 }