sync: 2

.dockerignore

@@ -0,0 +1,5 @@
+build
+node_modules
+docker-compose.yaml
+Dockerfile
+README.md

.github/actions/setup-repo/action.yml

@@ -0,0 +1,18 @@
+name: Setup repo
+description: Runs all steps to setup the repo (install node_modules, build, etc...)
+inputs:
+  registry-token:
+    description: 'PAT to access registries'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/checkout@v3
+    - name: Set up Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+    - name: Install dependencies
+      run: bun install
+      env:
+        SDK_READ_ACCESS_TOKEN: ${{ secrets.SDK_READ_ACCESS_TOKEN }}
+      shell: bash

.github/workflows/lint.yml

@@ -0,0 +1,27 @@
+name: test code quality
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  check-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - name: Install dependencies
+        run: bun install
+        env:
+          SDK_READ_ACCESS_TOKEN: ${{ secrets.SDK_READ_ACCESS_TOKEN }}
+      - name: Lint merkl-api codebase
+        run: bun lint:ci

.github/workflows/update_production.yml

@@ -0,0 +1,56 @@
+name: Trigger production deployment
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  tag-image:
+    runs-on: ubuntu-latest
+    env:
+      IMAGE_URL: europe-west1-docker.pkg.dev/angle-artifacts/angle-docker-registry/merkl-app
+    steps:
+      - uses: 'google-github-actions/auth@v0'
+        with:
+          credentials_json: '${{ secrets.GCLOUD_SECRET_ARTIFACTS }}'
+      - name: Login to Docker
+        run: gcloud auth configure-docker europe-west1-docker.pkg.dev
+      - name: Pull and tag image
+        run: |
+          export SHORT_SHA=${GITHUB_SHA:0:7}
+          export VERSION=${GITHUB_REF#refs/tags/}
+          docker pull $IMAGE_URL:$SHORT_SHA
+          docker tag $IMAGE_URL:$SHORT_SHA $IMAGE_URL:$VERSION
+          docker push $IMAGE_URL:$VERSION
+  trigger-production-deployment:
+    runs-on: ubuntu-latest
+    needs: tag-image
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo snap install yq
+      - name: Clone deployments repo
+        uses: actions/checkout@v3
+        with:
+          repository: AngleProtocol/deployments
+          token: ${{ secrets.ACCESS_TOKEN }}
+          path: deployments
+      - name: Modify config.production.yaml and push to deployments
+        run: |
+          cd deployments
+
+          export VERSION=${GITHUB_REF#refs/tags/}
+          yq -i '.merkl-app.version = strenv(VERSION)' ./config.production.yaml
+
+          git config --global user.email "baptiste@angle.money"
+          git config --global user.name "BaptistG"
+
+          git add ./config.production.yaml
+          git commit -m "Update config.production.yaml with merkl-app version $VERSION"
+
+          git push

.github/workflows/update_staging.yml

@@ -0,0 +1,68 @@
+name: Build image and trigger staging deployment
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  build-image:
+    runs-on: ubuntu-latest
+    env:
+      IMAGE_URL: europe-west1-docker.pkg.dev/angle-artifacts/angle-docker-registry/merkl-app
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          token: '${{ secrets.ACCESS_TOKEN }}'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - uses: 'google-github-actions/auth@v0'
+        with:
+          credentials_json: '${{ secrets.GCLOUD_SECRET_ARTIFACTS }}'
+      - name: Login to Docker
+        run: gcloud auth configure-docker europe-west1-docker.pkg.dev
+      - name: Build image
+        run: |
+          export SHORT_SHA=${GITHUB_SHA:0:7}
+          docker pull $IMAGE_URL:latest || true
+          docker build --build-arg SDK_READ_ACCESS_TOKEN=${{ secrets.SDK_READ_ACCESS_TOKEN }} --cache-from $IMAGE_URL:latest --tag $IMAGE_URL:$SHORT_SHA --tag $IMAGE_URL:latest .
+      - name: Push image
+        run: |
+          export SHORT_SHA=${GITHUB_SHA:0:7}
+          docker push $IMAGE_URL:$SHORT_SHA
+
+  trigger-staging-deployment:
+    runs-on: ubuntu-latest
+    needs: build-image
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo snap install yq
+      - name: Clone deployments repo
+        uses: actions/checkout@v3
+        with:
+          repository: AngleProtocol/deployments
+          token: ${{ secrets.ACCESS_TOKEN }}
+          path: deployments
+      - name: Modify config.staging.yaml and push to deployments
+        run: |
+          cd deployments
+
+          export SHORT_SHA=${GITHUB_SHA:0:7}
+
+          yq -i '.merkl-app.version = strenv(SHORT_SHA)' ./config.staging.yaml
+
+          git config --global user.email "baptiste@angle.money"
+          git config --global user.name "BaptistG"
+
+          git add ./config.staging.yaml
+          git commit -m "Update config.staging.yaml with merkl-app version $SHORT_SHA"
+
+          git push

Dockerfile

@@ -1,5 +1,5 @@
 FROM oven/bun:1.1.24-debian
-ARG GITHUB_REGISTRY_TOKEN
+ARG SDK_READ_ACCESS_TOKEN
 
 RUN apt-get -y update
 RUN apt-get -y install python3 make g++ ca-certificates curl
@@ -8,6 +8,7 @@ WORKDIR /app
 
 COPY bunfig.toml .
 COPY package.json .
+COPY packages packages
 COPY bun.lockb .
 RUN bun install
 
@@ -18,6 +19,12 @@ COPY postcss.config.js ./
 
 COPY tsconfig.json ./
 
-COPY ./ ./
+COPY app app
+COPY src src
+COPY public public
 
-CMD ["bun", "dev"]
+RUN bun run build
+
+EXPOSE 5173
+
+CMD ["bun", "serve"]

app/root.tsx

@@ -2,9 +2,8 @@ import type { LinksFunction } from "@remix-run/node";
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
 import "./tailwind.css";
 import { DAppProvider } from "dappkit";
+import config from "../merkl.config";
 import styles from "./tailwind.css?url";
-import config from "../merkl.config"
-
 
 export const links: LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

app/routes/_landing.(home).tsx

@@ -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?",
+        ]}
+      />
+    </>
+  );
+}

app/routes/_landing.tsx

@@ -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>
+    </>
+  );
+}