fix: include Keplr legible offer dialog

main/guides/getting-started/README.md

@@ -1,13 +1,17 @@
 # Getting Started
+
 In these steps you will be getting your first Agoric dapp up and running!
 
 ![Your first Agoric dapp](./assets/new_002_small2.png)
 
 ## Your First Agoric Dapp - Offer Up
+
 The Offer Up Dapp allows users to view all listed items up for sale in a marketplace. The Dapp shows 3 items by default (maps, potions, and scrolls). As a user you are able to choose up to 3 total items (in any combination). You can then create an offer for an amount of at least 0.25 IST. Once you sign the transaction, you will see the 3 items in your wallet and your wallet amount deducted by the Offer amount.
 
 ## How to Get Help
-Before getting started, there are some resources you might want to keep handy in case you get stuck, have questions, or are curious about any of the components. Getting in contact with us is easy! 
+
+Before getting started, there are some resources you might want to keep handy in case you get stuck, have questions, or are curious about any of the components. Getting in contact with us is easy!
+
 - Join us for our Weekly [Developer Office Hours](https://github.com/Agoric/agoric-sdk/wiki/Office-Hours)
 - Come chat with us and other developers on the Official [Agoric Discord](https://agoric.com/discord)
 - Search and post [Q & A](https://github.com/Agoric/agoric-sdk/discussions/categories/q-a) in [agoric-sdk discussions](https://github.com/Agoric/agoric-sdk/discussions)
@@ -23,12 +27,15 @@ As you're going through this tutorial it may be helpful to watch this video walk
 :::
 
 ## Platform Requirements
+
 Currently Agoric supports macOS and Linux (including [Windows Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/about)). This tutorial is based on an installation of [Ubuntu 22.04 LTS](https://ubuntu.com/download/desktop). If you're using a different operating system, some variation may be required.
 
 ## Installing Prerequisites
+
 In this section you'll be installing prerequisite components into your environment. If you're working with your own environment rather than using a fresh Ubuntu install, you may already have some or all of these components already installed.
 
 ### Installing NVM and Node
+
 <details>
 <summary>Installing NVM and Node on Ubuntu</summary>
 
@@ -37,7 +44,9 @@ At this point the Node Version Manager (NVM) utility will be installed. `nvm` ma
 ```sh
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
 ```
+
 or
+
 ```sh
 wget -O- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
 ```
@@ -53,8 +62,8 @@ Finally, install Node with the command:
 ```sh
 nvm install v18.16.0
 ```
-</details>
 
+</details>
 
 ### Installing Yarn
 
@@ -72,8 +81,8 @@ Now run the `yarn --version` command.
 ```sh
 yarn --version
 ```
-</details>
 
+</details>
 
 ### Installing Docker
 
@@ -98,6 +107,7 @@ echo \
   sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
 sudo apt-get update
 ```
+
 Now you can install Docker!
 
 ```sh
@@ -146,6 +156,7 @@ Share images, automate workflows, and more with a free Docker ID:
 For more examples and ideas, visit:
  https://docs.docker.com/get-started/
 ```
+
 </details>
 
 ## Creating Your Dapp From a Template
@@ -156,8 +167,8 @@ Now you'll use yarn to pull down the sample dapp. The sample dapp will be placed
 yarn create @agoric/dapp --dapp-template dapp-offer-up demo
 ```
 
-
 ## Install Dapp Dependencies
+
 Now navigate to the `demo` directory and run the `yarn install` command to install any solution dependencies.
 
 Downloading all the required dependencies may take several minutes. The UI depends on the React framework, and the contract depends on the Agoric framework. The packages in this project also have development dependencies for testing, code formatting, and static analysis.
@@ -181,6 +192,7 @@ yarn install
   </details>
 
 ## Starting a Local Agoric Blockchain
+
 Now go ahead and start a local Agoric blockchain using the `yarn start` command. Note: This container is several gigabytes in size and may take a few minutes to download.
 
 ```sh
@@ -214,8 +226,8 @@ These are artifacts of replaying historical events.
 
 :::
 
-
 ## Starting the Dapp Smart Contract
+
 Use control-C to exit the logs, then start the smart contract. Starting the contract may take a minute or two, so after running this command proceed to the next step.
 
 ```sh
@@ -234,24 +246,41 @@ This `start:contract` script will do a number of things that we will cover in mo
 
 While it's doing all that...
 
-## Installing Keplr Wallet
-Next, you'll install the Keplr wallet plug-in. Open up your browser and navigate to [https://www.keplr.app/download](https://www.keplr.app/download). Select the version appropriate to your browser. 
+## Setting up a Keplr Wallet Demo Account
+
+Next, ensure you have the [Keplr wallet plug-in](https://www.keplr.app/download) installed.
+
+<details><summary>Installing Keplr Wallet</summary>
+
+Open up your browser and navigate to [https://www.keplr.app/download](https://www.keplr.app/download). Select the version appropriate to your browser.
 
 ![Installing the Keplr Wallet Plug-In](./assets/037.png)
 
-Once the plug-in has been installed, open Keplr and select the option to "Import an existing wallet". Then choose the option to "Use recovery phrase or private key".
+</details>
+
+::: warning
+
+Remember, this is just a demo. In real-world scenarios ensuring proper security around mnemonic phrases is critical!
+
+- For any mnemonic phrase you use to secure your own assets, **take care to keep it strictly confidential!** The mnemonic here is only for testing.
+- Using a **separate browser profile** is a good way to avoid accidentally using the wrong account when testing vs. with real assets.
+
+:::
+
+Once the plug-in has been installed, open Keplr and select the option to **Import an existing wallet**. Then choose the option to **Use recovery phrase or private key**.
 
-![Choose the "Import an Existing Wallet" option](./assets/038.png)
+<img alt='Choose the "Import an Existing Wallet" option' src="./assets/038.png"
+ width=300 />
 
-![Choose the "Use recovery phrase or private key" option](./assets/040.png)
+<img alt='Choose the "Use recovery phrase or private key" option' src="./assets/040.png"
+  width="500" />
 
-To import your wallet, you'll need to copy your mnemonic phrase into Keplr. You can find this series of 24 words back on your terminal window. Copy from this window into your Keplr wallet, then hit the "Import" button. 
+To import your wallet, you'll need to copy your mnemonic phrase into Keplr. You can find this series of 24 words back on your terminal window. Copy from this window into your Keplr wallet, then hit the "Import" button.
 
-Please note that your phrase might not be the same as the one shown in this guide! Remember, this is just a demo. In real-world scenarios ensuring proper security around mnemonic phrases is critical!
-- For any mnemonic phrase you use to secure your own assets, **take care to keep it strictly confidential!** The mnemonic here is only for testing. 
-- Using a **separate browser profile** is a good way to avoid accidentally using the wrong account when testing vs. with real assets. 
+Please note that your phrase might not be the same as the one shown in this guide!
 
 Note the mnemonic phrase in the output below:
+
 ```
 waiting for block...
 1
@@ -273,17 +302,20 @@ make: Leaving directory '/workspace/contract'
 Done in 34.95s.
 ```
 
-![Pasting the mnemonic phrase](./assets/041.png)
+<img alt="Pasting the mnemonic phrase" src="./assets/041.png" width="400" />
 
-Give your new wallet a name and a password.
+<details><summary>As usual, give your new wallet a name and a password.</summary>
 
 ![Name the newly imported wallet](./assets/042.png)
 
 Click "Save".
 
 ![Save](./assets/043.png)
 
+</details>
+
 ## Starting the Dapp
+
 Start the UI for the sample dapp.
 
 ```sh
@@ -296,14 +328,21 @@ Note the localhost link that appears on your terminal window. Open this link in
 
 ![Open the link in your browser](./assets/new_002.png)
 
-From the browser UI, click the "Connect Wallet" button to connect your Keplr wallet. You will be asked to approve this connection.
+From the browser UI, click the "Connect Wallet" button to connect your Keplr wallet.
+
+<details><summary>Adding Agoric local to Keplr</summary>
+
+Like any [non-native chain](https://chains.keplr.app/), the first time you use the local Agoric blockchain, Keplr will ask you to approve it:
 
 ![Connecting your wallet](./assets/new_003.png)
 
+</details>
+
 ## Making an Offer
+
 Once your wallet is connected, click on the "Make Offer" button to purchase 3 properties. Approve the transaction in your Keplr wallet.
 
-![Making an offer](./assets/new_004.png)
+![Making an offer](./assets/keplr-legible-offer.png)
 
 When the transaction is complete you will notice some IST has been debited from your wallet, and you are the owner of three new properties.