Code Monkey home page Code Monkey logo

react-components's Introduction

DEPRECATED

⚠️ This package is no longer maintained.


sort.xyz react components

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"
  />

sql query

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"
 />

sql query

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 [email protected] to disclose any security vulnerabilities.

Contributing

See CONTRIBUTING

react-components's People

Contributors

aheckmann avatar anthonypecchillo avatar lifeiscontent avatar zuketo avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

react-components's Issues

LatestTransactions Component - Table rows don't update on first pagination click.

Broken Pagination in LatestTransactions Component

Problem

First click of right pagination arrow updates title, but not records in data grid.

Reproduce

  1. Load the page
  2. View the first 25 records.
  3. Click ➡
  4. Title updates from "25 transactions" to "25-50 transactions"
  5. Still viewing first 25 records though
  6. Click ⬅, Title updates correctly, records stay the same
  7. Click ➡, Title + Records update properly
  8. Click ➡, Title + Records update properly
  9. Click ⬅, Title + Records update properly
  10. Click ⬅, Title + Records update properly

Semantic Release

Add a GitHub workflow to automate publishing react-components updates to NPM.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.