rif-ui extractions

.gitignore

@@ -21,4 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.vscode/
+.vscode/

src/components/molecules/FAQSection.tsx

@@ -46,9 +46,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-// TODO:
-// - generate random unique ids so we can get rid of the id prop
-// - extract functionality into Accordion component of rif-ui (rif-ui component needs to be more customizable)
 const FAQSection: FC<FAQSectionProps> = ({
   className = '', initiallyExpanded, question, answer, id,
 }) => {

src/components/organisms/rns/sell/MyDomains.tsx

@@ -1,5 +1,4 @@
 import { AddressItem, SelectRowButton } from 'components/molecules'
-import DomainNameItem from 'components/molecules/DomainNameItem'
 import DomainFilters from 'components/organisms/filters/DomainFilters'
 import MarketPageTemplate from 'components/templates/MarketPageTemplate'
 import { RnsDomain } from 'models/marketItems/DomainItem'
@@ -8,6 +7,7 @@ import { useHistory } from 'react-router-dom'
 import ROUTES from 'routes'
 import RnsDomainsContext from 'context/Services/rns/DomainsContext'
 import { OrderPayload, RefreshPayload } from 'context/Services/rns/rnsActions'
+import { ShortenTextTooltip } from '@rsksmart/rif-ui'
 
 const MyDomains: FC<{}> = () => {
   const {
@@ -58,7 +58,7 @@ const MyDomains: FC<{}> = () => {
 
       const pseudoResolvedName = filters.name && (`${filters.name}.rsk`)
       const displayDomainName = name || pseudoResolvedName
-        ? <DomainNameItem value={name || pseudoResolvedName} />
+        ? <ShortenTextTooltip value={name || pseudoResolvedName} maxLength={30} />
         : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
       const displayItem = {

src/components/organisms/rns/sell/MyOffers.tsx

@@ -1,7 +1,6 @@
 import { IconButton } from '@material-ui/core'
 import ClearIcon from '@material-ui/icons/Clear'
 import { AddressItem, CombinedPriceCell, SelectRowButton } from 'components/molecules'
-import DomainNameItem from 'components/molecules/DomainNameItem'
 import DomainFilters from 'components/organisms/filters/DomainFilters'
 import MarketPageTemplate from 'components/templates/MarketPageTemplate'
 import { RnsDomain } from 'models/marketItems/DomainItem'
@@ -11,6 +10,7 @@ import ROUTES from 'routes'
 import MarketContext from 'context/Market/MarketContext'
 import RnsDomainsContext from 'context/Services/rns/DomainsContext'
 import { OrderPayload } from 'context/Services/rns/rnsActions'
+import { ShortenTextTooltip } from '@rsksmart/rif-ui'
 
 const MyOffers: FC<{}> = () => {
   const {
@@ -64,7 +64,7 @@ const MyOffers: FC<{}> = () => {
       const pseudoResolvedName = filters.name && (`${filters.name}.rsk`)
 
       const displayDomainName = name || pseudoResolvedName
-        ? <DomainNameItem value={name || pseudoResolvedName} />
+        ? <ShortenTextTooltip value={name || pseudoResolvedName} maxLength={30} />
         : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
       const displayItem = {

src/components/organisms/rns/sell/SoldDomains.tsx

@@ -1,11 +1,11 @@
 import { AddressItem, CombinedPriceCell } from 'components/molecules'
-import DomainNameItem from 'components/molecules/DomainNameItem'
 import DomainFilters from 'components/organisms/filters/DomainFilters'
 import MarketPageTemplate from 'components/templates/MarketPageTemplate'
 import { RnsSoldDomain } from 'models/marketItems/DomainItem'
 import React, { FC, useContext } from 'react'
 import MarketContext from 'context/Market/MarketContext'
 import RnsSoldContext, { RnsSoldContextProps } from 'context/Services/rns/SoldContext'
+import { ShortenTextTooltip } from '@rsksmart/rif-ui'
 
 const SoldDomains: FC<{}> = () => {
   const {
@@ -50,7 +50,7 @@ const SoldDomains: FC<{}> = () => {
 
       const pseudoResolvedName = name && `${name}.rsk`
       const displayDomainName = domainName || pseudoResolvedName
-        ? <DomainNameItem value={domainName || pseudoResolvedName as string} />
+        ? <ShortenTextTooltip value={domainName || pseudoResolvedName as string} maxLength={30} />
         : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
       const displayItem = {

src/components/organisms/storage/listing/BaseSettings.tsx

@@ -35,7 +35,6 @@ const BaseSettings = () => {
   return (
     <>
       <Grid item xs={12} md={4}>
-        {/* TODO: create new molecule component in rif-ui "SelectInput" */}
         <TextField
           select
           fullWidth
@@ -51,7 +50,6 @@ const BaseSettings = () => {
       <Grid item xs={12} md={4}>
         <Grid alignItems="center" container spacing={1}>
           <Grid item xs={10}>
-            {/* TODO: update UnitsInput component in rif-ui to something like this */}
             <TextField
               required
               fullWidth
@@ -83,7 +81,6 @@ const BaseSettings = () => {
         </Grid>
       </Grid>
       <Grid item xs={12} md={4}>
-        {/* TODO: use again SelectInput from rif-ui */}
         <TextField
           select
           fullWidth

src/components/organisms/storage/listing/EditablePlanItem.tsx

@@ -8,7 +8,9 @@ import { StoragePlanItem } from 'context/Services/storage/interfaces'
 import StorageListingContext from 'context/Services/storage/ListingContext'
 import { EditItemPayload, AddItemPayload } from 'context/Services/storage/listingActions'
 import PlanItemBaseFormTemplate from 'components/templates/storage/listing/PlanItemBaseFormTemplate'
-import TooltipIconButton, { TooltipIconButtonProps } from 'components/molecules/TooltipIconButton'
+import { TooltipIconButton } from '@rsksmart/rif-ui'
+/* eslint-disable-next-line import/no-unresolved */
+import { TooltipIconButtonProps } from '@rsksmart/rif-ui/dist/components/molecules/TooltipIconButton'
 import AddIcon from '@material-ui/icons/Add'
 import SaveIcon from '@material-ui/icons/Save'
 import { priceDisplay } from 'utils/utils'

src/components/organisms/storage/listing/PlanItem.tsx

@@ -5,11 +5,10 @@ import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
 import ClearIcon from '@material-ui/icons/Clear'
 import EditIcon from '@material-ui/icons/Edit'
-import { colors } from '@rsksmart/rif-ui'
+import { colors, TooltipIconButton } from '@rsksmart/rif-ui'
 import { StoragePlanItem, StorageListingContextProps, TimePeriodEnum } from 'context/Services/storage/interfaces'
 import StorageListingContext from 'context/Services/storage/ListingContext'
 import { RemoveItemPayload } from 'context/Services/storage/listingActions'
-import TooltipIconButton from 'components/molecules/TooltipIconButton'
 import PriceItem from 'components/atoms/PriceItem'
 import { priceDisplay } from 'utils/utils'
 

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

@@ -1,7 +1,6 @@
 import Login from 'components/atoms/Login'
 import AddressItem from 'components/molecules/AddressItem'
 import CombinedPriceCell from 'components/molecules/CombinedPriceCell'
-import DomainNameItem from 'components/molecules/DomainNameItem'
 import TransactionInProgressPanel from 'components/organisms/TransactionInProgressPanel'
 import CheckoutPageTemplate from 'components/templates/CheckoutPageTemplate'
 import MarketplaceContract from 'contracts/Marketplace'
@@ -26,6 +25,7 @@ import {
 } from '@material-ui/core'
 import {
   Button, colors, shortenString, Typography, Web3Store,
+  ShortenTextTooltip,
 } from '@rsksmart/rif-ui'
 
 import { parseToBigDecimal } from 'utils/parsers'
@@ -202,7 +202,7 @@ const DomainOffersCheckoutPage: FC<{}> = () => {
   const PriceCell = <CombinedPriceCell {...priceCellProps} />
 
   const displayName = domainName
-    ? <DomainNameItem value={domainName} />
+    ? <ShortenTextTooltip value={domainName} maxLength={30} />
     : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
   const details = {

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

@@ -1,6 +1,5 @@
-import { Web3Store } from '@rsksmart/rif-ui'
+import { Web3Store, ShortenTextTooltip } from '@rsksmart/rif-ui'
 import { AddressItem, CombinedPriceCell, SelectRowButton } from 'components/molecules'
-import DomainNameItem from 'components/molecules/DomainNameItem'
 import DomainOfferFilters from 'components/organisms/filters/DomainOffersFilters'
 import MarketPageTemplate from 'components/templates/MarketPageTemplate'
 import { RnsDomainOffer } from 'models/marketItems/DomainItem'
@@ -84,7 +83,7 @@ const DomainOffersPage: FC = () => {
       const { rate, displayName } = crypto[paymentToken]
 
       const displayDomainName = domainName || pseudoResolvedName
-        ? <DomainNameItem value={domainName || pseudoResolvedName} />
+        ? <ShortenTextTooltip value={domainName || pseudoResolvedName} maxLength={30} />
         : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
       const displayItem = {