docs: update test wallet info (#513)

* docs: fixes #509

* docs: feedback updates

docs/src/content/docs/snippets/before-you-begin.mdx

@@ -11,34 +11,105 @@ The test wallet lets you create developer keys and wallet accounts, funded with
 ## Create an account on the test wallet
 
 1. Go to <LinkOut href="https://wallet.interledger-test.dev">wallet.interledger-test.dev</LinkOut>.
-2. Click **Create an account** at the bottom right of the screen.
-3. Enter your e-mail address, a password, confirm the password and click the arrowhead.
-4. Go to your inbox and look for an e-mail sent by `[email protected]` with the subject "[Test.Wallet] Verify your account" and click **Confirm my email address.** <br />
+2. Click **Create account** at the bottom-right of the screen.
+3. Enter your e-mail address, a strong password, then confirm the password. Click the arrowhead.
+4. Go to your inbox and look for an e-mail sent by `[email protected]` with the subject "[Test.Wallet] Verify your account". Click **Confirm my email address.**
 5. Click **Login to your account** at the email verification screen.
 6. Log in with your credentials.
-7. Complete the KYC steps, and liveness check. The only real information you need to share is your email address and phone number. All other information can be fictitious. If a photo is required, you can upload anything as long as it's not blank.
+7. Complete the Know Your Customer (KYC) steps and liveness check. The only real information you need to share is your email address and phone number. All other information can be fictitious. If a photo is required, you can upload anything as long as it's not blank. A face scan may also be required.
+   :::note[Why are there so many KYC steps?]
+   The Interledger test wallet environment is running on a GateHub pre-production environment. The pre-production environment mimics the production environment, including the <LinkOut href="https://support.gatehub.net/hc/en-us/articles/360021131234-KYC-requirements-for-account-verification">KYC steps</LinkOut>. Remember that most of your personal details can be fake, including your identity document.
+   :::
 
 You're now ready to create a test wallet and add money to it!
 
-## Create a wallet account
+## Create and fund a wallet account
 
-1. You can create a wallet account by clicking **New Account.**
-2. Enter a name for the account, choose an asset code (the currency) from the drop-down menu and click **Create account.**
-3. Click **View Account.**
-4. Click **Add payment pointer.**
-5. Enter a Payment Pointer name and a Public name and then click **Create.**
-6. Click **Deposit**.
-7. Enter an amount, then click **Deposit**.
+1. Click **New account** on the Interledger Wallet dashboard.
+   <img
+     src='/img/snippets/tw-dashboard.png'
+     alt='Test wallet dashboard screen showing the new account option'
+     class='img-outline'
+     style='max-width:500px'
+   />
+2. Enter any account name, select an asset (currency), then click **Create account**.
+   <img
+     src='/img/snippets/tw-create-acct.png'
+     alt='Create a new account screen with account name field and asset drop-down menu'
+     class='img-outline'
+     style='max-width:400px'
+   />
+3. Click **Close**, then click **Accounts** from the left nav bar.
+4. Select the account you just created.
+5. Click **Deposit**.
+   <img
+     src='/img/snippets/tw-acct-options.png'
+     alt='Account options screen showing buttons for deposit and add payment pointer'
+     class='img-outline'
+     style='max-width:400px'
+   />
+6. Enter any amount to deposit into the account, then click **Deposit**.
+   <img
+     src='/img/snippets/tw-deposit.png'
+     alt='Deposit to account screen with amount field'
+     class='img-outline'
+     style='max-width:400px'
+   />
 
-Congratulations, you now have a funded test wallet!
+You now have a funded test wallet!
+
+## Add a payment pointer to your wallet account
+
+1. Select the account from the Test Wallet dashboard.
+2. Click **Add payment pointer**.
+   <img
+     src='/img/snippets/tw-acct-options.png'
+     alt='Account options screen showing buttons for add payment pointer and deposit'
+     class='img-outline'
+     style='max-width:400px'
+   />
+3. Enter a **Payment Pointer name** and a **Public name** of your choosing.
+   <img
+     src='/img/snippets/tw-create-payment-pointer.png'
+     alt='Create payment pointer screen with fields for payment pointer name and public name'
+     class='img-outline'
+     style='max-width:400px'
+   />
+4. Click **Create**. Your account now has a payment pointer.
 
 ## Obtain a public-private key pair and key ID
 
 Before you can initialize an authenticated Open Payments client, you must obtain a public-private key pair and a key ID.
 
-1. Sign in to <LinkOut href='https://wallet.interledger-test.dev/'>wallet.interledger-test.dev</LinkOut>, if not already signed in.
-2. Select **Settings > Developer Keys**.
-3. Expand the drop-down menu for your wallet account.
-4. Click **Generate public & private key**. Your key ID and public key appear on the site. A private key file named `private.key` automatically downloads to your machine.
+1. Click **Settings** in the left sidebar on the dashboard.
+2. Click the **Developer Keys** tab.
+3. Expand the menu for your wallet account.
+   <img
+     src='/img/snippets/tw-dev-keys-tab.png'
+     alt='Developer keys tab with account expanded, showing the upload key and the generate public and private key buttons'
+     class='img-outline'
+     style='max-width:400px'
+   />
+4. Click **Generate public & private key**.
+5. Enter any **nickname** for the key pair, then click **Generate keys**. A file named `private.key` automatically downloads to your machine
+   <img
+     src='/img/snippets/tw-generate-key-pair.png'
+     alt='Generate public and private key screen with nickname field'
+     class='img-outline'
+     style='max-width:400px'
+   />
+   <img
+     src='/img/snippets/tw-key-pair-success.png'
+     alt='Key pair generation success screen'
+     class='img-outline'
+     style='max-width:400px'
+   />
+6. Click **Close**. Your key ID appears on the screen, along with a **Show/Hide** option for your public key.
+   <img
+     src='/img/snippets/tw-key-id.png'
+     alt='Developer keys tab with account expanded, showing the newly generated key id and an option to show the public key'
+     class='img-outline'
+     style='max-width:400px'
+   />
 
 You can now use your keys and payment pointer to initialize an authenticated Open Payments client.