Suiet Wallet Kit

https://github.com/suiet/wallet-kit
Admin
Suiet wallet kit is a React toolkit for DApps to easily interact with all Sui wallets, supporting...
Tokens:11,482
Snippets:73
Trust Score:8.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Mysten Sui SDK Package

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/QuickStart.md

Install the official Sui SDK package from Mysten Labs, which is a required dependency for interacting with the Sui blockchain and wallets.

```Shell
npm install @mysten/sui
```

```Shell
yarn add @mysten/sui
```

```Shell
pnpm install @mysten/sui
```

--------------------------------

### Install Suiet Wallet Kit NPM Package

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/QuickStart.md

Install the main Suiet wallet kit library using npm, yarn, or pnpm. This package provides the core components and hooks for wallet integration.

```Shell
npm install @suiet/wallet-kit
```

```Shell
yarn add @suiet/wallet-kit
```

```Shell
pnpm install @suiet/wallet-kit
```

--------------------------------

### Wrap App with WalletProvider and Import Styles

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/QuickStart.md

Wrap your main application component with the WalletProvider from `@suiet/wallet-kit` to enable the use of wallet hooks and components throughout your app. Also, import the default CSS styles.

```JSX
import {WalletProvider} from '@suiet/wallet-kit';
import '@suiet/wallet-kit/style.css';

// take react@18 project as an example
ReactDOM.createRoot(document.getElementById('root')).render(
  <WalletProvider>
    <App/>
  </WalletProvider>
);
```

--------------------------------

### Starting Next.js Development Server (Bash)

Source: https://github.com/suiet/wallet-kit/blob/main/examples/with-next/README.md

These commands initiate the local development server for the Next.js application. The server typically runs on port 3000 and provides hot-reloading for development.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Place ConnectButton Component

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/QuickStart.md

Import and place the provided ConnectButton component in your application's UI, typically in a header or navigation bar. This component handles the UI for connecting and disconnecting wallets.

```JSX
import {ConnectButton} from '@suiet/wallet-kit';

const App = () => {
  return (
    <>
      <header>
        <ConnectButton/>
      </header>
      <
      ... />
    </>
  )
};
```

--------------------------------

### Running Next.js Development Server (Bash)

Source: https://github.com/suiet/wallet-kit/blob/main/examples/with-next-app-router/README.md

Instructions to start the local development server for the Next.js project using different package managers (npm, yarn, or pnpm). After running, the application will be accessible at http://localhost:3000.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

--------------------------------

### Use useWallet Hook for Capabilities

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/QuickStart.md

Use the `useWallet` hook to access the connected wallet object, retrieve account information (address, public key), and call wallet methods like `signAndExecuteTransaction` or `signPersonalMessage`.

```JSX
import {useWallet} from '@suiet/wallet-kit';
import {Transaction} from "@mysten/sui/transactions";

const App = () => {
  const wallet = useWallet()

  useEffect(() => {
    if (!wallet.connected) return;
    console.log('connected wallet name: ', wallet.name)
    console.log('account address: ', wallet.account?.address)
    console.log('account publicKey: ', wallet.account?.publicKey)
  }, [wallet.connected])

  // launch a move call for the connected account via wallet
  async function handleMoveCall() {
    const tx = new Transaction();
    const packageObjectId = "0x1";
    tx.moveCall({
      target: `${packageObjectId}::nft::mint`,
      arguments: [tx.pure.string("Example NFT")],
    });
    await wallet.signAndExecuteTransaction({
      transaction: tx,
    });
  }

  // launch a move call for the connected account via wallet
  async function handleSignMessage() {
    await wallet.signPersonalMessage({
      message: new TextEncoder().encode("Hello World"),
    });
  }

  return (<.../>)
};
```

--------------------------------

### Example package.json Showing Dependency Version Conflict - JSON

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/FAQ.md

This JSON snippet illustrates a `package.json` file with specific versions of `@mysten/sui.js` and `@suiet/wallet-kit`. It is used to demonstrate how a mismatch between the installed `@mysten/sui.js` version and the peerDependency required by `@suiet/wallet-kit` can cause errors.

```JSON
{
    "dependencies": {
        "@mysten/sui.js": "0.41.2",
        "@suiet/wallet-kit": "0.2.22"
    }
}
```

--------------------------------

### Installing Suiet Wallet Kit Dependencies (Shell)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

Installs the necessary npm packages, `@mysten/sui` and `@suiet/wallet-kit`, for integrating Suiet Wallet Kit into a React project. Uses npm as the package manager.

```shell
npm install @mysten/sui @suiet/wallet-kit
```

--------------------------------

### Basic ConnectButton Usage (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/components/ConnectButton.md

Demonstrates the minimal setup required to use the ConnectButton component. It shows wrapping the button within the WalletProvider component, which is necessary for the wallet kit to function.

```jsx
import {
  ConnectButton,
  WalletProvider,
} from '@suiet/wallet-kit';

function App() {
  return (
    <WalletProvider>
      <ConnectButton>Connect Wallet</ConnectButton>
    </WalletProvider>
  );
}
```

--------------------------------

### Selecting a Wallet for Connection - React/JSX

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/hooks-only.md

Shows how to build a custom wallet selection interface using the useWallet hook. It demonstrates accessing lists of available wallets (configured, detected, all available) and using the `select` method to programmatically initiate a connection to a chosen wallet after checking if it's installed.

```jsx
import { useWallet } from '@suiet/wallet-kit';

function WalletSelector() {
  const { 
    select,  // select 
    configuredWallets,  // default wallets
    detectedWallets,  // Sui-standard wallets detected from browser env
    allAvailableWallets,  // all the installed Sui-standard wallets
  } = useWallet();

  return [...configuredWallets, ...detectedWallets].map((wallet) => (
    <button
      key={wallet.name}
      onClick={() => {
        // check if user installed the wallet
        if (!wallet.installed) {
          // do something like guiding users to install
          return;
        }
        select(wallet.name);
      }}
    >
      Connect to {wallet.name}
    </button>
  ));
}
```

--------------------------------

### Example Usage of IDefaultWallet (TypeScript)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Types.md

Provides an example of how to create a custom IDefaultWallet object, demonstrating the required properties and their types. This snippet shows how to instantiate the interface with specific wallet details.

```typescript
import IDefaultWallet from "@suiet/wallet-kit";

const myWallet: IDefaultWallet = {
  name: "myWallet",
  iconUrl: "external url or data url",
  downloadUrl: {
    browserExtension: "chrome extension store url...",
  },
};
```

--------------------------------

### Initializing Suiet Wallet Kit Provider - React/JSX

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/hooks-only.md

Demonstrates the initial setup for the Suiet Wallet Kit by wrapping the root component of your application with the WalletProvider component. This provides the necessary context for accessing wallet data and functions via hooks throughout the component tree.

```jsx
import { WalletProvider } from '@suiet/wallet-kit';

function RootComponent() {
  return (
    <WalletProvider>
      <App />
    </WalletProvider>
  );
}
```

--------------------------------

### Defining and Using a Custom Wallet (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/customize-wallet-list.md

Provides an example of defining a custom wallet using the `defineWallet` function, specifying its name, icon URL, and download URL. It then shows how to include this newly defined custom wallet in the `defaultWallets` array when initializing the `<WalletProvider />`.

```jsx
import {
  WalletProvider,
  defineWallet,
} from '@suiet/wallet-kit';

// customized wallet must support @mysten/wallet-standard
const CustomizeWallet = defineWallet({
  name: "myWallet",
  iconUrl: "external url or data url",
  downloadUrl: {
    browserExtension: 'download page url of chrome extension...'
  },
})

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <WalletProvider defaultWallets={[
      CustomizeWallet,
      // ...
    ]}>
      <App />
    </WalletProvider>
  </React.StrictMode>
)
```

--------------------------------

### Adding New Wallet Enum and Definition in presets.ts (TS)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/CanIUse.md

Provides an example of how wallet developers can add their wallet to the `PresetWallet` enum and define its name, icon URL, and download URLs within the `presets.ts` file to integrate with Suiet Kit.

```ts
// packages/kit/src/wallet/preset-wallets/presets.ts
export enum PresetWallet {
  // ... resgisted wallet enum
  // note that this name should match with your wallet adapter's name 
  // for auto detection and display purposes
  YOUR_WALLET = "Your Wallet",
}

export const YourWallet = defineWallet({
  name: PresetWallet.YOUR_WALLET,
  iconUrl: 'base64 encoded image (recommended, optimize the size!!) / external url',
  downloadUrl: {
    browserExtension: 'chrome extension installation url',
  }
})
```

--------------------------------

### Updating Sui SDK Dependency via npm

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/migration/upgradeTo0.3.x.md

Instructions to uninstall the old `@mysten/sui.js` package and install the new `@mysten/sui` package using npm, reflecting the SDK renaming in v1.

```npm
npm uninstall @mysten/sui.js
npm install @mysten/sui
```

--------------------------------

### Getting Wallet Info with useWallet (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

Demonstrates how to use the useWallet hook to access basic information about the connected wallet, such as its connection status, name, and account details. Requires the component to be within a WalletProvider.

```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)
}
```

--------------------------------

### Switching Between Wallet Accounts - React/JSX

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/hooks-only.md

Provides an example of how to implement account switching functionality using the `switchAccount` method from the useWallet hook. It shows how to retrieve the list of accounts available in the connected wallet using `getAccounts()` and handle the asynchronous switching operation, including basic error logging.

```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 <ol>
      {accounts.map((account) => {
        return <li key={account.address} onClick={() => handleSwitchAccount(account.address)}
          style={{ cursor: "pointer" }}
        >
          <p>address: {account.address}</p>
          <p>publicKey: {account.publicKey ?? "not supported"}</p>
        </li>
      })}
    </ol>;
  }

  return (
    <div>
      <h3>Your Accounts</h3>
      {renderWalletAccounts()}
    </div>
  );
}
```

--------------------------------

### Applying BEM Class Name in JSX

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/basic.md

This snippet demonstrates how to apply a CSS class following the BEM naming convention to a JSX element. It shows a simple example of a div using the 'wkit-button' class.

```jsx
<div className={"wkit-button"}>...</div>
```

--------------------------------

### Check Wallet Connection Status with Suiet Wallet Kit (TS)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

Shows how to destructure `status`, `connected`, and `connecting` from the `useWallet` hook to check the current connection state of the wallet. Provides assertion examples for each state.

```TS
import { useWallet } from '@suiet/wallet-kit'; // Assuming import

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
```

--------------------------------

### Updating signAndExecuteTransaction Structure (React/TypeScript)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/migration/upgradeTo0.1.0.md

Demonstrates the required change when calling `signAndExecuteTransaction` after the `wallet-standard` update. The previous arguments must now be nested under a `transaction` field. Shows an example of calling the `devnet_nft` mint function.

```diff
export function Transaction() {
  const { signAndExecuteTransaction } = useWallet();

  const handleClick = async () => {
    // the following example comes from sui wallet official example.
    await signAndExecuteTransaction({
+        transaction:{
          kind: 'moveCall',
          data: {
            packageObjectId: '0x2',
            module: 'devnet_nft',
            function: 'mint',
            typeArguments: [],
            arguments: [
              'name',
              'capy',
              'https://cdn.britannica.com/94/194294-138-B2CF7780/overview-capybara.jpg?w=800&h=450&c=crop',
            ],
            gasBudget: 10000,
          }
+       }
    });
  };

  return <button onClick={() => handleClick()}>send transaction</button>;
}
```

--------------------------------

### Get All Permitted Accounts with Suiet Wallet Kit (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

Demonstrates how to use the `getAccounts` method from the `useWallet` hook to retrieve a list of all accounts the wallet has made accessible to the dapp. Includes a handler function to log the accounts.

```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);
  }
}
```

--------------------------------

### Importing Default Suiet Wallet Kit CSS in JSX

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/basic.md

This snippet shows how to import the default CSS file provided by the Suiet Wallet Kit into a React/JSX application entry point, typically src/index.jsx. Importing this file is necessary to apply the default styles to the kit's components. Ensure your build setup (like Webpack or Vite) is configured to handle CSS imports.

```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 <div>...</div>;
}
```

--------------------------------

### Accessing Public Key (Deprecated vs. Current) - JavaScript/TypeScript

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

This example illustrates the deprecated method `wallet.getPublicKey()` for retrieving the public key and the current recommended way to access it directly from the account object via `wallet.account.publicKey`.

```JavaScript
const wallet = useWallet();
- console.log(wallet.getPublicKey());
+ console.log(wallet.account.publicKey);
```

--------------------------------

### Overriding Suiet Wallet Kit CSS Variables

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/customize.md

Demonstrates how to override the default CSS variables in a custom CSS file (e.g., SCSS) to change the appearance of the components. This example shows how to redefine the hue and saturation of the accent color.

```scss
:root {
  --wkit-accent-hs: 110, 100%; // Redefine the hs (the first two components of hsl) of the accent color

  ... // other CSS variables
}
```

--------------------------------

### Reacting to Account Balance Changes with useEffect

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useAccountBalance.md

This example illustrates how to use the useAccountBalance hook in conjunction with React's useEffect hook to perform side effects when the account balance changes. It shows how to convert the balance string to a number for comparison and log a message if the balance exceeds a certain threshold.

```jsx
import { useEffect } from 'react';

interface AccountBalanceResponse {
  error: Error | null;
  loading: boolean;
  balance: string;
}

import { useAccountBalance } from '@suiet/wallet';

function App() {
  const { error, loading, balance } = useAccountBalance();

  useEffect(() => {
    // if you want to do comparison or calculation with balance,
    // use Number or BigInt to convert the balance string
    if (Number(balance) > 1000000) {
      console.log('You are a millionare!');
    }
  }, [balance]);

  return (
    <div>
      <div>fetch balance loading status: {loading}</div>
      <div>account balance: {balance}</div>
    </div>
  );
}
```

--------------------------------

### Get Connected Chain with Suiet Wallet Kit (TSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

Demonstrates how to use the `useWallet` hook to access the connected chain's name. It logs the chain name when the wallet connection status changes. Note that this feature might not be supported by all wallets.

```TSX
import {useWallet} from '@suiet/wallet-kit';
import { useEffect } from 'react'; // Assuming React context
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]);
}
```

--------------------------------

### Registering New Wallet in AllDefaultWallets Array (TS)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/CanIUse.md

Illustrates how to add the newly defined wallet object (e.g., `presets.YourWallet`) to the `AllDefaultWallets` array in the `index.ts` file, making it available for display and use within the Suiet Kit.

```ts
// packages/kit/src/wallet/preset-wallets/index.ts
export const AllDefaultWallets = [
    ...[
        // ... registed wallets
        presets.YourWallet,
    ].sort((a, b) => a.name < b.name ? -1 : 1),
]
```

--------------------------------

### Initializing Suiet WalletProvider in React

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/components/WalletProvider.md

This snippet demonstrates the basic usage of the `WalletProvider` component from `@suiet/wallet-kit`. It shows how to wrap your main application component (`<App />`) within the `WalletProvider` to make wallet kit hooks and components available throughout your application. This is the required entry point for using the kit.

```jsx
import ReactDOM from 'react-dom';
import { WalletProvider } from '@suiet/wallet-kit';

function Root() {
  // wrap your app component
  <WalletProvider>
    <App />
  </WalletProvider>;
}

ReactDOM.render(<Root />, docoument.getElementById('root'));
```

--------------------------------

### Initializing WalletProvider with Default Wallets (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/customize-wallet-list.md

Demonstrates the basic usage of `<WalletProvider />` from `@suiet/wallet-kit` to wrap the application root. It shows how to pass a custom array of wallet components (`defaultWallets`) to control the order and selection of wallets displayed in the connect modal.

```jsx
import {
  WalletProvider,
  SuietWallet,
  SuiWallet,
  EthosWallet,
  IDefaultWallet,
} from '@suiet/wallet-kit';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <WalletProvider defaultWallets={[
      // order defined by you
      SuietWallet,
      SuiWallet,
      EthosWallet,
      // ...
    ]}>
    {/* or just leave it as default which contains all preset wallets */}
    {/*<WalletProvider>*/}
      <App />
    </WalletProvider>
  </React.StrictMode>
)
```

--------------------------------

### Setting up WalletProvider in React (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

Imports `WalletProvider` from `@suiet/wallet-kit` and wraps the main `App` component with it. This makes the wallet context available throughout the application, enabling access to wallet states and functions.

```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(
  <StrictMode>
    <WalletProvider>
      <App />
    </WalletProvider>
  </StrictMode>
);
```

--------------------------------

### Implementing Required Features for Suiet Kit Compatibility (JS)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/CanIUse.md

Demonstrates the structure of the `features` object required in a wallet adapter for auto-detection and recognition by the Suiet Wallet Kit. It highlights the essential `standard:connect`, `standard:events`, and `sui:signAndExecuteTransactionBlock` features.

```js
// a valid wallet adapter should have the following features
{
  // ...
  features: {
    "standard:connect": () => {},
    "standard:events": () => {},
    "sui:signAndExecuteTransactionBlock": () => {},
  }
}
```

--------------------------------

### Displaying Wallet Connection Status with Suiet Wallet Kit (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

Demonstrates how to import necessary components and hooks from `@suiet/wallet-kit` and use the `useWallet` hook to access and display the current connection status of the wallet. This is useful for debugging and providing user feedback.

```jsx
import {
  ConnectButton,
  useWallet,
  addressEllipsis,
} from "@suiet/wallet-kit";

export default function App() {
  // Get access to the connected wallet
  const wallet = useWallet();

  return (
    <div className="App">
      <h1 className="title">Hello, Suiet Wallet Kit</h1>
      <ConnectButton />

			<section>
        <p>
          <span class="gradient">Wallet status:</span> {wallet.status}
        </p>
      </section>
    </div>
  );
}
```

--------------------------------

### Configuring Supported Chains with WalletProvider (TSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/configure-chain.md

This snippet demonstrates how to initialize the WalletProvider component with a specific list of supported chains. It imports necessary chain definitions and passes an array of Chain objects to the chains prop. It also shows how to potentially include custom chains.

```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(
  <React.StrictMode>
    <WalletProvider chains={SupportedChains}>
      <App />
    </WalletProvider>
  </React.StrictMode>
);
```

--------------------------------

### Importing and Using useSuiProvider Hook (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useSuiprovider.md

Demonstrates how to import the `useSuiProvider` hook from `@suiet/wallet` and destructure common methods like `getObject`, `getOwnedObjects`, and `getBalance` for use within a React component.

```jsx
import { useSuiProvider } from '@suiet/wallet';
function YourComponent() {
  const {
    getObject,
    getOwnedObjects,
    getBalance,
    // ... other methods
  } = useSuiProvider();

  return <>...</>;
}
```

--------------------------------

### Signing and Executing Programmable Transactions with useWallet (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

Shows how to sign and execute a Sui Programmable Transaction Block using the useWallet hook. It demonstrates creating a TransactionBlock, adding a moveCall instruction, and handling the asynchronous execution result. Requires a connected wallet.

```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 (
    <button onClick={handleSignAndExecuteTx}> Mint Your NFT !</button>
  )
}
```

--------------------------------

### Correct useSuiProvider Hook Usage - TypeScript

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/FAQ.md

This TypeScript code shows the proper way to use the `useSuiProvider` hook. The entire object returned by the hook is assigned to a variable (`suiClient`), preserving the `this` context for its methods and allowing them to be called correctly without errors.

```TypeScript
import { useSuiProvider } from '@suiet/wallet-kit';
const suiClient = useSuiProvider()
const transactionInfo = await suiClient.getTransactionBlock({
          digest: String(res.digest),
          options: {
            showObjectChanges: true,
          },
});
```

--------------------------------

### Updating SuiClient Import Path

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/migration/upgradeTo0.3.x.md

Shows the required change to update the import path for the `SuiClient` class from the old `@mysten/sui.js` package to the new `@mysten/sui` package as part of the SDK v1 migration.

```diff
- import { SuiClient } from '@mysten/sui.js'
+ import { SuiClient } from '@mysten/sui'
```

--------------------------------

### Importing Custom CSS for Suiet Wallet Kit (Class Overrides)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/customize.md

Illustrates how to import the default Suiet Wallet Kit CSS file and a custom CSS file containing class overrides into a React/JSX application entry point. The custom file must be imported after the default one for the overrides to apply.

```jsx
import '@suiet/wallet-kit/style.css';
import './suiet-wallet-kit-custom.css'; // You css file here
```

--------------------------------

### Importing Custom CSS for Suiet Wallet Kit (Variables)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/customize.md

Illustrates how to import the default Suiet Wallet Kit CSS file and a custom CSS file containing variable overrides into a React/JSX application entry point. The custom file must be imported after the default one to ensure overrides take effect.

```jsx
import '@suiet/wallet-kit/style.css';
import './suiet-wallet-kit-custom.css'; // You CSS file here
```

--------------------------------

### Accessing Wallet Lists with useWallet Hook (TSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/customize-wallet-list.md

Explains how to retrieve the list of configured wallets (`configuredWallets`) and automatically detected wallets (`detectedWallets`) using the `useWallet` hook within a component wrapped by `<WalletProvider />`. This is useful for building a custom wallet selection UI.

```tsx
// make sure this code is under <WalletProvider />

function App() {
  const {configuredWallets, detectedWallets} = useWallet();
  
  return (
    <>
      <CustomizedWalletModal list={[...configuredWallets, ...detectedWallets]} />
    </>
  )
}
```

--------------------------------

### Create Sui Transaction Block for NFT Mint (TypeScript)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

Defines a function that constructs a `TransactionBlock` for minting an NFT on the Sui devnet. It specifies the contract address, module, method (`mint`), and provides pure arguments for the NFT's name, description, and image URL.

```JSX
import { Transaction } from "@mysten/sui";

function createMintNftTxnBlock() {
  // define a programmable transaction block
  const txb = new Transaction();

  // note that this is a devnet contract address
  const contractAddress =
    "0xe146dbd6d33d7227700328a9421c58ed34546f998acdc42a1d05b4818b49faa2";
  const contractModule = "nft";
  const contractMethod = "mint";

  const nftName = "Suiet NFT";
  const nftDescription = "Hello, Suiet NFT";
  const nftImgUrl =
    "https://xc6fbqjny4wfkgukliockypoutzhcqwjmlw2gigombpp2ynufaxa.arweave.net/uLxQwS3HLFUailocJWHupPJxQsli7aMgzmBe_WG0KC4";

  txb.moveCall({
    target: `${contractAddress}::${contractModule}::${contractMethod}`,
    arguments: [
      tx.pure(nftName),
      tx.pure(nftDescription),
      tx.pure(nftImgUrl),
    ],
  });

  return txb;
}
```

--------------------------------

### Displaying Current Wallet Chain with Suiet Wallet Kit (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

Illustrates how to retrieve the current blockchain network (chain) the connected wallet is using. It accesses the chain information through `wallet.chain.name` and displays it, which is important for ensuring interactions occur on the correct Sui environment.

```jsx
export default function App() {
  const wallet = useWallet();

  return (
    <div className="App">
      // ...
      <p>
        <span class="gradient">Current chain of wallet: </span>
        {wallet.chain.name}
      </p>
			// ...
    </div>
  );
}
```

--------------------------------

### Upgrading signAndExecuteTransaction to signAndExecuteTransactionBlock (TypeScript)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/migration/upgradeTo0.2.x.md

Demonstrates the migration from the deprecated `signAndExecuteTransaction` method to the new `signAndExecuteTransactionBlock` in Suiet Wallet Kit v0.2.x. It shows how to construct a `TransactionBlock` object for a move call and pass it to the updated method, replacing the old plain object structure. Requires importing `TransactionBlock` from `@mysten/sui.js`.

```TypeScript
import {TransactionBlock} from "@mysten/sui.js";

async function handleMintNftMoveCall() {
  const tx = new TransactionBlock();
  tx.moveCall({
    target: '0x2::devnet_nft::mint',
    arguments: [
      tx.pure('name'),
      tx.pure('capy'),
      tx.pure('https://cdn.britannica.com/94/194294-138-B2CF7780/overview-capybara.jpg?w=800&h=450&c=crop'),
    ],
  });

  await wallet.signAndExecuteTransactionBlock({
    transactionBlock: tx
  });
}
```

--------------------------------

### BEM Naming Pattern for CSS Classes

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/basic.md

This snippet shows the BEM (Block, Element, Modifier) naming convention used for CSS classes in the Suiet Wallet Kit. It provides a structured pattern for creating class names to improve reusability and maintainability of styles.

```txt
.wkit-[block]__[element]--[modifier]
```

--------------------------------

### Move NFT Contract Mint Function Signature

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

Defines the signature for the `mint` entry function within the NFT smart contract module. It takes arguments for the NFT's name, description, image URL, and the transaction context.

```Move
module e146dbd6d33d7227700328a9421c58ed34546f998acdc42a1d05b4818b49faa2.nft {
// ...

// Arg0: String - nft name
// Arg1: String - nft description
// Arg2: String - nft img url
entry public mint(Arg0: String, Arg1: String, Arg2: String, Arg3: &mut TxContext) {
//...
}
}
```

--------------------------------

### Displaying Connected Account Address with Suiet Wallet Kit (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

Shows how to access the connected account information via the `useWallet` hook. It conditionally renders the account address using optional chaining (`wallet?.account`) and formats it using the `addressEllipsis` utility function for better readability.

```jsx
export default function App() {
  const wallet = useWallet();

  return (
    <div className="App">
      // ...
      {wallet?.account && (
        <div>
          <p>Connected Account: {addressEllipsis(wallet.account.address)}</p>
        </div>
      )}
			// ...
    </div>
  );
}
```

--------------------------------

### React Component to Sign and Execute Sui Transaction (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/connect-dapp-with-wallets.md

A React functional component that utilizes the `@suiet/wallet-kit` hook `useWallet` to manage wallet connection status. It defines an asynchronous function `mintNft` that calls the wallet's `signAndExecuteTransactionBlock` method to send the pre-configured NFT mint transaction, handling success and error cases.

```JSX
import { useWallet } from "@suiet/wallet-kit";
import { Transaction } from "@mysten/sui";

function createMintNftTxnBlock() {
  // ...
}

export default function App() {
  const wallet = useWallet();

  async function mintNft() {
    if (!wallet.connected) return;

    const txb = createMintNftTxnBlock();
    try {
      // call the wallet to sign and execute the transaction
      const res = await wallet.signAndExecuteTransactionBlock({
        transactionBlock: txb,
      });
      console.log("nft minted successfully!", res);
      alert("Congrats! your nft is minted!");
    } catch (e) {
      alert("Oops, nft minting failed");
      console.error("nft mint failed", e);
    }
  }

  return (
    <div className="App">
      {/* ... */}
      {wallet.status === "connected" && (
        <button onClick={mintNft}>Mint Your NFT !</button>
      )}
      {/* ... */}
    </div>
  );
}
```

--------------------------------

### Using signTransactionBlock in Suiet Wallet Kit (TypeScript)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/migration/upgradeTo0.2.x.md

Illustrates how to use the new `signTransactionBlock` method available in Suiet Wallet Kit v0.2.x. This method allows signing a `TransactionBlock` without executing it, returning the signature and transaction bytes. It requires constructing a `TransactionBlock` object first.

```TypeScript
async function handleSignTransaction() {
  const tx = new TransactionBlock();
  tx.moveCall({
    target: '0x2::nft::mint',
    arguments: [
      tx.pure('name'),
      tx.pure('capy'),
      tx.pure('https://cdn.britannica.com/94/194294-138-B2CF7780/overview-capybara.jpg?w=800&h=450&c=crop'),
    ],
  });

  // get the signature of the transaction
  const {signature, transactionBytes} = await wallet.signTransactionBlock({
    transactionBlock: tx,
  });
}
```

--------------------------------

### Integrating Slush Web Wallet with WalletProvider (TSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/customize-wallet-list.md

Illustrates how to add the Slush Web Wallet to the list of available wallets. It uses `defineSlushWallet` to create the wallet configuration object, specifying the DApp name, and then includes this configuration in the `defaultWallets` array passed to `<WalletProvider />`, combining it with `AllDefaultWallets`.

```tsx
import {
  WalletProvider,
  defineSlushWallet,
  AllDefaultWallets,
} from "@suiet/wallet-kit";

const slushWebWalletConfig = defineSlushWallet({
  appName: "Your DApp Name",
});

export default function App() {
  return (
    <WalletProvider defaultWallets={[
      ...AllDefaultWallets,
      slushWebWalletConfig,
    ]}>
      <YourComponent />
    </WalletProvider>
  );
}
```

--------------------------------

### Incorrect useSuiProvider Hook Usage - TypeScript

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/FAQ.md

This TypeScript code demonstrates an incorrect pattern for using the `useSuiProvider` hook from `@suiet/wallet-kit`. By deconstructing the returned object, methods like `getTransactionBlock` lose their necessary `this` context, resulting in a `TypeError` when called.

```TypeScript
import { useSuiProvider } from '@suiet/wallet-kit';
const { getTransactionBlock } = useSuiProvider()
const transactionInfo = await getTransactionBlock({
    digest: String(res.digest),
    options: {
    showObjectChanges: true,
    },
});
// TypeError: Cannot read properties of undefined (reading 'transport'), at getTransactionBlock
```

--------------------------------

### Defining Default CSS Variables for Suiet Wallet Kit

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/customize.md

Shows the default CSS variables used by the Suiet Wallet Kit components. These variables define colors, fonts, sizes, and layout properties and serve as the base for customization.

```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;
}
```

--------------------------------

### Access Wallet Account Info with Suiet Wallet Kit (TS)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

Illustrates how to access the connected wallet's account information, such as address and public key, using the `account` property from the `useWallet` hook. Includes a function to print this information if the wallet is connected.

```TS
import { useWallet } from '@suiet/wallet-kit'; // Assuming import

const {connected, account} = useWallet();

function printAccountInfo() {
  if (!connected) return;
  console.log(account?.address);
  console.log(account?.publicKey);
}
```

--------------------------------

### Using signAndExecuteTransaction API in React

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/sign-and-execute-transactions.md

This snippet demonstrates how to use the `signAndExecuteTransaction` API within an asynchronous function in a React component. It shows importing the necessary `Transaction` class, creating a new transaction object, and passing it to the wallet's `signAndExecuteTransaction` method.

```TypeScript
// 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 
  }
}
```

--------------------------------

### Handling ConnectButton Connection Errors (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/components/ConnectButton.md

Illustrates how to handle connection errors using the onConnectError prop of the ConnectButton. It shows how to access the error details, including the error code and message, to provide specific feedback to the user, such as detecting user rejection.

```jsx
import {WalletProvider, ConnectButton, ErrorCode, BaseError} from "@suiet/wallet-kit";

function App() {
  return (
    <WalletProvider>
      <ConnectButton
        // The BaseError instance has properties like {code, message, details}
        // for developers to further customize their error handling.
        onConnectError={(error: BaseError) => {
           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</ConnectButton>
    </WalletProvider>
  );
}
```

--------------------------------

### Checking Wallet Connection Status and Address - React/JSX

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/tutorial/hooks-only.md

Illustrates how to use the useWallet hook to retrieve the current connection status and the address of the active account. This information is typically used to conditionally render different UI elements, such as a connect button or account details, based on whether a wallet is connected.

```jsx
import {useWallet} from '@suiet/wallet-kit';
import {useState, useEffect} from "react";

function App() {
  const wallet = useWallet();

  return (
    <div>
      {wallet.connected ? <AccountInfo address={wallet?.address} /> : <ConnectButton />}
    </div>
  )
}
```

--------------------------------

### Using ConnectModal with a Custom Button (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/components/ConnectModal.md

Demonstrates how to integrate the ConnectModal component with a custom button trigger. It checks the wallet connection status and renders the modal when disconnected, allowing the user to select a wallet via the custom button.

```jsx
import { useWallet, ConnectModal } from '@suiet/wallet-kit';

function App() {
  const {connected} = useWallet()
  const [showModal, setShowModal] = useState(false)

  if (connected) {
    return <YourComponent />
  }
  return (
    // wrap your own button as the trigger of the modal
    <ConnectModal
      open={showModal}
      onOpenChange={(open) => setShowModal(open)}
    >
      <YourOwnButton />
    </ConnectModal>;
  )
}
```

--------------------------------

### Accessing Wallet Adapter Name (Deprecated vs. Current) - JavaScript/TypeScript

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

This snippet shows the deprecated way to access the wallet adapter's name using `wallet.wallet.name` and the recommended current approach using `wallet.adapter.name` after obtaining the wallet object via the `useWallet()` hook.

```JavaScript
const wallet = useWallet();
- console.log(wallet.wallet.name);
+ console.log(wallet.adapter.name);
```

--------------------------------

### Executing Transaction Block with useSuiProvider (JSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useSuiprovider.md

Illustrates how to use the `executeTransactionBlock` method obtained from the `useSuiProvider` hook to send a signed transaction block to the Sui network within a React component's event handler.

```jsx
function YourComponent() {
  const { executeTransactionBlock } = useSuiProvider();

  return (
    <div
      onClick={async () => {
        // ... 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
      }}
    >...</>
  );
}
```

--------------------------------

### Renaming TransactionBlock Import to Transaction

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/migration/upgradeTo0.3.x.md

Illustrates the change required to update the import path and class name from `TransactionBlock` in `@mysten/sui.js/transactions` to `Transaction` in `@mysten/sui/transactions`, reflecting the class renaming in the new SDK version.

```diff
- import {TransactionBlock} from '@mysten/sui.js/transactions'
+ import {Transaction} from '@mysten/sui/transactions'
```

--------------------------------

### Switch Wallet Account with Suiet Wallet Kit (TSX)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useWallet.md

Shows how to use the asynchronous `switchAccount` method to change the currently active account in the wallet to a specified address from the list of available accounts (`getAccounts`). Includes error handling.

```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 <button onClick={handleSwitchAccount}>Switch Account</button>;
}
```

--------------------------------

### Removing deprecated supportedWallets Prop (React/TypeScript)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/migration/upgradeTo0.1.0.md

Illustrates how to remove the deprecated `supportedWallets` prop from the `WalletProvider` component. The `getDefaultWallets` import is also no longer needed. Customization is now handled differently.

```diff
import ReactDOM from 'react-dom';
+ import { useWallet } from '@suiet/wallet-kit';
- import { getDefaultWallets, useWallet } from '@suiet/wallet-kit';

- const supportedWallets = getDefaultWallets();

function Root() {
+  <WalletProvider>
-  <WalletProvider supportedWallets={supportedWallets}>
    <App />
  </WalletProvider>;
}

ReactDOM.render(<Root />, docoument.getElementById('root'));
```

--------------------------------

### Displaying Account Balance and Loading State in React

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Hooks/useAccountBalance.md

This snippet demonstrates how to import and use the useAccountBalance hook from @suiet/wallet to fetch and display the current account's balance and loading status within a React component. It shows conditional rendering of a loading indicator based on the 'loading' state.

```tsx
import { useAccountBalance } from '@suiet/wallet';

function App() {
  const { error, loading, balance } = useAccountBalance();

  return (
    <div>{loading && <Spin />}</div>
    <div>{balance}</div>
  )
}
```

--------------------------------

### Applying Dark Mode Styles with SCSS

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/styling/darkmode.md

This SCSS snippet demonstrates how to define dark mode styles by overriding specific CSS variables within a `@media (prefers-color-scheme: dark)` block. These variables control the accent color, background color, and text color for components when the user's system prefers a dark color scheme.

```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;
  }
}
```

--------------------------------

### Defining Chain Type (TypeScript)

Source: https://github.com/suiet/wallet-kit/blob/main/website/docs/Types.md

Defines the structure for a blockchain network (referred to as Chain or Network), including its unique ID, human-readable name, and RPC endpoint URL. This type is used to specify which network an account or operation pertains to.

```ts
export type Chain = {
  id: string;
  name: string;
  rpcUrl: string;
};
```
Tokens:
Raw