Docs/blog api img

docs/bridge/blog-posts/2024-10-10-rest-api-post.md

@@ -0,0 +1,60 @@
+---
+slug: rest-api-now-live
+title: Announcing the Synapse REST API
+# authors: [synapse]
+tags: [api, update]
+---
+
+import { APIFlow } from '@site/src/components/APIFlow'
+
+We are excited to announce the launch of the **Synapse REST API**.
+
+Last week, we launched the Synapse REST API: [api.synapseprotocol.com](https://api.synapseprotocol.com). The new update is key in making Synapse easier to integrate for applications.
+
+<!--truncate-->
+
+## Summary
+
+The REST API is a restful interface for applications to query, construct, and initiate cross-chain transactions. The service comes with supporting modules for querying liquidity, transaction status, and more. The aim of the API is to enable applications to integrate cross-chain functionality through an API call.
+
+<figure>
+	<APIFlow />
+	<figcaption>API flow: get Quote, get txData, sign transaction</figcaption>
+</figure>
+
+## Why it Matters
+
+The REST API makes it significantly easier for aggregators to integrate with the Synapse Bridge, complete with supplementary modules for returning key information like transaction status to users , as well as standardizing and sanitizing inputs and outputs. Rather than interact with complex contracts, aggregators can interact with a simple /bridge endpoint.
+
+The REST API is also built with third-party developers in mind. Many people run external services around the Synapse Bridge: from arbitrage bots, to on-chain AI agents. The REST API makes it much simpler to interact with the Synapse Bridge from any environment, with just an http request. Third party developers also don't have to sacrifice complexity.
+
+## Challenges
+
+When building the REST API we ran into a couple challenges that have created a more robust developer experience.
+
+*Standardizing Constants:* We needed a set of constants to verify all inputs against, so that users did not attempt to bridge or swap with unsupported assets/chains. This launch gave us the chance to standardize the Synapse Constants library, and extend this library throughout other services.
+
+*Liquidity Warnings:* When bridging programmatically, it's harder to identify abnormalities, thus we added different endpoints to help applications retrieve liquidity parameters before bridging. Responses also include detailed information about what the expected amount will be.
+
+## Launch Details
+
+Structurally, the REST API is a wrapper around the Synapse SDK – the primary abstraction of the Synapse Contracts. The modules allow users to swap, bridge, and a host of other supporting functions. This level of abstraction is key for applications that want to interact with the Synapse Contracts from any framework, in a standardized manner.
+
+This update incorporated the addition of new methods to support aggregator integrations such as:
+
+`/bridgeTxStatus`
+	Enables developers to retrieve the status of any bridge transaction. Helpful for debugging as well as providing transaction level information to the user.
+
+`/destinationTokens`
+	Returns a list of tokens that can be bridged to (given an input token), giving developers clarity on where they can bridge to.
+
+`/bridgeLimits`
+	Returns a max/min amount of tokens to be bridged, giving an accurate representation of liquidity for any possible bridge route.
+
+Other main changes include:
+- Standardized RESTful responses, eliminated mixed response types (Markup and JSON) to now consistently return JSON for all endpoints.
+- Enhanced error handling using input validations with express-validator, middleware for error handling. Includes checks for unsupported chains, bridge modules, tokens and a friendly error message indicating specific error messages.
+- Architectural improvements including a traditional MVC approach, separating routes and controllers, improved code readability and organization, so we can easily compose new routes
+- Development workflow updates, like yarn dev which has hot reloading so we don't need to manually stop and restart the server during development
+
+Swagger documentation was also included in the latest release to assist developer onboarding.

docs/bridge/blog-posts/authors.yml

@@ -0,0 +1,4 @@
+synapse:
+  name: Synapse Protocol Developers
+  title: Synapse Protocol Developers
+  url: https://synapseprotocol.com

docs/bridge/blog-posts/welcome.md

@@ -0,0 +1,45 @@
+---
+slug: welcome
+title: Welcome
+# authors: [synapse]
+tags: [synapse]
+---
+
+
+We are happy to announce the **Synapse Technical Blog**!
+
+On this blog, we will share insights, updates, and deep dives into our latest launches and developments from a developer's perspective. Here, you'll find detailed information about our newest features, APIs, and technical improvements that power Synapse Protocol.
+
+
+<!--truncate-->
+
+## What to Expect
+
+Our blog posts will cover a range of topics, including:
+
+- New feature launches and updates
+- Technical deep dives into our architecture
+- API documentation and usage guides
+- Performance improvements and optimizations
+- Developer tools and resources
+
+Whether you're an integrator, a third-party developer, or just curious about the technical aspects of Synapse, this blog is for you.
+
+## Latest Articles
+
+Here's a list of our most recent tech blog posts:
+
+- [REST API Now Live](2024-10-10-rest-api-post.md) - October 10, 2024
+  Learn about our new REST API, its features, and how it simplifies integration for developers.
+
+
+
+## Stay Connected
+
+To stay up-to-date with our latest tech developments:
+
+- Follow us on [Twitter](https://twitter.com/synapseprotocol)
+- Join our [Discord](https://discord.gg/synapseprotocol)
+- Check out our [GitHub](https://github.com/synapsecns)
+
+We're excited to share our journey with you as we continue to innovate and improve the Synapse Protocol. Happy reading!

docs/bridge/docs/02-Bridge/05-Supported-Routes.md

@@ -0,0 +1,14 @@
+---
+sidebar_label: Supported Routes
+---
+
+# Supported Routes
+
+Use the [Synapse Bridge](https://synapseprotocol.com) to browse supported tokens and chains.
+
+:::tip Routes
+
+Route availability is determined by the amount you wish to bridge. Use the [Synapse Bridge](https://synapseprotocol.com) to see if a route between a given pair exists.
+
+:::
+

docs/bridge/docs/02-Bridge/_05-Supported-Routes.md

@@ -0,0 +1,17 @@
+---
+sidebar_label: Supported Routes
+---
+
+import Routes from '@site/src/components/Routes'
+
+# Supported Routes
+
+Supported tokens for each chain.
+
+:::tip Routes
+
+Route availability is determined by the amount you wish to bridge. Use the [Synapse Bridge](https://synapseprotocol.com) to see if a route between a given pair exists.
+
+:::
+
+<Routes />

docs/bridge/docusaurus.config.ts

@@ -60,15 +60,26 @@ const config: Config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/synapsecns/sanguine/tree/master/docs/bridge/',
+            'https://github.com/synapsecns/sanguine/edit/master/docs/bridge/blog-posts/',
           docRootComponent: '@theme/DocRoot',
           docItemComponent: '@theme/ApiItem', // derived from docusaurus-theme-openapi-docs
           // docItemComponent: '@theme/ApiItem', // derived from docusaurus-theme-openapi-docs
+          routeBasePath: 'docs',
+          path: 'docs',
+        },
+        blog: {
+          showReadingTime: true,
+          editUrl:
+            'https://github.com/synapsecns/sanguine/tree/master/docs/bridge/',
+          blogSidebarTitle: 'All posts',
+          blogSidebarCount: 'ALL',
+          path: 'blog-posts',
+          routeBasePath: 'blog',
+          // authorsMapPath: 'blog-posts/authors.yml',
         },
         theme: {
           customCss: './src/css/custom.css',
         },
-        blog: false,
       } satisfies Preset.Options,
     ],
   ],
@@ -91,6 +102,13 @@ const config: Config = {
         src: 'brand-assets/synapse-mark.svg',
       },
       items: [
+        {
+          type: 'doc',
+          docId: 'About/index',
+          position: 'left',
+          label: 'Docs',
+        },
+        {to: '/blog', label: 'Blog', position: 'left'},
         {
           href: 'https://github.com/synapsecns/sanguine',
           label: 'GitHub',

docs/bridge/src/components/APIFlow.tsx

@@ -0,0 +1,203 @@
+export const APIFlow = () => {
+  return (
+    <svg
+      width="100%"
+      viewBox="-240 0 480 120"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="flowAnimation"
+    >
+      <defs>
+        <path id="synFigDiamond" d="M4 0 8 4 4 8 0 4z" />
+        <path id="synFigArrow" d="M8 4 0 0 0 8z" />
+        <marker
+          id="synFigDiamondPurple"
+          viewBox="0 0 8 8"
+          refX="4"
+          refY="4"
+          markerWidth="7"
+          markerHeight="7"
+          fill="var(--syn-fig-purple)"
+        >
+          <use href="#synFigDiamond" />
+        </marker>
+        <marker
+          id="synFigDiamondMagenta"
+          viewBox="0 0 8 8"
+          refX="4"
+          refY="4"
+          markerWidth="7"
+          markerHeight="7"
+          fill="var(--syn-fig-magenta)"
+        >
+          <use href="#synFigDiamond" />
+        </marker>
+        <marker
+          id="synFigArrowMagenta"
+          viewBox="0 0 8 8"
+          refX="4"
+          refY="4"
+          markerWidth="7"
+          markerHeight="7"
+          orient="auto"
+          fill="var(--syn-fig-magenta)"
+        >
+          <use href="#synFigArrow" />
+        </marker>
+        <marker
+          id="synFigArrowPurple"
+          viewBox="0 0 8 8"
+          refX="4"
+          refY="4"
+          markerWidth="7"
+          markerHeight="7"
+          orient="auto"
+          fill="var(--syn-fig-purple)"
+        >
+          <use href="#synFigArrow" />
+        </marker>
+        <marker
+          id="synFigArrowGreen"
+          viewBox="0 0 8 8"
+          refX="4"
+          refY="4"
+          markerWidth="7"
+          markerHeight="7"
+          orient="auto-start-reverse"
+          fill="var(--syn-fig-green)"
+        >
+          <use href="#synFigArrow" />
+        </marker>
+        <marker
+          id="synFigArrowBlue"
+          viewBox="0 0 8 8"
+          refX="4"
+          refY="4"
+          markerWidth="7"
+          markerHeight="7"
+          orient="auto-start-reverse"
+          fill="var(--syn-fig-blue)"
+        >
+          <use href="#synFigArrow" />
+        </marker>
+      </defs>
+      <g fill="currentcolor" fillOpacity=".05">
+        <rect x="-50%" rx="4" y="0" width="100%" height="56" />
+        <rect x="-50%" rx="4" y="64" width="100%" height="56" />
+        <rect x="112" rx="4" width="128" height="100%" />
+
+        <rect x="-128" rx="4" y="12" width="72" height="32" />
+        <rect x="-32" rx="4" y="12" width="128" height="32" />
+        <rect x="132" rx="4" y="12" width="88" height="32" />
+      </g>
+      <path
+        stroke="var(--syn-fig-green)"
+        fill="none"
+        d="M-180 84 H-92 V44"
+        markerStart="url(#synFigArrowGreen)"
+        markerEnd="url(#synFigArrowGreen)"
+      />
+      <path
+        stroke="var(--syn-fig-blue)"
+        fill="none"
+        d="M-180 92 H32 V44"
+        markerStart="url(#synFigArrowBlue)"
+        markerEnd="url(#synFigArrowBlue)"
+      />
+      <path
+        stroke="var(--syn-fig-purple)"
+        fill="none"
+        d="M-180 100 H104 V28 H132"
+        markerStart="url(#synFigDiamondPurple)"
+        markerEnd="url(#synFigArrowPurple)"
+      />
+      <path
+        stroke="var(--syn-fig-magenta)"
+        fill="none"
+        d="M176 44 V77"
+        markerStart="url(#synFigDiamondMagenta)"
+        markerEnd="url(#synFigArrowMagenta)"
+      />
+      <g
+        fill="currentcolor"
+        dominantBaseline="middle"
+        style={{ fontSize: '.9em' }}
+      >
+        <text x="-216" y="29">
+          REST API
+        </text>
+        <g textAnchor="middle" fill="var(--syn-method)">
+          <text x="-92" y="29">
+            /bridge
+          </text>
+          <text x="32" y="29">
+            /bridgeTxInfo
+          </text>
+          <text x="176" y="29">
+            Contract
+          </text>
+        </g>
+        <text x="-216" y="93">
+          App
+        </text>
+        <text x="176" y="93" textAnchor="middle">
+          Chain
+        </text>
+      </g>
+
+      <g strokeWidth=".5" fill="var(--ifm-background-surface-color)">
+        <rect
+          x="-120"
+          y="51"
+          width="56"
+          height="17"
+          rx="2"
+          stroke="var(--syn-fig-green)"
+        />
+        <rect
+          x="8"
+          y="51"
+          width="48"
+          height="17"
+          rx="2"
+          stroke="var(--syn-fig-blue)"
+        />
+        <rect
+          x="82"
+          y="51"
+          width="44"
+          height="17"
+          rx="2"
+          stroke="var(--syn-fig-purple)"
+        />
+        <rect
+          x="148"
+          y="51"
+          width="56"
+          height="17"
+          rx="2"
+          stroke="var(--syn-fig-magenta)"
+        />
+      </g>
+      <g
+        className="temp"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        style={{ fontSize: '.75em' }}
+      >
+        <text x="-92" y="60" fill="var(--syn-fig-green)">
+          Quote
+        </text>
+        <text x="32" y="60" fill="var(--syn-fig-blue)">
+          Data
+        </text>
+        <text x="104" y="60" fill="var(--syn-fig-purple)">
+          Sign
+        </text>
+        <text x="176" y="60" fill="var(--syn-fig-magenta)">
+          Submit
+        </text>
+      </g>
+    </svg>
+  )
+}