Technical Architecture

Overview

This project is a web application that integrates with the Stellar network to provide various functionalities such as managing balances, minting test tokens, Swapping tokens, creating liquidity pools, blockchain to blockchain interoperability, a referral system, browser extension wallet, Passkey ID transaction signing all interacting with Soroban smart contracts. The application is built using Next.js for the frontend, Express.js for the backend, and MongoDB for data storage. The integration with Stellar is achieved using the Stellar SDK and Soroban RPC.

Repositories

Zig3.v3 Root domain

  • Workspaces Monorepo
  • Yarn package Manager
  • Node.js server env
  • Docker deployment
  • next.js frame work & react.js libraries
  • https://github.com/Nathanofzion/zig3.v3
  • https://github.com/Nathanofzion/backend
  • https://github.com/Nathanofzion/core

Zi-payground Subdomain

  • Workspaces Monorepo
  • pnpm package manager
  • Node.js server env
  • Docker delployment
  • svelte.js frame work, three.js & react.js libraries
  • https://github.com/Nathanofzion/zi-playground

Frontend

  • Framework: Next.js
  • Styling: Tailwind CSS
  • State Management: React Context API
  • Components: The application is composed of various reusable components such as BalancesTable, RewardsButton, and RewardsModal.

Key Components

  • BalancesTable: Displays the user’s token balances, including Stellar assets.
  • RewardsButton: A button that triggers a modal to display rewards information.
  • RewardsModal: A modal that shows detailed rewards information.

Backend

  • Framework: Express.js
  • Database: MongoDB
  • API Endpoints: The backend provides various API endpoints to interact with the Stellar network and manage user data.

Key Endpoints

  • /api/rewards: Handles CRUD operations for rewards.
  • /api/balances: Fetches the user’s token balances from the Stellar network.

Stellar Integration

The integration with the Stellar network is a core part of the application. It involves the following components:

Environment Variables

  • NEXT_PUBLIC_STELLAR_RPC_URL: The URL of the Stellar RPC server.
  • NEXT_PUBLIC_TEST_TOKENS_ADMIN_SECRET_KEY: The secret key for the admin account used to mint test tokens.

Stellar SDK

The Stellar SDK is used to interact with the Stellar network. Key functionalities include:

  • Fetching Balances: The BalancesTable component uses the Stellar SDK to fetch and display the user’s token balances.
  • Minting Test Tokens: The useMintTestToken hook uses the Stellar SDK to mint test tokens for the user.

Soroban RPC

Soroban RPC is used to interact with Stellar smart contracts. Key functionalities include:

  • Interacting with Smart Contracts: The application uses Soroban RPC to interact with smart contracts deployed on the Stellar network.

Example Code

Fetching Balances:

import { useEffect, useState } from ‘react’;
import { Server } from ‘stellar-sdk’;

const server = new Server(process.env.NEXT_PUBLIC_STELLAR_RPC_URL);

export function useBalances(accountId: string) {
const [balances, setBalances] = useState([]);

useEffect(() => {
async function fetchBalances() {
const account = await server.loadAccount(accountId);
setBalances(account.balances);
}

fetchBalances();
}, [accountId]);

return balances;
}

Minting Test Tokens:

import { Keypair, Server, TransactionBuilder, Networks, Operation } from ‘stellar-sdk’;
const server = new Server(process.env.NEXT_PUBLIC_STELLAR_RPC_URL);
const adminKeypair = Keypair.fromSecret(process.env.NEXT_PUBLIC_TEST_TOKENS_ADMIN_SECRET_KEY);
export async function mintTestToken(destination: string, amount: string) {
constaccount=awaitserver.loadAccount(adminKeypair.publicKey());
consttransaction=newTransactionBuilder(account, {
fee:awaitserver.fetchBaseFee(),
networkPassphrase:Networks.TESTNET,
})
.addOperation(Operation.payment({
destination,
asset:Asset.native(),
amount,
}))
.setTimeout(30)
.build();
transaction.sign(adminKeypair);
awaitserver.submitTransaction(transaction);
}

Conclusion

This project leverages the Stellar SDK and Soroban RPC to provide a seamless integration with the Stellar network. The frontend is built with react.js, svelte.js, Three.js Next.js and styled with Tailwind CSS, while the backend uses Express.js and MongoDB to manage data and provide API endpoints. The architecture is designed to be modular and scalable, allowing for easy addition of new features and functionalities.