Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"My first dapp, check readme" #59

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 165 additions & 69 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,112 +1,208 @@
# @create-soroban-dapp.
🛡️ Welcome to Title Contract

@create-soroban-dapp is both a npx script and a boilerplate dapp for kickstarting any of your ideas for a Soroban-based Dapp.
Hello and welcome to Title Contract! 🎉 🚀 What is Title?

Largely inspired by the [ink!athon](https://github.com/scio-labs/inkathon) project by [Scio Labs](https://github.com/scio-labs) and by [@create-t3-app](https://github.com/t3-oss/create-t3-app) by [T3 Open Source](https://github.com/t3-oss) for the script mechanisms.
This contract acts as the guardian, controlling who can modify the character associated with this wallet. Only those with the "magic trick" will have the power to make changes. 🛠️ Project Setup

Check the [`LIVE VERSION`](https://create-soroban-dapp.vercel.app/) of the dapp utilizing already deployed testnet contract!
Clone the Repository:

***Read the docs [here](create-soroban-dapp.paltalabs.io)*** 📚📚
Follow the instructions here: Manual Cloning:

# Introduction
https://create-soroban-dapp.paltalabs.io/create-soroban-dapp/manual_cloning.html

`@create-soroban-dapp` is composed of two things:
Navigate to the Project Directory:

- A boilerplate dapp utilizing the [@soroban-react](https://github.com/paltalabs/soroban-react).
bash

- A npx script allowing any developer to quickstart its project via the command line and `npx create-soroban-dapp`
cd soroban-react-dapp

# Usage:
Set Up Your Secrets:

Simply use
When deploying contracts, you’ll need the secret key of the deployer account. Store this key in a file located at ./contracts/.env.

`npx create-soroban-dapp@latest`
To set up your secrets, run:

or
bash

`npm create soroban-dapp@latest`
cp contracts/.env.example contracts/.env

Then, cd inside the new project repository.
If you’re already in the contracts folder (e.g., inside the Docker container), run:

# Troubleshooting
bash

## If npm create script malfunctions
cp .env.example .env

The script in its early stage is likely to not function perfectly on every different os and configuration. If the script happens to not function properly 'please report to @benjaminsalon' on the stellar developer discord channel.
Edit the .env file to include your secret keys and RPC URLs. The file should look like this:

## Manual cloning
plaintext
Stellar accounts Secret Keys

It is also possible to use the dapp boilerplate via manually cloning the repo:
ADMIN_SECRET_KEY=
RPC Setup

`git clone [email protected]:paltalabs/create-soroban-dapp.git`
MAINNET_RPC_URL=https://mainnet.stellar.validationcloud.io/v1/3uELU0BKP-ARJhn6hngelkg5Y24i8xGgUA9QtB8KsYc

The dapp will then not be in the root folder, this folder is occupied by the npx script. You will find the dapp in the sub folder 'soroban-react-dapp':
USER_1= USER_2= USER_3= NEW_ADMIN=

`cd soroban-react-dapp`
You can generate new accounts and private keys from Stellar Laboratory. Copy your secret keys into the .env file.

From there, it is a normal nextjs app:
Note: The initial ADMIN will start as the administrator. After executing test_title.txs, the contract’s admin will be NEW_ADMIN, and USER_1 and USER_2 will be authorized to modify the title. Create multiple accounts in Stellar Laboratory or use your own for testing the smart contract.

`yarn` or `npm install` or `pnpm install`
If you plan to deploy on the mainnet, you'll need a Mainnet RPC Provider. Consider using providers like Validation Cloud or NowNodes.

Container Setup:

# Set up your secrets!
When deploying our contracts, we will need to the secret key of the deployer account. This secret key will be in a ignored file in `./contracts/.env`.
Navigate to the right directory:

To set up your secrets do
```bash
cp contracts/.env.example contracts/.env
```
If you are already inside the contracts folder (due to being inside the Docker Container), just do `cp .env.example .env`
bash

And then edit the `.env` file, that will look like this:
```bash
# Stellar accounts Secret Keys
ADMIN_SECRET_KEY=
cd soroban-react-dapp/

# RPC Setup
MAINNET_RPC_URL=
```
You can generate new Accounts and Private Keys from https://laboratory.stellar.org/#account-creator?network=test
Bring up the necessary containers:

If you plan to deploy in Mainnet, you will also need a Mainnet RPC Provider. Find one in https://app.validationcloud.io/ or in https://nownodes.io/
bash

docker-compose up -d ./run.sh

# Get those containers up!
Build and Test Contracts:

We will use docker-compose to get the containers up and running. This will rise a container for a local Stellar blockchain and another container with soroban-preview, which has all the necessary dependancies to deploy and interact with the contracts. Along with the dapp container that will run the front-end of the dapp.
Run the following commands:

```bash
# move to the right directory
cd soroban-react-dapp/
bash

cd contracts make build make test yarn deploy

You can test the contract by invoking it with the ID shown in the console:

bash

soroban contract invoke --id XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --source admin --network testnet

For testnet:

bash

soroban config network add --rpc-url https://soroban-testnet.stellar.org/ --network-passphrase "Test SDF Network ; September 2015" testnet

Execute the Test Title:

Run:

# Then, run the containers
docker compose up -d
bash

# To get inside the soroban-preview container
bash run.sh
# or
# docker exec --tty --interactive soroban-contracts bash
```
Inside the container we can now compile the contracts, install the packages and deploy the contracts.
yarn testtitle testnet

```bash
# move to the contracts folder
cd contracts
Run the Frontend:

# build
make build
Navigate back and start the development server:

# Install dependencies and deploy the contract
yarn install
yarn deploy testnet greeting
```
Now we can run our frontend
bash

```bash
# move to the parent folder
cd ..
# install the dependencies
yarn
# run the frontend in development mode
yarn dev

Watch what happens and get ready to explore!

Freight Configuration:

Don’t forget to configure Freight with Title to efficiently manage your tests.

Additional Testing:

Finally, add more test addresses to ensure that only those chosen by Title can modify the character. Test the security of your contract and enjoy the process!

Extra: Stopping the Containers:

When you’re finished, you can stop the containers by running:

bash

docker-compose down

###################################################################################
Welcome to your soroban react dapp boilerplate!

This dapp largely inspired by the ink!athon project will help you kickstart your soroban dapp creator journey.
Verify installation

To verify that everything is in order you can run

# If you use yarn
yarn dev

# If you use npm or pnpm
npm run dev
pnpm run dev

This will start the development server. The dapp will be available on localhost.

The dapp should display the current greeting set in the testnet smart contract.

Check if you can change it by sending a new greeting!

You may need some tokens from the faucet to interact with the testnet. You can fund your wallet address with the testnet friendbot at https://friendbot.stellar.org/?addr=YOUR_ADDRESS_HERE

Getting started

To start the customization of the dapp you can follow these lines:
Customize app data

You can start by modifying the TODOs with your own data (None of them is mandatory to change):

Name of the package in package.json.
All the dapp info in _app.tsx.
Manifest and favicon in _document.tsx.

Create and build your own contracts

The contracts workflow happens in the contracts/ folder. Here you can see that the greeting contract is present already.

Every new contract should be in its own folder, and the folder should be named the same name as the name of the contract in its cargo.toml file. You can check how the tweaked_greeting contract is changed from the greeting contract and you can also start from this to build your own contract.

To build the contracts you can simply invoke the make command which will recursively build all contracts by propagating the make command to subfolders. Each contract needs to have its own Makefile for this to work. The Makefile from the greeting contract is a generic one and can be copied and paste to use with any of your new contract.

If you are not familiar or comfortable with Makefiles you can simply go in the directory of the contract you want to compile and run

# This will create the target wasm blob under target/wasm32-unknown-unknown/release/contract_name.wasm
cargo build --target wasm32-unknown-unknown --release

If it's your first time manipulating soroban contracts you might need to add the wasm32-unknown-unknown target to rust. For this run rustup target add wasm32-unknown-unknown. Follow instructions online if not working ("add target wasm32-unknown-unknown to rust").

Deploy your contracts on tesnet

Now that you have added your contract to the project, you can deploy the contract to the soroban testnet.

To do so you can use the script provided in the contracts folder: deploy_on_testnet.sh. You simply have to add your contract name as argument like this

# From the contracts folder run
./deploy_on_testnet.sh name_of_your_contract

The script also takes a list of contracts as arguments for deploying several contracts at once with the same identity. Simply use

# Deploy several contracts like this
./deploy_on_testnet.sh contract_1 ontract_2 contract_3

The script will

Run make anyway to ensure that the contracts are up to date from your last modification
Add the testnet network configuration to soroban-cli
Create a random identity for the deployer of your contracts (BE AWARE THAT THIS WILL CHANGE EVERY TIME YOU REDEPLOY)
Fund the deployer identity using Friendbot
Deploy the contracts on testnet
Add the contracts addresses in contracts_ids.json under testnet.name_of_your_contract

Run typescript tests

You can run the typescript tests by running the following command:

yarn mocha dist/greeting/greeting.test.js

Change the contract you are interacting with in the frontend code.

In the file GreeterContractInteraction.tsx, change the two references to "greeting" in updateGreeting at line 105 and in fetchGreeting at line 55.

You then need to adapt the contractInvoke() calls in these functions to match the structure of your contract, by setting the right method name and the right args list.

Finally feel, of course, free to change the front-end how you wish, to match your desired functionalities.

Good luck building!
1 change: 1 addition & 0 deletions soroban-react-dapp/.soroban/identity/admin.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

2 changes: 2 additions & 0 deletions soroban-react-dapp/.soroban/network/testnet.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
rpc_url = "https://soroban-testnet.stellar.org/"
network_passphrase = "Test SDF Network ; September 2015"
Loading