+ );
+
+ function create() {
+ props.onCreated('TODO');
+ }
}
```
@@ -171,32 +171,32 @@ To do this, you need to construct a `TransactionBlock`, with the appropriate `mo
First, import `TransactionBlock` from `@mysten/sui.js`, `COUNTER_PACKAGE_ID` from your constants.ts file created previously, and `useSignAndExecuteTransactionBlock` from `@mysten/dapp-kit`.
```ts
-import { useSignAndExecuteTransactionBlock } from "@mysten/dapp-kit";
-import { TransactionBlock } from "@mysten/sui.js/transactions";
+import { useSignAndExecuteTransactionBlock } from '@mysten/dapp-kit';
+import { TransactionBlock } from '@mysten/sui.js/transactions';
-import { COUNTER_PACKAGE_ID } from "./constants";
+import { COUNTER_PACKAGE_ID } from './constants';
```
Next, call the `useSignAndExecuteTransactionBlock` hook in your component, which provides a `mutate` function you can use in your `create` function:
```ts
export function CreateCounter(props: { onCreated: (id: string) => void }) {
- const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock();
- return (
-
+ );
+
+ function executeMoveCall(method: 'increment' | 'reset') {
+ // TODO
+ }
}
function getCounterFields(data: SuiObjectData) {
- if (data.content?.dataType !== 'moveObject') {
- return null;
- }
+ if (data.content?.dataType !== 'moveObject') {
+ return null;
+ }
- return data.content.fields as { value: number; owner: string };
+ return data.content.fields as { value: number; owner: string };
}
```
@@ -379,51 +379,51 @@ The code also adds an `executeMoveCall` function that still needs implementing.
```ts
import {
- useCurrentAccount,
- useSignAndExecuteTransactionBlock,
- useSuiClient,
- useSuiClientQuery,
-} from "@mysten/dapp-kit";
-import { SuiObjectData } from "@mysten/sui.js/client";
-import { TransactionBlock } from "@mysten/sui.js/transactions";
+ useCurrentAccount,
+ useSignAndExecuteTransactionBlock,
+ useSuiClient,
+ useSuiClientQuery,
+} from '@mysten/dapp-kit';
+import { SuiObjectData } from '@mysten/sui.js/client';
+import { TransactionBlock } from '@mysten/sui.js/transactions';
-import { COUNTER_PACKAGE_ID } from "./constants";
+import { COUNTER_PACKAGE_ID } from './constants';
export function Counter({ id }: { id: string }) {
- const currentAccount = useCurrentAccount();
- const suiClient = useSuiClient();
- const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock();
-
- // ...
-
- function executeMoveCall(method: "increment" | "reset") {
- const txb = new TransactionBlock();
-
- if (method === "reset") {
- txb.moveCall({
- arguments: [txb.object(id), txb.pure.u64(0)],
- target: `${COUNTER_PACKAGE_ID}::counter::set_value`,
- });
- } else {
- txb.moveCall({
- arguments: [txb.object(id)],
- target: `${COUNTER_PACKAGE_ID}::counter::increment`,
- });
- }
-
- signAndExecute(
- {
- transactionBlock: txb,
- },
- {
- onSuccess: (tx) => {
- suiClient.waitForTransactionBlock({ digest: tx.digest }).then(() => {
- refetch();
- });
- },
- },
- );
- }
+ const currentAccount = useCurrentAccount();
+ const suiClient = useSuiClient();
+ const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock();
+
+ // ...
+
+ function executeMoveCall(method: 'increment' | 'reset') {
+ const txb = new TransactionBlock();
+
+ if (method === 'reset') {
+ txb.moveCall({
+ arguments: [txb.object(id), txb.pure.u64(0)],
+ target: `${COUNTER_PACKAGE_ID}::counter::set_value`,
+ });
+ } else {
+ txb.moveCall({
+ arguments: [txb.object(id)],
+ target: `${COUNTER_PACKAGE_ID}::counter::increment`,
+ });
+ }
+
+ signAndExecute(
+ {
+ transactionBlock: txb,
+ },
+ {
+ onSuccess: (tx) => {
+ suiClient.waitForTransactionBlock({ digest: tx.digest }).then(() => {
+ refetch();
+ });
+ },
+ },
+ );
+ }
}
```
diff --git a/docs/content/guides/developer/first-app/client-tssdk.mdx b/docs/content/guides/developer/first-app/client-tssdk.mdx
index 9e57f2e955f79..c44805ce65a7b 100644
--- a/docs/content/guides/developer/first-app/client-tssdk.mdx
+++ b/docs/content/guides/developer/first-app/client-tssdk.mdx
@@ -7,8 +7,9 @@ This exercise walks you through setting up dApp Kit in a React App, allowing you
{@include: ../../../snippets/info-pnpm-required.mdx}
```bash
-pnpm create @mysten/create-dapp --template react-client-dapp
+pnpm create @mysten/dapp --template react-client-dapp
```
+
## What is the Sui TypeScript SDK?
The Sui TypeScript SDK (@mysten/sui.js) provides all the low-level functionality needed to interact with Sui 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.
@@ -49,11 +50,11 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById('root')!).render(
-
-
-
-
- ,
+
+
+
+
+ ,
);
```
@@ -66,18 +67,18 @@ 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(
-
-
-
-
-
-
- ,
+
+
+
+
+
+
+ ,
);
```
@@ -92,20 +93,20 @@ 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(
-
-
-
-
-
-
-
-
- ,
+
+
+
+
+
+
+
+
+ ,
);
```
@@ -117,13 +118,13 @@ With all `Providers` set up, you can use dApp Kit hooks and components. To allow
import { ConnectButton } from '@mysten/dapp-kit';
function App() {
- return (
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+ );
}
```
@@ -137,25 +138,25 @@ Now that you have a way for users to connect their wallets, you can start using
import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';
function App() {
- return (
-
;
}
```
@@ -167,43 +168,43 @@ Now that you have the account to connect to, you can query for objects the conne
import { useCurrentAccount, useSuiClientQuery } from '@mysten/dapp-kit';
function ConnectedAccount() {
- const { account } = useCurrentAccount();
-
- if (!account) {
- return null;
- }
-
- return (
-
+ );
}
```
-You now have a dApp connected to wallets and can query data from RPC nodes.
+You now have a dApp connected to wallets and can query data from RPC nodes.
## Related links
diff --git a/sdk/create-dapp/README.md b/sdk/create-dapp/README.md
index bb5be630e053a..73af38ac197bb 100644
--- a/sdk/create-dapp/README.md
+++ b/sdk/create-dapp/README.md
@@ -5,7 +5,7 @@
You can get started quickly by running the following command:
```bash
-pnpm create @mysten/create-dapp
+pnpm create @mysten/dapp
```
This will prompt you through creating a new dApp project. It will ask you for the name/directory and
diff --git a/sdk/docs/pages/dapp-kit/create-dapp.mdx b/sdk/docs/pages/dapp-kit/create-dapp.mdx
index 25b62b13b0dea..6f9d7208e43f2 100644
--- a/sdk/docs/pages/dapp-kit/create-dapp.mdx
+++ b/sdk/docs/pages/dapp-kit/create-dapp.mdx
@@ -5,7 +5,7 @@
You can get started quickly by running the following command:
```bash
-pnpm create @mysten/create-dapp
+pnpm create @mysten/dapp
```
This will prompt you through creating a new dApp project. It will ask you for the name/directory and