feat(docs): add FSA visual resources (#1205)

Author: nikerzetic-aflabs

docs/smart-accounts/1-overview.mdx

@@ -19,6 +19,7 @@ unlisted: false
 
 import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import YouTubeEmbed from "@site/src/components/YouTubeEmbed";
 
 The Flare Smart Accounts is an account abstraction that allows XRPL users to perform actions on the Flare chain without owning any FLR token.
 Each XRPL address is assigned a unique **smart account** on the Flare chain, which only it can control.
@@ -34,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.
@@ -235,3 +244,11 @@ Depending on the value of the leading byte, a different function on the smart ac
 ## 3. Actions on Flare
 
 The XRPL user's smart account performs the actions in the instructions.
+This can be any of the instructions listed above, reserving collateral for minting FXRP, transferring FXRP to another address, redeeming FXRP, depositing it into a vault ...
+Furthermore, custom instructions can be executed - instructions for making any function call on Flare -, thought that requires an additional step for it to work (see the [Custom Instruction guide](/smart-accounts/3-custom-instruction.mdx))
+
+## Video Tutorials
+
+<YouTubeEmbed videoId="LZ6WI9Zvrn4"></YouTubeEmbed>
+
+<YouTubeEmbed videoId="txYLJV9cHzg"></YouTubeEmbed>

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"),
+  }}
+/>

docs/smart-accounts/guides/typescript-viem/01-state-lookup.mdx

@@ -18,6 +18,7 @@ keywords:
 
 import CodeBlock from "@theme/CodeBlock";
 import StateLookupScript from "!!raw-loader!/examples/developer-hub-javascript/smart-accounts/state-lookup.ts";
+import YouTubeEmbed from "@site/src/components/YouTubeEmbed";
 
 In this guide, you will learn how to get the following using the Viem TypeScript library:
 
@@ -293,3 +294,7 @@ export async function getAgentVaults(): Promise<AgentVault[]> {
   return vaults;
 }
 ```
+
+## Video Tutorial
+
+<YouTubeEmbed videoId="txYLJV9cHzg"></YouTubeEmbed>