@sort/react-components

sort.xyz react components

🧪 This project is currently in ALPHA which means you can expect bugs and API changes.
Feedback? Let us know by opening an issue.

---

React components created to simplify web3 UI application development.

Note: To use these components you'll need a free Sort API key.

1. <SQLQuery/>
2. <LatestTransactions/>
3. <PushNotifications/>

Installation

npm install @sort/react-components

or load from the unpkg CDN:

<script src="https://unpkg.com/@sort/react-components/lib/index.js"></script>

Components

SQLQuery

Execute a SQL query and display as a table

import { SQLQuery } from "@sort/react-components";

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

Explore the interactive example.

LatestTransactions

Show your latest transactions in a table

import { LatestTransactions } from "@sort/react-components";

<LatestTransactions
   contract_address="0xd1f9c58e33933a993a3891f8acfe05a68e1afc05"
   chain="polygon"
   api_key="API_KEY"
   theme="dark"
 />

Explore the interactive example.

PushNotifications

Visualize real-time contract events

import { PushNotifications } from "@sort/react-components";

<PushNotifications
    contract_address="0xd1f9c58e33933a993a3891f8acfe05a68e1afc05"
    contract_function=""
    num={10}
/>

Explore the interactive example

Feedback

🧪 This project is currently in ALPHA which means you can expect bugs and API changes. Feedback? Please let us know by opening an issue.

More information

Find out more about what you can build using Sort today at https://docs.sort.xyz.

Security

If you believe you have found a security vulnerability, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email [e-mail] to disclose any security vulnerabilities.

Contributing

Test your change

Run a local build

npm run build

Link the package

# do this in this repo
npm run link

Link the package in your project

# do this in your project
npm run link @sort/react-components

Prepare for release

if everything works as expected, go ahead and make the commit

How to write commits

We use conventional commits, if you're not familiar with it, please take a look as it will determine the type of release that is created.