|
| 1 | +--- |
| 2 | +sidebar_position: 3 |
| 3 | +description: How to set up your Customize Your Own dApp |
| 4 | +--- |
| 5 | + |
| 6 | +# Customize Your Own dApp |
| 7 | + |
| 8 | +We have two main directories that handle different parts of the project: `snfoundry` and `nextjs`. |
| 9 | + |
| 10 | +The `snfoundry` directory represents the contracts section, while `nextjs` is for the frontend application. |
| 11 | + |
| 12 | +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. |
| 13 | + |
| 14 | + |
| 15 | +## Customize Contracts (snfoundry) |
| 16 | + |
| 17 | +1. **Edit Smart Contract**: |
| 18 | + You can edit your smart contract file `YourContract.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. |
| 19 | + |
| 20 | +2. **Deployment Scripts**: |
| 21 | + 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. |
| 22 | + |
| 23 | +3. **Test Smart Contracts**: |
| 24 | + 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 `yarn test` command. This helps catch and fix potential errors before deployment. |
| 25 | + |
| 26 | +## Customize Frontend |
| 27 | + |
| 28 | +### Customize Nextjs App |
| 29 | + |
| 30 | +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. |
| 31 | +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. |
| 32 | +Let's dive into the main characteristics and how you can leverage them for your project. |
| 33 | + |
| 34 | +1. **Edit Frontend Homepage**: |
| 35 | + You can edit your frontend homepage in `packages/nextjs/app/page.tsx`. |
| 36 | + This file is one of the entry points of your application, and modifying it will change what users see when they visit your homepage. |
| 37 | + By customizing this file, you can tailor the first impression your users get, showcasing key features and information prominently. |
| 38 | + |
| 39 | +2. **Routing and Page Layouts**: |
| 40 | + Next.js supports a powerful and flexible routing system. For configuring routing and page layouts, refer to the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/routing). |
| 41 | + 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. |
| 42 | + |
| 43 | +3. **UI Styling**: |
| 44 | + 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. |
| 45 | + |
| 46 | +4. **State Management**: |
| 47 | + 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. |
| 48 | + |
| 49 | +5. **Scaffold-Stark Configuration**: |
| 50 | + The configuration for Scaffold-Stark is primarily contained in the `packages/nextjs/scaffold.config.ts` file. |
| 51 | + 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. |
| 52 | + These folders should mostly be untouched unless users have a deep understanding of the framework and aim to add further customization to their dApp. |
| 53 | + |
| 54 | +6. **Use pre-built components and hooks** |
| 55 | + 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. |
| 56 | + For more details on the available components and how to use them, please refer to the [components](../components) and [Interacting with Your Smart Contracts](../hooks) section. |
| 57 | + |
| 58 | +### Custom Scaffold Stark Components |
| 59 | + |
| 60 | +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. |
| 61 | + |
| 62 | +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. |
| 63 | + |
| 64 | +Here is an example of how you can create a more complex custom component by wrapping the `Balance` component provided by Scaffold Stark: |
| 65 | + |
| 66 | +```js |
| 67 | +import { Balance } from 'path/to/scaffold-stark/components'; |
| 68 | + |
| 69 | +const MyBalance = ({ address }) => { |
| 70 | + return ( |
| 71 | + <div className="p-6 bg-white rounded-lg shadow-lg"> |
| 72 | + <div className="flex items-center mb-4"> |
| 73 | + <img |
| 74 | + src="/path/to/icon.png" |
| 75 | + alt="Account Icon" |
| 76 | + className="w-12 h-12 rounded-full mr-4" |
| 77 | + /> |
| 78 | + <div> |
| 79 | + <h2 className="text-2xl font-semibold">Account Balance</h2> |
| 80 | + <p className="text-gray-600">{address}</p> |
| 81 | + </div> |
| 82 | + </div> |
| 83 | + <Balance className="mt-4 text-4xl text-blue-600" address={address} /> |
| 84 | + <div className="mt-2 text-sm text-gray-500">Current balance in ETH</div> |
| 85 | + </div> |
| 86 | + ); |
| 87 | +}; |
| 88 | + |
| 89 | +export default MyBalance; |
| 90 | +``` |
| 91 | + |
| 92 | +In this example, the `MyBalance` component: |
| 93 | + |
| 94 | +1. **Imports the Balance Component**: It starts by importing the `Balance` component from Scaffold Stark. |
| 95 | + |
| 96 | +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. |
| 97 | + |
| 98 | +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. |
| 99 | + |
| 100 | +### Steps to Customize Your Components |
| 101 | + |
| 102 | +1. **Identify the Component**: |
| 103 | + Choose the component you want to wrap from the `packages/nextjs/components/scaffold-stark` directory. |
| 104 | + |
| 105 | +2. **Create a Custom Wrapper**: |
| 106 | + 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. |
| 107 | + |
| 108 | +3. **Apply Custom Styles and Logic**: |
| 109 | + Use Tailwind CSS or any other styling method to apply custom styles. Add any additional logic or functionality as needed. |
| 110 | + |
| 111 | +4. **Integrate with Your Application**: |
| 112 | + Use your custom component in your application wherever needed. This allows you to maintain consistency while customizing components for specific business requirements. |
| 113 | + |
| 114 | + |
| 115 | +### Using Scaffold Stark Hooks |
| 116 | + |
| 117 | +The `hooks` directory, located at `packages/nextjs/hooks/scaffold-stark`, offers several hooks. |
| 118 | +Scaffold-Stark 2 provides a collection of custom React hooks designed to simplify interactions with your deployed smart contracts. |
| 119 | +These hooks are wrappers around Starknet-React, an easy-to-use interface with TypeScript autocompletions for reading from, writing to, and monitoring events emitted by your smart contracts. |
| 120 | +For more details, please see the [Interacting with Your Smart Contracts](../hooks) section. |
0 commit comments