From 126b6a3f76a62c4b202e1281e4945059b9c81de8 Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Wed, 18 Dec 2024 15:25:00 -0500 Subject: [PATCH 01/20] First draft of new consolidated NFT tutorial --- docs/tutorials/nft-consolidated.md | 70 ++++ .../nft-consolidated/connect-wallet.md | 147 +++++++++ .../nft-consolidated/create-contract.md | 305 ++++++++++++++++++ .../nft-consolidated/send-transactions.md | 239 ++++++++++++++ .../nft-consolidated/setting-up-app.md | 233 +++++++++++++ docs/tutorials/nft-consolidated/show-info.md | 109 +++++++ docs/tutorials/nft-consolidated/summary.md | 26 ++ sidebars.js | 16 + .../nft-consolidated-connect-connected.png | Bin 0 -> 78609 bytes ...nft-consolidated-connect-not-connected.png | Bin 0 -> 33299 bytes ...ated-contract-template-completed-tests.png | Bin 0 -> 132807 bytes ...onsolidated-contract-template-deployed.png | Bin 0 -> 56840 bytes ...onsolidated-contract-template-run-code.png | Bin 0 -> 32062 bytes ...-consolidated-contract-template-window.png | Bin 0 -> 299793 bytes .../nft-consolidated-show-info-ids.png | Bin 0 -> 90991 bytes ...ated-transaction-completed-transaction.png | Bin 0 -> 91672 bytes ...nsolidated-transaction-existing-tokens.png | Bin 0 -> 63825 bytes ...idated-transaction-temple-add-contract.png | Bin 0 -> 95442 bytes ...onsolidated-transaction-temple-no-nfts.png | Bin 0 -> 57441 bytes ...dated-transaction-temple-show-nft-info.png | Bin 0 -> 72848 bytes ...nsolidated-transaction-temple-show-nft.png | Bin 0 -> 59183 bytes ...onsolidated-transaction-token-metadata.png | Bin 0 -> 156484 bytes 22 files changed, 1145 insertions(+) create mode 100644 docs/tutorials/nft-consolidated.md create mode 100644 docs/tutorials/nft-consolidated/connect-wallet.md create mode 100644 docs/tutorials/nft-consolidated/create-contract.md create mode 100644 docs/tutorials/nft-consolidated/send-transactions.md create mode 100644 docs/tutorials/nft-consolidated/setting-up-app.md create mode 100644 docs/tutorials/nft-consolidated/show-info.md create mode 100644 docs/tutorials/nft-consolidated/summary.md create mode 100644 static/img/tutorials/nft-consolidated-connect-connected.png create mode 100644 static/img/tutorials/nft-consolidated-connect-not-connected.png create mode 100644 static/img/tutorials/nft-consolidated-contract-template-completed-tests.png create mode 100644 static/img/tutorials/nft-consolidated-contract-template-deployed.png create mode 100644 static/img/tutorials/nft-consolidated-contract-template-run-code.png create mode 100644 static/img/tutorials/nft-consolidated-contract-template-window.png create mode 100644 static/img/tutorials/nft-consolidated-show-info-ids.png create mode 100644 static/img/tutorials/nft-consolidated-transaction-completed-transaction.png create mode 100644 static/img/tutorials/nft-consolidated-transaction-existing-tokens.png create mode 100644 static/img/tutorials/nft-consolidated-transaction-temple-add-contract.png create mode 100644 static/img/tutorials/nft-consolidated-transaction-temple-no-nfts.png create mode 100644 static/img/tutorials/nft-consolidated-transaction-temple-show-nft-info.png create mode 100644 static/img/tutorials/nft-consolidated-transaction-temple-show-nft.png create mode 100644 static/img/tutorials/nft-consolidated-transaction-token-metadata.png diff --git a/docs/tutorials/nft-consolidated.md b/docs/tutorials/nft-consolidated.md new file mode 100644 index 000000000..8bb79cc13 --- /dev/null +++ b/docs/tutorials/nft-consolidated.md @@ -0,0 +1,70 @@ +--- +title: Mint NFTs from a web application +authors: Tim McMackin +last_update: + date: 7 January 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 includes a user-facing front end web application and a Tezos smart contract that acts as the backend and manages data about the tokens. + +No prior knowledge of NFTs or Tezos is required, but because the tutorial application uses JavaScript, some familiarity with JavaScript makes it easier to understand. + +## Learning objectives + +In this tutorial, you will learn: + +- How to use the [Taquito](https://tezostaquito.io/) JavaScript/TypeScript SDK to access Tezos and user wallets and to send transactions to Tezos +- What Tezos wallets and accounts are and how to connect to them +- What smart contracts are and how to call them from a web application +- How to mint NFTs on behalf of a user +- How to deploy your own smart contract to manage NFTs +- How to get information about NFTs and their owners from Tezos + +## What is a non-fungible token (NFT)? + +An NFT is a special type of blockchain token that represents something unique. +Fungible tokens such as XTZ and real-world currencies like dollars and euros are interchangeable; each one is the same as every other. +By contrast, each NFT is unique and not interchangeable. +NFTs can represent ownership over digital or physical assets like virtual collectibles or unique artwork, or anything that you want them to represent. + +Like other types of Tezos tokens, a collection of NFTs is managed by a smart contract. +The smart contract defines what information is in each token and how the tokens behave, such as what happens when a user transfers an NFT to another user. +It also keeps a ledger that records which account owns each NFT. + +In this tutorial, you create NFTs that comply with the FA2 standard (formally known as the [TZIP-12](https://gitlab.com/tezos/tzip/-/blob/master/proposals/tzip-12/tzip-12.md) standard), the current standard for tokens on Tezos. +The FA2 standard creates a framework for how tokens behave on Tezos, including fungible, non-fungible, and other types of tokens. +It provides a standard API to transfer tokens, check token balances, manage operators (addresses that are permitted to transfer tokens on behalf of the token owner), and manage token metadata. + +## Tutorial application + +The application that you set up in this tutorial has two parts: + +- The **smart contract** runs on the Tezos blockchain to manage the NFTs, including creating, transferring, and destroying them +- The **frontend application** runs on a web server and allows the user to connect their wallet, send a request to the smart contract to create an NFT, and to see information about the NFTs that they own + +The front end of the application shows buttons that users can click to connect and to mint NFTs: + +The application showing the IDs of the owned NFTs + +The source code of the completed application is available here: https://github.com/trilitech/tutorial-applications/tree/main/nft-consolidated. + +## Prerequisites + +To run this tutorial you need Node.JS and NPM installed. +See https://nodejs.org/. +You can verify that they are installed by running these commands: + + ```bash + node --version + npm --version + ``` + +## Tutorial sections + +- [Part 1: Setting up the application](/tutorials/nft-consolidated/setting-up-app) +- [Part 2: Connecting to wallets](/tutorials/nft-consolidated/connect-wallet) +- [Part 3: Sending transactions](/tutorials/nft-consolidated/send-transactions) +- [Part 4: Creating the contract](/tutorials/nft-consolidated/create-contract) +- [Part 5: Showing token information](/tutorials/nft-consolidated/show-info) diff --git a/docs/tutorials/nft-consolidated/connect-wallet.md b/docs/tutorials/nft-consolidated/connect-wallet.md new file mode 100644 index 000000000..7fa9d4e28 --- /dev/null +++ b/docs/tutorials/nft-consolidated/connect-wallet.md @@ -0,0 +1,147 @@ +--- +title: "Part 2: Connecting to wallets" +authors: Tim McMackin +last_update: + date: 18 December 2024 +--- + +Before the application can interact with Tezos, you must connect to the user's wallet. +Connecting to a wallet allows your application to get the address of the user's account, get information about the tokens in that account, and create transactions for the user to approve. +Connecting to a wallet doesn't give the application direct control over an account, only the ability to send transactions to the wallet for the user to approve and sign. + +To connect to a user's wallet, you use the Beacon toolkit, which is a standard interface for Tezos wallets. + +:::note + +However you design your app, you must use a single instance of the `BeaconWallet` object. +It is also highly recommended to use a single instance of the `TezosToolkit` object. +Creating multiple instances can cause problems in your app and with Taquito in general. + +Because this sample application has only one page, it defines the `TezosToolkit` and `BeaconWallet` objects in the code of that page. +If your application has multiple pages, define these objects in a single file and re-use them on each page. + +::: + +1. In the file `src/App.svelte`, in the ` + + Create NFTs + + + + + + ``` + + This updated file sets the `global` variable to `globalThis` and adds a buffer object to the window. + The application requires this configuration to use the Beacon SDK to connect to wallets in a Vite app. + +1. In the `src/main.js` file, import the style sheets by replacing the default code of the file with this code: + + ```javascript + import './app.css' + import { mount } from 'svelte'; + import App from './App.svelte' + + const app = mount(App, { target: document.body }); + + export default app + ``` + + This code targets the `body` tag to inject the HTML produced by JavaScript instead of a `div` tag inside the `body` tag as Svelte apps do by default. + Your applications can target any tag on the page. + +## File structure + +The structure of the tutorial application looks like this: + +``` +- src + - assets + - lib + - app.css + - App.svelte + - main.js + - vite-env.d.ts +- index.html +- jsconfig.json +- package-lock.json +- package.json +- svelte.config.js +- vite.config.js +``` + +Here are descriptions for each of these files: + +- **assets** -> Contains the favicon and other static files such as images for the application. +- **lib** -> Contains the components that make up the app interface: +- **app.css** -> Contains global styles that apply to the entire app. +- **App.svelte** -> The entrypoint of the application, which contains the components that are bundled into the final application. +- **main.js** -> Where the JavaScript for the app is bundled before being injected into the HTML file. +- **vite-env.d.ts** -> A JavaScript declaration file automatically generated by Vite to provide type definitions for environment variables. +- **index.html** -> Contains the root element where the Svelte app gets attached. +- **jsconfig.json** -> +- **package.json** -> Contains metadata about the project like its name, version, and dependencies. +- **svelte.config.js** -> Configuration file for the Svelte application. +- **vite.config.js** -> Used to customize Vite's behavior, including defining plugins, setting up aliases, and more. + +## Configuring the Svelte application + +Svelte files include several different types of code in a single file. +This example page has separate sections for JavaScript, style, and HTML code: + +```html + + + + +
+ +
+``` + +Svelte components are fully contained, which means that the style and JS/TS code that you apply inside a component doesn't leak into the other components of your app. +Styles and scripts that are shared among components typically go in the `src/styles` and `scripts` or `src/scripts` folders. + +Follow these steps to set up the `src/App.svelte` file, which is the container for the other Svelte components: + +1. In the `App.svelte` file, replace the default `
` section with this code to set up a title for the interface: + + ```html +
+

Create NFTs

+ +
+ ``` + + You will add elements to the wbe application interface later. + +1. Replace the default ` + ``` + + Later, you can add styles to this section or the shared CSS files. + +1. Remove the default JavaScript section and replace it with this code, which imports the libraries and components that the app uses: + + ```html + + ``` + + The imports include these elements: + + - `BeaconWallet`: This class provides a user interface for connecting to wallets, ensuring that users can securely sign transactions and call smart contracts + - `TezosToolkit`: This is the base class for Taquito, which gives you access to most of its Tezos-related features + - `NetworkType`: An enumeration that lists the different types of networks on the Tezos blockchain + - `MichelsonMap`: This class represents the Michelson map data type, which Tezos uses to store data, including the metadata for the NFTs that the application creates + - `stringToBytes`: A utility that converts strings to bytes to store in the token metadata + +1. In the `
From 49c6598bf209fa3639d94bbe13600ba82564bf9e Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Fri, 10 Jan 2025 12:44:15 -0500 Subject: [PATCH 04/20] typo Co-authored-by: NicNomadic <148877430+NicNomadic@users.noreply.github.com> --- docs/tutorials/nft-consolidated/setting-up-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorials/nft-consolidated/setting-up-app.md b/docs/tutorials/nft-consolidated/setting-up-app.md index 07fb2f3df..828409dd8 100644 --- a/docs/tutorials/nft-consolidated/setting-up-app.md +++ b/docs/tutorials/nft-consolidated/setting-up-app.md @@ -188,7 +188,7 @@ Follow these steps to set up the `src/App.svelte` file, which is the container f
``` - You will add elements to the wbe application interface later. + You will add elements to the web application interface later. 1. Replace the default `