Skip to main content

Onchain Chat

This guide is a continuation of the quickstart chat room guide.

In this guide, we will take the off-chain chat application that we made in the quickstart, and make some minor changes to have all future message data be stored on-chain, as well as require a fee of $1 USDC whenever a new message is sent in the chatroom.

Step 1: Modify the Tarobase Policy to Store Messages On-Chain and Require a Fee​

Let's enhance the messaging app by adding two key features:

  1. Store all messages on-chain for permanent record-keeping
  2. Require users to pay a $1 USDC fee to post messages

With Tarobase's policy system, we can add these features by simply updating the policy rules - no changes to the application code are needed.

To do this, head to the Tarobase Console, and update the ChatRoom application to have the following updated policy:

{
  "messages/$messageId": {
    "rules": {
      "read": "true",
      "create": "@newData.createdBy == @user.address"
    },
    "fields": {
      "createdBy": "Address",
      "text": "String"
    },
    "onchain": true,
    "hooks": {
      "onchain": {
        "create": "@TokenPlugin.transferWholeTokens(0x036CbD53842c5426634e7929541eC2318f3dCF7e, @user.address, 0x000000000000000000000000000000000000dEaD, 1)"
      }
    }
  }
}

Let's take a closer look at the changes to the policy we made and how it works to enable the planned functionality.

On-Chain Storage We enable on-chain storage by adding "onchain": true in the policy. This ensures all messages are permanently stored on the blockchain.

Message Creation Hooks We use hooks to specify additional actions that should happen when a message is created. In this case, we add an onchain hook that executes when we are creating a new message data on-chain.

USDC Token Transfer The hook uses @TokenPlugin.transferWholeTokens() to transfer 1 USDC token:

  • First parameter (0x036CbD53842c5426634e7929541eC2318f3dCF7e): The USDC token contract address on the Base network
  • Second parameter (@user.address): The sender's wallet address
  • Third parameter (0x000000000000000000000000000000000000dEaD): The recipient "burn" address where tokens are sent and cannot be recovered. You can optionally replace the burn address with your own wallet address if you want to collect the fees.
  • Fourth parameter (1): The amount of USDC tokens to transfer

The @TokenPlugin is a built-in plugin for on-chain token interactions. As part of Tarobase's open source plugin system, more on-chain capabilities will be added over time. See the full list of available plugins in the plugins documentation.

After making these changes to your policy, click Save & Deploy to apply them. This step will take a bit longer now because Tarobase is deploying a new smart contract to the Base Testnet network that will power your app's on-chain message storage and fee collection functionality.

Policy Update Screenshot

Step 2: Test the On-Chain Messaging App​

  1. Run your React App: That's all of the changes we need to switch your app to be on-chain and add some on-chain functionality! Now make sure your react app is running in your terminal via the npm run dev command.
  2. Get Testnet USDC Funds: Head to the USDC faucet to send yourself some USDC so that you can test sending messages in the app. When filling out the form in the faucet, select USDC, select the network of Base Sepolia, and copy over the wallet address that shows on the top of your app when you login. Then click Send 10 USDC, and 10 USDC will be sent to your wallet shortly.

Finding your wallet address

alt text

  1. Send a Message:
    • On your chatroom app, login, type a message, and click "Send Message".
  2. Confirm Transactions:
    • You will be prompted by the Coinbase Wallet to confirm 2 transactions for the $1 USDC transfer. The first is to allow your Tarobase app to transfer USDC on your behalf, and the second is to send $1 USDC and place your message on-chain.
    • Confirm the transaction to send the message and the $1.
  3. Verify On-Chain Storage:
    • The message will appear in the chat room labeled as 'on-chain'. The message was stored on-chain and it is available on Tarobase for you to retrieve and subscribe to like you normally would if it were off-chain.

Conclusion

Congratulations! 🎉 You've built a fully on-chain messaging app with Tarobase by simply updating a policy file - no complex smart contract development needed. Your messages are now permanently stored on the blockchain.

This is just the beginning. With Tarobase's seamless on-chain/off-chain data handling, you can extend this foundation to build social networks, marketplaces, games and other web3 apps with ease.

Quick Feedback Survey

We are an early-stage product, and would greatly appreciate you fill out this survey after having completed this quickstart guide to help us improve. Thank you!

Reach out in the discord if you have any questions or want to talk about anything Tarobase. Happy coding!