feat: twitter share

.github/actions/setup/action.yaml

@@ -1,8 +1,15 @@
+name: Setup Node.js and Dependencies
+description: Setup Node.js environment and other system dependencies
+
 runs:
   using: composite
   steps:
     - uses: actions/checkout@v4
 
+    - name: Install canvas dependencies
+      run: sudo apt-get update && sudo apt-get install -y libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
+      shell: bash
+
     - uses: actions/setup-node@v4
       with:
         node-version: 20
@@ -11,3 +18,7 @@ runs:
 
     - run: yarn install --frozen-lockfile --ignore-scripts
       shell: bash
+
+    - name: Build canvas package from source
+      run: npm rebuild canvas --build-from-source
+      shell: bash

api/_dexes/lifi/utils/sources.ts

@@ -11,7 +11,6 @@ export const SOURCES = {
       { key: "1inch", names: ["1inch"] },
       { key: "openocean", names: ["openocean"] },
       { key: "kyberswap", names: ["kyberswap"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
       { key: "merkle", names: ["merkle"] },
@@ -23,7 +22,6 @@ export const SOURCES = {
       { key: "1inch", names: ["1inch"] },
       { key: "openocean", names: ["openocean"] },
       { key: "kyberswap", names: ["kyberswap"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
     ],
@@ -50,7 +48,6 @@ export const SOURCES = {
       { key: "1inch", names: ["1inch"] },
       { key: "openocean", names: ["openocean"] },
       { key: "kyberswap", names: ["kyberswap"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
     ],
@@ -64,7 +61,6 @@ export const SOURCES = {
       { key: "odos", names: ["odos"] },
       { key: "1inch", names: ["1inch"] },
       { key: "openocean", names: ["openocean"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
     ],
@@ -80,7 +76,6 @@ export const SOURCES = {
       { key: "1inch", names: ["1inch"] },
       { key: "openocean", names: ["openocean"] },
       { key: "kyberswap", names: ["kyberswap"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
     ],
@@ -109,23 +104,20 @@ export const SOURCES = {
       { key: "odos", names: ["odos"] },
       { key: "openocean", names: ["openocean"] },
       { key: "kyberswap", names: ["kyberswap"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
     ],
     "60808": [{ key: "lifidexaggregator", names: ["lifidexaggregator"] }],
     "81457": [
       { key: "openocean", names: ["openocean"] },
       { key: "kyberswap", names: ["kyberswap"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
     ],
     "534352": [
       { key: "odos", names: ["odos"] },
       { key: "openocean", names: ["openocean"] },
       { key: "kyberswap", names: ["kyberswap"] },
-      { key: "lifidexaggregator", names: ["lifidexaggregator"] },
       { key: "sushiswap", names: ["sushiswap"] },
       { key: "okx", names: ["okx"] },
     ],

api/_utils.ts

@@ -1563,6 +1563,16 @@ export function positiveIntStr() {
   });
 }
 
+export function intStringInRange(from: number, to: number) {
+  return define<string>("intStringInRange", (value) => {
+    return (
+      Number.isInteger(Number(value)) &&
+      Number(value) >= from &&
+      Number(value) <= to
+    );
+  });
+}
+
 export function positiveFloatStr(maxValue?: number) {
   return define<string>("positiveFloatStr", (value) => {
     return Number(value) >= 0 && (maxValue ? Number(value) <= maxValue : true);

api/twitter-share/_utils.ts

@@ -0,0 +1,26 @@
+import { getChainInfo } from "../_utils";
+import path from "path";
+import fs from "fs";
+
+const assetsDir = path.join(__dirname, "assets");
+
+export function getChainLogoPath(chainId: number): string | undefined {
+  try {
+    const chainName = getChainInfo(chainId)
+      .name.toLowerCase()
+      .replaceAll(" ", "-");
+    const logoPath = path.join(assetsDir, "chain-logos", `${chainName}.png`);
+
+    if (!fs.existsSync(logoPath)) {
+      throw new Error(`No chain logo found at path ${logoPath}`);
+    }
+
+    return logoPath;
+  } catch (e) {
+    console.warn(`Unable to find logo for chainId ${chainId}.`, {
+      cause: e,
+      chainId,
+    });
+    return undefined;
+  }
+}

api/twitter-share/index.ts

@@ -0,0 +1,115 @@
+import { VercelResponse } from "@vercel/node";
+import { createCanvas, loadImage } from "canvas";
+import { TypedVercelRequest } from "../_types";
+import { handleErrorCondition } from "../_errors";
+import { getLogger, intStringInRange, positiveIntStr } from "../_utils";
+import path from "path";
+
+import { assert, Infer, type } from "superstruct";
+import { getChainLogoPath } from "./_utils";
+const assetsDir = path.join(__dirname, "assets");
+
+const TwitterShareParamsSchema = type({
+  fill_time: intStringInRange(0, 5),
+  from_chain: positiveIntStr(),
+  to_chain: positiveIntStr(),
+});
+
+export type TwitterShareImageParams = Infer<typeof TwitterShareParamsSchema>;
+
+export const CANVAS = {
+  width: 800,
+  height: 800,
+};
+
+const chainLogoDimensions = {
+  x: 89,
+  y: 89,
+};
+
+export default async function handler(
+  request: TypedVercelRequest<TwitterShareImageParams>,
+  response: VercelResponse
+) {
+  const logger = getLogger();
+  try {
+    logger.debug({
+      at: "api/twitter-share",
+      message: "Query data",
+      query: request.query,
+    });
+    assert(request.query, TwitterShareParamsSchema);
+    const { fill_time, from_chain, to_chain } = request.query;
+    const canvas = createCanvas(CANVAS.width, CANVAS.height);
+    const ctx = canvas.getContext("2d");
+
+    const baseImage = await loadImage(
+      path.join(assetsDir, "base", `${fill_time}.png`)
+    );
+
+    // Get chain logo paths and load images only if they exist
+    const originChainLogoPath = getChainLogoPath(Number(from_chain));
+    const destinationChainLogoPath = getChainLogoPath(Number(to_chain));
+
+    const [originChainLogo, destinationChainLogo] = await Promise.all([
+      originChainLogoPath ? loadImage(originChainLogoPath) : null,
+      destinationChainLogoPath ? loadImage(destinationChainLogoPath) : null,
+    ]);
+
+    // draw base layer with padding
+    ctx.drawImage(baseImage, 0, 0, CANVAS.width, CANVAS.height);
+
+    // Draw chain logos only if they exist (base layer contains fallback)
+    if (originChainLogo) {
+      ctx.drawImage(
+        originChainLogo,
+        182,
+        356,
+        chainLogoDimensions.x,
+        chainLogoDimensions.y
+      );
+    }
+    if (destinationChainLogo) {
+      ctx.drawImage(
+        destinationChainLogo,
+        529,
+        356,
+        chainLogoDimensions.x,
+        chainLogoDimensions.y
+      );
+    }
+
+    response.setHeader(
+      "Cache-Control",
+      `public, max-age=${60 * 60 * 24 * 30}, immutable`
+    ); // 1 month
+    response.setHeader("Content-Type", "image/png");
+
+    const stream = canvas.createPNGStream();
+
+    // Handle stream errors
+    stream.on("error", (streamErr) => {
+      logger.error({
+        at: "api/twitter-share",
+        message: "PNG stream error",
+        error: streamErr,
+      });
+      if (!response.headersSent) {
+        response.status(500).end();
+      }
+    });
+
+    stream.pipe(response);
+  } catch (err) {
+    logger.error({
+      at: "api/twitter-share",
+      message: "Failed to generate Twitter share image",
+      error: err,
+    });
+
+    // Only handle error if response hasn't been sent yet
+    if (!response.headersSent) {
+      handleErrorCondition("twitter-share-image", response, logger, err);
+    }
+  }
+}

jest.config.cjs

@@ -11,12 +11,10 @@ module.exports = {
     "^.+\\.svg$": "jest-transform-stub",
     "^.+\\.png$": "jest-transform-stub",
   },
+  // Only include test/api directory for API tests
+  testMatch: ["<rootDir>/test/api/**/*.test.{ts,tsx}"],
   moduleNameMapper: {
-    "^components/(.*)$": "<rootDir>/src/components/$1",
-    "^utils/(.*)$": "<rootDir>/src/utils/$1",
-    "^hooks/(.*)$": "<rootDir>/src/hooks/$1",
-    "^assets/(.*)$": "<rootDir>/src/assets/$1",
-    "^data/(.*)$": "<rootDir>/src/data/$1",
+    // Only keep uuid mapping for API tests - remove frontend path mappings
     uuid: require.resolve("uuid"),
   },
 };

jest.frontend.config.cjs

@@ -0,0 +1,26 @@
+/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
+
+module.exports = {
+  setupFiles: ["<rootDir>/setup.jest.ts"],
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  moduleDirectories: ["node_modules", "<rootDir>"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.svg$": "jest-transform-stub",
+    "^.+\\.png$": "jest-transform-stub",
+  },
+  // Only include src directory for frontend tests
+  testMatch: ["<rootDir>/src/**/*.test.{ts,tsx}"],
+  // Exclude API modules that require Node.js dependencies
+  modulePathIgnorePatterns: ["<rootDir>/api/", "<rootDir>/test/api/"],
+  moduleNameMapper: {
+    "^components/(.*)$": "<rootDir>/src/components/$1",
+    "^utils/(.*)$": "<rootDir>/src/utils/$1",
+    "^hooks/(.*)$": "<rootDir>/src/hooks/$1",
+    "^assets/(.*)$": "<rootDir>/src/assets/$1",
+    "^data/(.*)$": "<rootDir>/src/data/$1",
+    uuid: require.resolve("uuid"),
+  },
+};

package.json

@@ -69,9 +69,9 @@
     "remote-config": "tsx scripts/fetch-remote-config.ts",
     "remote-env": "tsx ./scripts/fetch-remote-env.ts",
     "analyze": "yarn build && rollup-plugin-visualizer --open ./bundle-size-analysis.json",
-    "test": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && jest --env jsdom src",
+    "test": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && jest --config jest.frontend.config.cjs",
     "serve": "vite preview --port 3000",
-    "test-api": "yarn remote-config && jest test/api",
+    "test-api": "yarn remote-config && jest --config jest.config.cjs",
     "pretest:e2e": "npm pkg set 'type'='module'",
     "test:e2e:headful": "yarn pretest:e2e && playwright test",
     "test:e2e:headless": "yarn pretest:e2e && HEADLESS=true playwright test",
@@ -161,6 +161,7 @@
     "@vercel/node": "^5.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "axios-mock-adapter": "^1.21.2",
+    "canvas": "^3.1.2",
     "buffer": "^6.0.3",
     "chalk": "^5.3.0",
     "chromatic": "^11.25.1",