Correct how network is specified in Taquito (#167)

* Correct way of setting the network in Beacon * Update bank tutorial with correct way of setting network in Beacon * Use beacon-types instead of beacon-sdk
trilitech · Nov 16, 2023 · cfc2d36 · cfc2d36
1 parent 2806df8
commit cfc2d36
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 27 deletions.
diff --git a/docs/dApps/taquito.md b/docs/dApps/taquito.md
@@ -2,7 +2,7 @@
 title: Taquito dApp SDK for TypeScript
 authors: Claude Barde
 last_update:
-  date: 6 November 2023
+  date: 15 November 2023
 ---
 
 ## Introduction
@@ -171,7 +171,7 @@ import { TezosToolkit } from '@taquito/taquito'
 const Tezos = new TezosToolkit('https://ghostnet.ecadinfra.com')
 const initialStorage = {
     counter: 1,
-    admin: "tz1Me1MGhK7taay748h4gPnX2cXvbgL6xsYL
+    admin: "tz1Me1MGhK7taay748h4gPnX2cXvbgL6xsYL"
 }
 const op = await Tezos
     .contract

diff --git a/docs/tutorials/build-your-first-app/sending-transactions.md b/docs/tutorials/build-your-first-app/sending-transactions.md
@@ -2,7 +2,7 @@
 title: 'Part 3: Sending transactions'
 authors: 'Tim McMackin'
 last_update:
-  date: 17 October 2023
+  date: 15 November 2023
 ---
 
 Now that the application can connect to the user's wallet, it can get the user's approval to send transactions to Tezos with that wallet.
@@ -125,7 +125,9 @@ Follow these steps to set up the application to send transactions to the deposit
    const connectWallet = async () => {
      const newWallet = new BeaconWallet({
        name: "Simple dApp tutorial",
-       preferredNetwork: network,
+       network: {
+        type: NetworkType.GHOSTNET,
+      },
      });
      await newWallet.requestPermissions();
      address = await newWallet.getPKH();
@@ -250,12 +252,11 @@ Here is the completed code of the `App.svelte` file at the end of this section:
 ```html
 <script>
   import { BeaconWallet } from "@taquito/beacon-wallet";
-  import { NetworkType } from "@airgap/beacon-sdk";
+  import { NetworkType } from "@airgap/beacon-types";
   import { TezosToolkit } from "@taquito/taquito";
 
   const rpcUrl = "https://ghostnet.ecadinfra.com";
   const Tezos = new TezosToolkit(rpcUrl);
-  const network = NetworkType.GHOSTNET;
   const contractAddress = "KT1R4i4qEaxF7v3zg1M8nTeyrqk8JFmdGLuu";
 
   let wallet;
@@ -272,7 +273,9 @@ Here is the completed code of the `App.svelte` file at the end of this section:
   const connectWallet = async () => {
     const newWallet = new BeaconWallet({
       name: "Simple dApp tutorial",
-      preferredNetwork: network,
+      network: {
+        type: NetworkType.GHOSTNET,
+      },
     });
     await newWallet.requestPermissions();
     address = await newWallet.getPKH();

diff --git a/docs/tutorials/build-your-first-app/setting-up-app.md b/docs/tutorials/build-your-first-app/setting-up-app.md
@@ -2,7 +2,7 @@
 title: "Part 1: Setting up the application"
 authors: 'Claude Barde, Tim McMackin'
 last_update:
-  date: 17 October 2023
+  date: 15 November 2023
 ---
 
 You can access Tezos through any JavaScript framework.
@@ -21,7 +21,7 @@ This tutorial uses the Svelte framework, and the following steps show you how to
 1. Install the Tezos-related dependencies:
 
    ```bash
-   npm install @taquito/taquito @taquito/beacon-wallet @airgap/beacon-sdk
+   npm install @taquito/taquito @taquito/beacon-wallet @airgap/beacon-types
    ```
 
 1. Install the `buffer`, `events`, and `vite-compatible-readable-stream` libraries:
@@ -56,9 +56,9 @@ This tutorial uses the Svelte framework, and the following steps show you how to
        },
        resolve: {
          alias: {
-           "@airgap/beacon-sdk": path.resolve(
+           "@airgap/beacon-types": path.resolve(
              path.resolve(),
-             `./node_modules/@airgap/beacon-sdk/dist/${
+             `./node_modules/@airgap/beacon-types/dist/${
              isBuild ? "esm" : "cjs"
              }/index.js`
            ),

diff --git a/docs/tutorials/build-your-first-app/wallets-tokens.md b/docs/tutorials/build-your-first-app/wallets-tokens.md
@@ -2,7 +2,7 @@
 title: "Part 2: Accessing wallets"
 authors: 'Claude Barde, Tim McMackin'
 last_update:
-  date: 6 November 2023
+  date: 15 November 2023
 ---
 
 Accessing the user's wallet is a prerequisite for interacting with the Tezos blockchain.
@@ -71,7 +71,7 @@ If you add more components, you should move these objects to a separate file to
 
    ```javascript
    import { BeaconWallet } from "@taquito/beacon-wallet";
-   import { NetworkType } from "@airgap/beacon-sdk";
+   import { NetworkType } from "@airgap/beacon-types";
    import { TezosToolkit } from "@taquito/taquito";
    ```
 
@@ -80,7 +80,6 @@ If you add more components, you should move these objects to a separate file to
    ```javascript
    const rpcUrl = "https://ghostnet.ecadinfra.com";
    const Tezos = new TezosToolkit(rpcUrl);
-   const network = NetworkType.GHOSTNET;
    ```
 
 1. Create variables to represent the wallet itself, its account address, and its balance:
@@ -97,7 +96,9 @@ If you add more components, you should move these objects to a separate file to
    const connectWallet = async () => {
      const newWallet = new BeaconWallet({
        name: "Simple dApp tutorial",
-       preferredNetwork: network,
+       network: {
+        type: NetworkType.GHOSTNET,
+      },
      });
      await newWallet.requestPermissions();
      address = await newWallet.getPKH();
@@ -162,12 +163,11 @@ The complete `App.svelte` file looks like this:
 ```html
 <script>
   import { BeaconWallet } from "@taquito/beacon-wallet";
-  import { NetworkType } from "@airgap/beacon-sdk";
+  import { NetworkType } from "@airgap/beacon-types";
   import { TezosToolkit } from "@taquito/taquito";
 
   const rpcUrl = "https://ghostnet.ecadinfra.com";
   const Tezos = new TezosToolkit(rpcUrl);
-  const network = NetworkType.GHOSTNET;
 
   let wallet;
   let address;
@@ -176,7 +176,9 @@ The complete `App.svelte` file looks like this:
   const connectWallet = async () => {
     const newWallet = new BeaconWallet({
       name: "Simple dApp tutorial",
-      preferredNetwork: network,
+      network: {
+        type: NetworkType.GHOSTNET,
+      },
     });
     await newWallet.requestPermissions();
     address = await newWallet.getPKH();

diff --git a/docs/tutorials/create-an-nft/nft-web-app/defining-functions.md b/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: 20 October 2023
+  date: 15 November 2023
 ---
 
 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.
@@ -30,7 +30,9 @@ Creating multiple instances can cause problems in your app and with Taquito in g
      try {
        const newWallet = new BeaconWallet({
          name: "Simple NFT app tutorial",
-         preferredNetwork: network,
+         network: {
+          type: NetworkType.GHOSTNET,
+        },
        });
        await newWallet.requestPermissions();
        address = await newWallet.getPKH();

diff --git a/docs/tutorials/create-an-nft/nft-web-app/setting-up-app.md b/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: 19 October 2023
+  date: 15 November 2023
 ---
 
 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-sdk
+   npm install @taquito/taquito @taquito/beacon-wallet @airgap/beacon-types
    ```
 
 1. Install the `buffer`, `events`, and `vite-compatible-readable-stream` libraries:
@@ -57,9 +57,9 @@ If you are familiar with Svelte, note that this application includes its own Sve
         },
       resolve: {
         alias: {
-         "@airgap/beacon-sdk": path.resolve(
+         "@airgap/beacon-types": path.resolve(
            path.resolve(),
-           `./node_modules/@airgap/beacon-sdk/dist/${
+           `./node_modules/@airgap/beacon-types/dist/${
            isBuild ? "esm" : "cjs"
            }/index.js`
           ),
@@ -206,7 +206,7 @@ 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-sdk";
+    import { NetworkType } from "@airgap/beacon-types";
     import { TezosToolkit, MichelsonMap} from "@taquito/taquito";
    </script>
    ```
@@ -218,12 +218,11 @@ Follow these steps to set up the `src/App.svelte` file, which is the container f
    - `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.
 
-1. In the `<script lang="ts">` section, add the following code to initialize the Tezos toolkit, set your RPC URL to the Ghostnet endpoint, and define the network type:
+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 Tezos = new TezosToolkit(rpcUrl);
-     const network = NetworkType.GHOSTNET;
    ```
 
    This code creates an instance of the `TezosToolkit` object, which provides access to the Tezos chain itself.