Merge pull request #48 from airgap-it/feat/migration_page

feat: init migration guide

.github/workflows/deploy.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '18.x'
       - name: Test Build
         run: |
           if [ -e yarn.lock ]; then
@@ -32,7 +32,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '18.x'
       - name: Build
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

docusaurus.config.js

@@ -1,9 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 const path = require("path");
+import { themes as prismThemes } from "prism-react-renderer";
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -166,8 +164,8 @@ const config = {
       },
       prism: {
         additionalLanguages: ["kotlin", "groovy", "swift", "ruby"],
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
       },
     }),
 };

package.json

@@ -23,28 +23,28 @@
     "embed-code": "npm run generate-monaco-types && npm run prettier && tsc --module es2015 --target es2015 --moduleResolution node --esModuleInterop true src/examples/*.ts && node scripts/copy-examples.js && npm run clear-folders && cp -r src/docs/* build-docs/ && rm -r docs && mv build-docs docs && npm run pretty-docs"
   },
   "dependencies": {
-    "@airgap/beacon-sdk": "4.0.10",
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/plugin-client-redirects": "^2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@docusaurus/theme-live-codeblock": "^2.4.3",
-    "@mdx-js/react": "^1.6.22",
+    "@airgap/beacon-sdk": "^4.1.2",
+    "@docusaurus/core": "3.1.1",
+    "@docusaurus/plugin-client-redirects": "^3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@docusaurus/theme-live-codeblock": "^3.1.1",
+    "@mdx-js/react": "^3.0.0",
     "@monaco-editor/react": "^4.6.0",
-    "@taquito/beacon-wallet": "^17.3.1",
-    "@taquito/taquito": "^17.3.1",
-    "clsx": "^1.2.1",
-    "mermaid": "^10.4.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@taquito/beacon-wallet": "^19.0.0",
+    "@taquito/taquito": "^19.0.0",
+    "clsx": "^2.1.0",
+    "mermaid": "^10.8.0",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.3",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "classnames": "^2.3.2",
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@tsconfig/docusaurus": "^2.0.2",
+    "classnames": "^2.5.1",
     "docusaurus-node-polyfills": "^1.0.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "typescript": "^4.7.4"
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [
@@ -59,6 +59,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18"
   }
 }

sidebars.js

@@ -41,6 +41,7 @@ module.exports = {
         "guides/contract-error-handling",
         "guides/subscribe-to-event",
         "guides/standalone-delegation",
+        "guides/migration-guide",
       ],
       collapsed: true,
     },

src/ExecuteExample.ts

@@ -50,6 +50,8 @@ import subscribeToEventBeacon from "./examples/subscribe-to-event.beacon";
 import subscribeToEventTaquito from "./examples/subscribe-to-event.taquito";
 
 export class ExecuteExample {
+  private static wasHandlerInitialized = false;
+
   static async execute(code: string, updateLogs: Function) {
     try {
       await this.executeExample(code, updateLogs);
@@ -58,7 +60,28 @@ export class ExecuteExample {
     }
   }
 
+  private static setUpHandler() {
+    if (this.wasHandlerInitialized) {
+      return;
+    }
+
+    window.addEventListener("error", function (e) {
+      e.preventDefault();
+      console.error("Error occurred: " + e.error.message);
+      this.location.reload();
+    });
+
+    window.addEventListener("unhandledrejection", function (e) {
+      e.preventDefault();
+      console.error("Error occurred: " + e.reason.message);
+      this.location.reload();
+    });
+
+    this.wasHandlerInitialized = true;
+  }
+
   private static async executeExample(code: string, updateLogs: Function) {
+    this.setUpHandler();
     switch (code) {
       case "beacon permission request":
         await requestPermissionsBeacon(updateLogs);

src/components/DAppTable.tsx

@@ -93,8 +93,8 @@ const DAppTable = () => {
                         sdkVersions.recommended.includes(dApp.sdkVersion)
                           ? "✅"
                           : sdkVersions.outdated.includes(dApp.sdkVersion)
-                          ? "❌"
-                          : ""}
+                            ? "❌"
+                            : ""}
                       </td>
                       <td>{getDate(dApp.lastUpdate)}</td>
                       <td>

src/components/RunnableCode.tsx

@@ -32,7 +32,12 @@ const Child = ({ code }) => {
   const reset = async () => {
     clear();
     const dAppClient = new DAppClient({ name: "Cleanup" });
-    await dAppClient.destroy();
+    try {
+      await dAppClient.destroy();
+    } catch (err: any) {
+      console.error(err.message);
+    }
+    // location.reload()
   };
   const clear = async () => {
     setOutput("");

src/docs/advanced/custom-block-explorer.mdx

@@ -5,6 +5,9 @@ title: Custom Block Explorer
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
+The `Custom Block Explorer` feature in Beacon SDK allows developers to integrate a block explorer of their choice into their dApp.
+This is particularly useful for applications that require specific functionalities or presentation styles offered by certain block explorers, or for those who wish to provide a more seamless user experience by integrating a block explorer directly into the app interface.
+
 <Tabs
   groupId="beaconOrTaquitoCBE"
   defaultValue="beacon"
@@ -28,7 +31,7 @@ class TzStatsBlockExplorer extends BlockExplorer {
     public readonly rpcUrls: { [key in NetworkType]: string } = {
       [NetworkType.MAINNET]: "https://tzstats.com/",
       [NetworkType.GHOSTNET]: "https://ghost.tzstats.com/",
-      [NetworkType.MONDAYNET]: "https://monday.tzstats.com/",
+      [NetworkType.WEEKLYNET]: "https://ghost.tzstats.com/",
       [NetworkType.DAILYNET]: "https://daily.tzstats.com/",
       [NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
       [NetworkType.EDONET]: "https://edo.tzstats.com/",
@@ -86,7 +89,7 @@ class TzStatsBlockExplorer extends BlockExplorer {
     public readonly rpcUrls: { [key in NetworkType]: string } = {
       [NetworkType.MAINNET]: "https://tzstats.com/",
       [NetworkType.GHOSTNET]: "https://ghost.tzstats.com/",
-      [NetworkType.MONDAYNET]: "https://monday.tzstats.com/",
+      [NetworkType.WEEKLYNET]: "https://ghost.tzstats.com/"",
       [NetworkType.DAILYNET]: "https://daily.tzstats.com/",
       [NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
       [NetworkType.EDONET]: "https://edo.tzstats.com/",
@@ -124,7 +127,7 @@ class TzStatsBlockExplorer extends BlockExplorer {
   }
 }
 
-const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
 const wallet = new BeaconWallet({
   name: "Beacon Docs Taquito",
   blockExplorer: new TzStatsBlockExplorer(),

src/docs/advanced/different-node.mdx

@@ -47,7 +47,7 @@ import { TezosToolkit } from "@taquito/taquito";
 import { BeaconWallet } from "@taquito/beacon-wallet";
 import { Regions } from "@airgap/beacon-sdk";
 
-const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
 const wallet = new BeaconWallet({
   name: "Beacon Docs Taquito",
   matrixNodes: {

src/docs/advanced/sdk-info.mdx

@@ -5,6 +5,8 @@ title: Client Info
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
+The following page lists all the different options in Beacon to retrieve and display information about the SDK.
+
 <Tabs
   groupId="beaconOrTaquitoSI1"
   defaultValue="beacon"
@@ -67,7 +69,7 @@ console.log(`Connected Peers:`, await dAppClient.getPeers());
 import { TezosToolkit } from "@taquito/taquito";
 import { BeaconWallet } from "@taquito/beacon-wallet";
 
-const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
 const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" });
 
 Tezos.setWalletProvider(wallet);
@@ -131,7 +133,7 @@ import { TezosToolkit } from "@taquito/taquito";
 import { BeaconWallet } from "@taquito/beacon-wallet";
 import { DAppClient, NetworkType } from "@airgap/beacon-sdk";
 
-const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
 const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" });
 
 Tezos.setWalletProvider(wallet);

src/docs/advanced/ui-elements.mdx

@@ -150,7 +150,7 @@ import { BeaconEvent, defaultEventCallbacks } from "@airgap/beacon-sdk";
 import { TezosToolkit } from "@taquito/taquito";
 import { BeaconWallet } from "@taquito/beacon-wallet";
 
-const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
 const wallet = new BeaconWallet({
   name: "Beacon Docs Taquito",
   disableDefaultEvents: true, // Disable all events / UI. This also disables the pairing alert.
@@ -261,7 +261,7 @@ import {
   AnalyticsInterface,
 } from "@airgap/beacon-sdk";
 
-const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
 const wallet = new BeaconWallet({
   name: "Beacon Docs Taquito",
   eventHandlers: {
@@ -332,8 +332,7 @@ import {
   AnalyticsInterface,
 } from "@airgap/beacon-sdk";
 
-
-  const dAppClient = new DAppClient({
+const dAppClient = new DAppClient({
     name: "Beacon Docs",
     eventHandlers: {
       [BeaconEvent.PAIR_INIT]: {
@@ -398,8 +397,7 @@ import {
   AnalyticsInterface,
 } from "@airgap/beacon-sdk";
 
-
-  const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
   const wallet = new BeaconWallet({
     name: "Beacon Docs Taquito",
     eventHandlers: {

src/docs/blockchains/blockchain-substrate.md

@@ -189,11 +189,8 @@ export interface SubstrateSignPayloadRequest
           isMutable: boolean;
           dataType: "bytes" | "payload";
           data: string;
-
-
-    mode: "submit" | "submit-and-return" | "return";
-
-}
+          mode: "submit" | "submit-and-return" | "return";
+        }
 ```
 
 ### Sign Payload Response

src/docs/blockchains/blockchain-tezos-sapling.md

@@ -53,9 +53,7 @@ export interface TezosSaplingPermissionRequest
       type: NetworkType;
       name?: string;
       rpcUrl?: string;
-
-
-}
+    }
 ```
 
 ### Permission Response

src/docs/blockchains/usage.md

@@ -79,10 +79,7 @@ client.connect(async (message) => {
                 "3b92229274683b338cf8b040cf91ac0f8e19e410f06eda5537ef077e718e0024",
             },
           ],
-        },
-
-
-      // Send response back to dApp
+        },      // Send response back to dApp
       client.respond(response);
     }
   }