Main
File Structure
// Import dependencies
import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import { backend } from 'declarations/backend';
import botImg from '/bot.svg';
import userImg from '/user.svg';
import Sidebar from './components/Sidebar';
import ChatWindow from './components/ChatWindow';
import '/index.css';
import { createThirdwebClient } from "thirdweb";
import { client } from "./../config/client";
import { useProfiles, useActiveAccount, ConnectButton, ThirdwebProvider } from "thirdweb/react";
// Wallet connection component
export function WalletConnectComponent() {
const account = useActiveAccount();
useEffect(() => {
if (account) {
const address = account.address;
console.log("Wallet connected:", address);
backend.create_account(address)
.then(() => console.log("Account registered"))
.catch(err => console.error("Failed to register:", err));
}
}, [account]);
return <ConnectButton client={client} />;
}
// Main App component
function App() {
return (
<div className="flex h-screen dark bg-zinc-900 text-white">
<ChatWindow />
<div className="w-64 bg-zinc-800 p-4 flex flex-col">
<WalletConnectComponent />
</div>
</div>
);
}
// Root rendering
export default App;
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ThirdwebProvider client={client}>
<App />
</ThirdwebProvider>
</React.StrictMode>
);Core Components
1. WalletConnectComponent
WalletConnectComponentElement
Purpose
2. App Component
App ComponentElement
Description
3. Root Rendering
Element
Purpose
Key Features
Dependencies
Dependency
Purpose
Customization Guide
1. Add Wallet Information Display
2. Enhance Error Handling
3. Add Multi-Chain Support
4. Implement Loading States
Last updated