fix: refactor wiki examples

package.json

@@ -18,7 +18,7 @@
     "pretty-docs": "npx prettier --ignore-unknown --write 'docs/**/*'",
     "remove-folders": "rm -rf build-docs && rm -rf docs",
     "clear-folders": "npm run remove-folders && mkdir build-docs && mkdir docs",
-    "embed-code": "npm run prettier && tsc --module es2015 --target es2015 --moduleResolution node --allowSyntheticDefaultImports 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"
+    "embed-code": "tsc --module es2015 --target es2015 --moduleResolution node --allowSyntheticDefaultImports 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"
   },
   "dependencies": {
     "@airgap/beacon-sdk": "^4.0.10",

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

@@ -1,8 +1,19 @@
 ---
 title: Custom Block Explorer
 ---
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
-<!-- embedme custom-block-explorer.beacon.ts -->
+
+<Tabs
+  groupId="beaconOrTaquitoCBE"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import {
@@ -13,22 +24,22 @@ import {
 } from "@airgap/beacon-sdk";
 
 async () => {
-  class TzStatsBlockExplorer extends BlockExplorer {
-    constructor(
-      public readonly rpcUrls: { [key in NetworkType]: string } = {
-        [NetworkType.MAINNET]: "https://tzstats.com/",
-        [NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
-        [NetworkType.EDONET]: "https://edo.tzstats.com/",
-        [NetworkType.FLORENCENET]: "https://florence.tzstats.com/",
-        [NetworkType.GRANADANET]: "https://granada.tzstats.com/",
-        [NetworkType.HANGZHOUNET]: "https://hangzhou.tzstats.com/",
-        [NetworkType.ITHACANET]: "https://ithacanet.tzstats.com/",
-        // [NetworkType.JAKARTANET]: "https://jakartanet.tzstats.com/",
-        [NetworkType.CUSTOM]: "https://jakartanet.tzstats.com/",
-      },
-    ) {
-      super(rpcUrls);
-    }
+class TzStatsBlockExplorer extends BlockExplorer {
+constructor(
+public readonly rpcUrls: { [key in NetworkType]: string } = {
+[NetworkType.MAINNET]: "https://tzstats.com/",
+[NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
+[NetworkType.EDONET]: "https://edo.tzstats.com/",
+[NetworkType.FLORENCENET]: "https://florence.tzstats.com/",
+[NetworkType.GRANADANET]: "https://granada.tzstats.com/",
+[NetworkType.HANGZHOUNET]: "https://hangzhou.tzstats.com/",
+[NetworkType.ITHACANET]: "https://ithacanet.tzstats.com/",
+// [NetworkType.JAKARTANET]: "https://jakartanet.tzstats.com/",
+[NetworkType.CUSTOM]: "https://jakartanet.tzstats.com/",
+},
+) {
+super(rpcUrls);
+}
 
     public async getAddressLink(
       address: string,
@@ -46,16 +57,19 @@ async () => {
 
       return `${blockExplorer}/${transactionId}`;
     }
-  }
 
-  const dAppClient = new DAppClient({
-    name: "Beacon Docs",
-    blockExplorer: new TzStatsBlockExplorer() as any,
-  });
+}
+
+const dAppClient = new DAppClient({
+name: "Beacon Docs",
+blockExplorer: new TzStatsBlockExplorer() as any,
+});
 };
+
 ```
+</TabItem>
 
-<!-- embedme custom-block-explorer.taquito.ts -->
+<TabItem value="taquito">
 
 ```ts
 import { BlockExplorer, NetworkType, Network } from "@airgap/beacon-sdk";
@@ -107,3 +121,6 @@ async () => {
   Tezos.setWalletProvider(wallet);
 };
 ```
+
+</TabItem>
+</Tabs>

src/docs/advanced/different-node.mdx

@@ -1,11 +1,21 @@
 ---
 title: Different Beacon Node
 ---
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 You can configure the DApp or Wallet to connect to a different beacon node.
 Make sure the servers you use are whitelisted in the beacon network and federation is working correctly.
 
-<!-- embedme different-node.beacon.ts -->
+<Tabs
+  groupId="beaconOrTaquitoDN"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import { DAppClient } from "@airgap/beacon-sdk";
@@ -26,7 +36,8 @@ async () => {
 };
 ```
 
-<!-- embedme different-node.taquito.ts -->
+</TabItem>
+<TabItem value="taquito">
 
 ```ts
 import { TezosToolkit } from "@taquito/taquito";
@@ -50,6 +61,9 @@ async () => {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 :::tip
 The beacon-sdk deterministically chooses one of the nodes in the array. Changing the array of nodes will most likely lead to users losing their connection.
 :::

src/docs/advanced/sdk-info.mdx

@@ -1,8 +1,18 @@
 ---
 title: Client Info
 ---
-
-<!-- embedme info-version.beacon.ts -->
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+<Tabs
+  groupId="beaconOrTaquitoSI1"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import { BEACON_VERSION, SDK_VERSION } from "@airgap/beacon-sdk";
@@ -13,7 +23,9 @@ async () => {
 };
 ```
 
-<!-- embedme info-version.taquito.ts -->
+</TabItem>
+
+<TabItem value="taquito">
 
 ```ts
 import { BEACON_VERSION, SDK_VERSION } from "@airgap/beacon-sdk";
@@ -24,7 +36,18 @@ async () => {
 };
 ```
 
-<!-- embedme info-client.beacon.ts -->
+</TabItem>
+</Tabs>
+
+<Tabs
+  groupId="beaconOrTaquitoSI2"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import { DAppClient } from "@airgap/beacon-sdk";
@@ -37,7 +60,9 @@ async () => {
 };
 ```
 
-<!-- embedme info-client.taquito.ts -->
+</TabItem>
+
+<TabItem value="taquito">
 
 ```ts
 import { TezosToolkit } from "@taquito/taquito";
@@ -54,7 +79,18 @@ async () => {
 };
 ```
 
-<!-- embedme info-connection.beacon.ts -->
+</TabItem>
+</Tabs>
+
+<Tabs
+  groupId="beaconOrTaquitoSI3"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import { DAppClient, NetworkType } from "@airgap/beacon-sdk";
@@ -90,7 +126,8 @@ async () => {
 };
 ```
 
-<!-- embedme info-connection.taquito.ts -->
+</TabItem>
+<TabItem value="taquito">
 
 ```ts
 import { TezosToolkit } from "@taquito/taquito";
@@ -130,3 +167,6 @@ async () => {
   console.log("Own Metadata:", ownMetadata);
 };
 ```
+
+</TabItem>
+</Tabs>

src/docs/advanced/ui-elements.mdx

@@ -99,7 +99,15 @@ On Android, there is one link for all mobile apps because the device lets you ch
 
 You can overwrite all of the default UI elements by doing the following.
 
-<!-- embedme disable-all-ui.beacon.ts -->
+<Tabs
+  groupId="beaconOrTaquitoUE1"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import {
@@ -133,7 +141,9 @@ async () => {
 };
 ```
 
-<!-- embedme disable-all-ui.taquito.ts -->
+</TabItem>
+
+<TabItem value="taquito">
 
 ```ts
 import { BeaconEvent, defaultEventCallbacks } from "@airgap/beacon-sdk";
@@ -168,11 +178,22 @@ async () => {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 You can also add your own logic to specific events and still keep the original behaviour.
 
 The same can be achieved without overwriting the default event handler by [subscribing to an event](/guides/subscribe-to-event). This method is preferred, if possible.
 
-<!-- embedme override-default-event.beacon.ts -->
+<Tabs
+  groupId="beaconOrTaquitoUE2"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import {
@@ -219,7 +240,9 @@ async () => {
 };
 ```
 
-<!-- embedme override-default-event.taquito.ts -->
+</TabItem>
+
+<TabItem value="taquito">
 
 ```ts
 import { TezosToolkit } from "@taquito/taquito";
@@ -271,13 +294,24 @@ async () => {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 The closing of the pairing alert can not be listened to by default. The reason for this is the delay in the P2P connections.
 It is possible that a user scans the pairing QR code with his wallet and then closes the alert while waiting for the connection to be established.
 If the dApp interprets the "closing" of the alert as an abort, and a few seconds later the connection is established successfully, the behaviour could be unexpected.
 
 If you still want to be notified of the closing of the pairing window, you can do it in the following way, while keeping the default behaviour.
 
-<!-- embedme override-alert-aborted-handler.beacon.ts -->
+<Tabs
+  groupId="beaconOrTaquitoUE3"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import {
@@ -333,7 +367,9 @@ async () => {
 };
 ```
 
-<!-- embedme override-alert-aborted-handler.taquito.ts -->
+</TabItem>
+
+<TabItem value="taquito">
 
 ```ts
 import { TezosToolkit } from "@taquito/taquito";
@@ -393,3 +429,6 @@ async () => {
   }
 };
 ```
+
+</TabItem>
+</Tabs>

src/docs/getting-started/advanced-example.mdx

@@ -1,6 +1,8 @@
 ---
 title: Advanced Example
 ---
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 The following example will show:
 
@@ -10,7 +12,15 @@ The following example will show:
 4. How to send an operation request
 5. How to "disconnect" a wallet
 
-<!-- embedme example-advanced.beacon.ts -->
+<Tabs
+  groupId="beaconOrTaquitoAE"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
 
 ```ts
 import {
@@ -93,7 +103,9 @@ async () => {
 };
 ```
 
-<!-- embedme example-advanced.taquito.ts -->
+</TabItem>
+
+<TabItem value="taquito">
 
 ```ts
 import { TezosToolkit } from "@taquito/taquito";
@@ -176,3 +188,6 @@ async () => {
   await wallet.clearActiveAccount();
 };
 ```
+
+</TabItem>
+</Tabs>