Build A Stellar Wallet Frontend With React: Sprint 2 Guide

by Admin 59 views
Building Your Stellar Wallet Frontend: Sprint 2 Guide

Hey everyone! Let's dive into Sprint 2 of our Stellar wallet frontend project. This sprint is all about getting the core user interface (UI) up and running and connecting to a Stellar wallet. We're talking about setting up the basic pages, routing between them, and, most importantly, enabling that "Connect Wallet" button. This is where the magic starts happening! This guide breaks down everything you need to know, from setting up your project in React to testing your connection with wallets like Freighter or Albedo. Get ready to build, test, and witness your Stellar wallet frontend come to life!

Setting the Stage: The Frontend "Core" and Wallet Connection

So, what's the game plan for Sprint 2? Our primary goal is to establish a functional frontend with a basic UI and the ability to connect to a Stellar wallet. This means creating the essential pages where users will interact with your application. These pages include: a HomePage to get started, a CreatePage where users will be able to create things, and a ProjectDetail page to view detailed information. You will also use the Stellar Wallet Kit and add a "Connect Wallet" button to the header of the site. It is extremely important that you test your application and see if you can connect with wallets like Freighter or Albedo.

The "Must-Haves" for Sprint 2

This sprint focuses on the "must-have" features. This includes the bare bones of your UI and the all-important wallet connection. You'll be working with:

  • React: This will be the framework of the whole project, so make sure you are confident with it.
  • React Router: For navigation between pages.
  • Stellar Wallet Kit: Which will help with the wallet connection. You can use this to add the "Connect Wallet" button.
  • Test Wallets (Freighter/Albedo): For testing the wallet connection in the Testnet.

Diving into the Code: Creating Pages and Setting Up Routing

Crafting the Basic UI: HomePage, CreatePage, and ProjectDetail

The first step is to create the basic building blocks of your frontend: the pages. You'll need to create three essential files within your React project (specifically in the /front-end directory): HomePage.tsx, CreatePage.tsx, and ProjectDetail.tsx. These files will define the structure and content of each page. Remember, for this sprint, the UI can be basic. The focus is on functionality – getting the pages to render and the wallet connection to work. Think of it as laying the foundation.

Setting Up Routing with React Router

Once you have your page files set up, it's time to set up routing using a library like react-router-dom. Routing allows users to navigate between your different pages. Here's a basic example of how you might set up routing:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import HomePage from './HomePage';
import CreatePage from './CreatePage';
import ProjectDetail from './ProjectDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/create" element={<CreatePage />} />
        <Route path="/project/:id" element={<ProjectDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

In this example, the Router component wraps your entire application. The Routes component groups the individual Route components. Each Route associates a specific path (e.g., /, /create, /project/:id) with a component to render (e.g., HomePage, CreatePage, ProjectDetail). The :id in the /project/:id path is a route parameter, allowing you to pass dynamic data to the ProjectDetail page (e.g., the ID of the project).

The Stellar Wallet Kit and Wallet Connection

Integrating the Stellar Wallet Kit

The Stellar Wallet Kit should already be included in your project template, but check that it's correctly installed and imported. The primary task here is to use the kit to implement the "Connect Wallet" button in the site's header. This button will be the gateway for users to connect their Stellar wallets.

Connecting to a Development Wallet

After adding the "Connect Wallet" button, the next step is to connect to a development wallet like Freighter or Albedo. These wallets are commonly used for testing because they allow you to connect to the Stellar Testnet without risking your real funds. Make sure you switch to the Testnet mode in your chosen wallet. It's crucial to be using the Testnet to prevent any accidental transactions with real assets during development.

Displaying the User's Public Key

Upon successful connection to the wallet, the application needs to display the user's public key (also known as the account ID or Stellar address) on the screen. This confirms that the connection is successful and allows you to verify that you are interacting with the correct wallet. This will involve using the Stellar Wallet Kit to retrieve the user's public key after a successful connection. Then, you'll update the UI to display the public key, maybe at the top or in the user's account section of your page.

Testing, Testing, and More Testing!

Testnet and Development Wallets

Testing is a crucial part of software development. To ensure that your application works correctly, you'll need to test it thoroughly. Start by testing the wallet connection with development wallets like Freighter or Albedo in Testnet mode. The Testnet allows you to test transactions without using real money. This will help you identify and fix any bugs before you deploy your application to the mainnet. Make sure your HomePage.tsx, CreatePage.tsx, and ProjectDetail.tsx pages render correctly, that you can navigate between them, and that the wallet connection works as expected.

Debugging Common Issues

When you're testing, you might run into common issues. If the wallet connection fails, double-check that you're using the correct network (Testnet). Verify that your Stellar Wallet Kit is correctly integrated and that there are no errors in your console. If the public key isn't displaying, check the kit's documentation to confirm you are using the correct functions to retrieve the key, and ensure that your UI elements are correctly rendering the data. You may also want to use the browser's developer tools to examine the network requests and responses, which can provide valuable clues about the problem.

Wrapping Up and Looking Ahead

Key Takeaways from Sprint 2

This sprint establishes the core functionality of your Stellar wallet frontend. Here's a quick recap of what you've accomplished:

  • Created basic pages: HomePage.tsx, CreatePage.tsx, and ProjectDetail.tsx.
  • Set up routing using react-router-dom.
  • Integrated the Stellar Wallet Kit and added the "Connect Wallet" button.
  • Tested the wallet connection with development wallets (Freighter/Albedo) on the Testnet.
  • Displayed the user's public key upon successful connection.

What's Next?

Congratulations on completing Sprint 2! In the next sprints, you will build upon the foundation you've created. You will start to implement features such as creating and managing Stellar assets, sending and receiving payments, and potentially integrating with other Stellar-based projects. Keep up the great work, and happy coding!