Update to match new app

docs/tutorials/create-an-nft/nft-web-app/defining-functions.md

@@ -2,7 +2,7 @@
 title: "Part 2: Accessing wallets and minting NFTs"
 authors: 'Yuxin Li'
 last_update:
-  date: 10 December 2024
+  date: 11 December 2024
 ---
 
 Accessing the user's wallet is essential before your application can engage with the Tezos blockchain. It enables your app to view the tokens within the wallet and request the user to initiate transactions. However, it's important to note that accessing the wallet doesn't grant your app direct control over it.
@@ -116,7 +116,7 @@ For example, if the wallet is not connected, disable buttons for transactions th
 1. Still in `App.svelte`, add the following code to the` <script lang="ts">` section to initialize a deployed contract address. This contract has multiple entrypoints that allow us to interact with the Tezos blockchain, such as `mint`.
 
    ```javascript
-   const contractAddress = "KT1TuveAEsF6FPiLJ4Y55RuaMypBuXNWHitk"
+   const nftContractAddress = "KT18vYNMdkfCbcVjanT78au5eFeURCfurqZt";
    ```
 1. Add this code to build the function structure
    ```javascript
@@ -134,32 +134,35 @@ For example, if the wallet is not connected, disable buttons for transactions th
    ```
    This asynchronous function, requestNFT, checks if a button (likely associated with minting an NFT) is active, and if so, it deactivates the button and sets a status message indicating that the NFT minting process has begun.
 
-1. Add the following code inside the `requestNFT` function to define the metadata for a specific NFT.
+1. Add the following code inside the `requestNFT` function to define the metadata for a specific NFT:
 
    ```javascript
-   const metadata = "7b226172746966616374557269223a22697066733a2f2f516d57476342434c516132387955505634355172444e47545a6e6a56784b6434416546565a4233666166486f5950222c2261747472696275746573223a5b5d2c2263726561746f7273223a5b22747a3157584b32795776416861466458456a73587548656e6667664472396d7157694277225d2c2264617465223a22323032332d30342d31335431373a32343a35312e3035353930335a222c22646563696d616c73223a302c226465736372697074696f6e223a22547a6f7563616e206973206120736d616c6c20636f6c6c656374696f6e206f662066756e6e7920746f7563616e73206f6e207468652054657a6f7320426c6f636b636861696e2e222c22646973706c6179557269223a22697066733a2f2f516d634d484a514c475444646a363873554d4b42687a3669464538326f36504144386e61755a6b4b4b43426d7173222c22666f726d617473223a5b7b2264696d656e73696f6e73223a7b22756e6974223a227078222c2276616c7565223a2235313278363430227d2c2266696c654e616d65223a2261727469666163742e706e67222c2266696c6553697a65223a3232383532332c226d696d6554797065223a22696d6167652f706e67222c22757269223a22697066733a2f2f516d57476342434c516132387955505634355172444e47545a6e6a56784b6434416546565a4233666166486f5950227d2c7b2264696d656e73696f6e73223a7b22756e6974223a227078222c2276616c7565223a2235313278363430227d2c2266696c654e616d65223a22646973706c61792e706e67222c2266696c6553697a65223a3232373534322c226d696d6554797065223a22696d6167652f706e67222c22757269223a22697066733a2f2f516d634d484a514c475444646a363873554d4b42687a3669464538326f36504144386e61755a6b4b4b43426d7173227d2c7b2264696d656e73696f6e73223a7b22756e6974223a227078222c2276616c7565223a2233323078343030227d2c2266696c654e616d65223a227468756d626e61696c2e706e67222c2266696c6553697a65223a3131323837382c226d696d6554797065223a22696d6167652f706e67222c22757269223a22697066733a2f2f516d593334616a6872757a66784a3979387358704b4365625a4a524638435a69443270487931534254375a4b5475227d5d2c22696d616765223a22697066733a2f2f516d634d484a514c475444646a363873554d4b42687a3669464538326f36504144386e61755a6b4b4b43426d7173222c226d696e746572223a224b543141713477576d56616e70516871345454666a5a584235416a467078313569514d4d222c226d696e74696e67546f6f6c223a2268747470733a2f2f6f626a6b742e636f6d2f6d696e745632222c226e616d65223a22547a6f7563616e20233438222c22726967687473223a224e6f204c6963656e7365202f20416c6c20526967687473205265736572766564222c22726f79616c74696573223a7b22646563696d616c73223a342c22736861726573223a7b22747a3157584b32795776416861466458456a73587548656e6667664472396d7157694277223a3530307d7d2c2273796d626f6c223a224f424a4b54434f4d222c2274616773223a5b22746f7563616e222c2262697264222c226d6f6465726e222c22617274225d2c227468756d626e61696c557269223a22697066733a2f2f516d593334616a6872757a66784a3979387358704b4365625a4a524638435a69443270487931534254375a4b5475227d"
+   const metadata = new MichelsonMap();
+   metadata.set("name", stringToBytes("My Token")); // replace with your metadata
 
-   const metadatamap = new MichelsonMap()
-   metadatamap.set('',metadata)
+   const mintItem = {
+     to_: address,
+     metadata: metadata,
+   };
    ```
-   Metadata for NFTs provides detailed information about the token, describing its unique attributes. This context helps in distinguishing each NFT.
+   Metadata for NFTs provides detailed information about the token, describing its unique attributes. This context helps in distinguishing each NFT. In this case the token has only a name, but you can add other fields.
 
-   In the provided code, a new MichelsonMap instance is initialized to handle Tezos's native map data type, a structure used to store key-value pairs where each key is unique. The MichelsonMap utility allows for easier interaction with Tezos's smart contract language, Michelson. By setting the metadata with an empty string as its key, the data is prepared for either storage or use within the Tezos contract.
+   In the provided code, a new MichelsonMap instance is initialized to handle Tezos's native map data type, a structure used to store key-value pairs where each key is unique. The MichelsonMap utility allows for easier interaction with Tezos's smart contract language, Michelson.
 
 1. Add the following code inside the `requestNFT` function to access the wallet and mint an NFT.
 
    ```javascript
    try {
-     console.log("setting the wallet");
      Tezos.setWalletProvider(wallet);
 
      console.log("getting contract");
-     const contract = await Tezos.wallet.at(contractAddress);
+     const nftContract = await Tezos.wallet.at(nftContractAddress);
+
      console.log("minting");
-     const op = await contract.methods.mint(metadatamap,address).send();
+     const op = await nftContract.methodsObject.mint([mintItem]).send();
 
      console.log(`Waiting for ${op.opHash} to be confirmed...`);
-     const hash = await op.confirmation(3).then(() => op.opHash);
+     const hash = await op.confirmation(2).then(() => op.opHash);
      console.log(`Operation injected: https://ghost.tzstats.com/${hash}`);
    } catch (error) {
      console.error("Error minting NFT:", error);

docs/tutorials/create-an-nft/nft-web-app/setting-up-app.md

@@ -2,7 +2,7 @@
 title: "Part 1: Setting up the application"
 authors: 'Yuxin Li'
 last_update:
-  date: 10 December 2024
+  date: 11 December 2024
 ---
 
 You can access Tezos through any JavaScript framework.
@@ -22,7 +22,7 @@ If you are familiar with Svelte, note that this application includes its own Sve
 1. Install the Tezos-related dependencies:
 
    ```bash
-   npm install @taquito/taquito @taquito/beacon-wallet @airgap/beacon-types
+   npm install @taquito/taquito @taquito/utils @taquito/beacon-wallet @airgap/beacon-types
    ```
 
 1. Install the `buffer`, `events`, and `vite-compatible-readable-stream` libraries:
@@ -153,11 +153,10 @@ These steps set up the style sheets for the application:
 
    ```javascript
    import './app.css'
+   import { mount } from 'svelte';
    import App from './App.svelte'
 
-   const app = new App({
-     target: document.body
-   })
+   const app = mount(App, { target: document.body });
 
    export default app
    ```
@@ -211,9 +210,10 @@ Follow these steps to set up the `src/App.svelte` file, which is the container f
 
    ```html
    <script lang="ts">
-    import { BeaconWallet } from "@taquito/beacon-wallet";
-    import { NetworkType } from "@airgap/beacon-types";
-    import { TezosToolkit, MichelsonMap} from "@taquito/taquito";
+     import { BeaconWallet } from "@taquito/beacon-wallet";
+     import { NetworkType } from "@airgap/beacon-types";
+     import { TezosToolkit, MichelsonMap} from "@taquito/taquito";
+     import { stringToBytes } from '@taquito/utils';
    </script>
    ```
 
@@ -223,6 +223,7 @@ Follow these steps to set up the `src/App.svelte` file, which is the container f
    - `TezosToolkit`: The class that gives you access to all the features of Taquito
    - `NetworkType`: The class represents the different types of networks on the Tezos blockchain. Developers can ensure that their applications communicate with the desired network version or testnet such as Ghostnet.
    - `MichelsonMap`: The class helps developers work with Michelson's native map data type.
+   - `stringToBytes`: A utility that converts strings to bytes to store as the token metadata
 
 1. In the `<script lang="ts">` section, add the following code to initialize the Tezos toolkit and set your RPC URL to the Ghostnet endpoint: