fix(devx): rebase, fix conflicts, fix tags, fix imports

iotaledger · Aug 13, 2024 · 2766885 · 2766885
1 parent f963a90
commit 2766885
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 302 deletions.
diff --git a/docs/content/developer/getting-started/build-test.mdx b/docs/content/developer/getting-started/build-test.mdx
@@ -1,6 +1,6 @@
 ---
 description: Learn how to build and test Move packages in IOTA with detailed instructions and examples.
-tags: [Move, IOTA, Package Building, Package Testing, Unit Testing, Debugging]
+tags: [move, testing, how-to, cli]
 ---
 
 import TestingCheatSheet from "../../_snippets/testing-cheat-sheet.mdx";

diff --git a/docs/content/developer/getting-started/client-tssdk.mdx b/docs/content/developer/getting-started/client-tssdk.mdx
@@ -1,9 +1,10 @@
 ---
 description: Learn how to build a client application using the IOTA TypeScript SDK and dApp Kit in a React environment.
-tags: [ TypeScript SDK, React, dApp Kit, Wallet Integration ]
+tags: [ typescript, sdk, getting-started, install]
 ---
 
 import InfoPnpmRequired from "../../_snippets/info-pnpm-required.mdx";
+import AlphaNet from "../../_snippets/alphanet.mdx";
 
 # Client App with IOTA TypeScript SDK
 
@@ -32,7 +33,7 @@ yarn create @iota/dapp --template react-client-dapp
 
 ## What is the IOTA TypeScript SDK?
 
-The [IOTA TypeScript SDK](../../references/ts-sdk/typescript/index.mdx) (`@iota/iota.js`) provides the essential
+The [IOTA TypeScript SDK](../../references/ts-sdk/typescript/index.mdx) (`@iota/iota-sdk`) provides the essential
 functionality needed to interact with the IOTA
 ecosystem from TypeScript. It's versatile enough to be used in any TypeScript or JavaScript project, including web apps,
 Node.js applications, or mobile apps developed with tools like React Native that support TypeScript.
@@ -55,12 +56,19 @@ templates:
 ```bash npm2yarn
 npm init vite
 ```
+
 Now that you have a React app, you can install the necessary dependencies to use dApp Kit:
 
 ```bash npm2yarn
-npm install @iota/iota.js @iota/dapp-kit @tanstack/react-query
+npm install @iota/iota-sdk @iota/dapp-kit @tanstack/react-query
 ```
 
+:::info Local version of the SDK
+
+If you'd like to use a locally compiled version of the SDK you can follow the instructions in the [Local Development](local-network.mdx#test-with-the-iota-typescript-sdk) section.
+
+:::
+
 ## Setting Up Provider Components
 
 To use all the features of dApp Kit, wrap your app with several `Provider` components.
@@ -87,6 +95,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 	</React.StrictMode>,
 );
 ```
+<AlphaNet />
 
 ### `IOTAClientProvider`
 
@@ -96,7 +105,7 @@ networks. In this exercise, you'll connect to `devnet`.
 
 ```ts
 import { IOTAClientProvider } from '@iota/dapp-kit';
-import { getFullnodeUrl } from '@iota/iota.js/client';
+import { getFullnodeUrl } from '@iota/iota-sdk/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
@@ -125,25 +134,25 @@ Finally, set up the `WalletProvider` from `@iota/dapp-kit`, and import styles fo
 import '@iota/dapp-kit/dist/index.css';
 
 import { IOTAClientProvider, WalletProvider } from '@iota/dapp-kit';
-import { getFullnodeUrl } from '@iota/iota.js/client';
+import { getFullnodeUrl } from '@iota/iota-sdk/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
 const networks = {
-    devnet: { url: getFullnodeUrl('devnet') },
-    mainnet: { url: getFullnodeUrl('mainnet') },
+	devnet: { url: getFullnodeUrl('devnet') },
+	mainnet: { url: getFullnodeUrl('mainnet') },
 };
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-        <QueryClientProvider client={queryClient}>
-    <IOTAClientProvider networks={networks} defaultNetwork="devnet">
-    <WalletProvider>
-        <App />
-    </WalletProvider>
-    </IOTAClientProvider>
-    </QueryClientProvider>
-    </React.StrictMode>,
+	<React.StrictMode>
+		<QueryClientProvider client={queryClient}>
+			<IOTAClientProvider networks={networks} defaultNetwork="devnet">
+				<WalletProvider>
+					<App />
+				</WalletProvider>
+			</IOTAClientProvider>
+		</QueryClientProvider>
+	</React.StrictMode>,
 );
 ```
 
@@ -156,13 +165,13 @@ allow users to connect their wallets to your dApp, add a `ConnectButton`.
 import { ConnectButton } from '@iota/dapp-kit';
 
 function App() {
-    return (
-        <div className="App">
-        <header className="App-header">
-            <ConnectButton />
-            </header>
-            </div>
-    );
+	return (
+		<div className="App">
+			<header className="App-header">
+				<ConnectButton />
+			</header>
+		</div>
+	);
 }
 ```
 
@@ -178,25 +187,25 @@ details about the connected wallet account.
 import { ConnectButton, useCurrentAccount } from '@iota/dapp-kit';
 
 function App() {
-    return (
-        <div className="App">
-        <header className="App-header">
-            <ConnectButton />
-            </header>
-
-            <ConnectedAccount />
-            </div>
-    );
+	return (
+		<div className="App">
+			<header className="App-header">
+				<ConnectButton />
+			</header>
+
+			<ConnectedAccount />
+		</div>
+	);
 }
 
 function ConnectedAccount() {
-    const account = useCurrentAccount();
+	const account = useCurrentAccount();
 
-    if (!account) {
-        return null;
-    }
+	if (!account) {
+		return null;
+	}
 
-    return <div>Connected to {account.address}</div>;
+	return <div>Connected to {account.address}</div>;
 }
 ```
 
@@ -208,39 +217,39 @@ Now that you have the account connected, you can query for objects that the conn
 import { useCurrentAccount, useIOTAClientQuery } from '@iota/dapp-kit';
 
 function ConnectedAccount() {
-    const account = useCurrentAccount();
-
-    if (!account) {
-        return null;
-    }
-
-    return (
-        <div>
-            <div>Connected to {account.address}</div>;
-    <OwnedObjects address={account.address} />
-    </div>
-);
+	const account = useCurrentAccount();
+
+	if (!account) {
+		return null;
+	}
+
+	return (
+		<div>
+			<div>Connected to {account.address}</div>;
+			<OwnedObjects address={account.address} />
+		</div>
+	);
 }
 
 function OwnedObjects({ address }: { address: string }) {
-    const { data } = useIOTAClientQuery('getOwnedObjects', {
-        owner: address,
-    });
-    if (!data) {
-        return null;
-    }
-
-    return (
-        <ul>
-            {data.data.map((object) => (
-                    <li key={object.data?.objectId}>
-                    <a href={`https://example-explorer.com/object/${object.data?.objectId}`}>
-        {object.data?.objectId}
-        </a>
-        </li>
-    ))}
-    </ul>
-);
+	const { data } = useIOTAClientQuery('getOwnedObjects', {
+		owner: address,
+	});
+	if (!data) {
+		return null;
+	}
+
+	return (
+		<ul>
+			{data.data.map((object) => (
+				<li key={object.data?.objectId}>
+					<a href={`https://explorer.iota.cafe/object/${object.data?.objectId}`}>
+						{object.data?.objectId}
+					</a>
+				</li>
+			))}
+		</ul>
+	);
 }
 ```
 

diff --git a/docs/content/developer/getting-started/create-a-module.mdx b/docs/content/developer/getting-started/create-a-module.mdx
@@ -1,6 +1,6 @@
 ---
 description: Guide to creating and understanding a Move module in an IOTA package.
-tags: [IOTA, Move, module, smart contract, development]
+tags: [move,  getting-started]
 ---
 
 # Create a Move Module

diff --git a/docs/content/developer/getting-started/create-a-package.mdx b/docs/content/developer/getting-started/create-a-package.mdx
@@ -1,6 +1,6 @@
 ---
 description: How to create a Move package in IOTA
-tags: [ Move, Package Creation, .toml, manifest ]
+tags: [ move, getting-started ]
 ---
 
 # Create a Move Package

diff --git a/docs/content/developer/getting-started/debug.mdx b/docs/content/developer/getting-started/debug.mdx
@@ -1,6 +1,6 @@
 ---
 description: Learn how to use the std::debug module in Move for debugging and printing values.
-tags: [Move, debugging, std::debug, smart contracts]
+tags: [move, getting-started, testing]
 ---
 # Debugging