feat!: refactor api

.github/workflows/cd.yml

@@ -46,3 +46,14 @@ jobs:
 
       - run: yarn workspaces foreach --all -v --exclude root --no-private npm publish --tolerate-republish --access public
         if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Publish Docs to Cloudflare Pages
+        if: ${{ steps.release.outputs.releases_created }}
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: 2238a825c5aca59233eab1f221f7aefb
+          projectName: gopher-docs-preview
+          directory: ./docs/build
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.head_ref || github.ref_name }}

.github/workflows/ci.yml

@@ -19,10 +19,10 @@ jobs:
       - run: corepack enable
       - name: Install deps
         run: yarn --immutable
-      - name: Lint
-        run: yarn run lint
       - name: Build
         run: yarn build
+      - name: Lint
+        run: yarn run lint
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       - name: "Unit Tests"
@@ -38,12 +38,12 @@ jobs:
           directory: ./web/.svelte-kit/cloudflare
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           branch: ${{ github.head_ref || github.ref_name }}
-      - name: Publish Docs to Cloudflare Pages
+      - name: Publish Preview Docs to Cloudflare Pages
         uses: cloudflare/pages-action@v1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: 2238a825c5aca59233eab1f221f7aefb
-          projectName: gopher-docs
+          projectName: gopher-docs-preview
           directory: ./docs/build
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           branch: ${{ github.head_ref || github.ref_name }}

docs/docs/01-introduction/01-introduction.md

@@ -16,8 +16,7 @@ Sprinter is a **fast, smooth, interoperable intent execution engine**. Our aim i
 ## What's Next
 
 - If you're new to Sprinter, begin with [Quick Start](../02-quick-start.md).
-- Explore detailed examples and advanced usage in the [SDK Documentation](../03-sdk/01-overview.md).
-- Dive into the specifics of our API in the [API Documentation](../04-api/01-api-usage.md).
+- Explore detailed examples and advanced usage in the [SDK Documentation](../sdk).
 
 Stay tuned for the complete source code.
 

docs/docs/01-introduction/04-supported-networks.md

@@ -4,7 +4,7 @@ title: Supported Bridges And Networks
 sidebar_position: 4
 ---
 
-import SankeyNetworkToken from '@site/src/components/SankeyNetworkToken';
+import SupportedList from '@site/src/components/SupportedList';
 
 :::tip
 New routes, networks, and tokens can readily be added by the Sprinter team. Please reach out at [requests@buildwithsygma.com](mailto:requests@buildwithsygma.com) to get a conversation started. 
@@ -22,6 +22,4 @@ New routes, networks, and tokens can readily be added by the Sprinter team. Plea
 Hover over network icon or token to show available routes
 :::
 
-| Mainnet                  | Testnet    |
-|--------------------------|------------|
-| <SankeyNetworkToken url="https://api.sprinter.buildwithsygma.com/" /> | <SankeyNetworkToken url="https://api.test.sprinter.buildwithsygma.com/" /> |
+<SupportedList />

docs/docs/02-quick-start.md

@@ -4,46 +4,99 @@ title: Quick Start
 sidebar_position: 2
 ---
 
-You have two main options for interacting with Sprinter:
+## Quick Examples
+
+Jump to the section that fits your development needs:
 
 - [Using the SDK](#using-the-sdk)
+- [Using the React SDK](#using-the-react-sdk)
 - [Calling API Endpoints Directly](#calling-api-endpoints-directly)
 
+You have three main options for interacting with Sprinter, depending on your development environment and the level of control you need:
+
+- **Using the SDK**: Ideal for developers working in TypeScript or modern JavaScript frameworks. The SDK provides a simple, unified interface for retrieving intent-based solutions from Sprinter, helping developers easily determine the actions or transactions users should execute on the blockchain.
+
+- **Using the React SDK**: Designed for React developers, this option offers hooks and context that make it simple to access intent-based solutions provided by Sprinter within React components, allowing seamless interaction with the intent engine.
+
+- **Calling API Endpoints Directly**: This option is best suited for developers who want full control over API interactions. It’s flexible and can be used in any programming environment, but requires a deeper understanding of the Sprinter protocol. We recommend this for advanced users or those working in non-JavaScript environments.
+
 ### Using the SDK
 
-Using the Sprinter SDK provides a convenient and unified interface for blockchain interactions, complete with TypeScript support for enhanced type safety and a better development experience. This approach is recommended for developers working with TypeScript or popular web frameworks.
+The Sprinter SDK provides a streamlined interface for retrieving intent-based solutions from Sprinter, with built-in TypeScript support to ensure type safety and an enhanced development experience. This approach is recommended for developers who are comfortable with TypeScript or those working in modern web frameworks.
 
 **Quick Example**
 
-Here's a quick example of how to use the SDK in your project:
+Here’s a quick example of how to use the SDK in your project:
 
 ```typescript
-import { Sprinter } from '@chainsafe/sprinter-sdk';
+import { Sprinter, Environment } from '@chainsafe/sprinter-sdk';
 
-const sprinter = new Sprinter(window.ethereum);
+const sprinter = new Sprinter({ baseUrl: Environment.MAINNET });
 
-sprinter.getUserBalances().then(console.log);
+sprinter.getUserBalances('0xYourAddressHere').then(console.log);
 ```
 
-For a more detailed guide on setting up and using the SDK, refer to the [SDK Documentation](03-sdk/01-overview.md).
+For more details on using the SDK, refer to the [SDK Documentation](./sdk).
 
-### Calling API Endpoints Directly
+### Using the React SDK
 
-If you prefer more control or wish to implement the solution in a different programming language, you can directly interact with the API endpoints provided by Sprinter.
+If you're building a React application, you can use the Sprinter React SDK (`@chainsafe/sprinter-react`), which provides hooks and context to interact with the Sprinter core SDK.
 
 **Quick Example**
 
-Here’s how you can call the API directly using JavaScript's Fetch API:
+Here’s how to set up a simple React component to fetch user balances:
+
+```tsx
+import React, { useEffect } from 'react';
+import { SprinterContext, useSprinterBalances } from '@chainsafe/sprinter-react';
+import { Environment } from '@chainsafe/sprinter-sdk';
+
+function BalancesComponent() {
+  const { balances, getUserBalances } = useSprinterBalances('0xYourAddressHere');
+
+  useEffect(() => {
+    getUserBalances();
+  }, [getUserBalances]);
+
+  if (balances.loading) return <div>Loading...</div>;
+  if (balances.error) return <div>Error: {balances.error}</div>;
+
+  return (
+    <ul>
+      {Object.entries(balances.data || {}).map(([symbol, balanceEntry]) => (
+        <li key={symbol}>{symbol}: {balanceEntry.total}</li>
+      ))}
+    </ul>
+  );
+}
+
+function App() {
+  return (
+    <SprinterContext baseUrl={Environment.MAINNET}>
+      <BalancesComponent />
+    </SprinterContext>
+  );
+}
+
+export default App;
+```
+
+For detailed usage, check the [React SDK Documentation](./react-sdk).
+
+### Calling API Endpoints Directly
+
+This approach provides more control over how you interact with the API but is generally suited for advanced users or developers working in non-JavaScript environments.
+
+:::caution For Advanced Users
+Calling the API directly provides the most flexibility but requires a deeper understanding of the Sprinter protocol and how to structure API requests. It's recommended for experienced developers who need full control over API interactions.
+:::
+
+**Quick Example**
 
-```javascript
-const ownerAddress = "0x3E101Ec02e7A48D16DADE204C96bFF842E7E2519";
-const tokenSymbol = "USDC";
-const baseUrl = "https://api.sprinter.buildwithsygma.com/";  
+Here’s how you can call the API directly using `curl`:
 
-fetch(`${baseUrl}/accounts/${ownerAddress}/assets/fungible/${tokenSymbol}`)
-  .then(response => response.json())
-  .then(data => console.log(data))
-  .catch(error => console.error('Error fetching user fungible tokens:', error));
+```bash
+curl -X GET "https://api.sprinter.buildwithsygma.com/accounts/0x3E101Ec02e7A48D16DADE204C96bFF842E7E2519/assets/fungible/USDC"
 ```
 
-For a comprehensive list of available endpoints and how to use them, check out the [API Documentation](04-api/01-api-usage.md).
+For a comprehensive list of available endpoints and how to use them, check out the [API Documentation](https://api.sprinter.buildwithsygma.com/swagger/index.html).