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

Top comments (0)