Add gifs to Bridge UI Docs (#99)

Added `gif`s to the bridge ui docs to better illustrate the bridging and
withdrawal flows.

docs/.vitepress/config.mts

@@ -51,6 +51,9 @@ export default defineConfig({
       { icon: "github", link: "https://github.com/astriaorg" },
       { icon: "twitter", link: "https://twitter.com/AstriaOrg" },
     ],
+  },
+  vite: {
+    assetsInclude: ['**/*.mp4']
   }
 })
 
@@ -158,7 +161,7 @@ function sidebar() {
         {
           text: 'APIs',
           link: '/developer/apis.md',
-        },
+        }
       ]
     },
     {

docs/bridging/bridge-ui.md

@@ -1,9 +1,20 @@
 <!-- markdownlint-disable MD041 MD033 -->
 
 <script setup>
+import { onMounted, ref } from 'vue';
 import { siteConfig } from '../config.js'
-
 const bridge = siteConfig.flame
+const videoRefs = ref([]);
+
+// pause all videos on page load
+onMounted(() => {
+  videoRefs.value.forEach((video) => {
+    if (video) {
+      video.pause();
+    }
+  });
+});
+
 </script>
 
 # Use the Astria Bridge UI
@@ -40,16 +51,48 @@ Wallet](https://www.coinbase.com/wallet).
 
 ## Bridge to Flame
 
-1. Confirm that the Bridge UI is set to **Deposit**.
-2. Select your desired starting network and connect your Keplr wallet
-3. Select Flame as the destination and connect your EVM wallet.
-4. Set an amount.
-5. Click `Deposit`.
+### 1. Go to the [Astria Bridge UI](https://bridge.astria.org/)
+
+### 2. Confirm that the Bridge UI is set to **Deposit**
+
+### 3. Select your desired starting network and connect your Keplr wallet
+
+Celestia is used in this example.
+
+<video src="./assets/bridge-clip-1-select-starting-wallet.mp4" controls muted loop style="max-width: 100%;"></video>
+
+### 4. Select Flame as the destination and connect your EVM wallet
+
+<video src="./assets/bridge-clip-2-select-evm-wallet.mp4" controls muted loop style="max-width: 100%;"></video>
+
+### 5. Confirm Flame is selected in Metamask
+
+If Flame is not present in you wallet, you can [add it
+here](../flame/flame-mainnet-alpha#adding-to-metamask).
+
+<video src="./assets/bridge-clip-3-confirm-flame-in-evm-wallet.mp4" controls muted loop style="max-width: 100%;"></video>
+
+### 6. Set a deposit amount and approve the transaction
+
+<video src="./assets/bridge-clip-4-set-deposit-amount.mp4" controls muted loop style="max-width: 100%;"></video>
 
 ## Withdraw from Flame
 
-1. Confirm that the Bridge UI is set to **Withdraw**.
-2. Select Flame as the starting network and connect your EVM wallet.
-3. Select your desired destination network and connect your Keplr wallet.
-4. Set an amount.
-5. Click `Withdraw`.
+### 1. Go to the [Astria Bridge UI](https://bridge.astria.org/)
+
+### 2. Set the Bridge UI to **Withdraw** and Connect your EVM Wallet
+
+Metamask is used in this example. If Flame is not present in your wallet, you
+can [add it here](../flame/flame-mainnet-alpha#adding-to-metamask).
+
+<video src="./assets/withdrawal-clip-1-set-starting-wallet.mp4" controls muted loop style="max-width: 100%;"></video>
+
+### 3. Select your desired destination network and connect your Keplr wallet
+
+Celestia is used in this example.
+
+<video src="./assets/withdrawal-clip-2-select-keplr-wallet.mp4" controls muted loop style="max-width: 100%;"></video>
+
+### 4. Set a withdrawal amount and approve the transaction
+
+<video src="./assets/withdrawal-clip-3-approve-tx.mp4" controls muted loop style="max-width: 100%;"></video>

docs/developer/astria-cli/astria-cli-commands.md

@@ -341,7 +341,7 @@ astria-cli sequencer transfer [OPTIONS] --amount <AMOUNT> --private-key <PRIVATE
 
 Distributed key generation command.
 
-### Usage 
+### Usage
 
 ```bash
 astria-cli sequencer threshold dkg [OPTIONS] --index <INDEX> --min-signers <MIN_SIGNERS> --max-signers <MAX_SIGNERS> --secret-key-package-path <SECRET_KEY_PACKAGE_PATH> --public-key-package-path <PUBLIC_KEY_PACKAGE_PATH>

docs/developer/astria-go/astria-go-commands.md

@@ -238,13 +238,13 @@ astria-go sequencer balance [address] [flags]
 |---|---|---|---|
 | `--json` | bool | `ASTRIA_GO_JSON` | Output an account's balances in JSON format. |
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to retrieve the balance from. (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to retrieve the balance from. |
 
 ## `sequencer block`
 
 Get sequencer block at specified height.
 
-### Usage 
+### Usage
 
 ```bash
 astria-go sequencer block [height] [flags]
@@ -256,7 +256,7 @@ astria-go sequencer block [height] [flags]
 |---|---|---|---|
 | `--json` | bool | `ASTRIA_GO_JSON` | Output an account's balances in JSON format. |
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to retrieve the balance from. (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to retrieve the balance from. |
 
 ## `sequencer blockheight`
 
@@ -274,7 +274,7 @@ astria-go sequencer blockheight [flags]
 |---|---|---|---|
 | `--json` | bool | `ASTRIA_GO_JSON` | Output an account's balances in JSON format. |
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to retrieve the balance from. (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to retrieve the balance from. |
 
 ## `sequencer bridge`
 
@@ -309,7 +309,7 @@ astria-go sequencer bridge init [rollup-id] [flags]
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
 | `--privkey` | string | `ASTRIA_GO_PRIVKEY` | The private key of the bridge account. |
 | `-c`, `--sequencer-chain-id` | string | `ASTRIA_GO_SEQUENCER_CHAIN_ID` | The chain ID of the sequencer. (default "dawn-1") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account. |
 | `--sudo-address` | string | `ASTRIA_GO_SUDO_ADDRESS` | Set the sudo address to use for the bridge account. The address of the sender is used if this is not set. |
 | `--withdrawer-address` | string | `ASTRIA_GO_WITHDRAWER_ADDRESS` | Set the withdrawer address to use for the bridge account. The address of the sender is used if this is not set. |
 
@@ -336,7 +336,7 @@ astria-go sequencer bridge lock [address] [amount] [destination-chain-address] [
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
 | `--privkey` | string | `ASTRIA_GO_PRIVKEY` | The private key of the bridge account. |
 | `-c`, `--sequencer-chain-id` | string | `ASTRIA_GO_SEQUENCER_CHAIN_ID` | The chain ID of the sequencer. (default "dawn-1") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account. |
 | `--sudo-address` | string | `ASTRIA_GO_SUDO_ADDRESS` | Set the sudo address to use for the bridge account. The address of the sender is used if this is not set. |
 | `--withdrawer-address` | string | `ASTRIA_GO_WITHDRAWER_ADDRESS` | Set the withdrawer address to use for the bridge account. The address of the sender is used if this is not set. |
 
@@ -394,7 +394,7 @@ Ibc Transfer tokens from a sequencer account to another chain account.
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
 | `--privkey` | string | `ASTRIA_GO_PRIVKEY` | The private key of the bridge account. |
 | `-c`, `--sequencer-chain-id` | string | `ASTRIA_GO_SEQUENCER_CHAIN_ID` | The chain ID of the sequencer. (default "dawn-1") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account. |
 
 ## `sequencer nonce`
 
@@ -412,7 +412,7 @@ astria-go sequencer nonce [address] [flags]
 |---|---|---|---|
 | `--json` | bool | `ASTRIA_GO_JSON` | Output in JSON format. |
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer. (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer. |
 
 ## `sequencer setkey`
 
@@ -447,4 +447,4 @@ astria-go sequencer transfer [amount] [to] [flags]
 | `--network` | string | `ASTRIA_GO_NETWORK` | Configure the values to target a specific network. (default "dawn") |
 | `--privkey` | string | `ASTRIA_GO_PRIVKEY` | The private key of the bridge account. |
 | `-c`, `--sequencer-chain-id` | string | `ASTRIA_GO_SEQUENCER_CHAIN_ID` | The chain ID of the sequencer. (default "dawn-1") |
-| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account (default "https://rpc.sequencer.dawn-1.astria.org") |
+| `-u`, `--sequencer-url` | string | `ASTRIA_GO_SEQUENCER_URL` | The URL of the sequencer to init bridge account. |

docs/tutorials/run-local-rollup-and-sequencer.md

@@ -29,9 +29,9 @@ Create a new genesis account for your Geth rollup:
 cast w new
 ```
 
-Open the `dev/geth-genesis-local.json` file in the `astria-geth` repo and update the
-`"alloc"` account with the new address you just created, as well as updating the
-`"chainId"` and `"astriaRollupName"` to something of your choosing:
+Open the `dev/geth-genesis-local.json` file in the `astria-geth` repo and update
+the `"alloc"` account with the new address you just created, as well as updating
+the `"chainId"` and `"astriaRollupName"` to something of your choosing:
 
 ```json{4-5,8}
 {