docs: fixing up make an offer duplication (#1120)

* docs: fixing up make an offer duplication * fixing the text * Fixing the result text * addressed the comments
Agoric · Jun 10, 2024 · bb3c8fa · bb3c8fa
1 parent dc9b2fd
commit bb3c8fa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 83 deletions.
diff --git a/main/guides/getting-started/assets/dapp-offer-up-run.gif b/main/guides/getting-started/assets/dapp-offer-up-run.gif
diff --git a/main/guides/getting-started/explainer-how-to-make-an-offer.md b/main/guides/getting-started/explainer-how-to-make-an-offer.md
@@ -1,87 +1,11 @@
 # 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.
+As you saw in the `dapp-offer-up` tutorial you could use the dapp UI to make an offer on up to three items. 
 
-## 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');
+Take a look at our detailed [tutorial on how the UI for making offers](https://docs.agoric.com/guides/getting-started/ui-tutorial/making-an-offer.html) works in this dapp.
 
-  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)
+### How it Looks
+Here is how the UI looks after completion:
+![The UI look after completing the UI tutorial](./assets/dapp-offer-up-run.gif)
 
 ::: tip Video Walkthrough
 

diff --git a/main/guides/getting-started/ui-tutorial/making-an-offer.md b/main/guides/getting-started/ui-tutorial/making-an-offer.md
@@ -2,7 +2,7 @@
 
 If you've made it this far, you've created a React app that connects to the wallet, renders
 the IST purse balance of the user, and reads the chain with `chainStorageWatcher`. If you've
-run into an issues, you can check out the `checkpoint-4` branch for reference.
+run into an issues, you can check out the [checkpoint-4](/~https://github.com/agoric-labs/ui-tutorial/tree/checkpoint-4) branch for reference.
 
 In this final tutorial, you'll see how to make offers from your app, tying everything together
 in a basic end-to-end experience for the user.
@@ -277,4 +277,8 @@ similarly to the IST purse. In `Purses.tsx`, add the following:
 ```
 
 Now, make another offer, and see that your items purse automatically updates after the offer is accepted. To see the complete
-solution for this example, check out the `checkpoint-5` branch.
+solution for this example, check out the [checkpoint-5](/~https://github.com/agoric-labs/ui-tutorial/tree/checkpoint-5) branch.
+
+### Result
+
+Curious to know how it looks after implementation? Check out our [guide](https://docs.agoric.com/guides/getting-started/explainer-how-to-make-an-offer.html) for the result.