Rif ui extraction

package.json

@@ -35,6 +35,7 @@
     "@material-ui/core": "^4.9.7",
     "@material-ui/icons": "^4.9.1",
     "@rsksmart/rif-marketplace-nfts": "github:vojtechsimetka/rif-marketplace-nfts",
+    "@rsksmart/rif-ui": "github:rsksmart/rif-ui",
     "@truffle/contract": "^4.2.1",
     "formik": "^2.1.4",
     "react": "^16.13.0",
@@ -43,7 +44,6 @@
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
-    "reactrangeslider": "^3.0.6",
     "socket.io-client": "^2.3.0",
     "typescript": "^3.7.4",
     "web3": "^1.2.6"

src/App.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import { theme, Web3Provider } from '@rsksmart/rif-ui';
 import { AppStoreProvider } from 'store/App/AppStore';
 import { MarketStoreProvider } from 'store/Market/MarketStore';
-import Web3Provider from 'rifui/providers/Web3Provider';
-import { theme } from 'rifui/theme';
-import { ThemeProvider, Theme, makeStyles } from '@material-ui/core/styles';
 import Footer from 'components/organisms/Footer';
 import Header from 'components/organisms/Header';
 import Routes from 'components/Routes';
+// TODO: remove the dist path once it's fixed in the library
+import '@rsksmart/rif-ui/dist/index.css';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   router: {
     minHeight: '100vh',
     display: 'flex',

src/components/atoms/Icon.tsx

@@ -1,19 +1,16 @@
 import React, { FC } from 'react';
-import rifDir from 'rifui/assets/images/rifDir.png';
-import rifCom from 'rifui/assets/images/rifCom.png';
-import rifGat from 'rifui/assets/images/rifGat.png';
-import rifMar from 'rifui/assets/images/rifMar.png';
-import rifPay from 'rifui/assets/images/rifPay.png';
-import rifSto from 'rifui/assets/images/rifSto.png';
+import {
+  rifDirImg, rifComImg, rifGatImg, rifMarImg, rifPayImg, rifStoImg
+} from '@rsksmart/rif-ui'
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 export const Icons = {
-  DOMAINS: rifDir,
-  COMMUNICATIONS: rifCom,
-  GATEWAY: rifGat,
-  MARKETPLACE: rifMar,
-  PAYMENTS: rifPay,
-  STORAGE: rifSto,
+  DOMAINS: rifDirImg,
+  COMMUNICATIONS: rifComImg,
+  GATEWAY: rifGatImg,
+  MARKETPLACE: rifMarImg,
+  PAYMENTS: rifPayImg,
+  STORAGE: rifStoImg,
 };
 
 export interface IconProps {

src/components/atoms/Login.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Account } from 'rifui';
-import { IButtonProps } from 'rifui/components/atoms/buttons/Button';
-import Web3Provider from 'rifui/providers/Web3Provider';
+import { Account, Web3Provider } from '@rsksmart/rif-ui';
+import { ButtonProps } from '@rsksmart/rif-ui/dist/components/atoms/buttons/Button';
 
-const Login = (props: IButtonProps) => (
+const Login = (props: ButtonProps) => (
     <Web3Provider.Consumer>
         {({ state: { web3, networkName, account }, actions: { setProvider } }) => (
             <Account

src/components/atoms/PriceItem.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { withStyles } from '@material-ui/core';
-import { colors, fonts } from 'rifui/theme';
+import { colors, fonts } from '@rsksmart/rif-ui';
 
 interface StylesProps {
   classes: Record<"crypto" | "fiat", string>;

src/components/molecules/IconedItem.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import Icon, { IconProps } from 'components/atoms/Icon';
-import { Button } from 'rifui';
+import { Button } from '@rsksmart/rif-ui';
 import { NavLink } from 'react-router-dom';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 

src/components/molecules/JobDoneBox.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import tickWide from 'rifui/assets/images/tickWide.svg';
-import { colors } from 'rifui/theme';
+import { colors, tickWideImg } from '@rsksmart/rif-ui';
 
 export interface JobDoneBoxProps {
     text: string,
@@ -30,7 +29,7 @@ const JobDoneBox: FC<JobDoneBoxProps> = ({ text }) => {
 
     return (
         <div className={classes.body}>
-            <img src={tickWide} alt='done' />
+            <img src={tickWideImg} alt='done' />
             <p>{text}</p>
         </div>
     );

src/components/molecules/ReturnButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Button } from 'rifui';
+import { Button } from '@rsksmart/rif-ui';
 import { useHistory } from 'react-router';
 
 export interface ReturnButtonProps {

src/components/molecules/table/SelectRowButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { Button } from 'rifui';
+import { Button } from '@rsksmart/rif-ui';
 
 export interface SelectRowButtonProps {
   className?: string

src/components/organisms/Header.tsx

@@ -1,13 +1,14 @@
+import React from 'react';
+import { ROUTES } from 'routes';
+import { Header as RUIHeader } from '@rsksmart/rif-ui';
+// TODO: remove the dist path once it's ready in the library
+import { HeaderItemProps } from '@rsksmart/rif-ui/dist/components/organisms/Header';
 import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
 import DataUsageIcon from '@material-ui/icons/DataUsage';
 import ForumIcon from '@material-ui/icons/Forum';
 import PeopleIcon from '@material-ui/icons/People';
 import StorageIcon from '@material-ui/icons/Storage';
 import Login from 'components/atoms/Login';
-import React from 'react';
-import { Header as RUIHeader } from 'rifui';
-import { HeaderItemProps } from 'rifui/components/organisms/Header';
-import { ROUTES } from 'routes';
 
 const Header = () => {
   const headerItems: HeaderItemProps[] = [

src/components/organisms/ServiceCategories.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { ROUTES } from 'routes';
-import { Typography } from 'rifui';
+import { Typography } from '@rsksmart/rif-ui';
 import IconedItem, { IconedItemProps } from 'components/molecules/IconedItem';
 import { Icons } from 'components/atoms/Icon';
 

src/components/organisms/TransactionInProgressPanel.tsx

@@ -1,7 +1,6 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import React, { FC } from 'react';
-import CircularProgress from 'rifui/components/atoms/CircularProgress';
-import { Typography } from 'rifui';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import { CircularProgress, Typography } from '@rsksmart/rif-ui';
 
 export interface TransactionInProgressPanelProps {
   text: string

src/components/organisms/filters/RangeFilter.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
-import { Accordion, RangeSliderWithInputs } from 'rifui';
-import { RangeSliderWithInputsProps } from 'rifui/components/molecules/RangeSliderWithInputs';
+import { Accordion, RangeSliderWithInputs } from '@rsksmart/rif-ui';
+import { RangeSliderWithInputsProps } from '@rsksmart/rif-ui/dist/components/molecules/RangeSliderWithInputs';
 
 export interface RangeFilterProps extends RangeSliderWithInputsProps {
   className?: string

src/components/organisms/filters/SearchFilter.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useState } from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core';
 import {
+  colors,
   InputAdornment,
   TextField
-} from 'rifui';
-import { Search } from 'rifui/icons'
-import { colors } from 'rifui/theme';
+} from '@rsksmart/rif-ui';
+import Search from '@material-ui/icons/Search';
 
 export interface SearchFilterProps {
   onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void

src/components/organisms/filters/SelectFilter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion, FilterCheckboxCard } from 'rifui';
-import { LabeledCheckboxProps } from 'rifui/components/molecules/LabeledCheckbox';
+import { Accordion, FilterCheckboxCard } from '@rsksmart/rif-ui';
+import { LabeledCheckboxProps } from '@rsksmart/rif-ui/dist/components/molecules/LabeledCheckbox';
 
 export interface SelectFilterProps {
   className?: string;

src/components/pages/NotFound.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography } from 'rifui';
+import { Typography } from '@rsksmart/rif-ui';
 
 export default () =>
   <Typography>

src/components/pages/rns/buy/DomainOffersCheckoutPage.tsx

@@ -7,11 +7,7 @@ import TransactionInProgressPanel from 'components/organisms/TransactionInProgre
 import CheckoutPageTemplate from 'components/templates/CheckoutPageTemplate';
 import React, { useContext, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Button, Table, TableBody, TableCell, TableRow, Typography } from 'rifui';
-import { Card, CardContent, CardHeader } from 'rifui/components/atoms/card';
-import { Web3Store } from 'rifui/providers/Web3Provider';
-import { colors } from 'rifui/theme';
-import { shortenAddress } from 'rifui/utils';
+import { Button, Card, CardContent, CardHeader, colors, shortenAddress, Table, TableBody, TableCell, TableRow, Typography, Web3Store } from '@rsksmart/rif-ui';
 import { ROUTES } from 'routes';
 import { MARKET_ACTIONS } from 'store/Market/marketActions';
 import MarketStore from 'store/Market/MarketStore';

src/components/pages/rns/buy/DomainOffersPage.tsx

@@ -9,7 +9,7 @@ import { useHistory } from 'react-router';
 import { ROUTES } from 'routes';
 import { MARKET_ACTIONS } from 'store/Market/marketActions';
 import MarketStore, { TxType } from 'store/Market/MarketStore';
-import { Web3Store } from 'rifui/providers/Web3Provider';
+import { Web3Store } from '@rsksmart/rif-ui';
 
 const LISTING_TYPE = MarketListingTypes.DOMAIN_OFFERS;
 const TX_TYPE = TxType.BUY;

src/components/pages/rns/buy/DomainPurchased.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext, useEffect } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { Button } from 'rifui';
+import { Button } from '@rsksmart/rif-ui';
 import JobDoneBox from 'components/molecules/JobDoneBox';
 import TxCompletePageTemplate from 'components/templates/TxCompletePageTemplate';
 import { useHistory } from 'react-router';

src/components/pages/rns/sell/DomainCheckoutPage.tsx

@@ -1,16 +1,13 @@
+import React, { useContext, useEffect, useState } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import ERC721 from '@rsksmart/rif-marketplace-nfts/build/contracts/ERC721.json';
 import ERC721SimplePlacements from '@rsksmart/rif-marketplace-nfts/build/contracts/ERC721SimplePlacements.json';
 import PriceItem from 'components/atoms/PriceItem';
 import CombinedPriceCell from 'components/molecules/CombinedPriceCell';
 import TransactionInProgressPanel from 'components/organisms/TransactionInProgressPanel';
 import CheckoutPageTemplate from 'components/templates/CheckoutPageTemplate';
-import React, { useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Button, MenuItem, Select, Table, TableBody, TableCell, TableRow, UnitsInput } from 'rifui';
-import { Card, CardActions, CardContent, CardHeader } from 'rifui/components/atoms/card';
-import { Web3Store } from 'rifui/providers/Web3Provider';
-import { colors } from 'rifui/theme';
+import { Button, Card, CardActions, CardContent, CardHeader, colors, MenuItem, Select, Table, TableBody, TableCell, TableRow, UnitsInput, Web3Store } from '@rsksmart/rif-ui';
 import { ROUTES } from 'routes';
 import { MARKET_ACTIONS } from 'store/Market/marketActions';
 import MarketStore from 'store/Market/MarketStore';

src/components/pages/rns/sell/DomainListed.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext, useEffect } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { Button } from 'rifui';
+import { Button } from '@rsksmart/rif-ui';
 import JobDoneBox from 'components/molecules/JobDoneBox';
 import TxCompletePageTemplate from 'components/templates/TxCompletePageTemplate';
 import { useHistory } from 'react-router';

src/components/pages/rns/sell/MyDomainsPage.tsx

@@ -5,7 +5,7 @@ import MarketPageTemplate from 'components/templates/MarketPageTemplate';
 import { MarketListingTypes } from 'models/Market';
 import React, { useContext, useEffect } from 'react';
 import { useHistory } from 'react-router';
-import { Web3Store } from 'rifui/providers/Web3Provider';
+import { Web3Store } from '@rsksmart/rif-ui';
 import { ROUTES } from 'routes';
 import { MARKET_ACTIONS } from 'store/Market/marketActions';
 import MarketStore, { TxType } from 'store/Market/MarketStore';

src/components/templates/CheckoutPageTemplate.tsx

@@ -2,7 +2,7 @@ import React, { FC, useContext } from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core';
 import ReturnButton, { ReturnButtonProps } from 'components/molecules/ReturnButton';
 import MarketStore from 'store/Market/MarketStore';
-import { Grid } from 'rifui';
+import { Grid } from '@rsksmart/rif-ui';
 
 export interface CheckoutPageTemplateProps {
   className?: string

src/components/templates/LandingPageTemplate.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import ServiceCategories from 'components/organisms/ServiceCategories';
 import PageTemplate from './PageTemplate';
-import { Typography } from 'rifui';
+import { Typography } from '@rsksmart/rif-ui';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 export interface LandingPageTemplateProps { }

src/components/templates/MarketPageTemplate.tsx

@@ -2,9 +2,8 @@ import React, { FC, useContext } from 'react';
 import MarketFilter from 'components/templates/marketplace/MarketFilter';
 import Marketplace, { TableHeaders } from 'components/templates/marketplace/Marketplace';
 import { MarketItemType } from 'models/Market';
-import { Grid } from 'rifui';
 import { makeStyles, Theme } from '@material-ui/core/styles';
-import { Web3Store } from 'rifui/providers/Web3Provider';
+import { Grid, Web3Store } from '@rsksmart/rif-ui';
 
 export interface MarketPageTemplateProps {
   className: string;
@@ -25,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     [theme.breakpoints.down('md')]: {
       marginTop: theme.spacing(3)
     }
+  },
+  filtersContainer: {
+    width: '100%',
   }
 }));
 
@@ -45,7 +47,7 @@ const MarketPageTemplate: FC<MarketPageTemplateProps> = ({
       {accountRequired && !account && <p>Please sign in to your wallet</p>}
       {(!accountRequired || account) &&
         <>
-          <Grid item sm={12} md={3}>
+          <Grid className={classes.filtersContainer} item sm={12} md={3}>
             <MarketFilter>{filterItems}</MarketFilter>
           </Grid>
           <Grid className={classes.resultsContainer} item sm={12} md={9}>

src/components/templates/TxCompletePageTemplate.tsx

@@ -1,8 +1,8 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import doneImg from 'rifui/assets/images/done_img.svg';
 import React, { FC } from 'react';
+import { createStyles, makeStyles } from '@material-ui/core';
+import { doneImg } from '@rsksmart/rif-ui'
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
     createStyles({
         body: {
             display: 'flex',

src/components/templates/marketplace/MarketFilter.tsx

@@ -1,11 +1,10 @@
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import React, { FC, useContext } from 'react';
 import { useHistory } from 'react-router';
-import { Grid, SwitchTabs, Typography } from 'rifui';
+import { colors, Grid, SwitchTabs, Typography } from '@rsksmart/rif-ui';
 import { ROUTES } from 'routes';
 import { MARKET_ACTIONS } from 'store/Market/marketActions';
 import MarketStore, { TxType } from 'store/Market/MarketStore';
-import { colors } from 'rifui/theme';
 
 export interface MarketFilterProps { }
 

src/components/templates/marketplace/Marketplace.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
 import { makeStyles, Theme } from '@material-ui/core';
 import { MarketItemType } from 'models/Market';
-import { Table, TableHead, TableRow, TableCell, TableBody } from 'rifui';
-import { colors, fonts } from 'rifui/theme';
+import { colors, fonts, Table, TableHead, TableRow, TableCell, TableBody } from '@rsksmart/rif-ui';
 
 export interface TableHeaders {
   [itemName: string]: string | React.ElementType