diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b0c3f22..1137642 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( - - - -
- -
{children}
-
- - - - +
+ +
+ + {children} +
+
); -} +}; + +export default Layout; \ No newline at end of file diff --git a/src/components/ui/wallet-button.tsx b/src/components/ui/wallet-button.tsx new file mode 100644 index 0000000..69f9702 --- /dev/null +++ b/src/components/ui/wallet-button.tsx @@ -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 ( + + ); + } + + if (connecting) { + return ( +
+ Connecting... +
+ ); + } + + return ( + + +
+ ● + {shortenAddress(wallet.address)} +
+ + +
+
+ {wallet.address} + navigator.clipboard.writeText(wallet.address)} /> +
+ + + + +
+ + + ); + }; + + return ( +
+ {renderButton()} +
+ ); +}; + +export default WalletButton; \ No newline at end of file diff --git a/src/hooks/use-wallet.ts b/src/hooks/use-wallet.ts index 948297e..bda5a3b 100644 --- a/src/hooks/use-wallet.ts +++ b/src/hooks/use-wallet.ts @@ -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(null); - const [isConnecting, setIsConnecting] = useState(false); - const [error, setError] = useState(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, + }; +}; \ No newline at end of file