npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

starkzap-starter

v0.1.3

Published

Next.js 14 App Router starter kit for building on Starknet with the Starkzap SDK

Readme

create-starkzap-app

A CLI scaffold for production-ready Starknet applications. Choose your framework, pick your wallet strategy, and get a fully wired app in seconds — gasless transactions, token balances, and wallet connect included.

npx create-starkzap-app

Frameworks

Pick your stack when scaffolding. All three share the same Starkzap SDK core.

| | Next.js 14 | Vite + React | Expo (Mobile) | |---|---|---|---| | Best for | Production web apps, SEO, SSR | SPAs, dashboards, lightweight | iOS & Android | | Router | App Router | React Router / file-based | Expo Router | | Wallet | Argent X, Braavos, Privy | Argent X, Braavos, Privy | Privy (email/social) | | Bundle | Next.js optimized | Vite | Metro |


What's Included

Every scaffold comes with the following out of the box:

| Feature | Details | |---|---| | 🔑 Wallet Connect | Argent X + Braavos via injected provider. Privy social login supported. | | ⛽ Gasless Transactions | AVNU paymaster covers gas — users pay nothing. | | 💰 Token Balances | Live STRK, ETH, USDC balance cards with refresh. | | 💸 Payment UI | Send form with pending / success / error states. | | 🔗 Explorer Links | Auto-links transactions and addresses to Starkscan. | | 🎨 Design System | Dark theme, DM Sans + IBM Plex Mono, Tailwind CSS. |

Stack: Next.js 14 · Vite 5 · Expo 51 · TypeScript · Starkzap SDK · Tailwind CSS · starknet.js


Quickstart

1. Scaffold

Run the CLI and follow the prompts — choose your project name, framework, and wallet strategy:

npx create-starkzap-app

2. Configure

cp .env.example .env.local

Open .env.local and fill in:

# "sepolia" for testnet, "mainnet" for production
NEXT_PUBLIC_STARKNET_NETWORK=sepolia

# Free RPC endpoints:
# Blast:  https://starknet-sepolia.public.blastapi.io
# Infura: https://starknet-sepolia.infura.io/v3/YOUR_KEY
NEXT_PUBLIC_STARKNET_RPC_URL=https://starknet-sepolia.public.blastapi.io

# Optional — Privy app ID for social/email login (https://privy.io)
NEXT_PUBLIC_PRIVY_APP_ID=

# Optional — AVNU API key for gasless transactions (leave blank to skip)
NEXT_PUBLIC_AVNU_API_KEY=

3. Run

npm run dev

Open http://localhost:3000 and connect your wallet.


Extending the Kit

Token Swaps via AVNU

import { StarkZap, AvnuSwapProvider, getPresets, Amount } from "starkzap";

const sdk = new StarkZap({ network: "mainnet" });
const wallet = await sdk.connectWallet({
  account: { signer },
  swapProviders: [new AvnuSwapProvider()],
  defaultSwapProviderId: "avnu",
});

const { STRK, USDC } = getPresets(wallet.getChainId());
const tx = await wallet.swap({
  tokenIn: STRK,
  tokenOut: USDC,
  amountIn: Amount.parse("10", STRK),
  slippageBps: 50n,
});
await tx.wait();

STRK Staking

const stakingPools = await wallet.staking().getPools();
const tx = await wallet.staking().stake({
  pool: stakingPools[0],
  amount: Amount.parse("100", STRK),
});
await tx.wait();

Batch Multiple Transactions

const tx = await wallet
  .tx()
  .transfer({ to: addr1, token: STRK, amount: Amount.parse("5", STRK) })
  .transfer({ to: addr2, token: USDC, amount: Amount.parse("10", USDC) })
  .execute({ feeMode: "sponsored" });
await tx.wait();

Deployment

Vercel (Recommended)

npm install -g vercel
vercel

Set your environment variables in the Vercel dashboard. Switch NEXT_PUBLIC_STARKNET_NETWORK to mainnet for production.

Manual Build

npm run build
npm start

Resources


MIT License · Built on Starknet