add connect button

package.json

@@ -10,7 +10,9 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@mysten/dapp-kit": "^0.10.3",
 		"@mysten/sui.js": "^0.48.1",
+		"@tanstack/react-query": "^5.14.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},

src/App.tsx

@@ -1,3 +1,4 @@
+import { ConnectButton } from "@mysten/dapp-kit";
 import {
 	CoinBalance,
 	CoinStruct,
@@ -53,6 +54,8 @@ export default function App() {
 			</ul>
 
 			<GetSuiFromFaucetForm />
+
+			<ConnectButton />
 		</>
 	);
 }

src/main.css

@@ -0,0 +1,3 @@
+* {
+	font-family: sans-serif;
+}

src/main.tsx

@@ -1,10 +1,30 @@
+import {
+	SuiClientProvider,
+	WalletProvider,
+	createNetworkConfig,
+} from "@mysten/dapp-kit";
+import "@mysten/dapp-kit/dist/index.css";
+import { getFullnodeUrl } from "@mysten/sui.js/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./main.css";
 
+const { networkConfig } = createNetworkConfig({
+	devnet: { url: getFullnodeUrl("devnet") },
+});
+
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
-		<App />
+		<QueryClientProvider client={queryClient}>
+			<SuiClientProvider networks={networkConfig} defaultNetwork="devnet">
+				<WalletProvider>
+					<App />
+				</WalletProvider>
+			</SuiClientProvider>
+		</QueryClientProvider>
 	</React.StrictMode>
 );