Merge pull request #99 from oceanprotocol/feature/truncation

Truncation of long strings

client/package-lock.json

@@ -1410,6 +1410,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-dotdotdot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dotdotdot/-/react-dotdotdot-1.2.0.tgz",
+      "integrity": "sha512-kFOsUbs25AH4CNKOQsT3z7tpEeEAHDMcQ8aIvfuIlfhaH8MxO1UTpBi1rIm94smGWRmpNyVELb/v88gEcC98GQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-helmet": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-5.0.8.tgz",
@@ -12552,7 +12561,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
       "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       },
@@ -12560,8 +12568,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
         }
       }
     },
@@ -16186,6 +16193,14 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-dotdotdot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-dotdotdot/-/react-dotdotdot-1.2.3.tgz",
+      "integrity": "sha512-lYCHCegi76+kqmgqkii/ma2QqsfA1Slf5jTJYWKgnT3uz8EkPaO9hRDPMDEsDHEBua2qOXSxWCHxVf4N740W1w==",
+      "requires": {
+        "object.pick": "^1.3.0"
+      }
+    },
     "react-error-overlay": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.4.tgz",

client/package.json

@@ -22,6 +22,7 @@
     "react": "^16.8.6",
     "react-datepicker": "^2.3.0",
     "react-dom": "^16.8.6",
+    "react-dotdotdot": "^1.2.3",
     "react-ga": "^2.5.7",
     "react-helmet": "^5.2.0",
     "react-markdown": "^4.0.6",
@@ -41,6 +42,7 @@
     "@types/react": "^16.8.13",
     "@types/react-datepicker": "^2.2.1",
     "@types/react-dom": "^16.8.3",
+    "@types/react-dotdotdot": "^1.2.0",
     "@types/react-helmet": "^5.0.8",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-transition-group": "^2.8.0",

client/src/components/molecules/AccountStatus/Popover.module.scss

@@ -46,7 +46,6 @@ $popoverWidth: 18rem;
 }
 
 .address {
-    width: 15rem;
     display: block;
     white-space: nowrap;
     overflow: hidden;

client/src/components/molecules/AccountStatus/Popover.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import Dotdotdot from 'react-dotdotdot'
 import { User } from '../../../context/User'
 import styles from './Popover.module.scss'
 
@@ -40,12 +41,11 @@ export default class Popover extends PureComponent<{
                     <>
                         <div className={styles.popoverInfoline}>
                             {account ? (
-                                <span
-                                    className={styles.address}
-                                    title={account}
-                                >
-                                    {account}
-                                </span>
+                                <Dotdotdot clamp={1}>
+                                    <span className={styles.address}>
+                                        {account}
+                                    </span>
+                                </Dotdotdot>
                             ) : (
                                 <em>No account selected</em>
                             )}

client/src/components/molecules/Asset.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import moment from 'moment'
+import Dotdotdot from 'react-dotdotdot'
 import Markdown from '../../components/atoms/Markdown'
 import styles from './Asset.module.scss'
 import CategoryImage from '../atoms/CategoryImage'
@@ -28,10 +29,10 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
                     <CategoryImage category={base.categories[0]} />
                 )}
                 <h1>{base.name}</h1>
-                <Markdown
-                    className={styles.description}
-                    text={`${base.description.substring(0, 90)}...`}
-                />
+
+                <div className={styles.description}>
+                    <Dotdotdot clamp={3}>{base.description}</Dotdotdot>
+                </div>
 
                 <footer className={styles.assetFooter}>
                     {base.categories && <div>{base.categories[0]}</div>}

client/src/components/organisms/Web3message.module.scss

@@ -10,6 +10,10 @@
     padding-top: $spacer / 2;
     padding-bottom: $spacer / 2;
     text-align: left;
+
+    > div {
+        display: inline-block;
+    }
 }
 
 .account {

client/src/components/organisms/Web3message.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import Dotdotdot from 'react-dotdotdot'
 import Button from '../atoms/Button'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Web3message.module.scss'
@@ -33,10 +34,11 @@ export default class Web3message extends PureComponent {
 
     private haveAccount = (account: string) => (
         <div className={styles.message}>
-            <AccountStatus className={styles.status} /> Connected with account
-            <code className={styles.account} title={account && account}>
-                {`${account && account.substring(0, 20)}...`}
-            </code>
+            <AccountStatus className={styles.status} />
+            <Dotdotdot clamp={1}>
+                Connected with account
+                <code className={styles.account}>{account}</code>
+            </Dotdotdot>
         </div>
     )
 

client/src/routes/Publish/Files/Item.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import styles from './Item.module.scss'
 import filesize from 'filesize'
+import Dotdotdot from 'react-dotdotdot'
 
 const Item = ({
     item,
@@ -15,8 +16,8 @@ const Item = ({
     removeItem(): void
 }) => (
     <li>
-        <a href={item.url} className={styles.linkUrl}>
-            {item.url}
+        <a href={item.url} className={styles.linkUrl} title={item.url}>
+            <Dotdotdot clamp={1}>{item.url}</Dotdotdot>
         </a>
         <div className={styles.details}>
             <span>URL {item.found ? 'confirmed' : ' not confirmed'}</span>