We've presented an adapter that implemented the interface of SUI Wallet Adapter for you✨ With this adapter, your DApp can easily connect with the Suiet Wallet Extension, which enables DApp to retrieve basic info of user's wallet and launch manipulation requests such as transaction signing.

For React DApps, the Sui team has provided React context provider and React hook in the npm package @mysten/wallet-adapter-react. Therefore we can simply register the Suiet Adapter into the official provider and then make use of them.

⚠️ Right now Suiet doesn't provide UI kits such as Wallet Select Modal, you may need to custom them on your own or simply forked from Sui repo.

⚠️ Usage with React ONLY: According to the sui wallet repo, the library only supports React DApp.

🚀 Get Started

⚙️ Prerequisites

A React project
Install required npm packages

npm install @mysten/wallet-adapter-react @suiet/wallet-adapter

🚢 Use Sui wallet provider & Register Suiet adapter

// main.js
import { WalletProvider } from "@mysten/wallet-adapter-react";
import { SuietWalletAdapter } from "@suiet/wallet-adapter";

const supportedWallets = [
  { adapter: new SuietWalletAdapter() },
];

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <WalletProvider supportedWallets={supportedWallets}>
      <App />
    </WalletProvider>
  </React.StrictMode>
);

✅ Retrieve data and launch manipulations

// App.jsx
import {useEffect} from "react";
import { useWallet } from "@mysten/wallet-adapter-react";

function App() {
  const {
    select,
    wallet,
    connected,
    connecting,
    disconnect,
    getAccounts,
    executeMoveCall,
  } = useWallet();

  useEffect(() => {
    if (!connected || !wallet) return;
    (async function () {
      console.log(wallet.adapter.name);
      const accounts = await getAccounts();
      console.log(accounts);
    })();
  }, [connected, wallet]);

  async function handleExecuteMoveCall() {
    await executeMoveCall({
      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 (
    <div className={'app'}>
      <h1>Current wallet: {wallet ? wallet.adapter.name : 'null'}</h1>
      <button
        onClick={() => {
          if (!connected) {
            select('Suiet');
          } else {
            disconnect();
          }
        }}
      >
        {connecting ? "connecting" : connected ? "Disconnect" : "connect"}
      </button>
    </div>
  )
}