Giter Club home page Giter Club logo

starknet-scaffold's Introduction

๐Ÿ— STARKNET-SCAFFOLD

๐Ÿงช An open-source, up-to-date toolkit for building decentralized applications (dapps) on Starknet. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.

โš™๏ธ Built using NextJS, Starknet.js, Starknet-React, Starknetkit, Typescript, Scarb, and Starknet-Foundry.

REQUIREMENTS

Before you begin, you need to install the following tools:

QUICKSTART

To get started with Starknet-Scaffold, Clone this repo:

git clone [email protected]:argentlabs/Starknet-Scaffold.git
cd Starknet-Scaffold

Or to install using create-starknet-app:

npx create-starknet-app

FEATURES

Contract Section

Scripts exists to make your life easier! A missing script you'd like to see? open a PR to update this section

Feature Available
Build Contract โœ…
Format Contract โœ…
Generate SRC5 Interface โœ…
Prepare Account โœ…
Deploy Account โœ…
Delete Account โœ…
Declare Contract โœ…
Deploy Contract โœ…

UI Section

Good with Typescript and Tailwind? We've got missing UI components we'll love to see!

Feature Available
Connect button & Custom Wallet Modal โœ…
Address bar (Displays StarknetID) โŒ
Transactions List โŒ
modal to copy/disconnect/view account โŒ
Display account balance โŒ
Switch/display network โŒ
App Light/Dark mode โŒ

USAGE

Contract Section

The contract folder contains all the tools needed to write, build, test and deploy your Starknet smart contracts. It is built with Scarb and Starknet Foundry. Here are common operations you can perform on your contracts:

Build contracts

To build your smart contracts, from the base repository run:

npm run build-contracts

Format contracts

Scarb comes with an in-built cairo formatter. To utilize it run:

npm run format-contracts

Test contracts

To run your tests:

npm run test-contracts

Generate an SRC-5 interface ID for your contracts

To generate an interface ID, run:

npm run generate-interface <PATH_TO_INTERFACE>

Prepare Account for deployment

To prepare your account for deployment, run:

npm run prepare-account --url=<RPC_URL> --name=<ACCOUNT_NAME>

generates a profile which is added to scarb.toml and can be passed to other commands.

Deploy Account

To deploy an account:

npm run deploy-account --profile=<MY_PROFILE> --name=<ACCOUNT_NAME> --maxfee=<MAX_FEE>

where the profile is gotten from scarb.toml, name is the prepared account and maxfee is the specified max fee.

Delete Account

To delete an account:

npm run delete-account --url=<RPC_URL> --name=<ACCOUNT_NAME> --network=<alpha-mainnet | alpha-goerli>

Declare Contract

To declare a contract:

npm run declare-contract --profile=<MY_PROFILE> --contract=<CONTRACT_NAME>

Deploy Contract

To deploy a contract:

npm run deploy-contract --profile=<MY_PROFILE> --classhash=<CONTRACT_CLASSHASH>

UI SECTION

The frontend section contains all UI components. Built using NextJS, Starknet.js, Starknet-React, Starknetkit, and Typescript.

Run UI

To run UI, from the base repository:

npm run start

Build UI

To build your frontend, from the base repository run:

npm run build-ui

DOCUMENTATION

Documentations of tools used in this scaffold:

  1. Scarb
  2. Starknet Foundry
  3. Nextjs
  4. Starknetjs
  5. Starknet-React
  6. Starknetkit

HOW TO CONTRIBUTE TO STARKNET-SCAFFOLD

We welcome contributions to Starknet-Scaffold!

Please see CONTRIBUTING.MD for more information and guidelines for contributing to Starknet-Scaffold.

TL;DR:

1. Submit an issue

  • Create a new issue.
  • Comment on the issue (if you'd like to be assigned to it).

2. Fork this repository

3. Set up your local environment (optional)

If you're ready to contribute and create your PR, it will help to set up a local environment so you can see your changes.

  1. Set up your development environment

  2. Clone your fork

If this is your first time forking our repo, this is all you need to do for this step:

git clone [email protected]:[your_github_handle]/Starknet-Scaffold.git && cd Starknet-Scaffold

If you've already forked the repo, you'll want to ensure your fork is configured and that it's up to date. This will save you the headache of potential merge conflicts.

To configure your fork:

git remote add upstream https://github.com/argentlabs/Starknet-Scaffold.git

To sync your fork with the latest changes:

git checkout main
git fetch upstream
git merge upstream/main
  1. Install dependencies
npm install

4. Make awesome changes!

  1. Create new branch for your changes
git checkout -b new_branch_name
  1. Start developing!
npm run start
  1. Commit and prepare for pull request (PR). In your PR commit message, reference the issue it resolves (see how to link a commit message to an issue using a keyword).
git commit -m "brief description of changes [Fixes #123]"
  1. Push to your GitHub account
git push

5. Submit your PR

  • After your changes are committed to your GitHub fork, submit a pull request (PR) to the main branch of the argentlabs/Starknet-Scaffold repo
  • In your PR description, reference the issue it resolves (see linking a pull request to an issue using a keyword)
    • ex. Updates out of date content [Fixes #1234]
  • Why not say hi and draw attention to your PR in our telegram channel?

starknet-scaffold's People

Contributors

darlington02 avatar maxservais avatar antoine-sparenberg avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.