Skip to main content

Customize Your Own dApp

We have two main directories that handle different parts of the project: snfoundry and nextjs.

The snfoundry directory represents the contracts section, while nextjs is for the frontend application.

These two directories together form the complete project structure, with snfoundry handling the backend contract logic and nextjs providing the frontend interface and interaction. By organizing and editing these two parts effectively, you can build a fully functional and user-friendly decentralized application.

Customize Contracts (snfoundry)​

  1. Edit Smart Contract: You can edit your smart contract file your_contract.cairo in the packages/snfoundry/contracts/src directory. This is where all the contract logic is stored. When modifying this file, ensure your contract logic meets the project requirements and is thoroughly tested before deployment.

  2. Deployment Scripts: The deployment scripts are located in packages/snfoundry/scripts-ts/deploy.ts. This script is used to deploy your smart contract to the specified blockchain network. By editing this script, you can adjust the deployment process, such as specifying different networks or contract parameters.

    Deployment Command Line Flags​

    The deployment script supports several command line flags to customize the deployment process:

    --network​

    • Type: string
    • Default: "devnet"
    • Description: Specifies the network for deployment
    • Example: --network mainnet

    --reset​

    • Type: boolean
    • Default: true
    • Description: Controls whether to reset existing deployments
    • When true: Keeps existing deployments
    • When false: Resets deployments before new deployment
    • Example: --reset false

    Example Commands​

    2.1. Deploy to devnet (default settings):

    yarn deploy

    2.2. Deploy to testnet:

    yarn deploy --network sepolia

    2.3. Deploy with reset:

    yarn deploy --network sepolia --reset false

  3. Test Smart Contracts: To ensure your smart contracts work correctly, write and run tests in the packages/snfoundry/contracts/src/test directory. These tests can be executed using the command:

    yarn test

    This helps catch and fix potential errors before deployment.

Customize Frontend​

Customize Nextjs App​

The nextjs directory is a critical part of your dApp, handling the frontend logic and user interface. It offers robust features and flexibility to build a dynamic and responsive application. By following these steps, you can effectively customize the pre-built components and use preset hooks to create a unique and fully functional user interface for your decentralized application. Let's dive into the main characteristics and how you can leverage them for your project.

  1. Edit Frontend Homepage: You can edit your frontend homepage in packages/nextjs/app/page.tsx. This file is one of the entry points of your application, and modifying it will change what users see when they visit your homepage. By customizing this file, you can tailor the first impression your users get, showcasing key features and information prominently.

  2. Routing and Page Layouts: Next.js supports a powerful and flexible routing system. For configuring routing and page layouts, refer to the Next.js documentation. The documentation provides detailed guides to help you define routes and configure page layouts, ensuring your application has an intuitive and powerful user interface. Next.js enables both server-side and client-side components, allowing you to build a seamless user experience.

  3. UI Styling: The Next.js app supports various UI styling solutions including Tailwind CSS, CSS-in-JS (like styled-components or emotion), and traditional CSS. This flexibility allows you to choose the best styling approach that fits your project requirements and developer preferences.

  4. State Management: For state management, the default solution provided is Zustand. Zustand is a small, fast, and scalable state-management solution that works well with React and Next.js. It simplifies managing global state in your application without the boilerplate often associated with other state management libraries.

  5. Scaffold-Stark Configuration: The configuration for Scaffold-Stark is primarily contained in the packages/nextjs/scaffold.config.ts file. The folders such as utils, web3, and components under the scaffold-stark directory do not hold configurations but rather helper functions that implement the framework itself. These functions handle different aspects of the project, including utilities for smart contract interactions, web3 setup, and reusable UI components tailored for Starknet integration. These folders should mostly be untouched unless users have a deep understanding of the framework and aim to add further customization to their dApp.

  6. Use pre-built components and hooks Use the preset functionality provided under the components and hooks folder to form your own business logic by further encapsulating and including hooks and components. For more details on the available components and how to use them, please refer to the components and Interacting with Your Smart Contracts section.

Unit Testing​

Scaffold Stark 2 comes with Vitest to perform unit testing and integration testing. Feel free to write unit tests should they be required and you can run them with the following commands:

  • yarn test:nextjs to run regular tests with watch mode
  • yarn test:nextjs run to run regular tests without watch mode
  • yarn test:nextjs run --coverage to run regular tests without watch mode with coverage

Custom Scaffold Stark Components​

The components directory, located at packages/nextjs/components/scaffold-stark, provides pre-built components styled with DaisyUI. These components offer a consistent and attractive design language for your application, simplifying the process of building a visually appealing frontend. However, to meet specific business needs, you might want to create custom components that wrap around these pre-built components.

By creating your own wrappers, you can extend and customize the functionality and appearance of these components to better fit your application's requirements. This approach allows you to leverage the base functionality and design provided by DaisyUI while adding your own business logic and custom styles.

Here is an example of how you can create a more complex custom component by wrapping the Balance component provided by Scaffold Stark:

import { Balance } from "path/to/scaffold-stark/components";

const MyBalance = ({ address }) => {
  return (
    <div className="p-6 bg-white rounded-lg shadow-lg">
      <div className="flex items-center mb-4">
        <img src="/path/to/icon.png" alt="Account Icon" className="w-12 h-12 rounded-full mr-4" />
        <div>
          <h2 className="text-2xl font-semibold">Account Balance</h2>
          <p className="text-gray-600">{address}</p>
        </div>
      </div>
      <Balance className="mt-4 text-4xl text-blue-600" address={address} />
      <div className="mt-2 text-sm text-gray-500">Current balance in STRK</div>
    </div>
  );
};

export default MyBalance;

In this example, the MyBalance component:

  1. Imports the Balance Component: It starts by importing the Balance component from Scaffold Stark.

  2. Custom Styling and Structure: It uses Tailwind CSS classes to style the component, creating a card-like layout with a header that includes an icon and the account address.

  3. Enhanced Presentation: The balance is displayed prominently in a larger font size and a distinctive color, making it visually appealing. Additional information such as the account address and a small note about the balance unit is also included.

Steps to Customize Your Components​

  1. Identify the Component: Choose the component you want to wrap from the packages/nextjs/components/scaffold-stark directory.

  2. Create a Custom Wrapper: Create a new file in your project where you will define your custom component. Import the necessary Scaffold Stark component and wrap it with your custom logic and styles.

  3. Apply Custom Styles and Logic: Use Tailwind CSS or any other styling method to apply custom styles. Add any additional logic or functionality as needed.

  4. Integrate with Your Application: Use your custom component in your application wherever needed. This allows you to maintain consistency while customizing components for specific business requirements.

Using Scaffold Stark Hooks​

The hooks directory, located at packages/nextjs/hooks/scaffold-stark, offers several hooks. Scaffold-Stark provides a collection of custom React hooks designed to simplify interactions with your deployed smart contracts. These hooks are wrappers around Starknet-Start, an easy-to-use interface with TypeScript autocompletions for reading from, writing to, and monitoring events emitted by your smart contracts. For more details, please see the Interacting with Your Smart Contracts section.