ci: add actions

.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 "[email protected]"
+          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,65 @@
+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
+      - 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 "[email protected]"
+          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

@@ -20,4 +20,6 @@ COPY tsconfig.json ./
 
 COPY ./ ./
 
-CMD ["bun", "dev"]
+EXPOSE 5173
+
+CMD ["bun", "dev"]

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/_merkl.(home).tsx

@@ -1,6 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Outlet } from "@remix-run/react";
-import { type Coloring, Container, createColoring } from "dappkit";
+import { Container } from "dappkit";
 import Heading from "src/components/composite/Heading";
 import { http, createConfig } from "wagmi";
 import { mainnet, sepolia } from "wagmi/chains";

app/routes/_merkl.action.$action.tsx

@@ -4,9 +4,7 @@ import { Container } from "dappkit";
 import Heading from "src/components/composite/Heading";
 import { type Action, actions, getAction } from "src/config/actions";
 
-export async function loader({
-  params: { action: _action },
-}: LoaderFunctionArgs) {
+export async function loader({ params: { action: _action } }: LoaderFunctionArgs) {
   const action = getAction(_action ?? "");
 
   if (!action) throw new Error("Unknown action");

app/routes/_merkl.chain.$id.tsx

@@ -45,15 +45,18 @@ export function ErrorBoundary() {
 
   const networks = useMemo(() => {
     const a = Object.keys(chains);
-    return Object.entries(chains).reduce((supported, [chainId, chain]) => {
-      supported[chainId] = (
-        <Group>
-          <Icon size="sm" chain={chainId} />
-          {chain.label}
-        </Group>
-      );
-      return supported;
-    }, {} as { [C in ChainId]?: ReactNode });
+    return Object.entries(chains).reduce(
+      (supported, [chainId, chain]) => {
+        supported[chainId] = (
+          <Group>
+            <Icon size="sm" chain={chainId} />
+            {chain.label}
+          </Group>
+        );
+        return supported;
+      },
+      {} as { [C in ChainId]?: ReactNode },
+    );
   }, []);
 
   return (
@@ -63,7 +66,7 @@ export function ErrorBoundary() {
         {/* <Text h={3}>We don't support this chain</Text> */}
         <div>
           <Select
-            state={[undefined, (c) => navigate(`/chain/${chains?.[c]?.label}`)]}
+            state={[undefined, c => navigate(`/chain/${chains?.[c]?.label}`)]}
             placeholder="Supported Chains"
             options={networks}
           />

app/routes/_merkl.opportunity.$chain.$type.$id.tsx

@@ -1,9 +1,5 @@
 import type { Opportunity } from "@angleprotocol/merkl-api";
-import {
-  type LoaderFunctionArgs,
-  type MetaFunction,
-  json,
-} from "@remix-run/node";
+import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
 import { Meta, Outlet, useLoaderData, useParams } from "@remix-run/react";
 import { api } from "src/api";
 import Heading from "src/components/composite/Heading";
@@ -13,16 +9,12 @@ import Tag from "src/components/element/Tag";
 import { getChainId } from "src/config/chains";
 import useOpportunity from "src/hooks/resources/useOpportunity";
 
-export async function loader({
-  params: { id, type, chain },
-}: LoaderFunctionArgs) {
+export async function loader({ params: { id, type, chain } }: LoaderFunctionArgs) {
   const chainId = getChainId(chain ?? "");
 
   if (!chainId || !id || !type) throw "";
 
-  const { data: opportunity, ...res } = await api.v4
-    .opportunity({ chainId })({ type })({ id })
-    .get();
+  const { data: opportunity, ...res } = await api.v4.opportunity({ chainId })({ type })({ id }).get();
 
   if (!opportunity) throw "";
 
@@ -44,7 +36,7 @@ export default function Index() {
     <Container>
       <Meta />
       <Heading
-        icons={opportunity.tokens.map((t) => ({ src: t.icon }))}
+        icons={opportunity.tokens.map(t => ({ src: t.icon }))}
         navigation={{ label: "Back to opportunities", link: "/" }}
         title={opportunity.name}
         description={description}
@@ -53,15 +45,9 @@ export default function Index() {
           { label: "Leaderboard", link: `${link}/leaderboard` },
           { label: "Analytics", link: `${link}/analytics` },
         ]}
-        tags={tags.map((tag) => (
-          <Tag
-            key={`${tag.type}_${tag.value?.address ?? tag.value}`}
-            {...tag}
-            size="sm"
-            look="bold"
-          />
-        ))}
-      >
+        tags={tags.map(tag => (
+          <Tag key={`${tag.type}_${tag.value?.address ?? tag.value}`} {...tag} size="sm" look="bold" />
+        ))}>
         <Outlet />
       </Heading>
     </Container>

app/routes/_merkl.status.$status.tsx

@@ -4,9 +4,7 @@ import { Container } from "dappkit";
 import Heading from "src/components/composite/Heading";
 import { type Status, getStatus, statuses } from "src/config/status";
 
-export async function loader({
-  params: { status: _status },
-}: LoaderFunctionArgs) {
+export async function loader({ params: { status: _status } }: LoaderFunctionArgs) {
   const status = getStatus(_status ?? "");
 
   if (!status) throw new Error("Unknown status");

app/routes/_merkl.token.$symbol.tsx

@@ -37,8 +37,7 @@ export default function Index() {
         navigation={{ label: "Back to opportunities", link: "/" }}
         title={
           <>
-            {token.name}{" "}
-            <span className="font-mono text-main-8">({token.symbol})</span>
+            {token.name} <span className="font-mono text-main-8">({token.symbol})</span>
           </>
         }
         description={`Deposit or earn ${token.symbol} on ${config.appName}.`}

app/routes/_merkl.user.$address.(rewards).tsx

@@ -1,9 +1,8 @@
 import { useParams } from "@remix-run/react";
-import { Container } from "dappkit";
 import ClaimRewardsLibrary from "src/components/element/rewards/ClaimRewardsLibrary";
 
 export default function Index() {
   const { address } = useParams();
 
-  return <ClaimRewardsLibrary/>;
+  return <ClaimRewardsLibrary />;
 }

app/routes/_merkl.user.$address.tsx

@@ -45,8 +45,7 @@ export default function Index() {
             ),
             link: `/user/${address}/claims`,
           },
-        ]}
-      >
+        ]}>
         <Outlet />
       </Heading>
     </Container>

bunfig.toml

@@ -1,5 +1,5 @@
 [install.scopes]
 "@angleprotocol" = {
-    token = $GH_REGISTRY_ACCESS_TOKEN,
+    token = $SDK_READ_ACCESS_TOKEN,
     url = "https://npm.pkg.github.com/"
 }

docker-compose.yaml

@@ -11,8 +11,6 @@ services:
       - '3000:5173'
     env_file:
       - .env
-    environment:
-      PORT: '3000'
     volumes:
       - ./src:/app/src
-      - ./app:/app/app
+      - ./app:/app/app

package.json

@@ -7,6 +7,7 @@
     "build": "remix vite:build",
     "dev": "remix vite:dev --host",
     "lint": "biome check --fix ./src ./app",
+    "lint:ci": "biome check --diagnostic-level error ./src",
     "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
   },