feat: replace freighter-api with 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

@@ -6,6 +6,7 @@ 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>Logged in as</p>
+          <p>{wallet.displayName}</p>
+        </div>
+      ) : (
+        <Button onClick={openConnectWalletModal}>Connect Wallet</Button>
+      )}
     </nav>
   );
 }

src/pages/lend/LendPage.tsx

@@ -2,25 +2,30 @@ import StellarIcon from '../../images/Stellar_Symbol.png';
 import USDCIcon from '../../images/usdc.svg';
 import { LendableAssetCard } from './LendableAssetCard';
 
+import XLMPoolContract from '@contracts/loan_pool';
+import USDCPoolContract from '@contracts/usdc_pool';
+
 const currencies = [
-  {
-    name: 'USD Coin',
-    symbol: 'USDC',
-    icon: USDCIcon.src,
-  },
   {
     name: 'Stellar Lumen',
     symbol: 'XLM',
     icon: StellarIcon.src,
+    contractClient: XLMPoolContract,
+  },
+  {
+    name: 'USD Coin',
+    symbol: 'USDC',
+    icon: USDCIcon.src,
+    contractClient: USDCPoolContract,
   },
 ];
 
 const LendPage = () => {
   return (
     <>
       <h1 className="text-3xl font-bold mb-8">Lend Assets</h1>
-      {currencies.map(({ name, symbol, icon }) => (
-        <LendableAssetCard key={name} name={name} symbol={symbol} icon={icon} />
+      {currencies.map(({ name, symbol, icon, contractClient }) => (
+        <LendableAssetCard key={name} name={name} symbol={symbol} icon={icon} contractClient={contractClient} />
       ))}
     </>
   );

src/pages/lend/LendableAssetCard.tsx

@@ -1,15 +1,35 @@
 import { Button } from '@components/Button';
 import { Card } from '@components/Card';
+import type XLMPoolContract from '@contracts/loan_pool';
+import { useWallet } from 'src/stellar-wallet';
 
 export interface LendableAssetCardProps {
   name: string;
   symbol: string;
   icon: string;
+  contractClient: typeof XLMPoolContract; // All loan pool contract clients have the same API
 }
 
-export const LendableAssetCard = ({ name, symbol, icon }: LendableAssetCardProps) => {
-  const handleDepositClick = () => {
-    console.log('deposit clicked');
+export const LendableAssetCard = ({ name, symbol, icon, contractClient }: LendableAssetCardProps) => {
+  const { wallet, signTransaction } = useWallet();
+
+  const handleDepositClick = async () => {
+    if (!wallet) {
+      alert('Please connect your wallet first!');
+      return;
+    }
+
+    contractClient.options.publicKey = wallet.address;
+
+    const amount = BigInt(1000000);
+    const tx = await contractClient.deposit({ user: wallet.address, amount });
+
+    try {
+      const { result } = await tx.signAndSend({ signTransaction });
+      alert(`Deposit successful, result: ${result}`);
+    } catch (err) {
+      alert(`Error depositing: ${JSON.stringify(err)}`);
+    }
   };
 
   return (
@@ -32,7 +52,7 @@ export const LendableAssetCard = ({ name, symbol, icon }: LendableAssetCardProps
         <p className="text-xl font-bold leading-6">12.34%</p>
       </div>
 
-      <Button onClick={handleDepositClick}>Deposit</Button>
+      {wallet && <Button onClick={handleDepositClick}>Deposit</Button>}
     </Card>
   );
 };

src/stellar-wallet.tsx

@@ -0,0 +1,85 @@
+import { FREIGHTER_ID, StellarWalletsKit, WalletNetwork, allowAllModules } from '@creit.tech/stellar-wallets-kit';
+import { type PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
+
+export type Wallet = {
+  address: string;
+  displayName: string;
+};
+
+export type WalletContext = {
+  wallet: Wallet | null;
+  openConnectWalletModal: () => void;
+  signTransaction: SignTransaction;
+  kit: StellarWalletsKit | undefined;
+};
+
+type SignTransaction = (
+  tx: XDR_BASE64,
+  opts?: {
+    network?: string;
+    networkPassphrase?: string;
+    accountToSign?: string;
+  },
+) => Promise<XDR_BASE64>;
+
+type XDR_BASE64 = string;
+
+const Context = createContext<WalletContext>({
+  wallet: null,
+  openConnectWalletModal: () => {},
+  signTransaction: () => Promise.reject(),
+  kit: undefined,
+});
+
+const kit: StellarWalletsKit = new StellarWalletsKit({
+  network: WalletNetwork.TESTNET,
+  selectedWalletId: FREIGHTER_ID,
+  modules: allowAllModules(),
+});
+
+const createWalletObj = (address: string): Wallet => ({
+  address,
+  displayName: `${address.slice(0, 4)}...${address.slice(-4)}`,
+});
+
+export const WalletProvider = ({ children }: PropsWithChildren) => {
+  const [wallet, setWallet] = useState<Wallet | null>(null);
+
+  useEffect(() => {
+    kit.getAddress().then(({ address }) => setWallet(createWalletObj(address)));
+  });
+
+  const openConnectWalletModal = () => {
+    kit.openModal({
+      onWalletSelected: async (option) => {
+        kit.setWallet(option.id);
+        try {
+          const { address } = await kit.getAddress();
+          setWallet(createWalletObj(address));
+        } catch (err) {
+          console.error('Error connecting wallet: ', err);
+        }
+      },
+    });
+  };
+
+  const signTransaction: SignTransaction = async (tx, opts) => {
+    const { signedTxXdr } = await kit.signTransaction(tx, opts);
+    return signedTxXdr;
+  };
+
+  return (
+    <Context.Provider
+      value={{
+        wallet,
+        openConnectWalletModal,
+        signTransaction,
+        kit,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const useWallet = (): WalletContext => useContext(Context);

tsconfig.json

@@ -8,7 +8,8 @@
     "paths": {
       "@images/*": ["src/images/*"],
       "@components/*": ["src/components/*"],
-      "@pages/*": ["src/pages/*"]
+      "@pages/*": ["src/pages/*"],
+      "@contracts/*": ["src/contracts/*"]
     }
   }
 }