embed network fee stats using Canvas (#555)

* embed network fee stats using Canvas.

* wrap the canvas component in BrowserOnly

* create a custom component for the embedded fee charts

* use the custom component on the resource limits page

* add the canvas fees embed into the "learn" page about fees

* Update section title

---------

Co-authored-by: Jane Wang <[email protected]>

docs/learn/fundamentals/fees-resource-limits-metering.mdx

@@ -3,6 +3,8 @@ title: Fees, Resource Limits, and Metering
 sidebar_position: 65
 ---
 
+import CanvasFeeGraphs from "@site/src/components/CanvasFeeGraphs";
+
 ## Fees overview
 
 Stellar requires a fee for all transactions to make it to the ledger. This helps prevent spam and prioritizes transactions during traffic surges. All fees are paid using the native Stellar token, the [lumen (or XLM)](./lumens.mdx).
@@ -167,6 +169,10 @@ If the contract execution concludes within the specified resource limits, the me
 
 ## Inclusion fee pricing strategies
 
+For the past three hours, inclusion fee statistics on the Mainnet network can be seen below.
+
+<CanvasFeeGraphs />
+
 There are three primary methods to deal with inclusion fee fluctuations and surge pricing:
 
 - [**Method 1:**](#set-the-highest-fee-youre-comfortable-paying) set the highest fee you’re comfortable paying. This does not mean that you’ll pay that amount on every transaction — you will only pay what’s necessary to get into the ledger. Under normal (non-surge) circumstances, you will only pay the standard fee even with a higher maximum fee set. This method is simple, convenient, and efficient but can still potentially fail.

docs/reference/resource-limits-fees.mdx

@@ -3,6 +3,14 @@ sidebar_position: 30
 title: Resource Limits & Fees
 ---
 
+import CanvasFeeGraphs from "@site/src/components/CanvasFeeGraphs";
+
+## Current Inclusion Fees
+
+For the past three hours, inclusion fee statistics on the Mainnet network can be seen below.
+
+<CanvasFeeGraphs />
+
 :::note
 
 Resource limitations and fees only apply to smart contract transactions. Read more about the inner workings of fees on Stellar in the [Fees section](../learn/fundamentals/fees-resource-limits-metering.mdx).

package.json

@@ -46,6 +46,7 @@
     "@stellar/stellar-sdk": "^11.3.0",
     "ajv": "^8.12.0",
     "axios": "^1.6.8",
+    "canvas-embed": "^1.0.65",
     "clsx": "^1.2.1",
     "docusaurus-plugin-openapi-docs": "^2.1.3",
     "docusaurus-plugin-sass": "^0.2.2",

src/components/CanvasFeeGraphs/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+import styles from './styles.module.css'
+
+export default function CanvasEmbed() {
+  return (
+    <div className={styles.CanvasFeeWrapper}>
+      <BrowserOnly fallback={<div>Loading...</div>}>
+        {() => {
+          const Canvas = require("canvas-embed").Canvas;
+          return <Canvas canvasId="k3X9xS" />;
+        }}
+      </BrowserOnly>
+    </div>
+  )
+}

src/components/CanvasFeeGraphs/styles.module.css

@@ -0,0 +1,3 @@
+.CanvasFeeWrapper {
+    margin-bottom: var(--ifm-paragraph-margin-bottom);
+}