diff --git a/docs/content/developer/getting-started/build-test.mdx b/docs/content/developer/getting-started/build-test.mdx index 4b87d9c2db1..879a30aa9d3 100644 --- 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 index 3153e6bdc06..f0fc87adebd 100644 --- 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( , ); ``` + ### `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( - - - - - - - - - , + + + + + + + + + , ); ``` @@ -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 ( -
-
- -
-
- ); + return ( +
+
+ +
+
+ ); } ``` @@ -178,25 +187,25 @@ details about the connected wallet account. import { ConnectButton, useCurrentAccount } from '@iota/dapp-kit'; function App() { - return ( -
-
- -
- - -
- ); + return ( +
+
+ +
+ + +
+ ); } function ConnectedAccount() { - const account = useCurrentAccount(); + const account = useCurrentAccount(); - if (!account) { - return null; - } + if (!account) { + return null; + } - return
Connected to {account.address}
; + return
Connected to {account.address}
; } ``` @@ -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 ( -
-
Connected to {account.address}
; - -
-); + const account = useCurrentAccount(); + + if (!account) { + return null; + } + + return ( +
+
Connected to {account.address}
; + +
+ ); } function OwnedObjects({ address }: { address: string }) { - const { data } = useIOTAClientQuery('getOwnedObjects', { - owner: address, - }); - if (!data) { - return null; - } - - return ( - -); + const { data } = useIOTAClientQuery('getOwnedObjects', { + owner: address, + }); + if (!data) { + return null; + } + + return ( + + ); } ``` diff --git a/docs/content/developer/getting-started/create-a-module.mdx b/docs/content/developer/getting-started/create-a-module.mdx index 646adcfa3dc..173253e02cc 100644 --- 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 index ad0594915a6..391a4380b37 100644 --- 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 index 7cdd904bf2e..720edaed286 100644 --- 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 diff --git a/docs/content/developer/getting-started/first-app/client-tssdk.mdx b/docs/content/developer/getting-started/first-app/client-tssdk.mdx deleted file mode 100644 index 90c0a3840d8..00000000000 --- a/docs/content/developer/getting-started/first-app/client-tssdk.mdx +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Client App with IOTA TypeScript SDK ---- - -import InfoPnpmRequired from "../../../_snippets/info-pnpm-required.mdx"; -import AlphaNet from "../../../_snippets/alphanet.mdx"; - -This exercise diverges from the example built in the previous topics in this section. Rather than adding a frontend to the running example, the instruction walks you through setting up dApp Kit in a React App, allowing you to connect to wallets, and query data from IOTA RPC nodes to display in your app. You can use it to create your own frontend for the example used previously, but if you want to get a fully functional app up and running quickly, run the following command in a terminal or console to scaffold a new app with all steps in this exercise already implemented: - - - -```bash -pnpm create @iota/dapp --template react-client-dapp -``` - -or - -```bash -yarn create @iota/dapp --template react-client-dapp -``` - -## What is the IOTA TypeScript SDK? - -The IOTA TypeScript SDK (@iota/iota-sdk) provides all the low-level functionality needed to interact with IOTA ecosystem from TypeScript. You can use it in any TypeScript or JavaScript project, including web apps, Node.js apps, or mobile apps written with tools like React Native that support TypeScript. - -For more information on the IOTA TypeScript SDK, see the [IOTA TypeScript SDK documentation](../../../references/ts-sdk/typescript/index.mdx). - -## What is dApp Kit? - -dApp Kit (@iota/dapp-kit) is a collection of React hooks, components, and utilities that make building dApps on IOTA straightforward. For more information on dApp Kit, see the [dApp Kit documentation](../../../references/ts-sdk/dapp-kit/index.mdx). - -## Installing dependencies - -To get started, you need a React app. The following steps apply to any React, so you can follow the same steps to add dApp Kit to an existing React app. If you are starting a new project, you can use Vite to scaffold a new React app. - -Run the following command in your terminal or console, and select React as the framework, and then select one of the TypeScript 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-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 a couple of `Provider` components. - -Open the root component that renders your app (the default location the Vite template uses is `src/main.tsx`) and integrate or replace the current code with the following. - -The first `Provider` to set up is the `QueryClientProvider` from `@tanstack/react-query`. This `Provider` manages request state for various hooks in dApp kit. If you're already using `@tanstack/react-query`, dApp Kit can share the same `QueryClient` instance. - -```ts -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; - -const queryClient = new QueryClient(); - -ReactDOM.createRoot(document.getElementById('root')!).render( - - - - - , -); -``` - - -Next, set up the `IOTAClientProvider`. This `Provider` delivers a `IOTAClient` instance from `@iota/iota-sdk` to all the hooks in dApp Kit. This provider manages which network dApp Kit connects to, and can accept configuration for multiple networks. This exercise connects to `devnet`. - -```ts -import { IOTAClientProvider } from '@iota/dapp-kit'; -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') }, -}; - -ReactDOM.createRoot(document.getElementById('root')!).render( - - - - - - - , -); -``` - -Finally, set up the `WalletProvider` from `@iota/dapp-kit`, and import styles for the `dapp-kit` components. - -```ts -import '@iota/dapp-kit/dist/index.css'; - -import { IOTAClientProvider, WalletProvider } from '@iota/dapp-kit'; -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') }, -}; - -ReactDOM.createRoot(document.getElementById('root')!).render( - - - - - - - - - , -); -``` - -## Connecting to a wallet - -With all `Providers` set up, you can use dApp Kit hooks and components. To allow users to connect their wallets to your dApp, add a `ConnectButton`. - -```ts -import { ConnectButton } from '@iota/dapp-kit'; - -function App() { - return ( -
-
- -
-
- ); -} -``` - -The `ConnectButton` component displays a button that opens a modal on click, enabling the user to connect their wallet. Upon connection, it displays their address, and provides the option to disconnect. - -## Getting the connected wallet address - -Now that you have a way for users to connect their wallets, you can start using the `useCurrentAccount` hook to get details about the connected wallet account. - -```ts -import { ConnectButton, useCurrentAccount } from '@iota/dapp-kit'; - -function App() { - return ( -
-
- -
- - -
- ); -} - -function ConnectedAccount() { - const account = useCurrentAccount(); - - if (!account) { - return null; - } - - return
Connected to {account.address}
; -} -``` - -## Querying data from IOTA RPC nodes - -Now that you have the account to connect to, you can query for objects the connected account owns: - -```ts -import { useCurrentAccount, useIOTAClientQuery } from '@iota/dapp-kit'; - -function ConnectedAccount() { - const account = useCurrentAccount(); - - if (!account) { - return null; - } - - return ( -
-
Connected to {account.address}
; - -
- ); -} - -function OwnedObjects({ address }: { address: string }) { - const { data } = useIOTAClientQuery('getOwnedObjects', { - owner: address, - }); - if (!data) { - return null; - } - - return ( - - ); -} -``` - -You now have a dApp connected to wallets and can query data from RPC nodes. - -## Related links - -The next step from here is to start interacting with Move modules, constructing transaction blocks, and making Move calls. This exercise continues in the Counter end-to-end example. - -- [IOTA 101](../../iota-101.mdx): Learn the basics of the IOTA network and how to interact with on-chain objects using Move. -- [IOTA Move CLI](/references/cli/move.mdx): The `move` commands in the IOTA CLI provide console or terminal interaction with the Move VM. diff --git a/docs/content/developer/getting-started/publish.mdx b/docs/content/developer/getting-started/publish.mdx index 68f2947635c..cbb62fcf8be 100644 --- a/docs/content/developer/getting-started/publish.mdx +++ b/docs/content/developer/getting-started/publish.mdx @@ -1,6 +1,6 @@ --- description: Learn how to publish your Move package on the IOTA network and interact with it using programmable transaction blocks. -tags: [Move, Package Publishing, Programmable Transactions] +tags: [move, how-to, cli] --- import AddressPrefix from "../../_snippets/address-prefix.mdx";