Skip to content

Commit c12f638

Browse files
Tanya-rubyTanya-ruby
authored
Merge pull request #2 from Nidhicodes/feat-update
Integrate Wallet Connection Using Wagmi and Custom Hook
2 parents 0f19569 + 380d89a commit c12f638

7 files changed

Lines changed: 12160 additions & 35 deletions

File tree

‎dashboard/app/layout.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import localFont from "next/font/local"
66
import { SidebarProvider } from "@/components/ui/sidebar"
77
import { MobileHeader } from "@/components/dashboard/mobile-header"
88
import { DashboardSidebar } from "@/components/dashboard/sidebar"
9+
import { Providers } from "@/providers"
910

1011
const robotoMono = Roboto_Mono({
1112
variable: "--font-roboto-mono",
@@ -38,17 +39,19 @@ export default function RootLayout({
3839
<link rel="preload" href="/fonts/Rebels-Fett.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
3940
</head>
4041
<body className={`${rebelGrotesk.variable} ${robotoMono.variable} antialiased`}>
41-
<SidebarProvider>
42-
<MobileHeader />
42+
<Providers>
43+
<SidebarProvider>
44+
<MobileHeader />
4345

44-
{/* Desktop Layout */}
45-
<div className="w-full grid grid-cols-1 lg:grid-cols-12 gap-gap lg:px-sides">
46-
<div className="hidden lg:block col-span-2 top-0 relative">
47-
<DashboardSidebar />
46+
{/* Desktop Layout */}
47+
<div className="w-full grid grid-cols-1 lg:grid-cols-12 gap-gap lg:px-sides">
48+
<div className="hidden lg:block col-span-2 top-0 relative">
49+
<DashboardSidebar />
50+
</div>
51+
<div className="col-span-1 lg:col-span-10">{children}</div>
4852
</div>
49-
<div className="col-span-1 lg:col-span-10">{children}</div>
50-
</div>
51-
</SidebarProvider>
53+
</SidebarProvider>
54+
</Providers>
5255
</body>
5356
</html>
5457
)

‎dashboard/components/dashboard/sidebar/index.tsx‎

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
} from "@/components/ui/sidebar"
2828
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
2929
import { cn } from "@/lib/utils"
30+
import { useWallet } from "@/hooks/use-wallet"
3031

3132
// This is sample data for the sidebar
3233
const data = {
@@ -57,14 +58,11 @@ const data = {
5758
title: "Desktop (Online)",
5859
status: "online",
5960
},
60-
user: {
61-
address: "0x742d...4e89",
62-
label: "Connect Wallet",
63-
},
6461
}
6562

6663
export function DashboardSidebar({ className, ...props }: React.ComponentProps<typeof Sidebar>) {
6764
const pathname = usePathname()
65+
const { walletAddress, isConnected, connectWallet, disconnectWallet } = useWallet()
6866

6967
return (
7068
<Sidebar {...props} className={cn("py-sides", className)}>
@@ -141,34 +139,54 @@ export function DashboardSidebar({ className, ...props }: React.ComponentProps<t
141139
<SidebarGroupContent>
142140
<SidebarMenu>
143141
<SidebarMenuItem>
144-
<Popover>
145-
<PopoverTrigger className="flex gap-0.5 w-full group cursor-pointer">
142+
{isConnected && walletAddress ? (
143+
<Popover>
144+
<PopoverTrigger className="flex gap-0.5 w-full group cursor-pointer">
145+
<div className="shrink-0 flex size-14 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
146+
<CreditCardIcon className="size-8" />
147+
</div>
148+
<div className="group/item pl-3 pr-1.5 pt-2 pb-1.5 flex-1 flex bg-sidebar-accent hover:bg-sidebar-accent-active/75 items-center rounded group-data-[state=open]:bg-sidebar-accent-active group-data-[state=open]:hover:bg-sidebar-accent-active group-data-[state=open]:text-sidebar-accent-foreground">
149+
<div className="grid flex-1 text-left text-sm leading-tight">
150+
<span className="truncate text-xl font-display">
151+
{`${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}`}
152+
</span>
153+
<span className="truncate text-xs uppercase opacity-50 group-hover/item:opacity-100 font-mono">
154+
Connected
155+
</span>
156+
</div>
157+
<DotsVerticalIcon className="ml-auto size-4" />
158+
</div>
159+
</PopoverTrigger>
160+
<PopoverContent className="w-56 p-0" side="bottom" align="end" sideOffset={4}>
161+
<div className="flex flex-col">
162+
<button
163+
onClick={() => disconnectWallet()}
164+
className="flex items-center px-4 py-2 text-sm hover:bg-accent"
165+
>
166+
<CreditCardIcon className="mr-2 h-4 w-4" />
167+
Disconnect
168+
</button>
169+
</div>
170+
</PopoverContent>
171+
</Popover>
172+
) : (
173+
<button
174+
onClick={() => connectWallet()}
175+
className="flex gap-0.5 w-full group cursor-pointer"
176+
>
146177
<div className="shrink-0 flex size-14 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
147178
<CreditCardIcon className="size-8" />
148179
</div>
149-
<div className="group/item pl-3 pr-1.5 pt-2 pb-1.5 flex-1 flex bg-sidebar-accent hover:bg-sidebar-accent-active/75 items-center rounded group-data-[state=open]:bg-sidebar-accent-active group-data-[state=open]:hover:bg-sidebar-accent-active group-data-[state=open]:text-sidebar-accent-foreground">
180+
<div className="group/item pl-3 pr-1.5 pt-2 pb-1.5 flex-1 flex bg-sidebar-accent hover:bg-sidebar-accent-active/75 items-center rounded">
150181
<div className="grid flex-1 text-left text-sm leading-tight">
151-
<span className="truncate text-xl font-display">{data.user.label}</span>
182+
<span className="truncate text-xl font-display">Connect Wallet</span>
152183
<span className="truncate text-xs uppercase opacity-50 group-hover/item:opacity-100 font-mono">
153-
{data.user.address}
184+
Not Connected
154185
</span>
155186
</div>
156-
<DotsVerticalIcon className="ml-auto size-4" />
157-
</div>
158-
</PopoverTrigger>
159-
<PopoverContent className="w-56 p-0" side="bottom" align="end" sideOffset={4}>
160-
<div className="flex flex-col">
161-
<button className="flex items-center px-4 py-2 text-sm hover:bg-accent">
162-
<CreditCardIcon className="mr-2 h-4 w-4" />
163-
Wallet Settings
164-
</button>
165-
<button className="flex items-center px-4 py-2 text-sm hover:bg-accent">
166-
<GearIcon className="mr-2 h-4 w-4" />
167-
Preferences
168-
</button>
169187
</div>
170-
</PopoverContent>
171-
</Popover>
188+
</button>
189+
)}
172190
</SidebarMenuItem>
173191
</SidebarMenu>
174192
</SidebarGroupContent>

‎dashboard/hooks/use-wallet.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useState, useEffect } from 'react';
2+
import { useAccount, useConnect, useDisconnect } from 'wagmi';
3+
import { injected } from 'wagmi/connectors';
4+
5+
export function useWallet() {
6+
const { address, isConnected } = useAccount();
7+
const { connect } = useConnect();
8+
const { disconnect } = useDisconnect();
9+
10+
const [walletAddress, setWalletAddress] = useState<string | null>(null);
11+
12+
useEffect(() => {
13+
if (isConnected && address) {
14+
setWalletAddress(address);
15+
} else {
16+
setWalletAddress(null);
17+
}
18+
}, [isConnected, address]);
19+
20+
const connectWallet = () => {
21+
connect({ connector: injected() });
22+
};
23+
24+
const disconnectWallet = () => {
25+
disconnect();
26+
};
27+
28+
return {
29+
walletAddress,
30+
isConnected,
31+
connectWallet,
32+
disconnectWallet,
33+
};
34+
}

‎dashboard/lib/wagmi-config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { http, createConfig } from "wagmi"
2+
import { mainnet, sepolia } from "wagmi/chains"
3+
4+
export const config = createConfig({
5+
chains: [mainnet, sepolia],
6+
transports: {
7+
[mainnet.id]: http(),
8+
[sepolia.id]: http(),
9+
},
10+
})

0 commit comments

Comments
 (0)