This is a submission for the Build Better on Stellar: Smart Contract Challenge : Create a Tutorial

Integrating Stellar Payments into a SvelteKit Web Application

Introduction

In this tutorial, we'll walk through the process of integrating Stellar payments into a SvelteKit web application. By the end, you'll have a functional web app that allows users to send payments on the Stellar network using a modern, reactive UI.

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript
• Familiarity with Svelte (not required but helpful)
• Node.js and npm installed on your machine
• A text editor or IDE of your choice

Step 1: Setting Up the Project

First, let's create a new SvelteKit project:

npm create svelte@latest stellar-payment-app
cd stellar-payment-app
npm install

When prompted, choose the following options:

• Skeleton project
• JavaScript with JSDoc for checking
• No additional options

Now, let's install the necessary dependencies:

npm install stellar-sdk

Step 2: Creating the Payment Form Component

Create a new file at src/lib/PaymentForm.svelte and add the following code:

<script>
  import { StellarSdk } from 'stellar-sdk';

  let destination = '';
  let amount = '';
  let result = '';

  async function handleSubmit() {
    try {
      const server = new StellarSdk.Server('https://horizon-testnet.stellar.org');
      const sourceKeypair = StellarSdk.Keypair.random();

      // Fund the account (only for testnet)
      await fetch(`https://friendbot.stellar.org?addr=${sourceKeypair.publicKey()}`);

      const sourceAccount = await server.loadAccount(sourceKeypair.publicKey());
      const transaction = new StellarSdk.TransactionBuilder(sourceAccount, {
        fee: StellarSdk.BASE_FEE,
        networkPassphrase: StellarSdk.Networks.TESTNET
      })
      .addOperation(StellarSdk.Operation.payment({
        destination: destination,
        asset: StellarSdk.Asset.native(),
        amount: amount.toString()
      }))
      .setTimeout(30)
      .build();

      transaction.sign(sourceKeypair);
      const transactionResult = await server.submitTransaction(transaction);

      result = `Payment sent! Transaction hash: ${transactionResult.hash}`;
    } catch (error) {
      result = `Error: ${error.message}`;
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <div>
    <label for="destination">Destination Address:</label>
    <input id="destination" bind:value={destination} required>
  </div>
  <div>
    <label for="amount">Amount (XLM):</label>
    <input id="amount" type="number" step="0.0000001" bind:value={amount} required>
  </div>
  <button type="submit">Send Payment</button>
</form>

{#if result}
  <p>{result}</p>
{/if}

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 300px;
    margin: 0 auto;
  }
  input {
    width: 100%;
    padding: 0.5rem;
  }
  button {
    padding: 0.5rem;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
</style>

Step 3: Updating the Main Page

Replace the contents of src/routes/+page.svelte with the following:

<script>
  import PaymentForm from '$lib/PaymentForm.svelte';
</script>

<main>
  <h1>Stellar Payment App</h1>
  <PaymentForm />
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }
  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

Step 4: Running the Application

Now you can start your application:

npm run dev

Visit http://localhost:5173 in your browser to see the application running.

What I Created

This submission is a comprehensive tutorial that guides developers through the process of creating a web application for sending Stellar payments using SvelteKit. The tutorial covers the entire development process, from setting up a SvelteKit project to implementing Stellar payment functionality and creating a user-friendly interface.

This tutorial supports the Stellar developer experience in several key ways:

1. Modern Web Development: By using SvelteKit, we introduce Stellar developers to a modern, efficient web development framework. This helps bridge the gap between blockchain development and contemporary front-end practices.

2. Step-by-Step Guidance: The tutorial provides clear, detailed instructions for each stage of development, making it accessible for developers new to Stellar or SvelteKit.

3. Practical Application: Instead of abstract concepts, we focus on building a functional payment application, giving developers hands-on experience with Stellar's core features.

4. Best Practices: Throughout the tutorial, we emphasize best practices in both Stellar integration and web development, setting a solid foundation for future projects.

5. Scalable Architecture: The project structure we use is designed to be easily expandable, allowing developers to build upon this foundation for more complex applications.

How can it be used by other devs?

Other developers can use this tutorial in several ways:

1. Learning Resource: Developers new to Stellar can use this as a starting point to understand how to integrate Stellar payments into web applications.

2. Project Boilerplate: The completed project serves as a boilerplate for Stellar-based web applications. Developers can clone the repository and modify it for their specific needs.

3. Reference Implementation: Even for developers not using SvelteKit, the tutorial provides a clear reference for how to structure Stellar integration in a web application.

4. Inspiration for Further Development: The tutorial concludes with suggestions for next steps, inspiring developers to expand on the basic functionality and explore more of Stellar's features.

5. Community Resource: By providing a clear, modern example of Stellar integration, this tutorial can serve as a community resource, potentially being expanded or adapted by other developers in the Stellar ecosystem.

By combining the simplicity of Svelte with the power of Stellar, we hope to inspire a new wave of dApp in the Stellar ecosystem.

Journey

I'm prrety new to blockchain. i just want try new things.

Comments

[Ajin Varghese Chandy]

how is it?