Update simple web nft tutorial (#487)

* Need this SASS plugin now

* Use teztnets RPC node

* Updated contract

* Control size of images

* Update to match new app

* Updated contract with correct admin order

* Link to completed application

* root-relative link

* Add link to completed app

* Links to block explorer token pages

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

@@ -2,7 +2,7 @@
 title: Mint NFTs from a web app
 authors: 'Yuxin'
 last_update:
-  date: 19 October 2023
+  date: 12 December 2024
 ---
 
 This tutorial shows you how to create a web application that interacts with the Tezos blockchain to mint non-fungible tokens (NFTs). NFTs are unique digital assets that can represent art, collectibles, or virtually any kind of digital content on the blockchain. Specifically, this application will be the user-facing web front end for a smart contract that performs operations such as mint.
@@ -35,6 +35,9 @@ Before start creating this dApp, we will need a [wallet](/dApps/wallets) and som
 
 The backbone of this application is the smart contract deployed on the Tezos blockchain. The contract we'll be using is already deployed and is written in [SmartPy](/smart-contracts/languages/smartpy). It defines the rules and processes for interactions with the Tezos blockchain, such as minting NFTs. All you need to do is integrate it into your web app.
 
+You can view the contract in a block explorer such as this one: https://better-call.dev/ghostnet/KT1Lr8m7HgfY5UF6nXDDcXDxDgEmKyMeds1b/operations
+
+The source code of the contract is here: https://github.com/trilitech/tutorial-applications/blob/main/simple-nft-svelte/contract/simple-nft.py
 
 ## The tutorial application
 

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: 15 November 2023
+  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 = "KT1W8FrDRM28BGy1VVKXfN9L61jW1dgAjHQi"
+   const nftContractAddress = "KT1Lr8m7HgfY5UF6nXDDcXDxDgEmKyMeds1b";
    ```
 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);
@@ -169,7 +172,10 @@ For example, if the wallet is not connected, disable buttons for transactions th
    }
    ```
    Taquito can fetch the user's tez balance from the connected wallet.
-   To get the tez balances, the app uses the [Beacon SDK](/../dApps/wallets).
+   To get the tez balances, the app uses the [Beacon SDK](/dApps/wallets).
    The `mint` function takes two parameters: a metadata for the NFT and the user's wallet address.
 
+Now the app is complete.
+You can refer to the completed app at https://github.com/trilitech/tutorial-applications/tree/main/simple-nft-svelte if you have any problems with your app.
+
 You'll start the app and mint NFTs with your dApp in the next section!

docs/tutorials/create-an-nft/nft-web-app/lets-play.md

@@ -2,7 +2,7 @@
 title: "Part 3: Let's play"
 authors: 'Yuxin Li'
 last_update:
-  date: 11 September 2023
+  date: 10 December 2024
 ---
 
 Now that the app is complete, you are able to connect to your wallets and mint NFTs.
@@ -16,36 +16,41 @@ npm run dev
 
 Upon completion, the app's UI will appear as shown:
 
-![The mint user interface section](/img/tutorials/mint-ui.png "Mint UI")
+<img src="/img/tutorials/mint-ui.png" alt="The mint user interface section" style={{width: 300}} />
 
 ## Connect the wallet
 
 Click the `Connect wallet` button and select a wallet to connect. The interface will appear as follows:
 
-![The connect wallet interface section](/img/tutorials/wallet-ui.png "Wallet UI")
+<img src="/img/tutorials/wallet-ui.png" alt="The connect wallet interface section" style={{width: 300}} />
 
 
 ## Review your information
 
 Once connected to the wallet, you'll be able to view details such as your wallet address and balance:
 
-![interface section after connecting the wallet](/img/tutorials/info-ui.png "Info UI")
+<img src="/img/tutorials/info-ui.png" alt="interface section after connecting the wallet" style={{width: 500}} />
 
 
 ## Mint NFTs
 
 Click the "mint an NFT" button. Its status will change to "Minting NFT...", and you'll be prompted to confirm the minting process.
 
-![mint comfirmation interface section](/img/tutorials/mint_confirm.png "Confirm UI")
+<img src="/img/tutorials/mint_confirm.png" alt="mint comfirmation interface section" style={{width: 300}} />
 
 
 After minting, a pop-up window will appear on your interface displaying “Open Blockexplorer”. You can click the button and you can see your NFT transactions on [TZKT](https://tzkt.io/), also you can also view your transactions on [Better Call Dev](https://better-call.dev/) by using your transaction hash. The interface will look like this:
 
-![The block-explorer interface section ](/img/tutorials/block-explorer.png "block explorer UI")
+<img src="/img/tutorials/block-explorer.png" alt="The block-explorer interface section " style={{width: 500}} />
 
 Once finished, if you wish to mint another NFT, simply click the "Mint another NFT" button in the interface.
 
-![The mint-another-NFT interface section ](/img/tutorials/mint_another.png "mint another UI")
+<img src="/img/tutorials/mint_another.png" alt="The mint-another-NFT interface section " style={{width: 500}} />
+
+You can also look up the tokens minted by the contract on block explorers:
+
+- https://ghostnet.tzkt.io/KT1Lr8m7HgfY5UF6nXDDcXDxDgEmKyMeds1b/tokens
+- https://better-call.dev/ghostnet/KT1Lr8m7HgfY5UF6nXDDcXDxDgEmKyMeds1b/tokens
 
 ## Summary
 

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: 15 November 2023
+  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:
@@ -31,6 +31,12 @@ If you are familiar with Svelte, note that this application includes its own Sve
    npm install --save-dev buffer events vite-compatible-readable-stream
    ```
 
+1. Install a plugin to handle SASS styling for the site:
+
+   ```bash
+   npm install -D sass-embedded
+   ```
+
 1. Update the `vite.config.js` file to the following code:
 
    ```javascript
@@ -147,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
    ```
@@ -205,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>
    ```
 
@@ -217,11 +223,12 @@ 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:
 
    ```javascript
-     const rpcUrl = "https://ghostnet.ecadinfra.com";
+     const rpcUrl = "https://rpc.ghostnet.teztnets.com";
      const Tezos = new TezosToolkit(rpcUrl);
    ```