Skip to content
This repository was archived by the owner on May 15, 2025. It is now read-only.

convert: zksync changes #10

Closed
clmntsnr wants to merge 1 commit into from
Closed

convert: zksync changes #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 150 additions & 0 deletions app/routes/_landing.(home).tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import type { MetaFunction } from "@remix-run/node";
import {
Button,
Container,
Group,
Icon,
Input,
OverrideTheme,
Text,
Title,
Countdown,
} from "dappkit";

import Faq from "src/zksync/components/element/Faq";
import { link } from "src/zksync/constants/link";
import config from "../../merkl.config";

export const meta: MetaFunction = () => {
return [
{ title: "ZKsync Ignite" },
{ name: "description", content: "Welcome to ZKsync Ignite!" },
];
};

export function Hero() {
return (
<section className="hero py-xl*2 md:py-xl*4 lg:py-[8rem] bg-accent-10 w-full">
<OverrideTheme
mode="light"
>
<Container>
<Group className="mb-xl*2 justify-center">
<div className="relative">
<Title
h={1}
size="display1"
className="text-center md:text-left !text-accent-1"
>
ZK<span className="font-normal">sync</span> Ignite
</Title>
<Title
h={5}
className="absolute right-1/2 translate-x-1/2 md:translate-x-0 md:right-0 -bottom-8 md:-bottom-4 text-main-12"
>
Powered by <span className="text-accent-1">Merkl</span>
</Title>
</div>
</Group>
<Group className="lg:w-1/2 xl:w-1/3 mx-auto flex-col items-center md:items-end gap-xl mt-xl*4 md:mt-0">
<Group className="justify-center items-stretch w-full my-xl gap-xl">
<Input
className="!flex-1 w-full !rounded-full !px-xl !text-main-9 inline-flex items-center placeholder:!text-main-9 !bg-main-1 min-w-[300px]"
placeholder="Enter your email for updates"
/>
<Button
size="xl"
look="bold"
mode="dark"
className="!rounded-full"
coloring={config.themes.igniteWarm.base}
>
<Icon remix="RiArrowRightLine" className="text-main-11" />
Subscribe
</Button>
</Group>
<Group className="md:justify-end items-center gap-xl">
<Title h={5}>Follow us on</Title>
<Group>
<Button
className="transition-opacity hover:opacity-70 !rounded-full !p-md !text-main-12 !bg-main-1"
external
to={link.x}
>
<Icon
className="!h-xl*1.5 w-lg*2 lg:w-xl*1.5"
remix="RiTwitterXFill"
/>
</Button>
<Button
className="transition-opacity hover:opacity-70 !rounded-full !p-md !text-main-12 !bg-main-1"
external
to={link.telegram}
>
<Icon
className="!h-xl*1.5 w-lg*2 lg:w-xl*1.5"
remix="RiTelegram2Fill"
/>
</Button>
</Group>
</Group>
</Group>
</Container>
</OverrideTheme>
</section>
);
}

export function CountdownSection() {
return (
<section className="counter py-xl*2 bg-accent-10 w-full">
<OverrideTheme coloring={config.themes.igniteWarm.base} mode="light">
<Container>
<Group className="gap-xl*2 lg:!gap-0 my-[4rem] items-center flex-wrap-reverse">
<Group className="lg:w-1/3">
<Title h={3} className="text-gray-12">
Ready to ignite your protocol?
</Title>

<Button
size="xl"
look="bold"
mode="dark"
className="!rounded-full"
coloring={config.themes.igniteWarm.base}
>
Join the program now!
</Button>
</Group>
<Group className="lg:w-2/3 text-gray-12 text-xl lg:justify-end items-center gap-y-lg">
<Countdown targetDate={new Date("2024-12-01T12:00:00")} />

<Text
size="md"
className="w-full md:w-auto text-right md:text-left md:ml-lg text-main-12 !font-bold"
>
left before ignition
</Text>
</Group>
</Group>
</Container>
</OverrideTheme>
</section>
);
}

export default function Index() {
return (
<>
<Hero />
<CountdownSection />
<Faq
faqs={[
"How to participate?",
"What's zkSync Ignite?",
"Why join the program?",
]}
/>
</>
);
}
18 changes: 18 additions & 0 deletions app/routes/_landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Outlet } from "@remix-run/react";
import { Group } from "dappkit";
import Footer from "src/zksync/components/layout/Footer";
import Header from "src/zksync/components/layout/Header";

export default function Index() {
return (
<>
<Group size="xl" className="min-h-[100vh] flex-col !gap-0">
<Header />
<main className="grow h-full">
<Outlet />
</main>
<Footer />
</Group>
</>
);
}
51 changes: 0 additions & 51 deletions app/routes/_merkl.(home).tsx
View file
Open in desktop

This file was deleted.

36 changes: 18 additions & 18 deletions merkl.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { zksync } from "viem/zksync";
import { coinbaseWallet, walletConnect } from "wagmi/connectors";

export default createConfig({
appName: "Merkl",
appName: "ZKsync Ignite",
wagmi: {
chains: [zksync, optimism],
connectors: [
Expand All @@ -15,8 +15,8 @@ export default createConfig({
customStoragePrefix: "wagmi",
projectId: "26c912aadd2132cd869a5edc00aeea0f",
metadata: {
name: "Merkl Lite",
description: "Merkl Lite",
name: "ZKSync Ignite",
description: "Incentive Program for the ZKsync chain",
url: "https://app.merkl.xyz.com",
icons: [],
},
Expand All @@ -27,28 +27,28 @@ export default createConfig({
[optimism.id]: http(),
},
},
defaultTheme: "merkl",
defaultTheme: "ignite",
themes: {
merkl: {
base: createColoring(["#1F2333", "#B8AAFD", "#131620"], ["#FCF8F5", "#B8AAFD", "white"]),
ignite: {
base: createColoring(["#7F89F2", "#FFA200", "#111111"], ["#7F89F2", "#FFA200", "#FFFFFF"]),
info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
},
uniswap: {
base: createColoring(["#131313", "#FC72FF", "#131313"], ["#FFFFFF", "#FC72FF", "white"]),
info: createColoring(["#2ABDFF", "#2ABDFF", "#131313"], ["#FFFFFF", "#40B66B", "white"]),
good: createColoring(["#40B66B", "#40B66B", "#131313"], ["#FFFFFF", "#40B66B", "white"]),
warn: createColoring(["#ff9600", "#ff9600", "#131313"], ["#FFFFFF", "#40B66B", "white"]),
harm: createColoring(["#d22e14", "#d22e14", "#131313"], ["#FFFFFF", "#40B66B", "white"]),
igniteWarm: {
base: createColoring(["#F39700", "#FFA200", "#111111"], ["#F89B00", "#3A3D90", "#FFFFFF"]),
info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
},
"1inch": {
base: createColoring(["#131823", "#172A45", "black"], ["#FFFFFF", "#FC72FF", "white"]),
info: createColoring(["#2ABDFF", "#2ABDFF", "black"], ["#FFFFFF", "#40B66B", "white"]),
good: createColoring(["#40B66B", "#40B66B", "black"], ["#FFFFFF", "#40B66B", "white"]),
warn: createColoring(["#ff9600", "#ff9600", "black"], ["#FFFFFF", "#40B66B", "white"]),
harm: createColoring(["#d22e14", "#d22e14", "black"], ["#FFFFFF", "#40B66B", "white"]),
zksync: {
base: createColoring(["#000000", "#1755F4", "#000000"], ["#6e4c18", "#FB9901", "#FCF8F5"]),
info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
},
},
});
Loading