Merge pull request #18 from Laina-Protocol/feat/connect-wallet-react

feat: Connect crypto wallet using stellar-wallets-kit.

package.json

@@ -3,9 +3,8 @@
     "@astrojs/check": "^0.4.1",
     "@astrojs/react": "^3.6.0",
     "@astrojs/tailwind": "^5.1.0",
-    "@creit.tech/stellar-wallets-kit": "^0.9.2",
+    "@creit.tech/stellar-wallets-kit": "^1.1.0",
     "@fontsource/inter": "^5.0.20",
-    "@stellar/freighter-api": "^2.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.2.4",

src/App.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import Nav from '@components/Nav';
-import BorrowPage from '@pages/borrow/BorrowPage';
-import LandingPage from '@pages/landing/LandingPage';
-import LendPage from '@pages/lend/LendPage';
-import LiquidatePage from '@pages/liquidate/LiquidatePage';
+import BorrowPage from '@pages/_borrow/BorrowPage';
+import LandingPage from '@pages/_landing/LandingPage';
+import LendPage from '@pages/_lend/LendPage';
+import LiquidatePage from '@pages/_liquidate/LiquidatePage';
+import { WalletProvider } from './stellar-wallet';
 
 const PageWrapper = () => (
   <>
@@ -31,7 +32,9 @@ const router = createBrowserRouter([
 const App = () => {
   return (
     <React.StrictMode>
-      <RouterProvider router={router} />
+      <WalletProvider>
+        <RouterProvider router={router} />
+      </WalletProvider>
     </React.StrictMode>
   );
 };

src/components/Nav.tsx

@@ -1,9 +1,11 @@
 import { Link, useLocation } from 'react-router-dom';
+import { useWallet } from 'src/stellar-wallet';
 import logo from '/public/laina_v3_shrinked.png';
-import { SelectButtonWrapper, SelectLinkButton } from './Button';
+import { Button, SelectButtonWrapper, SelectLinkButton } from './Button';
 
 export default function Nav() {
   const { pathname } = useLocation();
+  const { wallet, openConnectWalletModal } = useWallet();
 
   return (
     <nav className="relative max-w-screen-lg mx-auto mb-12 flex justify-between items-center pt-12 pb-6">
@@ -25,10 +27,14 @@ export default function Nav() {
         </SelectLinkButton>
       </SelectButtonWrapper>
 
-      <div className="bg-black text-white px-8 py-2 rounded-full">
-        {/* biome-ignore lint: TODO: connect wallet */}
-        <a href="#">Connect Wallet</a>
-      </div>
+      {wallet ? (
+        <div>
+          <p className="text-sm">Signed in as</p>
+          <p className="font-bold">{wallet.displayName}</p>
+        </div>
+      ) : (
+        <Button onClick={openConnectWalletModal}>Connect Wallet</Button>
+      )}
     </nav>
   );
 }