Skip to content

FX-GENE/stargate-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

190 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stargate — USDC Payments on Stellar

Accept crypto like you accept cards. One API, hosted checkout, and settlement — without custody.

Stargate Protocol — The Stripe for Stellar. Founded and built by dreamgene · Founder & CEO

🌍 Live app stargate-frontend-psi.vercel.app — marketing site, merchant dashboard, hosted checkout
📖 Docs stargate-frontend-psi.vercel.app/docs — invoice lifecycle, webhooks, widget, security
🧩 Backend FX-GENE/stargate-backend — NestJS API + Rust reconciler
⛓️ Contracts FX-GENE/stargate-contracts — Soroban invoice / treasury / compliance

The problem

A merchant who wants to accept stablecoin payments today has two bad options: hand their keys to a custodial processor and inherit its fees, freezes, and counterparty risk — or build wallet integrations, payment matching, webhook delivery, and settlement plumbing themselves. Card processors solved this decades ago for fiat. Crypto payments are still missing the boring, reliable middle layer.

What Stargate does

Stargate turns "send USDC to this address and hope" into an invoice with a lifecycle. A merchant creates an invoice through the API or dashboard; the payer settles it directly on-chain from their own wallet; a reconciler confirms the payment and fires a signed webhook. Stargate never custodies funds mid-flow — payments go straight from payer to a merchant-specific muxed Stellar address.

  • Invoices & payment links — amounts, expiry, fees computed per merchant tier, each invoice bound to a unique muxed address (M...) derived per merchant.
  • Hosted checkout (/pay/:id) — public payment page: fetches the invoice, screens the payer address against an on-chain compliance oracle, requests payer-specific unsigned XDR from the API, signs with Freighter or Albedo in-browser, submits to Horizon, and confirms via server-sent events. Mobile wallets (LOBSTR, Solar, Vibrant) pay via a SEP-0007 QR deep link.
  • Embeddable widget — a script tag mounts a sandboxed checkout iframe on any merchant site; postMessage events (STARGATE_LOADED / STARGATE_PAID / STARGATE_ERROR) report back, origin-checked both ways.
  • Merchant dashboard — revenue analytics, transactions, invoices, payment links, disputes, wallets, webhooks, team roles, KYC, audit log, API keys with IP allowlists, sandbox/live separation, command palette (⌘K), and full light/dark theming.
  • Signed webhooks — every delivery carries X-Stargate-Signature: sha256=<HMAC>; retries with exponential backoff via Redis Streams (at-least-once — handlers should be idempotent).
  • Non-custodial by construction — the API builds transactions but never holds a key that can move customer funds.

How a payment flows

Merchant ──POST /invoices──▶ API ──▶ Postgres (invoice + muxed address)
Payer    ──GET /pay/:id────▶ Checkout ──▶ API (prepare-tx) ──▶ wallet signs ──▶ Horizon
Horizon  ──SSE payments────▶ Rust reconciler ──▶ Postgres (paid) + Redis publish
Redis    ──message─────────▶ API (SSE) ──▶ Checkout success screen
Reconciler ──delivery row──▶ Webhook worker ──▶ Merchant endpoint (HMAC signed)

The Stargate trio

Repo Role
stargate-frontend (this) Next.js 14 marketing site, merchant dashboard, hosted checkout, embeddable widget, public docs
stargate-backend NestJS API, PostgreSQL, Redis Streams webhooks, Rust reconciler streaming Horizon
stargate-contracts Soroban contracts: invoice escrow, 2-of-3 treasury settlement, compliance allow/block oracle

How they communicate: the frontend talks only to the backend REST API (NEXT_PUBLIC_API_URL) and to Horizon (transaction submission from the payer's browser). The backend invokes the contracts (compliance check before every XDR build; treasury settlement after reconciliation) and consumes the committed ABI snapshots from stargate-contracts/abis/.

Stack

Layer Technology
Framework Next.js 14 (App Router) · React 18 · TypeScript strict
Styling Tailwind CSS · token-driven light/dark theme (darkMode: 'class') · tailwind-merge
Auth httpOnly-cookie BFF via Server Actions (no tokens in JS-accessible storage)
Wallets @stellar/freighter-api · @albedo-link/intent · SEP-0007 QR
Data SWR polling + Server-Sent Events for live payment status
Testing node:test + Playwright (e2e, a11y via axe-core, visual regression) · Jest · Storybook 8
Offline Service worker — network-first HTML, cache-first hashed assets

Repo layout

app/                   App Router routes
  (auth)/              login, register
  dashboard/           authenticated merchant console (revenue, invoices, disputes, …)
  pay/[id]/            public hosted checkout + success page
  docs/                public documentation page
  actions/auth.ts      Server Actions — httpOnly session cookie BFF
components/            ui/ primitives (Button, Card, Badge, Modal…), charts, payment, kyc, team…
hooks/                 useInvoiceStatus (SSE), useWallet, useInvoices, …
lib/                   api client, session, theme, stellar wallet adapters
widget/                embeddable widget source (build → dist/stargate-widget.js)
public/widget/         widget served in dev
mocks/                 MSW handlers for API mocking (NEXT_PUBLIC_API_MOCKING=enabled)
tests/                 node:test + Playwright suites

Running locally

Requirements: Node.js 20 (.nvmrc), and optionally the backend on :3001 for real data.

cp .env.local.example .env.local
npm ci
npm run dev            # → http://localhost:3000

No backend running? Enable API mocking and every dashboard surface works against MSW fixtures:

echo "NEXT_PUBLIC_API_MOCKING=enabled" >> .env.local
npm run dev

Verification

npm run typecheck      # tsc --strict
npm run lint           # next lint
npm test               # node:test suites (Playwright-based tests expect a dev server on :3000)
npm run build          # production build
npm run build:widget   # → dist/stargate-widget.js

Embeddable widget

Add Stargate checkout to any website:

<!-- One-line install: auto-mounts using data attributes -->
<script src="https://stargate-frontend-psi.vercel.app/widget/stargate-widget.js"
        data-invoice-id="inv_abc123" data-container="#pay-here"></script>
// Programmatic
window.Stargate.mount(document.getElementById('checkout'), {
  invoiceId: 'inv_abc123',
  origin: 'https://stargate-frontend-psi.vercel.app', // required in production
  onSuccess: ({ invoiceId, txHash }) => { /* fulfil order */ },
  onError:   ({ code, message })     => { /* show error */ },
});

The widget renders an iframe pointed at /pay/:id?embedded=true; all events are postMessage with strict origin validation on both sides. See the docs page and docs/widget-security-guide.md for CSP and integration guidance.

What's real vs. what's not (yet)

Real, end to end:

  • The frontend is deployed and public — dashboard, hosted checkout, widget, and docs all build and run against the live URL above.
  • Checkout signs real XDR with Freighter/Albedo and submits directly to Horizon; payment confirmation arrives over SSE from the reconciler — no page ever marks an invoice paid client-side.
  • Webhook signatures, SSRF protections (private-IP blocking with re-resolution on redirects), compliance screening before XDR build, and httpOnly-cookie auth are implemented in the backend, with tests.

Simplified, or honestly unfinished:

  • The backend API and reconciler are not publicly hosted yet — the live frontend serves mock/sandbox flows; run the backend locally (Docker Postgres + Redis) for the full loop. Production hosting is the current milestone.
  • Contracts are not yet deployed to a public network — testnet deployment is scripted in stargate-contracts; mainnet is gated behind a multi-sig signing ceremony (see its docs/MAINNET_DEPLOYMENT.md). Contract IDs are injected via env, never hardcoded.
  • The stargate.finance domain referenced in some configs is aspirational — the Vercel URL above is the canonical deployment.
  • The marketing page's "live payment feed" is illustrative sample data.

License

MIT — see LICENSE

About

Stargate Next.js frontend

Topics

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors