Create explainer-how-to-start-a-local-chain.md (#1066)

* Create explainer-how-to-start-a-local-chain.md

* Create explainer-deploying-a-smart-contact.md

* Create explainer-how-to-make-an-offer.md

* Added explainers to navigation for Getting Started

main/.vitepress/config.mjs

@@ -127,6 +127,20 @@ export default defineConfig({
             {
               text: 'Getting Started',
               link: '/guides/getting-started/',
+              items: [
+                {
+                  text: 'Takeaway 1: Starting a Local Chain',
+                  link: '/guides/getting-started/explainer-how-to-start-a-local-chain',
+                },
+                {
+                  text: 'Takeaway 2: Deploying a Smart Contract',
+                  link: '/guides/getting-started/explainer-deploying-a-smart-contact',
+                },
+                {
+                  text: 'Takeaway 3: Making an Offer',
+                  link: '/guides/getting-started/explainer-how-to-make-an-offer',
+                },
+              ],             
             },
             {
               text: 'Smart Contract Basics',

main/guides/getting-started/explainer-deploying-a-smart-contact.md

@@ -0,0 +1,56 @@
+# Deploying a Smart Contact
+In the `dapp-offer-up` tutorial you just went through you saw how quick and easy it was to deploy a contact on Agoric using the `yarn start:contract` command. Let's take a look at how this command works and what's going on behind the scenes.
+
+## How it Works
+Running the `yarn start:contract` command in the tutorial runs a script which accomplishes several things:
+- The script bundled the contract with the `agoric run` command
+- The script collected some ATOM with the `agd tx bank send` command
+- The script then used the ATOM to open a vault. This vault was used to mint enough IST to pay to install the bundles on chain with `agops vaults open` command
+- The script then installed the bundles on chain with the `agd tx swingset install-bundle` command
+- From there the script collected enough BLD to pay for a governance deposit with the `agd tx bank send` command
+- Next, the script made a governance proposal to start the contract with the `agd tx gov submit-proposal swingset-core-eval` command
+- Finally, the script voted for the proposal and waited for the proposal to pass.
+
+Once again, we can reference the project's `package.json` file to learn a bit more about what `yarn start:contract` is doing behind the scenes.
+```json
+  "scripts": {
+    "start:docker": "cd contract && docker compose up -d",
+    "docker:logs": "cd contract; docker compose logs --tail 200 -f",
+    "docker:bash": "cd contract; docker compose exec agd bash",
+    "docker:make": "cd contract; docker compose exec agd make -C /workspace/contract",
+    "make:help": "make -C contract list",
+    "start:contract": "cd contract && yarn start",
+    "print-key": "yarn docker:make print-acct",
+    "start:ui": "cd ui && yarn dev",
+    "lint": "yarn workspaces run lint",
+    "test": "yarn workspaces run test",
+    "test:e2e": "yarn workspace offer-up-ui test:e2e",
+    "build": "yarn workspaces run build"
+  }
+```
+
+Note the calling the `yarn start:contract` command is the same as running `yarn start` from the contract directory. We can look at `package.json` from the `contract` directory to learn even more:
+```json
+ "scripts": {
+    "start:docker": "docker compose up -d",
+    "docker:logs": "docker compose logs --tail 200 -f",
+    "docker:bash": "docker compose exec agd bash",
+    "docker:make": "docker compose exec agd make -C /workspace/contract",
+    "make:help": "make list",
+    "start": "yarn docker:make clean start-contract print-key",
+    "build": "agoric run scripts/build-contract-deployer.js",
+    "test": "ava --verbose",
+    "lint": "eslint '**/*.js'",
+    "lint:fix": "eslint --fix '**/*.js'"
+  },
+```
+
+In the json snippet above note that the `start` command is running `yarn docker:make clean start-contract print-key`. 
+
+::: tip Video Walkthrough
+
+As you're going through this explainer it may be helpful to watch this video walkthrough.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/pWZUHJqj_Lo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+:::

main/guides/getting-started/explainer-how-to-make-an-offer.md

@@ -0,0 +1,92 @@
+# Making an Offer
+As you saw in the `dapp-offer-up` tutorial you could use the dapp UI to make an offer on up to three items. Let's take a look at how making offers works in this dapp.
+
+## How It Works
+We can see how the offer is made in this application by taking a look at the `App.tsx` file located under `ui/src`. Note the `makeOffer` function which handles making an offer.
+Note that each offer must specify both a 'give' (what is being offered for the exchange, in this case some IST) and a 'want' (what the buyer wants to trade for, in this case some maps, potions, and scrolls).
+```js
+const makeOffer = (giveValue: bigint, wantChoices: Record<string, bigint>) => {
+  const { wallet, offerUpInstance, brands } = useAppStore.getState();
+  if (!offerUpInstance) throw Error('no contract instance');
+  if (!(brands && brands.IST && brands.Item))
+    throw Error('brands not available');
+
+  const value = makeCopyBag(entries(wantChoices));
+  const want = { Items: { brand: brands.Item, value } };
+  const give = { Price: { brand: brands.IST, value: giveValue } };
+
+  wallet?.makeOffer(
+    {
+      source: 'contract',
+      instance: offerUpInstance,
+      publicInvitationMaker: 'makeTradeInvitation',
+    },
+    { give, want },
+    undefined,
+    (update: { status: string; data?: unknown }) => {
+      if (update.status === 'error') {
+        alert(`Offer error: ${update.data}`);
+      }
+      if (update.status === 'accepted') {
+        alert('Offer accepted');
+      }
+      if (update.status === 'refunded') {
+        alert('Offer rejected');
+      }
+    },
+  );
+};
+```
+
+### App.tsx
+We can see the `makeOffer` function being called when `App.tsx` is rendering the `Trade.tsx` component:
+```tsx
+  return (
+    <>
+      <Logos />
+      <h1>Items Listed on Offer Up</h1>
+
+      <div className="card">
+        <Trade
+          makeOffer={makeOffer}
+          istPurse={istPurse as Purse}
+          walletConnected={!!wallet}
+        />
+        <hr />
+        {wallet && istPurse ? (
+          <Inventory
+            address={wallet.address}
+            istPurse={istPurse}
+            itemsPurse={itemsPurse as Purse}
+          />
+        ) : (
+          <button onClick={tryConnectWallet}>Connect Wallet</button>
+        )}
+      </div>
+    </>
+  );
+```
+
+### Trade.tsx
+Finally, by taking a look at `components/Trade.tsx` we can see the passed `makeOffer` function being used to handle the click event on the 'Make an Offer' button.
+```tsx
+      <div>
+        {walletConnected && (
+          <button onClick={() => makeOffer(giveValue, choices)}>
+            Make an Offer
+          </button>
+        )}
+      </div>
+```
+
+### The Result
+The `Trade.tsx` component button which calls the `makeOffer` function:
+![The Trade.tsx component button which calls the makeOffer function](./assets/keplr-legible-offer.png)
+
+::: tip Video Walkthrough
+
+As you're going through this explainer it may be helpful to watch this video walkthrough.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Wy13GLmujhA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+:::

main/guides/getting-started/explainer-how-to-start-a-local-chain.md

@@ -0,0 +1,31 @@
+# Starting a Local Chain
+As you saw in this tutorial, starting a local chain is easy! 
+
+## How it Works
+In the `dapp-offer-up` sample dapp, configuration for the Agoric containers is specified in the `package.json` file. Take note of the Docker specific parameters in the `script` section of `package.json` below:
+```json
+  "scripts": {
+    "start:docker": "cd contract && docker compose up -d",
+    "docker:logs": "cd contract; docker compose logs --tail 200 -f",
+    "docker:bash": "cd contract; docker compose exec agd bash",
+    "docker:make": "cd contract; docker compose exec agd make -C /workspace/contract",
+    "make:help": "make -C contract list",
+    "start:contract": "cd contract && yarn start",
+    "print-key": "yarn docker:make print-acct",
+    "start:ui": "cd ui && yarn dev",
+    "lint": "yarn workspaces run lint",
+    "test": "yarn workspaces run test",
+    "test:e2e": "yarn workspace offer-up-ui test:e2e",
+    "build": "yarn workspaces run build"
+  }
+```
+
+In the tutorial you first used the `yarn create` command to clone the dapp. Next you ran the `yarn install` command to install all required dependencies. Finally you ran the `yarn start:docker` command to start a local chain. You can see from the json code snippet above the this command was running `docker compose up -d` from the `contract` folder.
+
+::: tip Video Walkthrough
+
+As you're going through this explainer it may be helpful to watch this video walkthrough.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/WJ1MlHudpuM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+:::