Merge pull request #123 from rayanfer32/fix/copy-text

🐛 fix: Show Ellipsis based on device
rayanfer32 · Mar 5, 2022 · 15608ca · 15608ca
2 parents d2c7946 + 749e015
commit 15608ca
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/src/components/UserAccount/AccountDetail/AccountDetail.jsx b/src/components/UserAccount/AccountDetail/AccountDetail.jsx
@@ -9,10 +9,10 @@ export const AccountDetail = ({ data }) => {
       <div className={styles.details}>
         <section className={styles.details__text}>
           <div>
-            Address: <CopyText value={data.address} ellipsisAfter={99} />{' '}
+            Address: <CopyText value={data.address} />
           </div>
           <div>
-            Owner: <CopyText value={data.owner} ellipsisAfter={99} />
+            Owner: <CopyText value={data.owner} />
           </div>
           <div>
             Created On: {new Date(data.created * 1000).toLocaleString()}

diff --git a/src/components/UserAccount/UserAccount.jsx b/src/components/UserAccount/UserAccount.jsx
@@ -53,7 +53,7 @@ export default function UserAccount({ type, data }) {
       Header: 'TXID',
       accessor: 'txid',
       Cell: (props) => {
-        return <CopyText value={props.value} ellipsisAfter={15} />;
+        return <CopyText value={props.value} />;
       },
     },
     {

diff --git a/src/components/atoms/NE_CopyText/CopyText.jsx b/src/components/atoms/NE_CopyText/CopyText.jsx
@@ -3,8 +3,11 @@ import { useEffect, useState } from 'react';
 import { BiClipboard, BiCopy, BiCheck } from 'react-icons/bi';
 import { middleElipsis } from 'utils/converter';
 import { handleCopy } from 'utils/helper';
+import useWindowSize from 'hooks/useWindowSize/useWindowSize';
 
 export default function CopyText({ value, ellipsisAfter, link, className }) {
+  const windowSize = useWindowSize();
+
   const [toastList, setToastList] = useState([]);
   const [indicator, setIndicator] = useState(false);
 
@@ -38,7 +41,10 @@ export default function CopyText({ value, ellipsisAfter, link, className }) {
             {value &&
               `${
                 value.toString().length > 12
-                  ? middleElipsis(value, ellipsisAfter || 12)
+                  ? middleElipsis(
+                      value,
+                      ellipsisAfter || windowSize.width < 500 ? 5 : 12
+                    )
                   : value
               }`}
           </a>

diff --git a/src/pages/globalnames.jsx b/src/pages/globalnames.jsx
@@ -21,7 +21,7 @@ export default function GlobalNames() {
     {
       Header: 'Address',
       accessor: 'address',
-      Cell: ({ value }) => <CopyText value={value} ellipsisAfter={15} />,
+      Cell: ({ value }) => <CopyText value={value} />,
     },
     {
       Header: 'Name',

diff --git a/src/pages/transactions.js b/src/pages/transactions.js
@@ -61,11 +61,7 @@ export default function Transactions() {
       Header: 'Transaction ID',
       accessor: 'txid',
       Cell: (props) => (
-        <CopyText
-          value={props.value}
-          link={`/scan/${props.value}`}
-          ellipsisAfter={20}
-        />
+        <CopyText value={props.value} link={`/scan/${props.value}`} />
       ),
     },
     {