docs(website): update docs

website/docs/CanIUse.md

@@ -3,17 +3,28 @@ title: Can I Use - Adapter Capabilities
 sidebar_position: 3
 ---
 
+## Preset Wallets
+
+These preset wallets will be displayed as `Popular` on our kit modal by default.
+
+> If you are a wallet developer and want to list your wallet below, feel free to contact our team 🥳 [Twitter@suiet_wallet](https://twitter.com/suiet_wallet)
+
+- [Suiet Wallet](https://suiet.app/)
+- [Sui Wallet](https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil)
+- [Ethos Wallet](https://ethoswallet.xyz/)
+
+## Can I Use with xxx Wallet?
+
 Due to the adapter difference of each wallet, we present a function comparison table among wallet adapters.
 
 > ⚠️ Remember to handle exceptional cases if some wallet adapters do not support certain features.
 
-## Hook `useWallet`
+### Hook `useWallet`
 
-|wallet|name|connected|connecting|select|disconnect|getAccounts|getPublicKey|signMessage|executeMoveCall|executeSerializedMoveCall|
-|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
-|[Suiet Wallet](https://github.com/suiet/wallet-adapter)|✅|✅|✅|✅|✅|✅|✅|✅|✅|✅|
-|[Sui Wallet](https://github.com/MystenLabs/sui/blob/main/sdk/wallet-adapter/packages/adapters/sui-wallet/src/adapter.ts)|✅|✅|✅|✅|✅|✅|❌|❌|✅|✅|
-|[Ethos Wallet](https://ethoswallet.xyz/)|✅|✅|✅|✅|✅|✅|❌|❌|✅|✅|
-|[Wave Wallet](https://www.wavewallet.app/) (Not Published)|/|/|/|/|/|/|/|/|/|/|
-|[Hydro Wallet](https://hydro.tech/) (Not Published)|/|/|/|/|/|/|/|/|/|/|
-|[Morphis Wallet](https://twitter.com/morphis_wallet) (Not Published)|/|/|/|/|/|/|/|/|/|/|
+|wallet|name|connected|connecting|select|disconnect|getAccounts|getPublicKey|signMessage|executeMoveCall|executeSerializedMoveCall|signAndExecuteTransaction|
+|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|---|---|
+|[Suiet Wallet](https://suiet.app/)|✅|✅|✅|✅|✅|✅|✅|✅|✅|✅|✅|
+|[Sui Wallet](https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil)|✅|✅|✅|✅|✅|✅|❌|❌|✅|✅|✅|
+|[Ethos Wallet](https://ethoswallet.xyz/)|✅|✅|✅|✅|✅|✅|❌|❌|✅|✅|✅|
+|[Wave Wallet](https://www.wavewallet.app/) (Not Published)|/|/|/|/|/|/|/|/|/|/||
+|[Morphis Wallet](https://morphiswallet.com/) (Not Published)|/|/|/|/|/|/|/|/|/|/||

website/docs/QuickStart.md

@@ -9,7 +9,7 @@ Suiet wallet kit is a wallet aggregator for DApps to interact with all the walle
 
 Let's try our kit and empower your dapp in minutes. 🪄
 
-> 💡 Have fun with [Demo Playground](https://wallet-kit-demo.vercel.app/) + [Vite example repo](https://github.com/suiet/wallet-kit/tree/main/examples/with-vite)
+> ⭐️ 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
 
@@ -31,24 +31,23 @@ Oh don't forget to import our css to enable default styles 🎨
 import { WalletProvider } from '@suiet/wallet-kit';
 import '@suiet/wallet-kit/style.css';
 
-const App = () => {
-  return (
-    <WalletProvider>
-      <Yourapp />
-    </WalletProvider>
-  );
-};
+// take react@18 project as an example
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <WalletProvider>
+    <App />
+  </WalletProvider>
+);
 ```
 
-> By default, suiet kit will load all the supported wallets to the list💡
+> By default, suiet kit will load all the [preset wallets](./CanIUse#preset-wallets) to the list💡
 
 ## 🕹 Place ConnectButton
 
 :::tip
-We recommend to use hooks together with our components. But if you only want to use our hooks, follow the instruction [#Advanced-Use Hooks Only](/docs/advanced/hooks-only)
+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 [#Advanced-Use Hooks Only](/docs/advanced/hooks-only)
 :::
 
-Just import our `<ConnectButton />` and place it to anywhere you like, such as Header.
+Just import our `<ConnectButton />` and place it to wherever you like, such as Header.
 
 ```jsx
 import { ConnectButton } from '@suiet/wallet-kit';
@@ -65,35 +64,46 @@ const App = () => {
 };
 ```
 
-## 🪝 Use Wallet Capacities
+## 🪝 Use Wallet Capabilities
 
-Now your dapp is already empowered and able to call wallet capacities.🎉
+After your dapp connects to a wallet that supports [Sui wallet-standard](https://github.com/MystenLabs/sui/tree/main/sdk/wallet-adapter/packages/wallet-standard), your dapp is already empowered and able to call wallet capabilities.🎉
 
-Continue to BUIDL your amazing dapp and join the incoming Sui-nami! 🌊
+> Please explore the docs for further usage information 💡
 
 ```jsx
 import { useWallet } from '@suiet/wallet-kit';
 
 const App = () => {
-  const {
-    wallet,
-    connected,
-    connecting,
-    getAccounts,
-    signAndExecuteTransaction,
-    signMessage,
-  } = useWallet()
+  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])
+
+  async function handleExecuteMoveCall() {
+    await wallet.executeMoveCall(...);
+  }
+  async function handleExecuteTransaction() {
+    await wallet.signAndExecuteTransaction(...);
+  }
+  async function handleSignMessage() {
+    await wallet.signMessage(...);
+  }
+
   return (<.../>)
 };
 ```
 
-## 💧 Demo Playground
+Continue to BUIDL your amazing dapp and join the incoming Sui-nami! 🌊
 
-Feel free to play with our [Create-React-App Demo](https://wallet-kit-demo.vercel.app) 🔗
+## 💧 Demo Playground
 
-> Github repo: https://github.com/suiet/wallet-kit/tree/main/examples/with-cra
+Feel free to play with our [Demo Playground](https://wallet-kit-demo.vercel.app) 🔗 ([Github repo](https://github.com/suiet/wallet-kit/tree/main/examples/with-vite))
 
-<img src="/img/integration-example.png" />
+<img src="/img/integration-example.jpg" />
 
 
 ## 🤝 Trusted by great Sui projects