sanguine

This is a Next.js project bootstrapped with create-next-app

Getting Started

First, run development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit and save the file.


Local Development Setup Guide

This guide is for running @synapsecns/synapse-interface and @synapsecns/sdk-router simultaneously for local development, with continuous recompilation on changes.

Prerequisites

Ensure you’ve installed Node.js (version 18.17.0) and Yarn on your machine. This setup assumes you’re using Yarn Workspaces and Lerna to manage your project, with @synapsecns/sdk-router and @synapsecns/synapse-interface as part of the same workspace.

Steps

  1. Install dependencies From the root directory of your workspace, run:
yarn install

This will handle dependency installation and local package linking.

  1. Watch for changes in @synapsecns/sdk-router Open a terminal, navigate to the workspace root, and run:
lerna run --scope @synapsecns/sdk-router start --stream

This triggers TSDX in watch mode for @synapsecns/sdk-router, triggering rebuilds on file changes.

  1. Run the Next.js application in development mode In a separate terminal window, navigate to the synapse-interface directory and start the dev server:
yarn dev

This command watches for file changes and automatically rebuilds the application, including updated dependencies.

After completing these steps, any changes to @synapsecns/sdk-router will be automatically detected and rebuilt. The @synapsecns/synapse-interface application will then pick up and incorporate these updates.

Make sure the @synapsecns/sdk-router dependency in synapse-interface’s package.json is declared by name and version (like "@synapsecns/sdk-router": "0.1.0"), matching sdk-router’s package.json version.


Maintenance Guide

This guide covers the shared maintenance data consumed by @synapsecns/synapse-interface and @synapsecns/widget.

How it works

The interface renders maintenance UI from shared pause artifacts:

  1. Banner at the top of the page.
  2. Countdown Progress Bar at the top of Bridge / Swap cards.
  3. Warning Message below the input UI in Bridge / Swap cards.

The widget still depends on these same pause artifact files and repository paths for its maintenance state, even though it fetches them through different remote URLs. Keep both files present at their current paths even when they are empty, because the widget is coupled to those artifact locations.

The shared artifacts are:

Current repository state:

When a shared pause artifact changes, the production webapp picks it up after:

  1. Merging the branch into master.
  2. Merging master into fe-release.

This deployment flow applies to the interface only. After Step 1, the Github Pages deployment for the branch must finish before the production webapp reflects the new data. Step 2 preserves the interface’s local fallback path if the GitHub API is unavailable.

Bridge Module Pause

Use paused-bridge-modules.json to pause a specific bridge module on a specific chain. Supported bridge modules are:

Bridge Module Pause Props

chainId Chain ID of the chain where the bridge module should be paused.

bridgeModuleName Accepts SynapseRFQ, SynapseBridge, or SynapseCCTP.

Example

[]

Adding a New Language

  1. Add the new locale code to next.config.js.
  2. Include the new locale in the LanguageSelector.
  3. Populate /messages/{locale.json} translations for the new locale. The keys in this should match en-US.json. See some of the other language files for reference.