Skip to content

Fix #8: [Frontend] Add wallet connect button to header/navbar with address display and disconnect #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
diptikhaparde-coder wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix #8: [Frontend] Add wallet connect button to header/navbar with address display and disconnect #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 14 additions & 28 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,17 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "@/components/providers";
import { Sidebar } from "@/components/ui/sidebar";
import { Toaster } from "@/components/ui/toaster";
import React from'react';
import { Sidebar } from '@/components/ui/sidebar';
import { WalletButton } from '@/components/ui/wallet-button';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "CoopFinance — Cooperative Finance on Stellar",
description:
"Open-source platform for savings groups, cooperatives, and rotating-credit associations built on Stellar.",
keywords: ["cooperative", "savings", "Stellar", "USDC", "Africa", "SACCO", "Ajo", "Esusu"],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
const Layout: React.FC = ({ children }) => {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${inter.className} bg-gray-50 text-gray-900`}>
<Providers>
<div className="flex min-h-screen">
<Sidebar />
<main className="flex-1 ml-64 p-6">{children}</main>
</div>
<Toaster />
</Providers>
</body>
</html>
<div className="flex">
<Sidebar />
<div className="flex-1">
<WalletButton />
{children}
</div>
</div>
);
}
};

export default Layout;
73 changes: 73 additions & 0 deletions src/components/ui/wallet-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from'react';
import { useWallet } from '@/hooks/use-wallet';
import { Button } from '@radix-ui/react-button';
import { Spinner } from '@radix-ui/react-spinner';
import { CopyIcon } from '@radix-ui/react-icons';
import { Dialog, DialogTrigger, DialogContent } from '@radix-ui/react-dialog';
import { Link } from 'next/link';

const WalletButton: React.FC = () => {
const { wallet, connect, disconnect, connecting } = useWallet();

const handleConnect = () => {
connect();
};

const handleDisconnect = () => {
disconnect();
};

const shortenAddress = (address: string) => {
if (!address) return '';
return `${address.slice(0, 4)}...${address.slice(-4)}`;
};

const renderButton = () => {
if (!wallet) {
return (
<Button onClick={handleConnect}>
Connect Wallet
</Button>
);
}

if (connecting) {
return (
<div>
<Spinner /> Connecting...
</div>
);
}

return (
<Dialog>
<DialogTrigger asChild>
<div className="flex items-center space-x-2">
<span className="text-green-500">●</span>
<span>{shortenAddress(wallet.address)}</span>
</div>
</DialogTrigger>
<DialogContent>
<div className="p-4">
<div className="mb-2">
<span>{wallet.address}</span>
<CopyIcon className="ml-2 cursor-pointer" onClick={() => navigator.clipboard.writeText(wallet.address)} />
</div>
<Link href={`https://stellar.expert/explorer/testnet/account/${wallet.address}`} target="_blank">
<Button>View on Stellar Explorer</Button>
</Link>
<Button onClick={handleDisconnect} className="mt-2">Disconnect</Button>
</div>
</DialogContent>
</Dialog>
);
};

return (
<div className="absolute top-4 right-4">
{renderButton()}
</div>
);
};

export default WalletButton;
71 changes: 13 additions & 58 deletions src/hooks/use-wallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,13 @@
"use client";

import { useState, useCallback } from "react";
import {
StellarWalletsKit,
WalletNetwork,
FreighterModule,
FREIGHTER_ID,
LobstrModule,
LOBSTR_ID,
xBullModule,
XBULL_ID,
} from "@creit.tech/stellar-wallets-kit";

const kit = new StellarWalletsKit({
network: WalletNetwork.TESTNET,
selectedWalletId: FREIGHTER_ID,
modules: [new FreighterModule(), new LobstrModule(), new xBullModule()],
});

export function useWallet() {
const [address, setAddress] = useState<string | null>(null);
const [isConnecting, setIsConnecting] = useState(false);
const [error, setError] = useState<string | null>(null);

const connect = useCallback(async () => {
setIsConnecting(true);
setError(null);
try {
await kit.openModal({
onWalletSelected: async (option) => {
kit.setWallet(option.id);
const { address: addr } = await kit.getAddress();
setAddress(addr);
},
});
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "Failed to connect wallet");
} finally {
setIsConnecting(false);
}
}, []);

const disconnect = useCallback(() => {
setAddress(null);
}, []);

const signTransaction = useCallback(async (xdr: string) => {
if (!address) throw new Error("Wallet not connected");
const { signedTxXdr } = await kit.signTransaction(xdr, {
address,
networkPassphrase: WalletNetwork.TESTNET,
});
return signedTxXdr;
}, [address]);

return { address, isConnecting, error, connect, disconnect, signTransaction };
}
import { useState, useEffect } from'react';
import { useStellarWallets } from '@creit.tech/stellar-wallets-kit';

export const useWallet = () => {
const { wallet, connect, disconnect, connecting } = useStellarWallets();

return {
wallet,
connect,
disconnect,
connecting,
};
};