ghost-portal/packages/react-query
Daria 4df5c9a8d5
Relay Chain - Coretime Overview UI Tab (#11016)
* exposing coretime wss endpoint to use on relay chain, adjusted hooks to accept api endpoint as a parameter

* adjusting hook calls to new parameters

* added Tag for coretime types, renamed occupancyType to coretimeType

* added cycle progress and cycle end date to summary, fixed the estimation dates

* coretime page draft, added hook for gathering all the coretime information in order to show it on relay chain

* lint

* bumped version

* updated coretime chain summary

* updated summary, added timeslice for the first sale start,

* hook updates to make sure the coretime data is displayed even if workloads are empty, fallback on coreAssignments

* removed unused files

* lint

* tsc

* merging parachainIds with renewalIds

* if there is no record in potential renewals, then the chain has renewed already

* added config for page-coretime

* removed hardcoded regionLength value

* improved function to find out type

* lint

* tsc

* Fix versioning

* fix comments

---------

Co-authored-by: tarikgul <tariksnow37@gmail.com>
2024-10-22 09:38:00 -04:00
..
src Relay Chain - Coretime Overview UI Tab (#11016) 2024-10-22 09:38:00 -04:00
.skip-build
.skip-npm
index.html
package.json [CI Skip] bump/beta 0.145.2-1-x 2024-10-22 12:04:04 +00:00
README.md
tsconfig.build.json Switch on tsconfig composite (#9465) 2023-05-19 15:11:59 +03:00

@polkadot/react-query

WARNING: This is an internal package to polkadot-js/apps so is not inteded (yet) for broad use. Since these are generic components, they will move to the polkadot-js/ui repo once deemed stable and usable.

For the existing sharable components usable in external React-based projects, take a look at the polkadot-js/ui documentation

Overview

A collection of RxJS enabled React components that operate with the @polkadot/api-rx library. It automatically manages subscriptions on behalf of the developer, providing a number of unstyled components that can be used to construct UIs.

Usage

Basic usage entails creating a ContextProvider and just using the components. For instance, to display the current node time,

import React from 'react';
import ReactDOM from 'react-dom';

import { Api, NodeTime } from '@polkadot/react-query';

...
ReactDOM.render(
  <Api>
    <NodeTime />
  </Api>,
  document.querySelector('#container')
);
...

All components are provided unstyled making no assumptions on the actual use, however they all support (optionally) the label, className and style attributes, that can be used to style to component.

...
ReactDOM.render(
  <Api>
    <NodeTime className='rx-time' label='current node time:' />
  </Api>,
  document.querySelector('#container')
);
...