fix(storage): fixes visual defects + buggy mapping

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rif-marketplace-ui",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "RIF Marketplace provides a digital catalogue with a wide range of decentralised services.",
   "keywords": [
     "RIF",

src/components/molecules/RifAddress.tsx

@@ -1,15 +1,18 @@
 import Typography, { TypographyProps } from '@material-ui/core/Typography'
-import { CopyTextTooltip } from '@rsksmart/rif-ui'
+import { CopyTextTooltip, shortenString } from '@rsksmart/rif-ui'
 import React, { FC } from 'react'
 import { shortChecksumAddress } from 'utils/stringUtils'
 
 export interface RifAddressProps extends TypographyProps {
   pretext?: string
   value: string
+  disableChecksum?: boolean
 }
 
-const RifAddress: FC<RifAddressProps> = ({ pretext, value, ...rest }) => {
-  const address = shortChecksumAddress(value)
+const RifAddress: FC<RifAddressProps> = ({
+  pretext, value, disableChecksum, ...rest
+}) => {
+  const address = disableChecksum ? shortenString(value) : shortChecksumAddress(value)
 
   const displayElement = (
     <Typography {...rest}>

src/components/molecules/index.ts

@@ -9,7 +9,7 @@ export {
   CombinedPriceCell,
   IconedItem,
   ReturnButton,
-  RifAddress as AddressItem,
+  RifAddress,
   JobDoneBox,
   SelectRowButton,
 }

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

@@ -1,4 +1,4 @@
-import { AddressItem, SelectRowButton } from 'components/molecules'
+import { RifAddress, SelectRowButton } from 'components/molecules'
 import DomainFilters from 'components/organisms/filters/DomainFilters'
 import MarketPageTemplate from 'components/templates/MarketPageTemplate'
 import { RnsDomain } from 'models/marketItems/DomainItem'
@@ -70,7 +70,7 @@ const MyDomains: FC = () => {
             maxLength={30}
           />
         )
-        : <AddressItem pretext="Unknown RNS:" value={tokenId} />
+        : <RifAddress pretext="Unknown RNS:" value={tokenId} />
 
       const isProcessingConfs = pendingConfs.some(
         ({ contractActionData }) => (

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

@@ -1,6 +1,6 @@
 import IconButton from '@material-ui/core/IconButton'
 import ClearIcon from '@material-ui/icons/Clear'
-import { AddressItem, CombinedPriceCell, SelectRowButton } from 'components/molecules'
+import { RifAddress, CombinedPriceCell, SelectRowButton } from 'components/molecules'
 import DomainFilters from 'components/organisms/filters/DomainFilters'
 import MarketPageTemplate from 'components/templates/MarketPageTemplate'
 import { RnsDomain } from 'models/marketItems/DomainItem'
@@ -76,7 +76,7 @@ const MyOffers: FC = () => {
             maxLength={30}
           />
         )
-        : <AddressItem pretext="Unknown RNS:" value={tokenId} />
+        : <RifAddress pretext="Unknown RNS:" value={tokenId} />
 
       const isProcessingConfs = pendingConfs.some(
         ({ contractActionData }) => (

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

@@ -1,4 +1,4 @@
-import { AddressItem, CombinedPriceCell } from 'components/molecules'
+import { RifAddress, CombinedPriceCell } from 'components/molecules'
 import DomainFilters from 'components/organisms/filters/DomainFilters'
 import MarketPageTemplate from 'components/templates/MarketPageTemplate'
 import { RnsSoldDomain } from 'models/marketItems/DomainItem'
@@ -52,12 +52,12 @@ const SoldDomains: FC<{}> = () => {
       const pseudoResolvedName = name && `${name}.rsk`
       const displayDomainName = domainName || pseudoResolvedName
         ? <ShortenTextTooltip value={domainName || pseudoResolvedName as string} maxLength={30} />
-        : <AddressItem pretext="Unknown RNS:" value={tokenId} />
+        : <RifAddress pretext="Unknown RNS:" value={tokenId} />
 
       const displayItem = {
         id,
         domainName: displayDomainName,
-        buyer: <AddressItem value={buyer} />,
+        buyer: <RifAddress value={buyer} />,
         currency: displayName,
         sellingPrice: <CombinedPriceCell
           price={price.toString()}

src/components/organisms/storage/agreements/DetailsModal.tsx

@@ -7,7 +7,6 @@ import {
 } from '@rsksmart/rif-ui'
 /* eslint-disable-next-line import/no-unresolved */
 import { ModalProps } from '@rsksmart/rif-ui/dist/components/atoms/modal/Modal'
-import GridColumn from 'components/atoms/GridColumn'
 import GridItem from 'components/atoms/GridItem'
 import RifCard from 'components/organisms/RifCard'
 import { AgreementCustomerView, AgreementProviderView } from 'components/organisms/storage/agreements/utils'
@@ -35,7 +34,9 @@ const useModalStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-const DetailsModal: FC<DetailsModalProps> = ({ modalProps, itemDetails, actions }) => {
+const DetailsModal: FC<DetailsModalProps> = ({
+  modalProps, itemDetails, actions,
+}) => {
   const modalCardStyleClasses = useModalStyles()
   return (
     <Modal
@@ -55,8 +56,11 @@ const DetailsModal: FC<DetailsModalProps> = ({ modalProps, itemDetails, actions
             <ModalHeader className={modalCardStyleClasses.modalWidth}>
               <ModalTitle>{itemDetails?.title}</ModalTitle>
             </ModalHeader>
-            <GridColumn
+            <Grid
+              container
               spacing={2}
+              wrap="nowrap"
+              direction="column"
               className={modalCardStyleClasses.itemDetails}
             >
               {itemDetails ? Object.keys(itemDetails)
@@ -68,6 +72,7 @@ const DetailsModal: FC<DetailsModalProps> = ({ modalProps, itemDetails, actions
                     container
                     direction="row"
                     spacing={6}
+                    wrap="nowrap"
                     xs={12}
                   >
                     <GridItem
@@ -84,7 +89,7 @@ const DetailsModal: FC<DetailsModalProps> = ({ modalProps, itemDetails, actions
                     <GridItem xs={6}>{itemDetails[key]}</GridItem>
                   </Grid>
                 )) : ''}
-            </GridColumn>
+            </Grid>
           </RifCard>
         </ModalBody>
       </>