DOCSEARCHbyAlgolia
Submit Docs

Scaffold-Stark

website·Indexed 31 days ago

https://scaffoldstark.com/docs

A development framework for Starknet dApps, featuring a collection of custom React hooks for smart contract interaction, React Native support for mobile development, and AUCO, a high-performance TypeScript/Node.js indexer for Starknet events supporting PostgreSQL, SQLite, and MySQL.

Tokens
43K
Snippets
246
Records
312
Agent score
57%

What's inside Scaffold-Stark

  1. Overview of Scaffold-Stark toolkit

    Scaffold-Stark is an open-source, UI-agnostic toolkit designed to accelerate the development and deployment of decentralized applications (dApps) on the Starknet blockchain. It provides a flexible framework that allows developers to choose their own UI tools while offering several built-in developer experience features:

    • Contract Fast Reload: The frontend automatically adapts to changes in the smart contract during editing.
    • Burner Wallet & Local Faucet: Tools for rapid application testing without needing external funds or complex wallet setups.
    • Wallet Provider Integration: Built-in capabilities to connect to various Starknet wallet providers.

  2. Overview of Scaffold Stark React Native Hooks

    Scaffold Stark React Native provides a suite of custom hooks to simplify Starknet smart contract interactions in mobile apps. These hooks are designed to mirror the Scaffold Stark 2 web hooks, maintaining identical API signatures and return types, but adapted for mobile (e.g., using expo-secure-store instead of localStorage and toastify-react-native instead of react-hot-toast).

  3. Overview of Auco Starknet Indexer

    Auco is a high-performance TypeScript/Node.js indexer designed for Starknet events. It supports real-time event indexing via WebSocket and RPC, handles blockchain reorganizations, and provides type-safe event handling. It is optimized for speed, demonstrating significantly faster processing of Starknet Transfer events compared to APIBARA in benchmarks.

  5. Accelerate Starknet development using extensions

    Extensions speed up the Starknet development process by providing pre-built, battle-tested implementations of common patterns, allowing developers to avoid repetitive setup and focus on unique business logic. Key benefits include:

    • Pre-built Templates: Ready-made foundations for ERC-20, ERC-721, and custom smart contracts.
    • UI Components: Instant integration of wallet connections, transaction displays, and balance viewers.
    • Proven Architectures: Established solutions for multi-signature wallets, token vesting, and NFT marketplaces.
    • Rapid Prototyping: Ability to combine multiple extensions to create working prototypes quickly.

  6. Understand the snfoundry project structure

    The packages/snfoundry directory contains the smart contract development environment. It is identical to Scaffold Stark 2, ensuring compatibility between web and mobile frontends.
    packages/snfoundry/
├── contracts/                 # Cairo smart contracts
│   └── src/
│       ├── YourContract.cairo # Your contracts
│       └── lib.cairo          # Module declarations
├── deployments/               # Deployment artifacts
├── scripts-ts/                # Deployment scripts
├── Scarb.toml                 # Cairo package config
├── snfoundry.toml             # Foundry config
└── package.json               # Scripts and dependencies

  7. Understand Scaffold-Stark 2 Extensions

    Extensions are modular add-ons for Scaffold-Stark 2 that provide additional functionality, smart contracts, UI components, or feature examples. They are designed to integrate seamlessly with the base project and remain compatible with core updates. Note that extensions are intended as starting points for development rather than finished products.

  8. Interact with smart contracts using Scaffold Stark hooks

    Scaffold Stark provides a collection of custom React hooks located in packages/nextjs/hooks/scaffold-stark. These hooks act as wrappers around Starknet-Start, providing a TypeScript-enabled interface for reading state, writing to contracts, and monitoring emitted events from deployed smart contracts.

  9. Display a blockchain address using the Address component

    The Address component displays a blockchain address with a utility icon to copy the address to the clipboard. It automatically handles avatar resolution: if the address is associated with a StarknetId that has an avatar, that avatar is shown; otherwise, a blockie image representation is displayed. By default, clicking the address redirects the user to the connected wallet's network block explorer (or the default targetNetworks explorer if no wallet is connected).
    import { Address } from "~~/components/scaffold-stark";

export default function MyComponent() {
  return <Address address="0x34aA3F359A9D614239015126635CE7732c18fDF3" />;
}

  10. Register Cartridge Controller as an extra wallet

    For wallets that do not natively implement the get-starknet wallet standard, you must pass them via the extraWallets prop to StarknetConfig. In services/web3/connectors.tsx, add the controllerInstance to the extraWallets array if the target network is not devnet.
    // nextjs/services/web3/connectors.tsx
import { controllerInstance } from "~~/services/web3/controller/index";

const extraWallets = [];
if (!targetNetworks.some(network => (network.network as string) === "devnet")) {
  extraWallets.push(controllerInstance);
}

export { extraWallets };

// In your provider setup:
<StarknetConfig extraWallets={extraWallets} ...>
  {children}
</StarknetConfig>

  12. Format raw BigInt addresses for the Address component

    Event arguments for addresses are often returned as raw BigInt values. To display them using the Address component, they must be converted to a hexadecimal string prefixed with 0x.
    <Address address={`0x${BigInt(tx.args.from).toString(16)}`} />