refactor: replaces domain item with shorten text tooltip moved to rif-ui

rsksmart · Aug 14, 2020 · 4acfb66 · 4acfb66
1 parent 7159d63
commit 4acfb66
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/molecules/DomainNameItem.tsx b/src/components/molecules/DomainNameItem.tsx
diff --git a/src/components/molecules/FAQSection.tsx b/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,
 }) => {

diff --git a/src/components/molecules/ShortenTextTooltip.tsx b/src/components/molecules/ShortenTextTooltip.tsx
diff --git a/src/components/organisms/rns/sell/MyDomains.tsx b/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 RnsDomainsStore from 'store/Market/rns/DomainsStore'
 import { OrderPayload, RefreshPayload } from 'store/Market/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 = {

diff --git a/src/components/organisms/rns/sell/MyOffers.tsx b/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 MarketStore from 'store/Market/MarketStore'
 import RnsDomainsStore from 'store/Market/rns/DomainsStore'
 import { OrderPayload } from 'store/Market/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 = {

diff --git a/src/components/organisms/rns/sell/SoldDomains.tsx b/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 MarketStore from 'store/Market/MarketStore'
 import RnsSoldStore, { RnsSoldStoreProps } from 'store/Market/rns/SoldStore'
+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 = {

diff --git a/src/components/pages/rns/buy/DomainOffersCheckoutPage.tsx b/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 = {

diff --git a/src/components/pages/rns/buy/DomainOffersPage.tsx b/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 = {

diff --git a/src/components/pages/rns/cancel/CancelDomainCheckoutPage.tsx b/src/components/pages/rns/cancel/CancelDomainCheckoutPage.tsx
@@ -3,10 +3,10 @@ import {
 } from '@material-ui/core'
 import {
   Button, colors, shortenString, Typography, Web3Store,
+  ShortenTextTooltip,
 } from '@rsksmart/rif-ui'
 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'
@@ -135,7 +135,7 @@ const CancelDomainCheckoutPage = () => {
   const PriceCell = <CombinedPriceCell {...priceCellProps} />
 
   const displayName = name
-    ? <DomainNameItem value={name} />
+    ? <ShortenTextTooltip value={name} maxLength={30} />
     : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
   const details = {

diff --git a/src/components/pages/rns/sell/DomainCheckoutPage.tsx b/src/components/pages/rns/sell/DomainCheckoutPage.tsx
@@ -3,11 +3,11 @@ import {
 } from '@material-ui/core'
 import {
   Button, colors, shortenString, UnitsInput, validatedNumber, Web3Store,
+  ShortenTextTooltip,
 } from '@rsksmart/rif-ui'
 import PriceItem from 'components/atoms/PriceItem'
 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'
@@ -258,7 +258,7 @@ const DomainsCheckoutPage: FC<{}> = () => {
   const submitDisabled = () => Number(price) <= 0
 
   const displayName = name
-    ? <DomainNameItem value={name} />
+    ? <ShortenTextTooltip value={name} maxLength={30} />
     : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
   const listingNameTitle = name