Loading name...
;
+ if (error) return
+
Address: {address}
+ {defaultName &&
SuiNS Name: {defaultName}
}
+ {names.length > 1 && (
+
Other names: {names.slice(1).join(', ')}
+ )}
+
Loading names...
;
+ if (error) return {
+ // ... some code to get the tx_bytes, signature, and pub_key
+ const resp = await executeTransactionBlock({
+ transactionBlock: tx,
+ signature: signature,
+ });
+ // resp is the response from the RPC, and has detailed typings defination
+ }}
+ >...
+ );
+}
+```
diff --git a/website/docs/Hooks/useWallet.md b/website/docs/Hooks/useWallet.md
new file mode 100644
index 00000000..a4193d7b
--- /dev/null
+++ b/website/docs/Hooks/useWallet.md
@@ -0,0 +1,447 @@
+---
+sidebar_position: 1
+---
+
+# useWallet
+
+## Description
+
+`useWallet` is the most useful React Hook to play with. For details of React Hook, check
+the [React doc](https://reactjs.org/docs/hooks-intro.html).
+
+It retrieves all the properties and functions from [WalletProvider](/docs/components/walletprovider), with which you can
+get properties and call functions of a connected wallet.
+
+:::tip
+
+Make sure it runs in a React component under `WalletProvider`
+
+:::
+
+## Examples
+
+### Basic Usage
+
+We start with a simple senario like getting information from the connected wallet .
+
+```jsx
+import {useWallet} from '@suiet/wallet-kit'
+
+function App() {
+ const wallet = useWallet();
+ console.log('wallet status', wallet.status)
+ console.log('connected wallet name', wallet.name)
+ console.log('connected account info', wallet.account)
+}
+```
+
+### Sign and Execute Transactions
+
+Sui introduces a new concept of [Programmable Transaction](https://github.com/MystenLabs/sui/issues/7790)
+to make it flexible for developers to define transactions, such as allowing third-party to set gas payment and executing
+batch transactions in one call.
+
+> For more details of Programmable Transaction,
+> check [Sui docs](https://docs.sui.io/devnet/doc-updates/sui-migration-guide#building-and-executing-transaction)
+
+Here we define a `moveCall` transaction to implement a simple nft minting example.
+
+```jsx
+import {useWallet} from '@suiet/wallet-kit'
+
+function App() {
+ const wallet = useWallet();
+
+ async function handleSignAndExecuteTxBlock() {
+ if (!wallet.connected) return
+
+ // define a programmable transaction
+ const tx = new TransactionBlock();
+ const packageObjectId = "0xXXX";
+ tx.moveCall({
+ target: `${packageObjectId}::nft::mint`,
+ arguments: [tx.pure("Example NFT")],
+ });
+
+ try {
+ // execute the programmable transaction
+ const resData = await wallet.signAndExecuteTransactionBlock({
+ transactionBlock: tx
+ });
+ console.log('nft minted successfully!', resData);
+ alert('Congrats! your nft is minted!')
+ } catch (e) {
+ console.error('nft mint failed', e);
+ }
+ }
+
+ return (
+
Mint Your NFT !
+ )
+}
+```
+
+### Sign Personal Message
+
+[Message signing](https://en.bitcoin.it/wiki/Message_signing#:~:text=Message%20signing%20is%20the%20action,they%20correspond%20to%20each%20other.)
+is an important action to **verify whether an approval is confirmed by the owner of an account**.
+
+It is useful for DApp to ask user's approval for senarios like approving Terms of Service and Privacy Policy (Below is
+an example of message signing in OpenSea, the NFT marketplace in Ethereum)
+
+
+
+Here is an example for signing a simple message "Hello World".
+
+> Notice that all the params are Uint8Array (i.e. bytes) type. For browser app, you can
+> use [TextEncoder](https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder) to encode and decode.
+
+
+
+```tsx
+import {useWallet} from '@suiet/wallet-kit'
+import * as tweetnacl from 'tweetnacl'
+
+function App() {
+ const wallet = useWallet();
+
+ async function handleSignMsg() {
+ try {
+ const msg = 'Hello world!'
+ // convert string to Uint8Array
+ const msgBytes = new TextEncoder().encode(msg)
+
+ const result = await wallet.signPersonalMessage({
+ message: msgBytes
+ })
+ // directly input the signed result for verification
+ const verifyResult = await wallet.verifySignedPersonalMessage(result)
+ if (!verifyResult) {
+ console.log('signPersonalMessage succeed, but verify signedMessage failed')
+ } else {
+ console.log('signPersonalMessage succeed, and verify signedMessage succeed!')
+ }
+ } catch (e) {
+ console.error('signPersonalMessage failed', e)
+ }
+ }
+
+ return (
+
Sign Message
+ )
+}
+```
+
+### Get the connected chain (network) of wallet
+
+:::caution
+
+Since this is not a standard feature, not all the wallet has implemented. Check [Can I Use](/docs/CanIUse) for further
+information.
+
+:::
+
+Your dapp can get the current connected chain of wallet.
+
+:::info
+For most wallets, if **user switches network inside the wallet**, the value **WOULD NOT** get updated. (Except for Suiet Wallet, we implemented this network change notification for a better development experience)
+
+This is because Sui team suggests each dapp should separate the environments for each chain (sui:devnet, sui:testnet, sui:mainnet).
+And the active chain returned by the connected wallet could be used to match the dapp's environment.
+
+In a nutshell, eliminating the need to switch network for dapp is a better user experience for a long term.
+:::
+
+```tsx
+import {useWallet} from '@suiet/wallet-kit'
+import * as tweetnacl from 'tweetnacl'
+
+function App() {
+ const wallet = useWallet();
+
+ useEffect(() => {
+ if (!wallet.connected) return;
+ console.log('current connected chain (network)', wallet.chain?.name) // example output: "sui:devnet", "sui:testnet" or "sui:mainnet"
+ }, [wallet.connected])
+}
+```
+
+## API References
+
+### name
+
+The name of connected wallet.
+
+| Type | Default |
+| ------------------- | --------- |
+| string \| undefined | undefined |
+
+### connection status
+
+The connection status of wallet.
+
+| Properties | Type | Default |
+| ---------- | ------------------------------------------------ | -------------- |
+| connecting | boolean | false |
+| connected | boolean | false |
+| status | 'disconnected' \| 'connecting' \| 'connected' | 'disconnected' |
+
+```ts
+const {status, connected, connecting} = useWallet();
+
+// the assert expressions are equally the same
+assert(status === 'disconnected', !connecting && !connected); // not connect to wallet
+assert(status === 'connecting', connecting); // now connecting to the wallet
+assert(status === 'connected', connected); // connected to the wallet
+```
+
+### account
+
+The account info in the connected wallet, including address, publicKey etc.
+
+| Type | Default |
+| ------------------------------------------ | --------- |
+| [WalletAccountExtended](/docs/Types#walletaccountextended) | undefined |
+
+```ts
+const {connected, account} = useWallet();
+
+function printAccountInfo() {
+ if (!connected) return
+ console.log(account?.address)
+ console.log(account?.suinsName) // should enableSuiNS first
+ console.log(account?.publicKey)
+}
+```
+
+### address
+
+Alias for `account.address`
+
+### select
+
+| Type | Default |
+| ---------------------------- | ------- |
+| (WalletName: string) => void | |
+
+### getAccounts
+
+Get all the accessible accounts returned by wallet.
+
+| Type | Default |
+| ----------------------- | ------- |
+| () => string[] | |
+
+The getAccounts will return the permitted account list of the current wallet.
+
+```jsx
+import {useWallet} from '@suiet/wallet-kit';
+
+function YourComponent() {
+ const wallet = useWallet();
+
+ function handleGetAccounts() {
+ if (!wallet.connected) return;
+ const accounts = wallet.getAccounts();
+ console.log('Permitted accounts of this wallet:', accounts)
+ }
+}
+```
+
+### switchAccount
+
+Switches the current main `account` to the one with the given address.
+
+Make sure the address you're switching to is available in the wallet's accounts. You can use `wallet.getAccounts()` to get the list of available accounts.
+
+
+| Type | Default |
+| --------------------------------------------------------------------------------------------------------- | ------- |
+| `(address: string) => Promise
` | |
+
+```tsx
+import { useWallet } from "@suiet/wallet-kit";
+
+function YourComponent() {
+ const wallet = useWallet();
+
+ async function handleSwitchAccount() {
+ if (!wallet.connected) return;
+
+ const accounts = wallet.getAccounts();
+ try {
+ if (accounts.length > 1) {
+ const newAccount = await wallet.switchAccount(accounts[1]);
+ console.log('Successfully switched to new account: ', newAccount)
+ } else {
+ console.log('Failed to switch account due to only one proposed account by wallet')
+ }
+ } catch (e) {
+ console.error("Failed to switch account:", e);
+ }
+ }
+
+ return Switch Account ;
+}
+```
+
+### chains
+
+Configuration of supported chains from WalletProvider
+
+| Type | Default |
+| ----------------------------- | ----------------------------------- |
+| [Chain](/docs/Types/#Chain)[] | [DefaultChains](/docs/Types/#Chain) |
+
+### chain
+
+Current connected chain of wallet.
+
+Might not be synced with the wallet if the wallet doesn't support wallet-standard "change" event.
+
+| Type | Default |
+| ------ | ------------------------------------------------------------ |
+| string | the first value of configured [chains](./#chains) or [UnknownChain](/docs/Types/#Chain) |
+
+### adapter
+
+The adapter normalized from the raw adapter of the connected wallet. You can call all the properties and functions on
+it, which is followed
+the [@mysten/wallet-standard](https://github.com/MystenLabs/sui/tree/main/sdk/wallet-adapter/wallet-standard)
+
+| Type | Default |
+|----------------------------------| --------- |
+| [IWalletAdapter](/docs/Types#IWalletAdapter) | undefined | undefined |
+
+### signTransaction
+
+The function is for transaction signing.
+
+| Type | Default |
+|--------------------------------------------------------------| ------- |
+| `({transaction: Transaction}) => Promise` | |
+
+
+### signAndExecuteTransaction
+
+This is a new API that implements the new recommended flow of signing, executing transactions and reporting the results to the connected wallet, which gives your DApp a fine-grained control for the execution and thus benefits the e2e latency and data consistency.
+
+With this new feature, you can use the `signAndExecuteTransaction` method to sign transactions and have them executed by submitting signed transactions to the fullnode RPC with the control on your DApp side instead of the wallet side.
+
+This is an enhanced API of `signAndExecuteTransactionBlock` where the comparison between the two APIs are shown in the table.
+
+| API | Execution | FullNode for Execution | GraphQL API support |
+|:-:|:-----------------:| :-: |:-------------------------------------------------------:|
+| signAndExecuteTransactionBlock | on Wallet | Specified by Wallet | Depend on wallet's implementation |
+| signAndExecuteTransaction | on DApp | Specified by DApp | Can be done by customizing the execute function |
+
+| Type | Default |
+|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------- |
+| `({transactionBlock: TransactionBlock, requestType?: ExecuteTransactionRequestType, options?: SuiTransactionBlockResponseOptions}) => Promise` | |
+
+### signPersonalMessage
+
+The function is for personal message signing. The return strings are in base64 format.
+
+| Type | Default |
+|---------------------------------------------------------------------------------| ------- |
+| `(input: {message: Uint8Array}) => Promise<{signature: string; bytes: string}>` | |
+
+### verifySignedPersonalMessage
+
+This function is for verifying the output of `signPersonalMessage` following the Sui standard. Returns `true` if the returned signature matches the message to be signed and the signer's publicKey.
+
+The signature and bytes strings are in base64 format.
+
+It supports signatures of multiple schemes, such as ed25519, secp256k1, secp256r1, and zk account signatures.
+
+| Type | Default |
+|--------------------------------------------------------------------------| ------- |
+| `(input: {signature: string; bytes: string}) => Promise` | |
+
+### verifySignedTransactoin
+
+This function is for verifying the output of `signTransaction` following the Sui standard. Returns `true` if the returned signature matches the message to be signed and the signer's publicKey.
+
+The signature and bytes strings are in base64 format.
+
+It supports signatures of multiple schemes, such as ed25519, secp256k1, secp256r1, and zk account signatures.
+
+| Type | Default |
+|--------------------------------------------------------------------------| ------- |
+| `(input: {signature: string; bytes: string}) => Promise` | |
+
+### on
+
+The function for wallet event listening. Returns the off function to remove listener.
+
+| Type | Default |
+| ------------------------------------------------------------ | ------- |
+| `(event: E, listener: WalletEventListeners[E], ) => () => void;` | |
+
+All the wallet events:
+
+| Event | Listener | Description |
+| ------------- | ------------------------------------------------------------ | --------------------------------------------------------- |
+| accountChange | `(params: { account: WalletAccount; }) => void;` | Emit when wallet app changes its account |
+| featureChange | `(params: { features: string[]; }) => void;` | Emit when wallet app changes its wallet-standard features |
+| change | `(params: { chain?: string, account?: WalletAccount; features?: string[]; }) => void;` | Raw change event defined by wallet-standard |
+
+## Deprecated API
+
+### signAndExecuteTransactionBlock
+
+Deprecated, use [signAndExecuteTransaction](#signandexecutetransaction) instead.
+
+The universal function to send and execute transactions via connected wallet.
+
+| Type | Default |
+|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------- |
+| `({transactionBlock: Transaction, requestType?: ExecuteTransactionRequestType, options?: SuiTransactionBlockResponseOptions}) => Promise` | |
+
+### signTransactionBlock
+
+Deprecated, use [signTransaction](#signtransaction) instead.
+
+The function is for transaction signing.
+
+| Type | Default |
+|-------------------------------------------------------------------| ------- |
+| `({transactionBlock: Transaction}) => Promise` | |
+
+### executeMoveCall and executeSerializedMoveCall
+
+Deprecated, use [signAndExecuteTransactionBlock](#signandexecutetransactionblock) instead.
+
+### wallet
+
+Deprecated, use [adapter](#adapter) instead.
+
+```diff
+const wallet = useWallet();
+- console.log(wallet.wallet.name);
++ console.log(wallet.adapter.name);
+```
+
+### getPublicKey
+
+Deprecated, use [account.publicKey](#account) instead.
+
+```diff
+const wallet = useWallet();
+- console.log(wallet.getPublicKey());
++ console.log(wallet.account.publicKey);
+```
+
+### signMessage
+
+Deprecated, use [signPersonalMessage](#signpersonalmessage) instead.
+
+| Type | Default |
+|----------------------------------------------------------------------------------------| ------- |
+| `(input: {message: Uint8Array}) => Promise<{signature: string; messageBytes: string}>` | |
+
+
+### verifySignedMessage
+
+Deprecated, use [verifySignedPersonalMessage](#verifysignedpersonalmessage) instead.
\ No newline at end of file
diff --git a/website/docs/QuickStart.md b/website/docs/QuickStart.md
new file mode 100644
index 00000000..a0b209d8
--- /dev/null
+++ b/website/docs/QuickStart.md
@@ -0,0 +1,158 @@
+---
+title: Quick Start
+sidebar_position: 1
+---
+
+Hello my friend π Welcome onboard π³
+
+Suiet wallet kit is a wallet aggregator for DApps to interact with all the wallets in Suiπ§ ecosystem easily. π₯³
+
+Let's try our kit and empower your dapp in minutes. πͺ
+
+:::tip
+Sui has released devnet 0.29 and introduced a bunch of new features as well as breaking changes.
+As a professional wallet kit, we also followed up the changes and upgraded our version to 0.2.x.
+
+So We recommend you to walk through our [Migration Guide To 0.2.x](/docs/migration/upgradeTo0.2.x).
+:::
+
+> βοΈ Have fun with [Demo Playground](https://wallet-kit-demo.vercel.app/)
+
++ [Example repo](https://github.com/suiet/wallet-kit/tree/main/examples/with-vite)
+
+## π¨ Setup
+
+First of all, let's install the npm package `@suiet/wallet-kit` to your project.
+
+> npm package: https://www.npmjs.com/package/@suiet/wallet-kit
+
+```shell
+npm install @suiet/wallet-kit
+# or
+yarn add @suiet/wallet-kit
+# or
+pnpm install @suiet/wallet-kit
+```
+
+Next, make sure `@mysten/sui` is installed in your project. If not, install it as well.
+
+```shell
+npm install @mysten/sui
+# or
+yarn add @mysten/sui
+# or
+pnpm install @mysten/sui
+```
+
+Then wrap your `
+
+);
+```
+
+> By default, suiet kit will load all the [preset wallets](./CanIUse#preset-wallets) to the listπ‘
+>
+> If you want to customize the wallet list, please refer to [Customize Wallet List](./tutorial/customize-wallet-list)
+
+## πΉ Place ConnectButton
+
+:::tip
+We recommend to use hooks together with our components. But if you want to use our hooks only with your customized UI
+components, follow the instruction [#Use Hooks Only](/docs/tutorial/hooks-only)
+:::
+
+Just import our `;
+};
+type KitError = BaseError; // errors from kit internal logics
+type WalletError = BaseError; // erros from third-party wallets
+```
+
+## Error Codes
+
+```typescript
+enum ErrorCode {
+ UNKNOWN_ERROR = "UNKNOWN_ERROR",
+ KIT__UNKNOWN_ERROR = "KIT.UNKNOWN_ERROR",
+ WALLET__UNKNOWN_ERROR = "WALLET.UNKNOWN_ERROR",
+ WALLET__CONNECT_ERROR = "WALLET.CONNECT_ERROR",
+ WALLET__DISCONNECT_ERROR = "WALLET.DISCONNECT_ERROR",
+ WALLET__SIGN_TX_ERROR = "WALLET.SIGN_TX_ERROR",
+ WALLET__SIGN_MSG_ERROR = "WALLET.SIGN_MSG_ERROR",
+ WALLET__LISTEN_TO_EVENT_ERROR = "WALLET.LISTEN_TO_EVENT_ERROR",
+ WALLET__METHOD_NOT_IMPLEMENTED_ERROR = "WALLET.METHOD_NOT_IMPLEMENTED_ERROR",
+}
+```
diff --git a/website/docs/components/AccountModal.md b/website/docs/components/AccountModal.md
new file mode 100644
index 00000000..842f3fe2
--- /dev/null
+++ b/website/docs/components/AccountModal.md
@@ -0,0 +1,50 @@
+---
+sidebar_position: 4
+---
+
+# AccountModal
+
+## Description
+
+AccountModal is a modal that displays connected wallet account information with actions to copy address and disconnect.
+
+## Examples
+
+Here is an example for you to use with your own account button.
+
+```jsx
+import { useWallet, AccountModal } from '@suiet/wallet-kit';
+
+function App() {
+ const {connected} = useWallet()
+ const [showModal, setShowModal] = useState(false)
+
+ return (
+ // wrap your own button as the trigger of the modal
+ setShowModal(open)}
+ onDisconnectSuccess={(walletName) => {
+ console.log(`Disconnected from ${walletName}`)
+ }}
+ onDisconnectError={(error) => {
+ console.error('Disconnect failed:', error)
+ }}
+ >
+
+ )
+}
+```
+
+## API
+
+### Props
+
+| Properties | Description | Type | Default |
+| ------------------- | ------------------------------------- | ---------------------------- | ------- |
+| children | trigger element for the modal | ReactNode | null |
+| open | Indicator for opening the modal | boolean | false |
+| onOpenChange | visibility change event | (open: boolean) => void | -- |
+| onDisconnectSuccess | Callback for successful disconnection | (walletName: string) => void | |
+| onDisconnectError | Callback for failed disconnection | (error: BaseError) => void | |
diff --git a/website/docs/components/ConnectButton.md b/website/docs/components/ConnectButton.md
new file mode 100644
index 00000000..dc98d850
--- /dev/null
+++ b/website/docs/components/ConnectButton.md
@@ -0,0 +1,80 @@
+---
+sidebar_position: 2
+---
+
+# ConnectButton
+
+## Description
+
+ConnectButton is the entry for users to connect their wallet.
+
+It manages the cycle of wallet connection, such as launching the wallet-select modal, displaying info of the account and showing the disconnect button when connected.
+
+We recommend using `ConnectButton` component to integrate Suiet wallet kit π₯³ But you can customize your own ConnectButton with our api, check [#Use Hooks Only](/docs/tutorial/hooks-only) for details.
+
+## Examples
+
+### Basic Usage
+
+```jsx
+import {
+ ConnectButton,
+ WalletProvider,
+} from '@suiet/wallet-kit';
+
+function App() {
+ return (
+
+ Connect Wallet
+
+ );
+}
+```
+
+### Handle Connection Events
+
+Sometimes you may want to hook in the connection events and do something with those. For example, provide friendly an error tip when the wallet connection fails. You can do it by passing a handle function to the property `onConnectError` of `ConnectButton`. The full APIs are listed [below](#props).
+
+> If you are using hooks only, then simply wrap a try-catch block for the async `select` method!
+
+```jsx
+import {WalletProvider, ConnectButton, ErrorCode, BaseError} from "@suiet/wallet-kit";
+
+function App() {
+ return (
+
+ {
+ if (err.code === ErrorCode.WALLET__CONNECT_ERROR__USER_REJECTED) {
+ console.warn('user rejected the connection to ' + err.details?.wallet);
+ } else {
+ console.warn('unknown connect error: ', err);
+ }
+ }}
+ >Connect Wallet
+
+ );
+}
+```
+
+:::tip
+
+The error type is customized by wallet kit. You may want to check [Error Types](/docs/Types#error-types) for details.
+
+:::
+
+## API
+
+### Props
+
+| Properties | Description | Type | Default |
+| ------------------- | ------------------------------------- | ---------------------------- | ---------------- |
+| children | -- | ReactNode | 'Connect Wallet' |
+| style | -- | React.CSSProperties | |
+| className | -- | string | |
+| onConnectSuccess | Callback for successful connection | (walletName: string) => void | |
+| onConnectError | Callback for failed connection | (error: BaseError) => void | |
+| onDisconnectSuccess | Callback for successful disconnection | (walletName: string) => void | |
+| onDisconnectError | Callback for failed disconnection | (error: BaseError) => void | |
diff --git a/website/docs/components/ConnectModal.md b/website/docs/components/ConnectModal.md
new file mode 100644
index 00000000..e641a718
--- /dev/null
+++ b/website/docs/components/ConnectModal.md
@@ -0,0 +1,54 @@
+---
+sidebar_position: 3
+---
+
+# ConnectModal
+
+## Description
+
+ConnectModal is a nicely designed wallet-select modal for wallet selection.
+
+:::tip
+
+Usually you won't need to import it because we hide it inside our ConnectButton. Unless you want to customize your own ConnectButton along with our connect modal.
+
+:::
+
+## Examples
+
+Here is an example for you to use with your own connect button.
+
+```jsx
+import { useWallet, ConnectModal } from '@suiet/wallet-kit';
+
+function App() {
+ const {connected} = useWallet()
+ const [showModal, setShowModal] = useState(false)
+
+ if (connected) {
+ return setShowModal(open)}
+ >
+ ;
+ )
+}
+
+```
+
+## API
+
+### Props
+
+| Properties | Description | Type | Default |
+| ---------------- | ---------------------------------- | ---------------------------- | ------- |
+| children | trigger element for the modal | ReactNode | null |
+| open | Indicator for opening the modal | boolean | false |
+| onOpenChange | visibility change event | (open: boolean) => void | -- |
+| onConnectSuccess | Callback for successful connection | (walletName: string) => void | |
+| onConnectError | Callback for failed connection | (error: BaseError) => void | |
diff --git a/website/docs/components/WalletProvider.md b/website/docs/components/WalletProvider.md
new file mode 100644
index 00000000..8dda7c78
--- /dev/null
+++ b/website/docs/components/WalletProvider.md
@@ -0,0 +1,54 @@
+---
+sidebar_position: 1
+---
+
+# WalletProvider
+
+## Description
+
+The `WalletProvider` provides the essential data and functions for our kit. And it is the entrypoint for customized configurations.
+
+:::tip
+
+So you need to wrap all the kit hooks and components under `WalletProvider` before you start to use them.
+
+:::
+
+## Examples
+
+### Basic Usage
+
+```jsx
+import ReactDOM from 'react-dom';
+import { WalletProvider } from '@suiet/wallet-kit';
+
+function Root() {
+ // wrap your app component
+
+ ;
+}
+
+ReactDOM.render( handleClick()}>send transaction ;
+}
+```
+
+### deprecated `supportedWallets` in `WalletProvider`
+
+> If you still bypassing `supportedWallets`, it will not break your code but also take no effect. You will see an warning message in the console.
+
+We have deprecated [`WalletProvider`](/docs/components/WalletProvider) input `supportedWallets` in `v0.1.1`. You will no longer need to pass `supportedWallets` to the provider
+
+```diff
+import ReactDOM from 'react-dom';
++ import { useWallet } from '@suiet/wallet-kit';
+- import { getDefaultWallets, useWallet } from '@suiet/wallet-kit';
+
+- const supportedWallets = getDefaultWallets();
+
+function Root() {
++
+-
+ ;
+}
+
+ReactDOM.render(...
+```
+
+## Import default CSS
+
+You need to import the default CSS file to use the default styles.
+
+:::tip
+You may need a proper CSS loader to import CSS files. See [Webpack](https://webpack.js.org/loaders/css-loader/) or [Vite](https://vitejs.dev/guide/features.html#css) for more information.
+:::
+
+For example, import the default css file in the `src/index.jsx` file:
+
+```jsx title="src/index.jsx"
+import * as React from "react";
+import "@suiet/wallet-kit/style.css"; // Add this line to your code
+
+// Your Application code below
+function App() {
+ return ...
;
+}
+```
diff --git a/website/docs/styling/customize.md b/website/docs/styling/customize.md
new file mode 100644
index 00000000..97db29e1
--- /dev/null
+++ b/website/docs/styling/customize.md
@@ -0,0 +1,170 @@
+# CSS Customize & Theme
+
+## CSS Variables
+
+This section describes how to use CSS variables to customize the theme of the components.
+
+We use CSS variables to define colors and other styles like below:
+
+```css
+:root {
+ --wkit-accent-hs: 210, 100%;
+ --wkit-on-accent-rgb: 255, 255, 255;
+ --wkit-bg-rgb: 239, 241, 245;
+ --wkit-on-bg-rgb: 10, 14, 34;
+ --wkit-font-family: 'Inter', sans-serif;
+ --wkit-font-family-mono: 'IBM Plex Mono', monospace;
+ --wkit-font-size-large: 18px;
+ --wkit-font-size-medium: 16px;
+ --wkit-font-size-small: 14px;
+ --wkit-line-height-large: 22px;
+ --wkit-line-height-medium: 20px;
+ --wkit-line-height-small: 17px;
+ --wkit-button-width: 284px;
+ --wkit-border-radius: 16px;
+}
+```
+
+Below is a list of all CSS variables that you can use as public API to customize the look of the components.
+
+| CSS Variables | Descriptions | Default Value |
+| --------------------------- | ------------------------------------------------------ | ---------------------------- |
+| `--wkit-accent-hs` | The hue and saturation components of the accent color. | `210, 100%` |
+| `--wkit-on-accent-rgb` | The RGB value of the color on the accent color. | `255, 255, 255` |
+| `--wkit-bg-rgb` | The RGB value of the background color. | `239, 241, 245` |
+| `--wkit-on-bg-rgb` | The RGB value of the color on the background color. | `10, 14, 34` |
+| `--wkit-font-family` | The font-family of the components. | `'Inter', sans-serif` |
+| `--wkit-font-family-mono` | The font-family of the components (monospace). | `'IBM Plex Mono', monospace` |
+| `--wkit-font-size-large` | The font-size of the components (L). | `18px` |
+| `--wkit-font-size-medium` | The font-size of the components (M). | `16px` |
+| `--wkit-font-size-small` | The font-size of the components (S). | `14px` |
+| `--wkit-line-height-large` | The line-height of the components (L). | `22px` |
+| `--wkit-line-height-medium` | The line-height of the components (M). | `20px` |
+| `--wkit-line-height-small` | The line-height of the components (S). | `17px` |
+| `--wkit-button-width` | The width of the button. | `284px` |
+| `--wkit-border-radius` | The border radius of the components. | `16px` |
+
+Default Values:
+
+After figuring out the CSS variables you want to customize, you can override them in your own CSS file, like below:
+
+```scss title="./suiet-wallet-kit-custom.css"
+:root {
+ --wkit-accent-hs: 110, 100%; // Redefine the hs (the first two components of hsl) of the accent color
+
+ ... // other CSS variables
+}
+```
+
+Import the default CSS file and your own CSS file in your application.
+
+:::tip
+The CSS variables must be imported / declared **AFTER** the default CSS file.
+:::
+
+For example, in the `src/index.jsx` file:
+
+```jsx title="src/index.jsx"
+import '@suiet/wallet-kit/style.css';
+import './suiet-wallet-kit-custom.css'; // You CSS file here
+```
+
+## Override (Not recommended)
+
+When CSS variables are not enough, you can customize the styles by importing the CSS file and overriding our default CSS rules.
+
+:::caution
+**Override our default CSS rules is not recommended because it is not easy to maintain.** If you have any questions or feature requests, please contact us.
+:::
+
+Fellow the steps below to customize the styles:
+
+First, figure out the CSS class name of the component you want to customize. For example, the CSS class name of the `ConnectButton` component is `wkit-button`.
+
+
+
+## CSS Class Names Reference
+
+Below are the CSS class names used by different components that you can customize:
+
+### AccountModal Component
+
+| CSS Class Name | Description |
+| --- | --- |
+| `wkit-account-modal__content` | Main content container of the account modal |
+| `wkit-account-modal__info` | Information section containing name and address |
+| `wkit-account-modal__name` | Display name or SuiNS name |
+| `wkit-account-modal__address` | Wallet address display |
+| `wkit-account-modal__address--primary` | Primary address variant (when no SuiNS name) |
+| `wkit-account-modal__actions` | Container for action buttons |
+| `wkit-account-modal__action-button` | Individual action button (copy, disconnect) |
+| `wkit-account-modal__action-button--disconnect` | Disconnect button variant |
+| `wkit-account-modal__action-button-text` | Text inside action buttons |
+| `wkit-account-modal__action-button-text--danger` | Danger text variant for disconnect |
+
+### Dialog/Modal Shared Classes
+
+| CSS Class Name | Description |
+| --- | --- |
+| `wkit-dialog__overlay` | Modal overlay background |
+| `wkit-dialog__content` | Modal content container |
+| `wkit-dialog__header` | Modal header section |
+| `wkit-dialog__title` | Modal title text |
+| `wkit-dialog__close` | Close button |
+
+### ConnectModal Component
+
+| CSS Class Name | Description |
+| --- | --- |
+| `wkit-select__scroll` | Scrollable wallet list container |
+| `wkit-select__container` | Wallet section container |
+| `wkit-select__title` | Section title (e.g., "Popular", "Others") |
+| `wkit-select-item` | Individual wallet item |
+| `wkit-select-item__icon` | Wallet icon container |
+| `wkit-select-item__icon-img` | Wallet icon image |
+
+### Button Component
+
+| CSS Class Name | Description |
+| --- | --- |
+| `wkit-button` | Main connect button |
+
+Then override the styles in your own CSS file.
+
+```scss title="./suiet-wallet-kit-custom.css"
+.wkit-button {
+ height: 64px; // For example, override the height of the button
+}
+
+/* Customize AccountModal */
+.wkit-account-modal__content {
+ padding: 24px 0; // Increase padding
+}
+
+.wkit-account-modal__name {
+ color: #2563eb; // Change name color to blue
+ font-size: 20px; // Increase font size
+}
+
+.wkit-account-modal__action-button {
+ border-radius: 8px; // Make buttons more rounded
+ padding: 12px 16px; // Increase button padding
+}
+
+.wkit-account-modal__action-button--disconnect {
+ background-color: rgba(220, 38, 38, 0.1); // Custom disconnect button color
+}
+```
+
+And last, import the default CSS file and your own CSS file in your application.
+
+:::tip
+Your CSS rules must be imported / declared **AFTER** the default CSS file.
+:::
+
+For example, in the `src/index.jsx` file:
+
+```jsx title="src/index.jsx"
+import '@suiet/wallet-kit/style.css';
+import './suiet-wallet-kit-custom.css'; // You css file here
+```
diff --git a/website/docs/styling/darkmode.md b/website/docs/styling/darkmode.md
new file mode 100644
index 00000000..0936d24e
--- /dev/null
+++ b/website/docs/styling/darkmode.md
@@ -0,0 +1,24 @@
+# Dark Mode
+
+With the help of CSS variables, you can easily customize the theme of the components to support dark mode.
+
+You can override color-related CSS variables under the `@media (prefers-color-scheme: dark)` media query to support dark mode like below:
+
+
+
+:::tip
+Rules about dark mode must be imported / declared **AFTER** the default CSS file.
+:::
+
+```scss
+@media (prefers-color-scheme: dark) {
+ :root {
+ --wkit-accent-hs: 166, 91%;
+ --wkit-on-accent-rgb: 255, 255, 255;
+ --wkit-bg-rgb: 40, 40, 40;
+ --wkit-on-bg-rgb: 241, 241, 241;
+ }
+}
+```
diff --git a/website/docs/tutorial/_category_.json b/website/docs/tutorial/_category_.json
new file mode 100644
index 00000000..9a4cef89
--- /dev/null
+++ b/website/docs/tutorial/_category_.json
@@ -0,0 +1,7 @@
+{
+ "label": "Tutorials",
+ "position": 3,
+ "link": {
+ "type": "generated-index"
+ }
+}
diff --git a/website/docs/tutorial/configure-chain.md b/website/docs/tutorial/configure-chain.md
new file mode 100644
index 00000000..c9731fb4
--- /dev/null
+++ b/website/docs/tutorial/configure-chain.md
@@ -0,0 +1,41 @@
+---
+title: Configure supported chains (networks)
+sidebar_position: 2
+---
+
+You can configure the supported chains (networks) for your dapp.
+
+```tsx
+import {
+ WalletProvider,
+ Chain,
+ SuiDevnetChain,
+ SuiTestnetChain,
+ SuiMainnetChain,
+ DefaultChains,
+} from "@suiet/wallet-kit";
+
+const customChain: Chain = {
+ id: "",
+ name: "",
+ rpcUrl: "",
+};
+
+const SupportedChains: Chain[] = [
+ // ...DefaultChains,
+ SuiDevnetChain,
+ SuiTestnetChain,
+ SuiMainnetChain,
+ // NOTE: you can add custom chain (network),
+ // but make sure the connected wallet does support it
+ // customChain,
+];
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+
+
+
+
+);
+```
diff --git a/website/docs/tutorial/connect-dapp-with-wallets.md b/website/docs/tutorial/connect-dapp-with-wallets.md
new file mode 100644
index 00000000..93e66707
--- /dev/null
+++ b/website/docs/tutorial/connect-dapp-with-wallets.md
@@ -0,0 +1,353 @@
+---
+title: Connect your DApp with wallets on Sui
+sidebar_position: 1
+---
+
+VIDEO
+
+When do we consider a web application a DApp? It's when the web app leverages smart contracts to provide services for users. Wallet plays an important role in this interaction where it connects users with DApps. So before you start to build something amazing, you need to connect your dapp with wallets.
+
+[Suiet Wallet Kit](https://kit.suiet.app/) is an all-in-one wallet connection toolkit that follows the wallet standard of Sui for DApps. With out-of-the-box UI components and well-defined utility functions, you can easily empower your dapp with the ability to interact with wallets in an elegant way.
+
+
+
+In this tutorial, I want to show you how easy it could be to connect your dapp with all the wallets in the Sui ecosystem using Suiet Wallet Kit.
+
+> Tips: Suiet wallet kit only supports React.js projects for now.
+
+
+## Learning Highlights
+
+- Install and configure Suiet Wallet Kit for a React-based DApp
+- Connect the DApp with all the wallets on Sui
+- Use wallet capabilities (display wallet status and account info, send transactions etc)
+
+## Getting started
+
+In this section, I am going to walk you through the installation and configuration for Suiet wallet kit.
+
+### Installation
+
+Suiet Wallet Kit is a decent wrapper for the official Typescript SDK `@mysten/sui` , which handles all the tedious details of wallet connection for you. Therefore, we need to install `@mysten/sui` along with the kit `@suiet/wallet-kit`.
+
+> For simplicity, we choose npm as the package manager, feel free to change to any alternatives.
+
+```shell
+npm install @mysten/sui @suiet/wallet-kit
+```
+
+### Setup WalletProvider for the App
+
+Next, let's import the `WalletProvider` and setup for your react project such that your App becomes available to access the states and functions provided by Suiet Wallet Kit.
+
+```jsx
+// src/index.js
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { WalletProvider } from "@suiet/wallet-kit";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+// wrap your app with WalletProvider
+root.render(
+
+
+
+
+);
+```
+
+### Place ConnectButton
+
+In Suiet Wallet Kit, we provide out-of-the-box UI components in good designs. What you need to do is just import and place the `ConnectButton` to wherever you like.
+
+Here the example is just for showcasing the UI. Note that the web page generated by codesandbox cannot detect any installed wallet because it is a sandbox that chrome extensions cannot communicate with. **I would suggest everybody creates the react project in your local environment.**
+
+
+
+
+## Connect to all the wallets on Sui
+
+After the preparation above, we are ready to connect to wallets. Suiet wallet kit provides a list of the most popular wallets in the Sui ecosystem. Users can choose their favorite one at their wish.
+
+When we click the Connect Button, it would provide a list of preset wallets for users to choose.
+
+
+
+Meanwhile, Suiet wallet kit would automatically detect all the installed wallets that implement the Sui wallet standard in the browser. So If the wallet is not installed, the kit would guide users to download it from Chrome Extension Store. Take Suiet wallet as an example:
+
+
+
+Let's move on. Now that the Suiet wallet has been installed, the kit would initiate a connection request to the wallet extension.
+
+
+
+Once user approves the request, the connection would be completed, which means we've successfully connected to a wallet!
+
+
+
+## Use wallet capabilities
+
+It's time to take a look at the most useful hook [useWallet](https://kit.suiet.app/docs/Hooks/useWallet). It retrieves all the properties and functions from [WalletProvider](https://kit.suiet.app/docs/components/walletprovider), with which you can make use of the account properties and call functions to a connected wallet.
+
+In the following sections, I will show you some basic usages with the hook `useWallet`.
+
+### Display info of the connected wallet
+
+We can get several useful information from the connected wallet via Suiet wallet kit:
+
+- The wallet connection status
+- The account info
+- The current chain (network) that the wallet is using
+
+Firstly let's display the connection status for the debugging purpose.
+
+```jsx
+import {
+ ConnectButton,
+ useWallet,
+ addressEllipsis,
+} from "@suiet/wallet-kit";
+
+export default function App() {
+ // Get access to the connected wallet
+ const wallet = useWallet();
+
+ return (
+
+
Hello, Suiet Wallet Kit
+
+
+
+
+ Wallet status: {wallet.status}
+
+
+
+ // ...
+ {wallet?.account && (
+
+
Connected Account: {addressEllipsis(wallet.account.address)}
+
+ )}
+ // ...
+
+ // ...
+
+ Current chain of wallet:
+ {wallet.chain.name}
+
+ // ...
+
+ {/* ... */}
+ {wallet.status === "connected" && (
+ Mint Your NFT !
+ )}
+ {/* ... */}
+
+ );
+}
+
+```
+
+[](https://codesandbox.io/s/competent-banach-ykeyv5?fontsize=14&hidenavigation=1&theme=dark)
+
+We've placed a button on the page which triggers the mintNft function, where it calls `wallet.signAndExecuteTransactionBlock` to invoke the connected wallet to sign and execute the transaction request.
+
+Finally, let's take Suiet wallet for testing. First open your Suiet Wallet, change the network to `devnet`.
+
+
+
+
+
+Then click the button "Mint Your NFT!" to send the transaction to the wallet:
+
+
+
+
+
+If everything works, you should see a popup saying "your nft is minted!". Now check the NFT section in your Suiet wallet, you should see a beautiful Suiet NFT there.
+
+
+
+If you made this far, then congratulations! Your dapp is equipped with the power to interact with wallets and users. Don't hesitate, go and keep on making your dapp more interesting and powerful!
+
+## What's more
+
+In fact, with Suiet wallet kit, connecting to wallets is just a simple step. I would like to provide a list of topics that you might explore more:
+
+- Tutorials
+ - [Customize Wallet List](https://kit.suiet.app/docs/tutorial/customize-wallet-list)
+ - [Configure supported chains (networks)](https://kit.suiet.app/docs/tutorial/configure-chain)
+ - [Use Hooks Only (without UI)](https://kit.suiet.app/docs/tutorial/hooks-only)
+- Hooks
+ - [useWallet](https://kit.suiet.app/docs/Hooks/useWallet)
+ - [useAccountBalance](https://kit.suiet.app/docs/Hooks/useAccountBalance)
+ - [useSuiProvider](https://kit.suiet.app/docs/Hooks/useSuiprovider)
+- Styling
+ - [Customize CSS and Theme](https://kit.suiet.app/docs/styling/customize)
+- Configuration and types
+ - [WalletProvider](https://kit.suiet.app/docs/components/WalletProvider#description)
+ - [Types](https://kit.suiet.app/docs/Types)
+
+## The End
+
+In this tutorial, we introduce how to install and make use of Suiet wallet kit to empower your DApp with the ability to connect to all the wallets on Sui and use wallet's capabilities such as fetching user account's info and sign and executing a transaction block.
+
+Remember this is just an entry-level tutorial. With the programmable transaction feature, you should be able to implement many different interesting functions on your DApp in a blockchain-native way.
+
+If you have any confusion while using Suiet wallet kit, please check out [the docs of Suiet wallet kit](https://kit.suiet.app/).
+
+If you find any issues or bugs, welcome to submit [issues](https://github.com/suiet/wallet-kit/issues) or [PRs](https://github.com/suiet/wallet-kit/pulls) to [the Github repo](https://github.com/suiet/wallet-kit). Let's make Sui and open-source community better together!
+
diff --git a/website/docs/tutorial/customize-wallet-list.md b/website/docs/tutorial/customize-wallet-list.md
new file mode 100644
index 00000000..a8be776d
--- /dev/null
+++ b/website/docs/tutorial/customize-wallet-list.md
@@ -0,0 +1,133 @@
+---
+title: Customize Wallet List
+sidebar_position: 1
+---
+
+You can configure your wallet list on the select modal by passing `defaultWallets` throught `
+
+ {/* or just leave it as default which contains all preset wallets */}
+ {/**/}
+
+
+)
+```
+
+## Add Slush Web Wallet
+
+[Slush Web Wallet](https://my.slush.app/) is a new web wallet empowered by ZkSend, launched by Mysten Lab, which aims to onboard new users to web3 in a easy way.
+
+> More details about the capabilities and limitations of Slush Web Wallet, please refer to [dApp Integration - Sui Typescript SDK](https://sdk.mystenlabs.com/zksend/dapp)
+
+Suiet wallet kit supports DApp to integrate Slush Web Wallet by simple configurations.
+
+Firstly, locate the component that uses `
+
+ );
+}
+```
+
+There we go! Now you can see the Slush Web Wallet in the wallet-select modal.
+
+
+
+
+
+## Using Hook Only
+
+If you use our `useWallet` hook only and have a customized wallet-select modal, then you can access configured wallet list by `configuredWallets` from `useWallet`. Also we provide `detectedWallets` for those wallets which are not preconfigured but detected from user browser.
+
+```tsx
+// make sure this code is under
+
+
+
+)
+```
diff --git a/website/docs/tutorial/hooks-only.md b/website/docs/tutorial/hooks-only.md
new file mode 100644
index 00000000..71a32f53
--- /dev/null
+++ b/website/docs/tutorial/hooks-only.md
@@ -0,0 +1,126 @@
+---
+title: Use Hooks Only (without UI)
+sidebar_position: 3
+---
+
+This section will introduce how to only use the provided hooks.
+
+It could be useful when you want to customize your UI components together with our hooks.
+
+### Customize your UI components with Kit Hooks
+
+Firstly, add `WalletProvider` to wrap your App. The WalletProvider component provides the context of data and functions.
+
+> For customizing the default wallet list, check [WalletProvider](/docs/components/WalletProvider#customize-your-wallet-list-on-modal)
+
+```jsx
+import { WalletProvider } from '@suiet/wallet-kit';
+
+function RootComponent() {
+ return (
+
+
+ );
+}
+```
+
+Next, you are supposed to have **a connect button for wallet connection** and **a display area for account info after connection**.
+
+In this case, you can manage these two components by `connected` status from `useWallet` hook.
+ And get active account address after connected.
+
+```jsx
+import {useWallet} from '@suiet/wallet-kit';
+import {useState, useEffect} from "react";
+
+function App() {
+ const wallet = useWallet();
+
+ return (
+
+ {wallet.connected ?
:
}
+
{
+ // check if user installed the wallet
+ if (!wallet.installed) {
+ // do something like guiding users to install
+ return;
+ }
+ select(wallet.name);
+ }}
+ >
+ Connect to {wallet.name}
+
+ ));
+}
+```
+
+### Switch between accounts
+
+Once connected, users may want to switch between different accounts in their wallet. You can use `switchAccount` method to achieve this:
+
+```jsx
+import { useWallet } from '@suiet/wallet-kit';
+
+function AccountSwitcher() {
+ const wallet = useWallet();
+
+ async function handleSwitchAccount(address) {
+ if (!wallet.connected) return
+ try {
+ const newAccount = await wallet.switchAccount(address);
+ console.log('Successfully switched to account:', newAccount);
+ } catch (e) {
+ console.error('Failed to switch account:', e);
+ }
+ }
+
+ const renderWalletAccounts = () => {
+ if (!wallet.connected) return null;
+ const accounts = wallet.getAccounts();
+ if (!accounts?.length) return null;
+ return
+ {accounts.map((account) => {
+ return handleSwitchAccount(account.address)}
+ style={{ cursor: "pointer" }}
+ >
+ address: {account.address}
+ publicKey: {account.publicKey ?? "not supported"}
+
+ })}
+ ;
+ }
+
+ return (
+
+
Your Accounts
+ {renderWalletAccounts()}
+
+ );
+}
+```
+
+
diff --git a/website/docs/tutorial/sign-and-execute-transactions.md b/website/docs/tutorial/sign-and-execute-transactions.md
new file mode 100644
index 00000000..3f43fba2
--- /dev/null
+++ b/website/docs/tutorial/sign-and-execute-transactions.md
@@ -0,0 +1,57 @@
+---
+ sidebar_position: 1
+---
+
+# Sign and Execute Transactions
+
+There is a new recommended way for DApp developer to build things in a way that will work best with wallets as the ecosystem migrates towards [GraphQL](/) and indexer backed APIs.
+
+The current recommended way to execute transactions for dApps is as follows:
+
+1. The dapp constructs transaction using the [Transaction builder API](https://sdk.mystenlabs.com/typescript/transaction-building/basics)
+2. The dapp signs the transaction using the new `sui:signTransaction` feature
+1. The wallet kit manages calling either sui:signTransaction or sui:signTransactionBlock depending on which API is implemented in the wallet
+3. The dapp executes the transaction using it's own RPC provider (can be either GraphQL, or JSON rpc)
+1. It's the key different from the previous workflow where the transactions are executed on the wallet's specified RPC which might increase the e2e latency and incur data inconsistency between fullnodes due to synchronization.
+4. The dapp invokes the `sui:reportTransactionEffects` feature with the effects after the transaction is successfully executed.
+1. The sui:reportTransactionEffects allows wallets to cache the effects of transactions, enabling transaction building to continue to work, even if the wallets RPC node has not indexed a previous transaction.
+
+This flow enables dapps to have the best possible e2e latency when executing transactions, and enables dapps to query for whatever data you need in response of the execution request.
+
+# Implementation
+
+To implement the above flow, there are two options.
+
+The first option is to use the [signAndExecuteTransaction](/) API from the [useWallet](/) hook.
+
+By default, the API will use the same RPC URL of the current [chain](/) used by your dapp.
+
+> For more info about configuration of Chain for your DApp, please check the [Turorial: Configure supported chains (networks)](/docs/tutorial/configure-chain).
+
+```tsx
+// assuming in your React component.
+import {Transaction} from '@mysten/sui/transactions'
+
+function App() {
+ async function performTransaction() {
+ const transaction = new Transaction()
+ // contruct your transaction using the Transaction builder API mentioned above
+ // pass the transaction to signAndExecuteTransaction
+ const resData = await wallet.signAndExecuteTransaction({
+ transaction: transaction,
+ });
+ // deal with the response
+ }
+}
+```
+
+
+
+## API Comparison
+
+Differences between signAndExecuteTransactionBlock and signAndExecuteTransaction are shown below:
+
+| API | Execution | FullNode for Execution | GraphQL API support |
+|:-:|:-----------------:| :-: |:-------------------------------------------------------:|
+| signAndExecuteTransactionBlock | on Wallet | Specified by Wallet | Depend on wallet's implementation |
+| signAndExecuteTransaction | on DApp | Specified by DApp | Can be done by customizing the execute function |
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
new file mode 100644
index 00000000..a1c2e120
--- /dev/null
+++ b/website/docusaurus.config.js
@@ -0,0 +1,141 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const version = require('../packages/kit/package.json').version;
+const walletStandardVersion = '0.5.0'
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+ title: 'Suiet Wallet Kit',
+ tagline: 'The best kit for your DApp to connect with ALL Sui wallets',
+ url: 'https://kit.suiet.app',
+ baseUrl: '/',
+ onBrokenLinks: 'warn',
+ onBrokenMarkdownLinks: 'warn',
+ favicon: 'img/favicon.ico',
+
+ // // GitHub pages deployment config.
+ // // If you aren't using GitHub pages, you don't need these.
+ // organizationName: 'facebook', // Usually your GitHub org/user name.
+ // projectName: 'docusaurus', // Usually your repo name.
+
+ // Even if you don't use internalization, you can use this field to set useful
+ // metadata like html lang. For example, if your site is Chinese, you may want
+ // to replace "en" with "zh-Hans".
+ i18n: {
+ defaultLocale: 'en',
+ locales: ['en'],
+ },
+
+ presets: [
+ [
+ 'classic',
+ /** @type {import('@docusaurus/preset-classic').Options} */
+ ({
+ docs: {
+ sidebarPath: require.resolve('./sidebars.js'),
+ // Please change this to your repo.
+ // Remove this to remove the "edit this page" links.
+ editUrl: 'https://github.com/suiet/wallet-kit/tree/main/website/',
+ },
+ // blog: {
+ // showReadingTime: true,
+ // // Please change this to your repo.
+ // // Remove this to remove the "edit this page" links.
+ // editUrl: 'https://github.com/suiet/wallet-kit/tree/main/website/',
+ // },
+ theme: {
+ customCss: require.resolve('./src/css/custom.css'),
+ },
+ }),
+ ],
+ ],
+
+ themeConfig:
+ /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+ ({
+ colorMode: {
+ defaultMode: 'light',
+ disableSwitch: true,
+ respectPrefersColorScheme: false,
+ },
+ navbar: {
+ title: 'Suiet Kit',
+ logo: {
+ alt: 'My Site Logo',
+ src: 'img/logo.svg',
+ },
+ items: [
+ {
+ type: 'doc',
+ docId: 'QuickStart',
+ position: 'left',
+ label: `Docs (v${version})`,
+ },
+ // { to: '/blog', label: 'Blog', position: 'left' },
+ {
+ href: 'https://github.com/suiet/wallet-kit',
+ label: 'GitHub',
+ position: 'right',
+ },
+ ],
+ },
+ footer: {
+ style: 'dark',
+ links: [
+ {
+ title: 'Docs',
+ items: [
+ {
+ label: 'Tutorial',
+ to: '/docs/Tutorial',
+ },
+ ],
+ },
+ {
+ title: 'Community',
+ items: [
+ {
+ label: 'Twitter',
+ href: 'https://twitter.com/suiet_wallet',
+ },
+ {
+ label: 'Discord',
+ href: 'https://discord.gg/XQspMzXNXu',
+ },
+ {
+ label: 'Telegram',
+ href: 'https://t.me/suietwallet',
+ },
+ ],
+ },
+ {
+ title: 'More',
+ items: [
+ // {
+ // label: 'Blog',
+ // to: '/blog',
+ // },
+ {
+ label: 'GitHub',
+ href: 'https://github.com/suiet/wallet-kit',
+ },
+ ],
+ },
+ ],
+ copyright: `Copyright Β© ${new Date().getFullYear()} Suiet Wallet Kit, Inc. Built with Docusaurus.`,
+ },
+ prism: {
+ theme: lightCodeTheme,
+ darkTheme: darkCodeTheme,
+ },
+ }),
+
+ customFields: {
+ walletStandardVersion,
+ }
+};
+
+module.exports = config;
diff --git a/website/package.json b/website/package.json
new file mode 100644
index 00000000..386086ab
--- /dev/null
+++ b/website/package.json
@@ -0,0 +1,52 @@
+{
+ "name": "suiet-kit-doc",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "docusaurus": "docusaurus",
+ "start": "docusaurus start",
+ "build": "pnpm --filter @suiet/wallet-kit run build && docusaurus build",
+ "swizzle": "docusaurus swizzle",
+ "deploy": "docusaurus deploy",
+ "clear": "docusaurus clear",
+ "serve": "docusaurus serve",
+ "write-translations": "docusaurus write-translations",
+ "write-heading-ids": "docusaurus write-heading-ids",
+ "typecheck": "tsc"
+ },
+ "dependencies": {
+ "@docusaurus/core": "2.1.0",
+ "@docusaurus/preset-classic": "2.1.0",
+ "@mdx-js/react": "^1.6.22",
+ "@suiet/wallet-kit": "0.5.1",
+ "clsx": "^1.2.1",
+ "cross-fetch": "^3.1.5",
+ "prism-react-renderer": "^1.3.5",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@docusaurus/module-type-aliases": "2.1.0",
+ "@mysten/wallet-adapter-sui-wallet": "0.3.0",
+ "@mysten/wallet-standard": "^0.13.0",
+ "@tsconfig/docusaurus": "^1.0.5",
+ "@types/react": "^18.0.25",
+ "@types/react-dom": "^18.0.8",
+ "typescript": "^5.4.3"
+ },
+ "browserslist": {
+ "production": [
+ ">0.5%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "engines": {
+ "node": ">=16.14"
+ }
+}
diff --git a/website/sidebars.js b/website/sidebars.js
new file mode 100644
index 00000000..9ab54c24
--- /dev/null
+++ b/website/sidebars.js
@@ -0,0 +1,33 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+ // By default, Docusaurus generates a sidebar from the docs folder structure
+ tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+ // But you can create a sidebar manually
+ /*
+ tutorialSidebar: [
+ 'intro',
+ 'hello',
+ {
+ type: 'category',
+ label: 'Tutorial',
+ items: ['tutorial-basics/create-a-document'],
+ },
+ ],
+ */
+};
+
+module.exports = sidebars;
diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
new file mode 100644
index 00000000..53539020
--- /dev/null
+++ b/website/src/components/HomepageFeatures/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+ title: string;
+ Svg: React.ComponentType>;
+ description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+ {
+ title: 'Easy to Use',
+ Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+ description: (
+ <>
+
+ ),
+ },
+ {
+ title: 'Focus on What Matters',
+ Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+ description: (
+ <>
+
+ ),
+ },
+ {
+ title: 'Powered by React',
+ Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+ description: (
+ <>
+
+ ),
+ },
+];
+
+function Feature({title, Svg, description}: FeatureItem) {
+ return (
+
+
+
+
+
{title}
+
{description}
+
+
+
+
+ {FeatureList.map((props, idx) => (
+
+
+ );
+}
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
new file mode 100644
index 00000000..b248eb2e
--- /dev/null
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -0,0 +1,11 @@
+.features {
+ display: flex;
+ align-items: center;
+ padding: 2rem 0;
+ width: 100%;
+}
+
+.featureSvg {
+ height: 200px;
+ width: 200px;
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
new file mode 100644
index 00000000..f4f6992d
--- /dev/null
+++ b/website/src/css/custom.css
@@ -0,0 +1,30 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+ --ifm-color-primary: #00bfff;
+ --ifm-color-primary-dark: #00ace6;
+ --ifm-color-primary-darker: #00a2d9;
+ --ifm-color-primary-darkest: #0086b3;
+ --ifm-color-primary-light: #1ac5ff;
+ --ifm-color-primary-lighter: #26c9ff;
+ --ifm-color-primary-lightest: #4dd2ff;
+ --ifm-code-font-size: 95%;
+ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+ --ifm-color-primary: #00bfff;
+ --ifm-color-primary-dark: #00ace6;
+ --ifm-color-primary-darker: #00a2d9;
+ --ifm-color-primary-darkest: #0086b3;
+ --ifm-color-primary-light: #1ac5ff;
+ --ifm-color-primary-lighter: #26c9ff;
+ --ifm-color-primary-lightest: #4dd2ff;
+ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
new file mode 100644
index 00000000..b135a9f6
--- /dev/null
+++ b/website/src/pages/index.module.css
@@ -0,0 +1,69 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+.hero-title {
+ background: linear-gradient(130.2deg, #0C66E1 -19.23%, #65C6FF 102.03%);
+ /* font-family: 'Work Sans'; */
+ font-weight: bold;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-fill-color: transparent;
+ font-size: 60px;
+}
+
+.hero-desc {
+ font-style: normal;
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 24px;
+ color: #B9C0D4;
+ margin-bottom: 24px;
+}
+
+.hero-badges {
+ margin-bottom: 24px;
+ text-align: center;
+}
+
+.heroBanner {
+ padding: 4rem 0;
+ text-align: center;
+ position: relative;
+ overflow: visible;
+}
+
+@media screen and (max-width: 996px) {
+ .heroBanner {
+ padding: 2rem;
+ }
+}
+
+.buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+}
+
+.doc-button {
+ font-weight: bold;
+ background: #e5e7ec;
+ padding: 10px 100px;
+ border-radius: 16px;
+ color: black;
+ cursor: pointer;
+}
+
+.doc-button:hover {
+ color: black;
+ background: #cbced6;
+ text-decoration: none;
+}
+
+.doc-button:active {
+ color: black;
+ background: #b3b7c2;
+}
\ No newline at end of file
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
new file mode 100644
index 00000000..e06fbe9a
--- /dev/null
+++ b/website/src/pages/index.tsx
@@ -0,0 +1,130 @@
+import React, { useEffect } from "react";
+import clsx from "clsx";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import styles from "./index.module.css";
+import {
+ ConnectButton,
+ WalletProvider,
+ defineSlushWallet,
+ AllDefaultWallets,
+} from "@suiet/wallet-kit";
+import "@suiet/wallet-kit/style.css";
+import KitBanner from "../../static/img/kit-banner.svg";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { CustomFields } from "@site/types/customFields";
+
+const Badge = (props: {
+ href: string;
+ subject: string;
+ status: string;
+ color: string;
+ icon?: string;
+ className?: string;
+}) => {
+ const { color = "green" } = props;
+ const encode = encodeURIComponent;
+ const link = `https://badgen.net/badge/${encode(props.subject)}/${encode(
+ props.status
+ )}/${encode(color)}`;
+ return (
+
+
+ );
+};
+
+const WalletStandardBadge = (props: {
+ version: string;
+ className?: string;
+}) => {
+ return (
+
+
+ {/*
{siteConfig.title} */}
+
{siteConfig.title}
+
{siteConfig.tagline}
+
+
+
+
+ );
+}
+
+const slushWebWalletConfig = defineSlushWallet({
+ appName: "Suiet Wallet Kit Doc Site",
+});
+
+export default function Home(): JSX.Element {
+ const { siteConfig } = useDocusaurusContext();
+
+ return (
+
+
+
+ {/*
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/website/src/pages/markdown-page.md b/website/src/pages/markdown-page.md
new file mode 100644
index 00000000..9756c5b6
--- /dev/null
+++ b/website/src/pages/markdown-page.md
@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.
diff --git a/website/static/.nojekyll b/website/static/.nojekyll
new file mode 100644
index 00000000..e69de29b
diff --git a/website/static/favicon.ico b/website/static/favicon.ico
new file mode 100644
index 00000000..1d0d6225
Binary files /dev/null and b/website/static/favicon.ico differ
diff --git a/website/static/img/Gradient.png b/website/static/img/Gradient.png
new file mode 100644
index 00000000..5e499320
Binary files /dev/null and b/website/static/img/Gradient.png differ
diff --git a/website/static/img/LogoWithSlogen.png b/website/static/img/LogoWithSlogen.png
new file mode 100644
index 00000000..54568961
Binary files /dev/null and b/website/static/img/LogoWithSlogen.png differ
diff --git a/website/static/img/SuietWalletKit.png b/website/static/img/SuietWalletKit.png
new file mode 100644
index 00000000..96851587
Binary files /dev/null and b/website/static/img/SuietWalletKit.png differ
diff --git a/website/static/img/customize-css-instruction.png b/website/static/img/customize-css-instruction.png
new file mode 100644
index 00000000..6a0b92df
Binary files /dev/null and b/website/static/img/customize-css-instruction.png differ
diff --git a/website/static/img/favicon.ico b/website/static/img/favicon.ico
new file mode 100644
index 00000000..1d0d6225
Binary files /dev/null and b/website/static/img/favicon.ico differ
diff --git a/website/static/img/image-20230606233628176.png b/website/static/img/image-20230606233628176.png
new file mode 100644
index 00000000..927d1c35
Binary files /dev/null and b/website/static/img/image-20230606233628176.png differ
diff --git a/website/static/img/image-20230606233957014.png b/website/static/img/image-20230606233957014.png
new file mode 100644
index 00000000..6d782e3e
Binary files /dev/null and b/website/static/img/image-20230606233957014.png differ
diff --git a/website/static/img/image-20230606235342219.png b/website/static/img/image-20230606235342219.png
new file mode 100644
index 00000000..d4a4b44d
Binary files /dev/null and b/website/static/img/image-20230606235342219.png differ
diff --git a/website/static/img/image-20230606235707863.png b/website/static/img/image-20230606235707863.png
new file mode 100644
index 00000000..89457569
Binary files /dev/null and b/website/static/img/image-20230606235707863.png differ
diff --git a/website/static/img/image-20230607111434825.png b/website/static/img/image-20230607111434825.png
new file mode 100644
index 00000000..7f67f3af
Binary files /dev/null and b/website/static/img/image-20230607111434825.png differ
diff --git a/website/static/img/image-20230607114454396.png b/website/static/img/image-20230607114454396.png
new file mode 100644
index 00000000..548eb2ee
Binary files /dev/null and b/website/static/img/image-20230607114454396.png differ
diff --git a/website/static/img/image-20230607114531734.png b/website/static/img/image-20230607114531734.png
new file mode 100644
index 00000000..100f3782
Binary files /dev/null and b/website/static/img/image-20230607114531734.png differ
diff --git a/website/static/img/image-20230607145300803.png b/website/static/img/image-20230607145300803.png
new file mode 100644
index 00000000..4b3b879e
Binary files /dev/null and b/website/static/img/image-20230607145300803.png differ
diff --git a/website/static/img/image-20230607151135257.png b/website/static/img/image-20230607151135257.png
new file mode 100644
index 00000000..9abb00dd
Binary files /dev/null and b/website/static/img/image-20230607151135257.png differ
diff --git a/website/static/img/image-20230607151333209.png b/website/static/img/image-20230607151333209.png
new file mode 100644
index 00000000..8eb387ab
Binary files /dev/null and b/website/static/img/image-20230607151333209.png differ
diff --git a/website/static/img/image-20230607151427622.png b/website/static/img/image-20230607151427622.png
new file mode 100644
index 00000000..c03fca6c
Binary files /dev/null and b/website/static/img/image-20230607151427622.png differ
diff --git a/website/static/img/image-20230607151804527.png b/website/static/img/image-20230607151804527.png
new file mode 100644
index 00000000..0547b2ef
Binary files /dev/null and b/website/static/img/image-20230607151804527.png differ
diff --git a/website/static/img/image-20230607160640806.png b/website/static/img/image-20230607160640806.png
new file mode 100644
index 00000000..a30c3c62
Binary files /dev/null and b/website/static/img/image-20230607160640806.png differ
diff --git a/website/static/img/image-20230607160733422.png b/website/static/img/image-20230607160733422.png
new file mode 100644
index 00000000..e4631000
Binary files /dev/null and b/website/static/img/image-20230607160733422.png differ
diff --git a/website/static/img/integration-example.jpg b/website/static/img/integration-example.jpg
new file mode 100644
index 00000000..e4ae92b6
Binary files /dev/null and b/website/static/img/integration-example.jpg differ
diff --git a/website/static/img/kit-banner-2.png b/website/static/img/kit-banner-2.png
new file mode 100644
index 00000000..f9e344d9
Binary files /dev/null and b/website/static/img/kit-banner-2.png differ
diff --git a/website/static/img/kit-banner.svg b/website/static/img/kit-banner.svg
new file mode 100644
index 00000000..d58c4853
--- /dev/null
+++ b/website/static/img/kit-banner.svg
@@ -0,0 +1,384 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/website/static/img/logo.png b/website/static/img/logo.png
new file mode 100644
index 00000000..38555c5b
Binary files /dev/null and b/website/static/img/logo.png differ
diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg
new file mode 100644
index 00000000..7870a7b9
--- /dev/null
+++ b/website/static/img/logo.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/website/static/img/signmsg.png b/website/static/img/signmsg.png
new file mode 100644
index 00000000..147bebcc
Binary files /dev/null and b/website/static/img/signmsg.png differ
diff --git a/website/static/img/slush-web-wallet-integration.png b/website/static/img/slush-web-wallet-integration.png
new file mode 100644
index 00000000..16cf5200
Binary files /dev/null and b/website/static/img/slush-web-wallet-integration.png differ
diff --git a/website/static/img/stashed-wallet-integration.png b/website/static/img/stashed-wallet-integration.png
new file mode 100644
index 00000000..e8b1dc94
Binary files /dev/null and b/website/static/img/stashed-wallet-integration.png differ
diff --git a/website/static/img/trustedby.png b/website/static/img/trustedby.png
new file mode 100644
index 00000000..566bde92
Binary files /dev/null and b/website/static/img/trustedby.png differ
diff --git a/website/static/img/undraw_docusaurus_mountain.svg b/website/static/img/undraw_docusaurus_mountain.svg
new file mode 100644
index 00000000..af961c49
--- /dev/null
+++ b/website/static/img/undraw_docusaurus_mountain.svg
@@ -0,0 +1,171 @@
+
+ Easy to Use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/img/undraw_docusaurus_react.svg b/website/static/img/undraw_docusaurus_react.svg
new file mode 100644
index 00000000..94b5cf08
--- /dev/null
+++ b/website/static/img/undraw_docusaurus_react.svg
@@ -0,0 +1,170 @@
+
+ Powered by React
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/img/undraw_docusaurus_tree.svg b/website/static/img/undraw_docusaurus_tree.svg
new file mode 100644
index 00000000..d9161d33
--- /dev/null
+++ b/website/static/img/undraw_docusaurus_tree.svg
@@ -0,0 +1,40 @@
+
+ Focus on What Matters
+
diff --git a/website/static/img/wallet-kit.png b/website/static/img/wallet-kit.png
new file mode 100644
index 00000000..2e99c445
Binary files /dev/null and b/website/static/img/wallet-kit.png differ
diff --git a/website/tsconfig.json b/website/tsconfig.json
new file mode 100644
index 00000000..a8cb11c5
--- /dev/null
+++ b/website/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ // This file is not used in compilation. It is here just for a nice editor experience.
+ "extends": "@tsconfig/docusaurus/tsconfig.json",
+ "compilerOptions": {
+ "jsx": "react",
+ "baseUrl": "."
+ }
+}
diff --git a/website/types/customFields.ts b/website/types/customFields.ts
new file mode 100644
index 00000000..7a354005
--- /dev/null
+++ b/website/types/customFields.ts
@@ -0,0 +1,3 @@
+export interface CustomFields {
+ walletStandardVersion: string;
+}
\ No newline at end of file
+
diff --git a/assets/LogoWithSlogen.png b/assets/LogoWithSlogen.png
new file mode 100644
index 00000000..54568961
Binary files /dev/null and b/assets/LogoWithSlogen.png differ
diff --git a/assets/wallet-kit.png b/assets/wallet-kit.png
new file mode 100644
index 00000000..2e99c445
Binary files /dev/null and b/assets/wallet-kit.png differ
diff --git a/examples/with-next-app-router/.eslintrc.json b/examples/with-next-app-router/.eslintrc.json
new file mode 100644
index 00000000..bffb357a
--- /dev/null
+++ b/examples/with-next-app-router/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/examples/with-next-app-router/.gitignore b/examples/with-next-app-router/.gitignore
new file mode 100644
index 00000000..8f322f0d
--- /dev/null
+++ b/examples/with-next-app-router/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/with-next-app-router/README.md b/examples/with-next-app-router/README.md
new file mode 100644
index 00000000..f4da3c4c
--- /dev/null
+++ b/examples/with-next-app-router/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/examples/with-next-app-router/app/favicon.ico b/examples/with-next-app-router/app/favicon.ico
new file mode 100644
index 00000000..718d6fea
Binary files /dev/null and b/examples/with-next-app-router/app/favicon.ico differ
diff --git a/examples/with-next-app-router/app/globals.css b/examples/with-next-app-router/app/globals.css
new file mode 100644
index 00000000..da90d194
--- /dev/null
+++ b/examples/with-next-app-router/app/globals.css
@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
+}
+
+body {
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
+}
+
+button {
+ @apply px-4 py-1 text-sm text-blue-600 font-semibold rounded-full border border-blue-200 hover:text-white hover:bg-blue-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition-colors
+}
+
+.logo {
+ height: 8em;
+ padding: 1.5em;
+ will-change: filter;
+ cursor: pointer;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
diff --git a/examples/with-next-app-router/app/layout.tsx b/examples/with-next-app-router/app/layout.tsx
new file mode 100644
index 00000000..88bbaf55
--- /dev/null
+++ b/examples/with-next-app-router/app/layout.tsx
@@ -0,0 +1,27 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+import Providers from "@/app/providers";
+import "@suiet/wallet-kit/style.css";
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ 
+ ![Suiet logo]({"/suiet-logo.svg"}){kind=logo}
+