🚀 Stellar Raise Frontend

A decentralized crowdfunding platform frontend built on the Stellar network using Next.js and the new App Router.

Overview

The Stellar Raise Interface lets backers discover and support innovative projects. Relying on the speed and security of the Stellar blockchain, this client seamlessly integrates with Freighter for authentication and transaction signing, providing a fluid path toward interacting with on-chain Soroban smart contracts.

Key Features

Feature	Description
Freighter Integration	Seamless authentication, connection, and transaction signing via Freighter
Campaign Dashboard	View live projects with progress bars, countdown timers, and goal tracking
Pledge Interface	Intuitive modal UI to safely pledge XLM or custom assets to campaigns
Modern UI/UX	Fast, responsive design built with Tailwind CSS, Radix UI, and Framer Motion

Project Structure

stellar-raise-interface/
├── src/
│   ├── app/               # Next.js App Router root layout and pages
│   ├── components/        # Reusable React components
│   │   ├── layout/        # Navbar, Footer, etc.
│   │   └── ui/            # Atomic UI components (Buttons, Modals, Progress Bars)
│   ├── context/           # React Context providers (WalletContext)
│   └── lib/               # Utility functions and helper methods
├── public/                # Static assets and images
├── package.json           # App dependencies and scripts
└── next.config.ts         # Next.js specific configuration

Prerequisites

• Node.js (v20 or higher)
• npm (or yarn/pnpm)
• Freighter Wallet Browser Extension (Required for interacting with the blockchain)

Getting Started

# Clone the repository
git clone https://github.com/Crowdfunding-DApp/StellarRaise-frontend.git
cd StellarRaise-frontend

# Install dependencies
npm install

# Run the development server
npm run dev

# Open the local development build
# URL: http://localhost:3000

Client Interface Context

This application relies on the centralized WalletContext to maintain wallet states locally without needing repetitive window requests.

interface WalletContextType {
  // Currently connected Stellar address
  address: string | null;
  // Connection loading state
  isConnecting: boolean;
  // Error boundary messaging
  error: string | null;
  // Trigger Freighter authentication
  connect: () => Promise<void>;
  // Disconnect session internally
  disconnect: () => void;
}

Example: Using the Wallet Hook

import { useWallet } from "@/context/WalletContext";
import { Button } from "@/components/ui/button";

export function ConnectWalletButton() {
  const { address, isConnecting, connect, disconnect } = useWallet();

  if (address) {
    return (
      <Button onClick={disconnect} variant="secondary">
        {address.slice(0, 4)}...{address.slice(-4)}
      </Button>
    );
  }

  return (
    <Button onClick={connect} disabled={isConnecting}>
      {isConnecting ? "Connecting..." : "Connect Freighter"}
    </Button>
  );
}

Smart Contract Interaction Architecture

The frontend is built to communicate with the corresponding Pull-based Refund model on the Soroban Contracts.

How it Works

1. When a user presses Pledge, the UI requests an access signature from the Freighter Wallet.
2. The transaction is parsed into an XDR envelope and executed via the @stellar/freighter-api interface targeting the project's contract ID.
3. If the campaign misses its goal, the interface enables a Claim Refund state for contributors, initiating a direct contract call to pull their stranded tokens back securely.

Example: Triggering a Freighter Transaction

import freighter from "@stellar/freighter-api";
// Assume `xdrEnvelope` is previously generated by the Soroban SDK or Horizon
import { pledgeEnvelope } from "@/lib/soroban"; 

const handlePledge = async (amount: number) => {
  if (await freighter.isConnected() && await freighter.isAllowed()) {
    try {
      // Prompt user to sign the XDR transaction built for the Soroban contract
      const signedTransaction = await freighter.signTransaction(pledgeEnvelope(amount), {
        network: "TESTNET"
      });
      console.log("Successfully signed:", signedTransaction);
    } catch (error) {
      console.error("User rejected the transaction or it failed:", error);
    }
  }
}

Deployment

Deploying the Interface to the open web is quick and straightforward thanks to Next.js portability.

Vercel Deployment

The easiest way to deploy your StellarRaise app is to use the Vercel Platform.

1. Log into Vercel.
2. Import your GitHub repository (StellarRaise-frontend).
3. Set your Framework Preset to Next.js.
4. Configure any environment variables if needed (e.g., NEXT_PUBLIC_SOROBAN_RPC_URL).
5. Click Deploy.

Static Export (Manual Deployment)

If you are dropping dynamic API routes entirely and serving strictly static assets:

# 1. Update next.config.ts
# const nextConfig = { output: 'export' };

# 2. Build the static payload
npm run build

# Next.js will export your static files to the /out directory for arbitrary hosting (Netlify, AWS S3, etc.)

Code of Conduct

Please read our Code of Conduct before contributing to ensure a welcoming environment for all.

Changelog

See CHANGELOG.md for a full history of notable updates and breaking changes.

Security

Please review our Security Policy for responsible disclosure guidelines to ensure our users stay safe.

Contributing (The Wave Program)

StellarRaise operates The Wave Program, a structured workflow process connecting builders directly to strictly scoped issues.

• Find actively curated tasks on our Issues board.
• Issues are fully tagged (e.g., bug, feature, soroban, good-first-issue).
• Review our Wave Program Strategy Document to understand how to claim a bug and submit a PR properly.

License

This project is licensed under the MIT License — see the LICENSE file for details.