Skip to content

Commit

Permalink
[dapp-kit] update docs to include a snippet about importing the CSS s…
Browse files Browse the repository at this point in the history
…tylesheet (MystenLabs#14920)

## Description 

A builder in Discord was confused about why the provided UI components
weren't displaying correctly in their app, and it was because they
didn't realize they needed to import the CSS file for dApp Kit into
their application. I noticed we don't have anything in our documentation
about this, so I'm adding a section in the docs with this PR 😄

<img width="1379" alt="image"
src="https://github.com/MystenLabs/sui/assets/7453188/cf346843-1fbf-4893-9cbd-c0c9c01ad140">

https://mysten-labs.slack.com/archives/C0393DWJD7X/p1700380725599999

## Test Plan 
- 👁️ 

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] protocol change
- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes
  • Loading branch information
williamrobertson13 authored Nov 20, 2023
1 parent 6b9461d commit 6cc0e6c
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 8 deletions.
23 changes: 19 additions & 4 deletions sdk/dapp-kit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ To use the Sui dApp Kit in your project, run the following command in your proje
npm i --save @mysten/dapp-kit @mysten/sui.js @tanstack/react-query
```

## Setting up Providers
## Setting up providers

To be able to use the hooks and components in the dApp Kit, you need to wrap your app with a couple
providers. The props available on the providers are covered in more detail in their respective docs
Expand Down Expand Up @@ -58,11 +58,26 @@ function App() {
}
```

## using hooks to make rpc calls
## Using UI components to connect to a wallet

The dApp Kit provides a set of hooks for making rpc calls to the Sui blockchain. The hooks are thin
The dApp Kit provides a set of flexible UI components that can be used to connect and manage wallet
accounts from your dApp. The components are built on top of [Radix UI](radix-ui.com/primitives) and
are customizable so you can quickly get your dApp up and running.

To use our provided UI components, you will need to import the dApp Kit's CSS stylesheet into your
dApp as shown below. For more information regarding customization options, check out the respective
documentation pages for the components and
[themes](https://sui-typescript-docs.vercel.app/dapp-kit/themes).

```tsx
import '@mysten/dapp-kit/dist/index.css';
```

## Using hooks to make RPC calls

The dApp Kit provides a set of hooks for making RPC calls to the Sui blockchain. The hooks are thin
wrappers around `useQuery` from `@tanstack/react-query`. For more comprehensive documentation on how
these query hooks checkout the
these query hooks can be used, check out the
[react-query docs](https://tanstack.com/query/latest/docs/react/overview).

```tsx
Expand Down
23 changes: 19 additions & 4 deletions sdk/docs/pages/dapp-kit/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ To use the Sui dApp Kit in your project, run the following command in your proje
npm i --save @mysten/dapp-kit @mysten/sui.js @tanstack/react-query
```

## Setting up Providers
## Setting up providers

To be able to use the hooks and components in the dApp Kit, you need to wrap your app with a couple
providers. The props available on the providers are covered in more detail in their respective docs
Expand Down Expand Up @@ -56,11 +56,26 @@ function App() {
}
```

## using hooks to make rpc calls
## Using UI components to connect to a wallet

The dApp Kit provides a set of hooks for making rpc calls to the Sui blockchain. The hooks are thin
The dApp Kit provides a set of flexible UI components that can be used to connect and manage wallet
accounts from your dApp. The components are built on top of [Radix UI](radix-ui.com/primitives) and
are customizable so you can quickly get your dApp up and running.

To use our provided UI components, you will need to import the dApp Kit's CSS stylesheet into your
dApp as shown below. For more information regarding customization options, check out the respective
documentation pages for the components and
[themes](https://sui-typescript-docs.vercel.app/dapp-kit/themes).

```tsx
import '@mysten/dapp-kit/dist/index.css';
```

## Using hooks to make RPC calls

The dApp Kit provides a set of hooks for making RPC calls to the Sui blockchain. The hooks are thin
wrappers around `useQuery` from `@tanstack/react-query`. For more comprehensive documentation on how
these query hooks checkout the
these query hooks can be used, check out the
[react-query docs](https://tanstack.com/query/latest/docs/react/overview).

```tsx
Expand Down

0 comments on commit 6cc0e6c

Please sign in to comment.