Skip to main content

Payment Dapp Challenge

This challenge will guide you through the process of setting up, customizing, and deploying the Example Soroban Payment Dapp, and building a blockchain-powered payment application designed to work with the Freighter wallet.

Checkpoint 0: 📦 Install Dependencies​

Before you begin, ensure you have the following installed on your system:

Checkpoint 1: 🚀 Clone the Repository​

Clone and set up the Example Soroban Payment Dapp repository:

git clone https://github.com/stellar/soroban-react-payment.git
cd soroban-react-payment
yarn

Checkpoint 2: 🎬 Deploy Smart Contracts​

For this step you will need to clone and deploy the Soroban token smart contracts. The Soroban token is a custom token that will be used to facilitate payments in the Payment Dapp.

In a new terminal window, follow the steps below to build and deploy the smart contracts:

git clone https://github.com/stellar/soroban-examples.git
cd soroban-examples/token
make

This will build the smart contracts and put them in the token/target/wasm32-unknown-unknown/release directory.

Next, you will need to deploy the smart contracts to Futurenet. To do this, open a terminal in the soroban-examples/token directory and follow the steps below:

soroban contract deploy \
    --wasm target/wasm32-unknown-unknown/release/soroban_token_contract.wasm \
    --source <ADMIN_ACCOUNT_SECRET_KEY> \
    --rpc-url https://rpc-futurenet.stellar.org:443 \
    --network-passphrase 'Test SDF Future Network ; October 2022'

This will return a contract id that we will need to use in the next step.

soroban contract invoke \
    --id <TOKEN_CONTRACT_ID> \
    --source-account <ADMIN_ACCOUNT_SECRET_KEY> \
    --rpc-url https://rpc-futurenet.stellar.org:443 \
    --network-passphrase 'Test SDF Future Network ; October 2022' \
    -- initialize \
    --admin <ADMIN_PUBLIC_KEY> \
    --decimal 7 \
    --name "Demo Token" \
    --symbol "DT"

Lets take a look at what is happening here:

  • Admin Account: This is the public key of the administrator account. It is the 'master' account that has control over the token contract.

  • Decimal Precision: We set this value to 7. This indicates that your token will have 7 decimal places, providing fine-grained control and flexibility in transactions.

  • Name: We set this value to 'Demo Token'. This is the name of your token written as a string. In this case, we use a string, 'Demo Token'.

  • Symbol: Your token symbol is a short string that represents your token. In this case, we use a string, 'DT'.

Next we will need to mint some tokens to your sender's account. To do this, run the following command:

soroban contract invoke \
    --id <TOKEN_CONTRACT_ID> \
    --source-account <ADMIN_ACCOUNT_SECRET_KEY> \
    --rpc-url https://rpc-futurenet.stellar.org:443 \
    --network-passphrase 'Test SDF Future Network ; October 2022' \
    -- mint \
    --to <USER_PUBLIC_KEY> \
    --amount 1000000000

Checkpoint 3: 🖥️ Launch the Frontend​

Make sure that the frontend of the Payment Dapp successfully communicates with the backend, allowing transactions to be created, signed, and submitted to the network.

Open a terminal in the soroban-react-payment directory and run the following command:

yarn start

You should see the following output:

$ webpack-dev-server --config config/webpack.dev.js
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
...

Now open your browser and navigate to http://localhost:9000/. You should see the Payment Dapp running in your browser.

connect

Checkpoint 4: 📡 Add the Token to Freighter​

Follow the steps in the Connect a Wallet: Freighter guide to connect Freighter to the Payment Dapp.

Add the Soroban token to your Freighter wallet. To do this, open your Freighter wallet and click on the Manage Assets button at the bottom of the screen.

manage assets

Then click on the Add Soroban token button and enter the token ID that was returned when you deployed the smart contracts.

add token
new token

You should now see the Soroban token in your Freighter wallet.

added balance

Checkpoint 5: 🏦 Send Tokens to Another Account​

First, connect Freighter and Select the account that will be used to send Soroban tokens.

Click "next" to continue.

next

Provide the public key of the account that will receive the Soroban tokens.

payment destination

Input the Token ID of the Soroban token.

choose token

Input the amount of Soroban tokens to send.

select token

Confirm the payment settings.

payment settings

Review the transaction details to ensure accuracy and then click the "Sign with Freighter". Freighter will prompt you to sign the transaction with your wallet's private key.

confirm payment

Once signed, click the "Submit Payment" button, and the transaction will be submitted to the network.

submit payment

The Payment Dapp will show a confirmation message once the transaction has been successfully submitted.

end

You can now check the balance of the receiving account to ensure that the transaction was successful.

balance receiver

You can also check the balance of an account with the soroban-cli by running the following command:

 soroban contract invoke \
    --id <TOKEN_CONTRACT_ID> \
    --source-account <ANY_SECRET_KEY> \
    --rpc-url https://rpc-futurenet.stellar.org:443 \
    --network-passphrase 'Test SDF Future Network ; October 2022' \
    -- balance \
    --id <RECIPIENT_PUBLIC_KEY>

Output:

"1000000000"

Checkpoint 6: 🚢 Ship it! 🚁​

You can upload your dapp to a hosting platform of your choice. You could use platforms like Netlify, Vercel, or even an AWS S3 bucket.

For this example, we will use the Vercel cli to complete your deployment

Note: If you dont already have a Vercel account, you will need to create one and link it to your GitHub account.

First install the Vercel cli:

npm i global vercel

Then run the following command to deploy your app:

npx vercel

Then continue through the prompts until you see the following output:

No framework detected. Default Project Settings:
- Build Command: 'npm run vercel-build' or 'npm run build'
- Development Command: None
- Install Command: 'yarn install', 'pnpm install', or 'npm install'
- Output Directory: 'public' if it exists, or '.'

Select y to continue, and then select build as the output directory.

? Want to modify these settings? [y/N] y
? Which settings would you like to overwrite (select multiple)? Output Directory
? Output Directory? build

Once the deployment is complete, you should see something similar to the following output:

🔗  Linked to julian-dev28/soroban-react-payment (created .vercel)
🔍  Inspect: https://vercel.com/julian-dev28/soroban-react-payment/AQoFFhZf5K1ufQj57eawApPkFduf [2s]
✅  Production: https://soroban-react-payment.vercel.app [58s]

You can now visit the preview link to see your deployed dapp! 🎉

You will need to add some Futurenet network lumens to your Freighter wallet to interact with the deployed dapp. Visit https://laboratory.stellar.org/#create-account, and follow the instructions to create your Freighter account on Futurenet.

Checkpoint 7: ✅ Complete the Challenge!​

Submit your public URL to the challenge form.

Please connect to Testnet network.

info

Join our Community in Discord in case you have any issues or questions.

Checkpoint 8: 💪 Share Your Accomplishment with the Community​

Don't forget to share your work with the community. Let others see what you've accomplished, receive feedback, and inspire others!

⚔️ Side Quests​

🍴Fork the Example Soroban Payment Dapp repo and make your own changes to your Dapp.

Consider customizing the code and submitting a pull request for the challenge. You can explore advanced features of the Example Soroban Payment Dapp, and Freighter wallet to take your skills to the next level. Show your creativity by adding unique functionalities, enhancing the user interface, or integrating with other APIs or services. Good luck!

📚 User Workflows Checklist​

To ensure that you've covered all the key user actions during the challenge, follow this checklist:

  • Clone the repository
  • Install dependencies
  • Deploy and initialize the token smart contract
  • Mint tokens to your account
  • Launch the local frontend
  • Add the Soroban token to Freighter
  • Connect Freighter to the application
  • Send tokens to another account
  • Deploy the site with Vercel
  • Submit your public key and URL