rsksmart / rif-ui Goto Github PK
View Code? Open in Web Editor NEWReact library for RIF projects
Home Page: https://www.rifos.org/
React library for RIF projects
Home Page: https://www.rifos.org/
Description
We need to be able to consume the blue logo from the library
Describe the solution you'd like
Export the image
The Accordion
component is not easily customizable from outside.
We should divide it in smaller components following the ExpansionPanel
component of Material-UI.
Right now we have HeaderComponent and AppBarComponent, the first one is the parent of desktop and has mobile component inside, the second one is for desktop.
We need architectural change to integrate them into 3 separated components
When the user is on the wrong network, the LoginModal
shows a wallet to connect, even if the wallet is already connected.
The modal should display a message asking the user to switch to the proper network.
Description
Right now we are not exposing the typings of the components. This makes it difficult to work with the library as users need to look at the source code to know which props a component should get
Describe the bug
The account indicator in the top right corner shows a green tick after clicking on connect to wallet even if the user is not logged in in the said wallet. Note, that the indicator reflects the state correctly textually, just not visually.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The indicator should show an icon reflecting the incompleteness of the action performed, such as warning sign.
in UnitsInput.
Will resolve FIXME in rif-marketplace-ui DomainCheckoutPage line 249
At the moment, the browser reloads the page when the network changes. But MetaMask will soon stop doing that. We should detect this and the Web3Provider should act upon that.
MetaMask will soon stop reloading pages on network change. If you rely upon this behavior, add a 'networkChanged' event handler to trigger the reload manually: https://metamask.github.io/metamask-docs/API_Reference/Ethereum_Provider#ethereum.on(eventname%2C-callback)
After setting the provider the AccountModal should close.
Right now we only have LoginOption
component. When no props are passed it suggests to install Nifty wallet, otherwise it list the provider option.
It would be nice to extract this template for separation of concerns
Right now we are not exporting the interfaces that define the props needed by the components. So for example when using the library and want to import the TooltipIconButtonProps
, the user needs to do import { TooltipIconButtonProps } from '@rsksmart/rif-ui/dist/components/molecules/TooltipIconButton'
.
Export types at root level so users can do import { TooltipIconButtonProps } from '@rsksmart/rif-ui
Wrap Material-UI IconButton component and expose it in rif-ui
Describe the bug
The WithSpinner
HOC should be spinning, it looks like we lost some css animations.
To Reproduce
Use WithSpinner
HOC
Expected behavior
The spinner should spin
Describe the bug
When the user is logged out from the wallet and connects the provider, the Account
component displays "Wrong Network". We need to display proper message for this, something like "Provide an account"
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Should tell the user to provide an account or log in to the wallet
Additional information
Should be tackled after #89
Remove onClick handle from the required props.
The logo click should refresh only the content and not the entire site.
Right now we are saying every browser wallet is metamask. We should detect this fact and correctly show to user the name and ideally icon of the wallet they are using (at least for the most known wallets)
Create footer component in RIF-UI. Will be used in the Marketplace and other projects
The Typography
component does not add much value to the Material-UI Typography component and leads to confusion when using both libraries.
Modify the Marketplace Header component based on the provided designs in the US
Describe the bug
When a component that uses MUI styles is added as a sibling to the RUI Footer some of the components' styles are being overwritten by MUI default styles.
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
A clear and concise description of what you expected to happen.
The effects of the bug have been captured in https://rsklabs.atlassian.net/browse/RMKT-512?focusedCommentId=19495 during QA review.
Remove the components that only wrap Material-UI components and do nothing else
The web3 provider should give more information like chainId
. It should also expose the name not only as a string but as an enum.
https://github.com/rsksmart/rif-ui/blob/master/src/providers/Web3Provider.tsx#L39
The page no longer reloads in many wallet when switching between accounts in the same wallet (e.g. metamask, nifty). This should be detected and the Web3Provider should appropriately provide new information.
Provide components with the filter options as in marketplace-ui
Provide FAQSection and FAQPage components
As pointed by @julianmrodri in rsksmart/rif-marketplace-ui#452, we need to add support to Metamask as it will stop injecting window.web3
property in the browsers.
Problem
When the provider is set and the user clicks on the Account component, we still show the set provider options.
Solution
We should show something relevant in these situations:
Implementation idea
Our Web3Provider could have ConnectionStatus
prop on the state that would tell the components how to act depending on the situation
Description
We need to provide a HOC like WithSpinner
as in marketplace-ui
We are exporting the object fonts.weight
in the theme.ts
file and it's not connected to the Typography weights of the theme.
Link the font weights exported with the ones being used by the Typography component in the theme definition.
Description
There are some places where the Account
component is used that would be good to have the modal opened when it renders.
Solution
By exposing that prop we would be able to open the modal at the beginning if needed.
We need to update update the black and blue
and full white
logos
Add Unit Testing to the RIF UI library
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.