DEV Community

Cover image for Sort's Web3 React Components Are Now Open Source!
Sort for Sort

Posted on

Sort's Web3 React Components Are Now Open Source!

We're excited to announce the Alpha release of Sort's React Components: https://github.com/sortxyz/react-components. This release marks our first iteration of simplifying data-rich UIs for Web3.

We're initially starting with three core components for building data rich UIs:

  • <LatestTransactions/> - Displays a pageable table of the latest transactions of a contract address.
  • <SQLQuery/> - Easily include blockchain data from a Sort SQL Query in your application.
  • <PushNotifications/> - Show real-time transactions for a contract.

All three components support Ethereum, Polygon and Goerli data sources.

LatestTransactions

The <LatestTransactions/> React Component displays a pageable table of the latest transactions of a contract address.

<LatestTransactions
  contract_address="0xd1f9c58e33933a993a3891f8acfe05a68e1afc05"
  chain="polygon"
  api_key="API_KEY"
  theme="dark"
/>
Enter fullscreen mode Exit fullscreen mode

Preview:

Image description

SQLQuery

The <SQLQuery/> React Component lets you easily include blockchain data from a Sort SQL Query in your application.

<SQLQuery
  query="select * from polygon.transaction where to_address='0xd1f9c58e33933a993a3891f8acfe05a68e1afc05' order by block_id desc"
  api_key="API_KEY"
/>
Enter fullscreen mode Exit fullscreen mode

Preview:

Image description

PushNotifications

The <PushNotifications/> React Component lets you easily include live blockchain transactions into your application.

<PushNotifications
  contract_address="0xd1f9c58e33933a993a3891f8acfe05a68e1afc05"
  contract_function=""
  num={10}
/>
Enter fullscreen mode Exit fullscreen mode

Preview:

Image description

Get Started Today

Head over to Sort to create a free API Key and start building today. Let us know what you think by opening issues in the repo for new feature requests, feedback, or general questions.


P.S. Interested in a free Sort hoodie? Complete our Developer Survey and we'll mail you one!

Sort hoodie

-- Your friends at Sort

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay