feat(docs): add fsa diagrams

Author: nikerzetic-aflabs

docs/smart-accounts/1-overview.mdx

@@ -35,6 +35,14 @@ The workflow for Flare Smart Accounts is comprised of the following steps.
    It then calls the `executeTransaction` function on the `MasterAccountController` contract, with the `Payment` proof and the XRPL address that made the transaction.
 3. The XRPL user's smart account performs the actions given in the instructions.
 
+<ThemedImage
+  alt="Flare smart accounts workflow"
+  sources={{
+    light: useBaseUrl("img/docs/smart-accounts/fsa-workflow-light.png"),
+    dark: useBaseUrl("img/docs/smart-accounts/fsa-workflow-dark.png"),
+  }}
+/>
+
 ## 1. Instructions on XRPL
 
 The Flare Smart Accounts allow XRPL users to perform actions on the Flare chain through instructions on the XRPL.

docs/smart-accounts/3-custom-instruction.mdx

@@ -132,3 +132,13 @@ To obtain the instruction that can be sent as the memo of an XRPL Payment transa
 First, we remove the initial two bytes from this hash.
 Next, we prepend the hexadecimal value `ff` followed by the `walletId`.
 This is the encoded custom instruction.
+
+<ThemedImage
+  alt="Flare smart accounts custom instruction workflow"
+  sources={{
+    light: useBaseUrl(
+      "img/docs/smart-accounts/fsa-developer-workflow-light.png",
+    ),
+    dark: useBaseUrl("img/docs/smart-accounts/fsa-developer-workflow-dark.png"),
+  }}
+/>