This is a React library written in Typescript and based on Material-UI. It exposes common components, services and assets to be re used in RIF projects.
Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.
See what "Lead Maintainer" means here.
npm i @rsksmart/rif-uiIn order to experience all the benefits of this library, we recommend to wrap your application with the ThemeProvider component from Material-UI and pass in our Material-UI theme.
import React, { FC } from 'react'
import { ThemeProvider } from '@material-ui/core/styles'
import { theme, Typography } from '@rsksmart/rif-ui'
import '@rsksmart/rif-ui/dist/index.css'
const App = () => {
return (
<ThemeProvider theme={theme}>
<Typography color='primary'>Hello world :)</Typography>
</ThemeProvider>
)
}
export default AppThe Header and PageTemplate components were styled and designed to work together. So, whenever you need one of them, we suggest to follow the next example
import { Header, PageTemplate, theme, Typography } from '@rsksmart/rif-ui'
import { ThemeProvider } from '@material-ui/core/styles'
import { BrowserRouter } from 'react-router-dom'
const App = () => (
<ThemeProvider theme={theme}>
<BrowserRouter>
<Header />
<PageTemplate>
<Typography color='primary'>Hello world :)</Typography>
</PageTemplate>
</BrowserRouter>
</ThemeProvider>
)On the Web3Provider you can set the property requiredNetworkId and the actions onConnectedAccountChange, onConnectedNetworkChange that will get triggered once the user wallet is connected and there is a change on the account or network.
As an example
<Web3Provider.Provider
requiredNetworkId={requiredNetworkId}
actions={{
onConnectedAccountChange: onConnectedAccountChange,
onConnectedNetworkChange: onConnectedNetworkChange
}}>
{/* Your stuff here */}
</Web3Provider.Provider >
A sandbox project is provided in order to test the library or try new features locally without having to release a new version.
It lives at the example folder. In order to run it, follow the next steps:
- At
rif-ui:
npm i
npm start
- Wait until it compiles to the
distfolder. Then, in another terminal:
cd example/ && npm start
- (Optional) Import the components, assets or services that you want in the
example/src/App.jsfile following the Usage section to see them in action.
To run unit test and build the library, you can use
npm run test
If you only want to run the unit test, you can use
npm run test:unit
MIT © rsksmart
- This library was created with create-react-library. A great project to start you own library.
- Thanks to EVM Networks for providing the data source of network objects as a JSON, which inspired us to create the
NetworkInfointerface
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent