Merge pull request #5036 from ethereum-optimism/willc/atst-cli-gif

feat(atst): Add a gif of the cli to the readme

packages/atst/README.md

@@ -38,7 +38,7 @@ The typescript sdk provides a clean [wagmi](https://wagmi.sh/) based interface f
 
 The cli provides a convenient cli for interacting with the attestation station contract
 
-TODO put a gif here of using it
+![preview](./assets/preview.gif)
 
 ## React API
 

packages/atst/assets/README.md

+# Assets
+
+## preview.gif
+
+A gif preview of using the cli
+
+## preview.tape
+
+The script to record the preview.gif with [vhs](https://github.com/charmbracelet/vhs)
+
+To execute:
+
+1. [Download vhs](https://github.com/charmbracelet/vhs)
+
+2. Install the local version of atst
+
+```bash
+npm uninstall @eth-optimism/atst -g && npm i . -g && atst --version
+```
+
+3. Start anvil
+
+```bash
+anvil --fork-url https://mainnet.optimism.io
+```
+
+4. Record tape vhs < assets/preview.tape
+
+```bash
+vhs < assets/preview.tape
+```
+
+5. The tape will be outputted to `assets/preview.gif`

packages/atst/assets/preview.tape

+# VHS File source
+# https://github.com/charmbracelet/vhs
+#
+# Output:
+#   Output <path>.gif               Create a GIF output at the given <path>
+#   Output <path>.mp4               Create an MP4 output at the given <path>
+#   Output <path>.webm              Create a WebM output at the given <path>
+#
+# Settings:
+#   Set FontSize <number>           Set the font size of the terminal
+#   Set FontFamily <string>         Set the font family of the terminal
+#   Set Height <number>             Set the height of the terminal
+#   Set Width <number>              Set the width of the terminal
+#   Set LetterSpacing <float>       Set the font letter spacing (tracking)
+#   Set LineHeight <float>          Set the font line height
+#   Set Theme <string>              Set the theme of the terminal (JSON)
+#   Set Padding <number>            Set the padding of the terminal
+#   Set Framerate <number>          Set the framerate of the recording
+#   Set PlaybackSpeed <float>       Set the playback speed of the recording
+#
+# Sleep:
+#   Sleep <time>                    Sleep for a set amount of <time> in seconds
+#
+# Type:
+#   Type[@<time>] "<characters>"    Type <characters> into the terminal with a
+#                                   <time> delay between each character
+#
+# Keys:
+#   Backspace[@<time>] [number]     Press the Backspace key
+#   Down[@<time>] [number]          Press the Down key
+#   Enter[@<time>] [number]         Press the Enter key
+#   Space[@<time>] [number]         Press the Space key
+#   Tab[@<time>] [number]           Press the Tab key
+#   Left[@<time>] [number]          Press the Left Arrow key
+#   Right[@<time>] [number]         Press the Right Arrow key
+#   Up[@<time>] [number]            Press the Up Arrow key
+#   Down[@<time>] [number]          Press the Down Arrow key
+#   Ctrl+<key>                      Press the Control key + <key> (e.g. Ctrl+C)
+#
+# Display:
+#   Hide                            Hide the subsequent commands from the output
+#   Show                            Show the subsequent commands in the output
+
+Output assets/preview.gif
+
+Set FontSize 16
+Set Width 1920
+Set Height 1080
+
+Type "atst write --key attitude --about 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 --value 'feeling very optimistic' --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80 --rpc-url http://localhost:8545"
+Enter
+Sleep 2000ms
+
+Type "atst read --key attitude --about 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 --creator 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 --rpc-url http://localhost:8545"
+Enter
+Sleep 2000ms
+
+Type "atst write --key impress-level --about 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 --value 10 --private-key 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80 --rpc-url http://localhost:8545"
+Enter
+Sleep 2000ms
+
+Type "atst read --key impress-level --about 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 --creator 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 --rpc-url http://localhost:8545"
+Enter
+Sleep 2000ms
+
+Type "atst --help"
+Enter
+Sleep 2000ms

packages/atst/docs/cli.md

 # atst cli docs
 
+![preview](../assets/preview.gif)
+
 ## Installation
 
 ```bash