feat(docs): integrate Mermaid theme for enhanced diagram support in gasless FXRP payments guide

Author: fassko

docs/fxrp/token-interactions/04-gasless-fxrp-payments.mdx

@@ -24,14 +24,34 @@ Users sign payment requests off-chain with [EIP-712](https://eips.ethereum.org/E
 The token holder signs an authorization off-chain, and a relayer executes the transfer on-chain and pays gas.
 
 This guide uses a custom [EIP-712](https://eips.ethereum.org/EIPS/eip-712) payment message and a forwarder contract instead of EIP-3009 on the token itself.
-The forwarder pulls FXRP from the user (after a one-time approval) and sends it to the recipient.
-The relayer pays gas and can charge a fee in FXRP.
+The forwarder pulls FXRP from the user (after a one-time approval) and sends it to the provided recipient.
+The relayer pays gas on behalf of the user.
+
+## Architecture
+
+The architecture of the gasless FXRP payments system is as follows:
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Relayer
+    participant GaslessPaymentForwarder
+    participant FXRP
+
+    User->>User: 1. Sign payment (EIP-712)<br/>off-chain, no gas
+    User->>Relayer: 2. POST signed request
+    Relayer->>GaslessPaymentForwarder: 3. executePayment()<br/>(pays gas)
+    GaslessPaymentForwarder->>FXRP: 4. FXRP transfer
+    FXRP-->>GaslessPaymentForwarder: 5. Transfer confirmed
+    GaslessPaymentForwarder-->>Relayer: 6. Execution complete
+    Relayer-->>User: 7. Payment confirmed
+```
 
 ## Project setup
 
-Create a new [Hardhat](https://hardhat.org/) project or use the [Flare Hardhat Starter](/network/guides/hardhat-foundry-starter-kit) kit.
+To follow this guide, create a new [Hardhat](https://hardhat.org/) project or use the [Flare Hardhat Starter](/network/guides/hardhat-foundry-starter-kit) kit.
 
-Install needed dependencies:
+You will need to install the following dependencies:
 
 ```bash
 npm install ethers viem express cors dotenv
@@ -53,21 +73,18 @@ Save as `contracts/GaslessPaymentForwarder.sol` to create the forwarder smart co
 
 **How the contract works**
 
-1. Define libraries and state.
-2. Define events.
-3. Defines errors.
-4. Implements the contract constructor that sets the EIP-712 domain, owner, and initial relayer fee.
-5. Implements the `fxrp` function that returns the FXRP token from the Flare registry.
-6. Defines the `executePayment` function that executes a gasless payment.
-7. Hashes the request (type hash + from, to, amount, fee, nonce, deadline) and gets the [EIP-712](https://eips.ethereum.org/EIPS/eip-712) digest.
-8. Recovers the signer from the signature with ECDSA.
-9. Requires the signer of the payment request.
-10. Requires a sufficient allowance for the total amount (amount + fee).
-11. Transfers the amount from the sender to the recipient.
-12. Transfers fee from sender to relayer (msg.sender); emits `PaymentExecuted`.
-13. Defines the view functions to get the nonce, domain separator, and payment request hash.
-14. Defines the function to set the relater authorization.
-15. Define the function to set the relayer fee.
+1. Define libraries and state (nonces, authorizedRelayers).
+2. Define events (PaymentExecuted, RelayerAuthorized).
+3. Define errors.
+4. Implement a constructor that sets the EIP-712 domain and owner.
+5. Implement `fxrp` to return the FXRP token from the Flare Contract Registry.
+6. Define `executePayment(from, to, amount, deadline, signature)`.
+7. Hash the request (type hash + from, to, amount, nonce, deadline) and get the [EIP-712](https://eips.ethereum.org/EIPS/eip-712) digest.
+8. Recover the signer from the signature.
+9. Require signer to be the from address; increment nonce.
+10. Require sufficient allowance; transfer amount from sender to recipient.
+11. Define view functions: getNonce, getDomainSeparator, getPaymentRequestHash.
+12. Define setRelayerAuthorization for the relayer allowlist.
 
 </details>
 
@@ -77,9 +94,11 @@ Run the following command to compile the contract and generate the typechain-typ
 npx hardhat compile
 ```
 
+It will generate the `typechain-types` directory with the contract interfaces and factories.
+
 ### Utilities
 
-Save as `utils/payment.ts` to create the utility functions that will be used to create and sign payment requests.
+Save as `utils/payment.ts` to create the utility functions that will be used to create and sign payment requests off-chain.
 
 :::info
 
@@ -97,17 +116,16 @@ This utility uses the `typechain-types` generated by the previous command.
 **Code Breakdown**
 
 1. Import the necessary libraries.
-2. Define the needed constants and EIP-712 types.
+2. Define constants and EIP-712 types (PaymentRequest: from, to, amount, nonce, deadline).
 3. Define types for sign params, payment request, approval result, and user status.
 4. Parse human-readable amount to raw bigint with decimals.
 5. Format the raw amount to a readable string with decimals.
 6. Get FXRP decimals from the forwarder and token contract.
 7. Get the current nonce for a user from the forwarder.
-8. Get the minimum relayer fee from the forwarder.
-9. Sign the payment message with EIP-712 and return the signature.
-10. Create a full payment request: fetch nonce and fee, set deadline, sign, and return payload for the relayer.
-11. Approve the forwarder to spend FXRP.
-12. Check user balance, allowance, nonce, and whether approval is needed.
+8. Sign the payment message with EIP-712 and return the signature.
+9. Create a full payment request: fetch nonce, set deadline, sign, return payload for the relayer.
+10. Approve the forwarder to spend FXRP (one-time).
+11. Check user balance, allowance, nonce, and whether approval is needed.
 
 </details>
 
@@ -127,18 +145,17 @@ Save as `relayer/index.ts` to start the relayer service.
 **Code Breakdown**
 
 1. Import necessary libraries.
-2. Define EIP-712 domain, payment request types, and other network configurations.
-3. Define `RelayerConfig`, `PaymentRequest`, and `ExecuteResult` types.
-4. Implement the `GaslessRelayer` class to interact with the forwarder contract.
-5. Execute gasless payment: normalize and validate request, recover signer with EIP-712, validate request (balance, allowance, deadline), staticCall, then recheck nonce, estimate gas with buffer, call executePayment, wait for receipt, return result.
-6. Validate request: check deadline against chain time, check sender FXRP balance and allowance, check fee meets minimum.
-7. Get nonce for an address from the forwarder contract.
-8. Get the minimum relayer fee from the forwarder contract.
-9. Get FXRP token decimals from the forwarder and token contract.
-10. Get the relayer FLR balance for gas.
-11. Start Express server.
-12. Main function to read environment variables, create a relayer, log FLR balance, and start the server.
-13. Run the main function to start the relayer service.
+2. Define EIP-712 domain and payment request types (from, to, amount, nonce, deadline); define NETWORKS (flare, coston2, songbird).
+3. Define RelayerConfig, PaymentRequest, and ExecuteResult types.
+4. Implement GaslessRelayer class: constructor sets provider, wallet, and forwarder.
+5. Execute payment: normalize and validate request, recover signer with EIP-712, validate request (balance, allowance, deadline), staticCall, recheck nonce, estimate gas, call executePayment, wait for receipt, return result.
+6. Validate request: check deadline against chain time, check sender balance and allowance.
+7. Get nonce for an address from the forwarder.
+8. Get FXRP token decimals from the forwarder and token contract.
+9. Get the relayer FLR balance for gas.
+10. Start Express server: GET /nonce/:addr, POST /execute.
+11. Main: read env (RELAYER_PRIVATE_KEY, FORWARDER_ADDRESS, RPC_URL, PORT), create relayer, log FLR balance, start server.
+12. Run main to start the relayer service.
 
 </details>
 
@@ -155,15 +172,12 @@ Save as `scripts/deploy.ts` to deploy the [`GaslessPaymentForwarder`](/fxrp/toke
 
 **Code Breakdown**
 
-1. Import necessary libraries.
-2. Define default relayer fee constant in FXRP base units.
-3. Get deployer signer and balance; log address and FLR balance.
-4. Deploy `GaslessPaymentForwarder` contract with the relayer fee (FXRP comes from the Flare Contract Registry) and wait for deployment, and get the contract address.
-5. Get FXRP token address and decimals from the forwarder.
-   Format fee for display.
-   Log deployment summary (network, contract, FXRP, owner, fee).
-6. Verify contract on block explorer.
-7. Run main function.
+1. Import Hardhat and TypeChain types.
+2. Get deployer signer and balance; log address and FLR balance.
+3. Deploy GaslessPaymentForwarder (no constructor args; FXRP from Flare Contract Registry); wait for deployment and get address.
+4. Get FXRP token address from the forwarder; log deployment summary (network, contract, FXRP, owner).
+5. Verify contract on block explorer (constructor arguments empty).
+6. Run main: exit 0 on success, exit 1 on error.
 
 </details>
 
@@ -181,8 +195,8 @@ Use `scripts/example-usage.ts` to run the example flow.
 **Code Breakdown**
 
 1. Import the necessary libraries.
-2. Read configuration from environment.
-3. Validate the configuration.
+2. Read configuration from the environment like the RPC URL, relayer URL, forwarder address, and user private key.
+3. Validate the configuration to ensure that the forwarder address and user private key are set.
 4. Create a provider and a wallet.
 5. Check user FXRP balance and allowance.
 6. Approve the forwarder to spend FXRP.
@@ -199,7 +213,7 @@ Create a `.env` file in your project root with the following variables:
 | Variable              | Description                                     |
 | --------------------- | ----------------------------------------------- |
 | `PRIVATE_KEY`         | Deployer private key (for deployment)           |
-| `RELAYER_PRIVATE_KEY` | Relayer wallet (pays gas, receives FXRP fees)   |
+| `RELAYER_PRIVATE_KEY` | Relayer wallet (pays gas)                       |
 | `USER_PRIVATE_KEY`    | User wallet for testing                         |
 | `FORWARDER_ADDRESS`   | Deployed contract address (set after deploy)    |
 | `RPC_URL`             | Flare network RPC (e.g. Coston2 testnet)        |
@@ -241,7 +255,6 @@ npx ts-node relayer/index.ts
 | ------ | ----------------- | ---------------------- |
 | POST   | `/execute`        | Execute single payment |
 | GET    | `/nonce/:address` | Get nonce for address  |
-| GET    | `/fee`            | Get the relayer fee    |
 
 ### Run the example Flow
 
@@ -283,13 +296,11 @@ Step 2: Approving FXRP for gasless payments...
 Step 3: Creating payment request...
  To: 0x5EEeaD99dFfeB32Fe96baad6554f6E009c8B348a
  Amount: 0.1 FXRP
- Fee: 0.01 FXRP
 
  Signed request created:
  From: 0x0d09ff7630588E05E2449aBD3dDD1D8d146bc5c2
  To: 0x5EEeaD99dFfeB32Fe96baad6554f6E009c8B348a
  Amount: 0.1 FXRP
- Fee: 0.01 FXRP
  Deadline: 2026-02-13T14:14:20.000Z
  Signature: 0x0cc5532b3c67eb0ef4...
 

docusaurus.config.ts

@@ -20,6 +20,7 @@ const config: Config = {
   onBrokenLinks: "throw",
 
   markdown: {
+    mermaid: true,
     hooks: {
       onBrokenMarkdownImages: "throw",
       onBrokenMarkdownLinks: "throw",
@@ -232,6 +233,7 @@ const config: Config = {
     },
   } satisfies Preset.ThemeConfig,
   themes: [
+    "@docusaurus/theme-mermaid",
     [
       require.resolve("@easyops-cn/docusaurus-search-local"),
       {

examples/developer-hub-javascript/fxrp-gasless/deploy.ts

@@ -6,18 +6,13 @@
 
 // 1. Import the necessary libraries
 import hre from "hardhat";
-import { erc20Abi } from "viem";
 import type { GaslessPaymentForwarder } from "../typechain-types/contracts/GaslessPaymentForwarder";
-import type { IERC20Metadata } from "../typechain-types/@openzeppelin/contracts/token/ERC20/extensions/IERC20Metadata";
-
-// 2. Define the default relayer fee (FXRP token base units)
-const DEFAULT_RELAYER_FEE = 10000n;
 
 async function main(): Promise<string> {
   const network = hre.network.name;
   console.log(`\nDeploying GaslessPaymentForwarder to ${network}...`);
 
-  // 3. Get deployer account and balance
+  // 2. Get deployer account and balance
   const [deployer] = await hre.ethers.getSigners();
   console.log(`Deployer address: ${deployer.address}`);
 
@@ -28,48 +23,33 @@ async function main(): Promise<string> {
   console.log(
     `  ContractRegistry.getAssetManagerFXRP() -> AssetManager.fAsset()`,
   );
-  console.log(`Relayer fee: ${DEFAULT_RELAYER_FEE} (base units)`);
 
-  // 4. Deploy the GaslessPaymentForwarder contract (FXRP fetched from registry)
+  // 3. Deploy the GaslessPaymentForwarder contract (FXRP fetched from registry)
   const GaslessPaymentForwarder = await hre.ethers.getContractFactory(
     "GaslessPaymentForwarder",
   );
-  const forwarder = (await GaslessPaymentForwarder.deploy(
-    DEFAULT_RELAYER_FEE,
-  )) as unknown as GaslessPaymentForwarder;
+  const forwarder =
+    (await GaslessPaymentForwarder.deploy()) as unknown as GaslessPaymentForwarder;
 
   await forwarder.waitForDeployment();
   const forwarderAddress = await forwarder.getAddress();
 
-  // 5. Get FXRP token address from forwarder (for display)
+  // 4. Get FXRP token address from forwarder (for display)
   const fxrpAddress = await forwarder.fxrp();
-  const fxrp = new hre.ethers.Contract(
-    fxrpAddress,
-    erc20Abi as unknown as string[],
-    hre.ethers.provider,
-  ) as unknown as IERC20Metadata;
-  const decimals = await fxrp.decimals();
-  const relayerFeeFormatted = hre.ethers.formatUnits(
-    DEFAULT_RELAYER_FEE,
-    decimals,
-  );
 
   console.log(`\nGaslessPaymentForwarder deployed to: ${forwarderAddress}`);
   console.log("\n--- Deployment Summary ---");
   console.log(`Network: ${network}`);
   console.log(`Contract: ${forwarderAddress}`);
   console.log(`FXRP Token: ${fxrpAddress}`);
   console.log(`Owner: ${deployer.address}`);
-  console.log(
-    `Relayer Fee: ${relayerFeeFormatted} FXRP (${DEFAULT_RELAYER_FEE} base units)`,
-  );
 
-  // 6. Verify contract on block explorer
+  // 5. Verify contract on block explorer
   console.log("\nVerifying contract...");
   try {
     await hre.run("verify:verify", {
       address: forwarderAddress,
-      constructorArguments: [DEFAULT_RELAYER_FEE.toString()],
+      constructorArguments: [],
     });
     console.log("Contract verified successfully.");
   } catch (err) {
@@ -79,15 +59,15 @@ async function main(): Promise<string> {
     } else {
       console.warn("Verification failed:", msg);
       console.log(
-        `\nTo verify manually: npx hardhat verify --network ${network} ${forwarderAddress} "${DEFAULT_RELAYER_FEE}"`,
+        `\nTo verify manually: npx hardhat verify --network ${network} ${forwarderAddress}`,
       );
     }
   }
 
   return forwarderAddress;
 }
 
-// 7. Main entry point for the deployment script
+// 6. Main entry point for the deployment script
 main()
   .then(() => process.exit(0))
   .catch((error) => {

examples/developer-hub-javascript/fxrp-gasless/example-usage.ts

@@ -88,26 +88,22 @@ async function main(): Promise<void> {
     process.env.RECIPIENT_ADDRESS ||
     "0x0000000000000000000000000000000000000001";
   const amountFXRP = "0.1"; // 0.1 FXRP
-  const feeFXRP = "0.01"; // 0.01 FXRP relayer fee
 
   console.log(`\nStep 3: Creating payment request...`);
   console.log(`  To: ${recipientAddress}`);
   console.log(`  Amount: ${amountFXRP} FXRP`);
-  console.log(`  Fee: ${feeFXRP} FXRP`);
 
   const paymentRequest = await createPaymentRequest(
     wallet,
     FORWARDER_ADDRESS,
     recipientAddress,
     amountFXRP,
-    feeFXRP,
   );
 
   console.log(`\n  Signed request created:`);
   console.log(`    From: ${paymentRequest.from}`);
   console.log(`    To: ${paymentRequest.to}`);
   console.log(`    Amount: ${paymentRequest.meta.amountFormatted}`);
-  console.log(`    Fee: ${paymentRequest.meta.feeFormatted}`);
   console.log(
     `    Deadline: ${new Date(paymentRequest.deadline * 1000).toISOString()}`,
   );