feature: asset metadata in tooltip

Adds the description, name, and ticker
cardano-foundation · Mar 24, 2021 · e44a98d · e44a98d
1 parent 2b5ca7c
commit e44a98d
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 33 deletions.
diff --git a/source/features/address/api/transformers.ts b/source/features/address/api/transformers.ts
@@ -1,10 +1,12 @@
 import { Currency } from 'cardano-js';
 import {
+  Asset,
   SearchForPaymentAddressQuery,
-  SearchForStakeAddressQuery, Token,
+  SearchForStakeAddressQuery,
 } from '../../../../generated/typings/graphql-schema';
 import { sortTokensDesc } from '../../../lib/arrays';
 import { isDefined } from '../../../lib/types';
+import { assetTransformer } from '../../assets/api/transformers';
 import { IPaymentAddressSummary, IStakeAddressSummary } from '../types';
 
 export const paymentAddressDetailTransformer = (
@@ -22,9 +24,7 @@ export const paymentAddressDetailTransformer = (
         .filter(({ asset }) => asset.assetName !== 'ada')
         .map((t) => ({
           ...t,
-          asset: {
-            fingerprint: t.asset.fingerprint,
-          }
+          asset: assetTransformer(t.asset as Asset)
         }))
         .sort(sortTokensDesc) || [],
     transactionsCount:

diff --git a/source/features/assets/api/transformers.ts b/source/features/assets/api/transformers.ts
@@ -0,0 +1,15 @@
+import { Asset } from '../../../../generated/typings/graphql-schema';
+import { IAsset } from '../../transactions/types';
+
+export const assetTransformer = (
+  asset: Asset
+): IAsset => {
+  return {
+    ...asset,
+    assetName: asset.assetName as string,
+    description: asset.description ? asset.description as string : undefined,
+    fingerprint: asset.fingerprint,
+    name: asset.name ? asset.name as string : undefined,
+    ticker: asset.ticker ? asset.ticker as string : undefined,
+  }
+}
diff --git a/source/features/search/api/searchForPaymentAddress.graphql b/source/features/search/api/searchForPaymentAddress.graphql
@@ -27,8 +27,11 @@ query searchForPaymentAddress(
             assetBalances {
                 asset {
                   assetName
+                  description
                   fingerprint
+                  name
                   policyId
+                  ticker
                 }
                 quantity
             }

diff --git a/source/features/transactions/api/TransactionDetails.graphql b/source/features/transactions/api/TransactionDetails.graphql
@@ -12,8 +12,11 @@ fragment TransactionDetails on Transaction {
   mint {
     asset {
       assetName
+      description
       fingerprint
+      name
       policyId
+      ticker
     }
     quantity
   }
@@ -25,8 +28,11 @@ fragment TransactionDetails on Transaction {
     tokens {
       asset {
         assetName
+        description
         fingerprint
+        name
         policyId
+        ticker
       }
       quantity
     }
@@ -42,8 +48,11 @@ fragment TransactionDetails on Transaction {
     tokens {
       asset {
         assetName
+        description
         fingerprint
+        name
         policyId
+        ticker
       }
       quantity
     }

diff --git a/source/features/transactions/api/transformers.ts b/source/features/transactions/api/transformers.ts
@@ -1,7 +1,9 @@
+import BigNumber from 'bignumber.js';
 import { Currency } from 'cardano-js';
-import { TransactionDetailsFragment } from '../../../../generated/typings/graphql-schema';
+import { Asset, TransactionDetailsFragment } from '../../../../generated/typings/graphql-schema';
 import { sortTokensDesc } from '../../../lib/arrays';
 import { isDefined } from '../../../lib/types';
+import { assetTransformer } from '../../assets/api/transformers';
 import { ITransactionDetails } from '../types';
 
 export const transactionDetailsTransformer = (
@@ -14,12 +16,10 @@ export const transactionDetailsTransformer = (
   },
   burn:
     tx.mint
-      ?.filter((m) => m.quantity < '0')
+      ?.filter((m) => new BigNumber(m.quantity).isLessThan(0))
       .map((t) => ({
         ...t,
-        asset: {
-          fingerprint: t.asset.fingerprint
-        },
+        asset: assetTransformer(t.asset as Asset),
         quantity: t.quantity.substring(1),
       }))
       .sort(sortTokensDesc) || [],
@@ -33,9 +33,7 @@ export const transactionDetailsTransformer = (
     tokens: i.tokens
       .map((t) => ({
         ...t,
-        asset: {
-          fingerprint: t.asset.fingerprint
-        }
+        asset: assetTransformer(t.asset as Asset)
       }))
       .sort(sortTokensDesc),
     value: Currency.Util.lovelacesToAda(i.value),
@@ -46,22 +44,18 @@ export const transactionDetailsTransformer = (
   })),
   mint:
     tx.mint
-      ?.filter((m) => m.quantity > '0')
+      ?.filter((m) => new BigNumber(m.quantity).isGreaterThan(0))
       .map((t) => ({
         ...t,
-        asset: {
-          fingerprint: t.asset.fingerprint
-        }
+        asset: assetTransformer(t.asset as Asset)
       }))
       .sort(sortTokensDesc) || [],
   outputs: tx.outputs?.filter(isDefined).map((i) => ({
     ...i,
     tokens: i.tokens
       .map((t) => ({
         ...t,
-        asset: {
-          fingerprint: t.asset.fingerprint
-        }
+        asset: assetTransformer(t.asset as Asset)
       }))
       .sort(sortTokensDesc),
     value: Currency.Util.lovelacesToAda(i.value),

diff --git a/source/features/transactions/components/TransactionTokenList.module.scss b/source/features/transactions/components/TransactionTokenList.module.scss
@@ -35,7 +35,6 @@ $wide-breakpoint: 768px;
 .tooltip {
   word-break: break-all;
   font-size: 10px;
-  font-weight: 600;
   color: var(--solid-text-color);
   line-height: calc(10px + 10px);
   letter-spacing: 1.3px;

diff --git a/source/features/transactions/components/TransactionTokenList.tsx b/source/features/transactions/components/TransactionTokenList.tsx
@@ -8,60 +8,85 @@ import styles from './TransactionTokenList.module.scss';
 const TokenList = (props: { tokens: IToken[]; }) => {
   const [tooltipPosition, setTooltipPosition] = useState({});
   const containerRef = useRef<HTMLDivElement>(null);
-  const [fingerprint, setFingerprint] = useState('test');
+  const [asset, setAsset] = useState<IAsset>({
+    assetName: '',
+    description: '',
+    fingerprint: '',
+    policyId: ''
+  });
   const [isVisible, setIsVisible] = useState(false);
 
   const handleMouseOver = (
     event: React.MouseEvent<HTMLSpanElement, MouseEvent>,
-    value: IAsset['fingerprint']
+    item: IAsset
   ) => {
     const { offsetLeft } = event.currentTarget;
     setTooltipPosition((prevState) => ({
       ...prevState,
       left: offsetLeft + 120 * 0.75,
       top: containerRef.current?.offsetTop! + 75,
     }));
-    setFingerprint(value);
+    setAsset(item);
     setIsVisible(true);
   };
 
   return (
     <>
       {isVisible && (
         <div style={tooltipPosition} className={styles.tooltip}>
-          <ContentContainer label={fingerprint} />
+          <ContentContainer
+            label={asset.fingerprint}
+            body={
+              <ul>
+                <li><strong>Ticker</strong>: {asset.ticker}</li>
+                <li><strong>Name</strong>: {asset.name}</li>
+                <li><strong>Description</strong>: {asset.description}</li>
+                <li><strong>Policy ID</strong>: {asset.policyId}</li>
+                <li><strong>Asset Name</strong>: {asset.assetName}</li>
+            </ul>}
+          />
         </div>
       )}
 
       {props.tokens.length > TOKEN_LENGTH_TO_SCROLL ? (
         <div ref={containerRef} className={styles.scrollableTokenList}>
           {props.tokens.map((t) => (
             <span
-              onMouseEnter={(event) => handleMouseOver(event, t.asset.fingerprint)}
+              onMouseEnter={(event) => handleMouseOver(event, t.asset)}
               onMouseOut={() => {
                 setIsVisible(false);
               }}
               className={styles.token}
             >
-              {`${t.quantity} ${addEllipsis(t.asset.fingerprint, 9, 4)}`}{' '}
+              {`${t.quantity} ${t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)}`}{' '}
             </span>
           ))}
         </div>
       ) : (
         <div ref={containerRef} className={styles.tokenList}>
           {props.tokens.map((t) => (
-            <span className={styles.token}>
+              <span className={styles.token}>
               <Tooltip
                 content={
                   <ContentContainer
                     label={t.asset.fingerprint}
+                    body={<>
+                      <ul>
+                        <li><strong>Ticker</strong>: {t.asset.ticker}</li>
+                        <li><strong>Name</strong>: {t.asset.name}</li>
+                        <li><strong>Description</strong>: {t.asset.description}</li>
+                        <li><strong>Policy ID</strong>: {t.asset.policyId}</li>
+                        <li><strong>Asset Name</strong>: {t.asset.assetName}</li>
+                      </ul>
+                    </>}
                   />
                 }
               >
-                {`${t.quantity} ${addEllipsis(t.asset.fingerprint, 9, 4)}`}
+                {`${t.quantity} ${t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)}`}
               </Tooltip>
             </span>
-          ))}
+            )
+          )}
         </div>
       )}
     </>

diff --git a/source/features/transactions/types.ts b/source/features/transactions/types.ts
@@ -1,5 +1,10 @@
 export interface IAsset {
+  assetName: string;
+  description?: string;
   fingerprint: string;
+  name?: string;
+  policyId: string;
+  ticker?: string;
 }
 
 export interface IToken {

diff --git a/source/widgets/tooltip/Tooltip.module.scss b/source/widgets/tooltip/Tooltip.module.scss
@@ -12,7 +12,7 @@
   position: relative;
 }
 .tooltip .translateCenter {
-  @include text(10px, 600, var(--solid-text-color), 1.3px);
+  @include text(11px, 300, var(--solid-text-color), 1.3px);
   visibility: hidden;
   text-align: left;
   padding: 5px 10px;
@@ -24,9 +24,10 @@
   transform: translate(0%, -100%);
   z-index: 9999000;
   opacity: 1 !important;
-  width: 200px;
+  width: 300px;
   top: -5px;
   left: 100px;
+  transition-delay: 0.2s;
 }
 
 .tooltip:hover .translateCenter {
@@ -39,6 +40,5 @@
   }
   .body {
     color: var(--info-text-color);
-    font-weight: 400;
   }
 }
diff --git a/source/widgets/tooltip/Tooltip.tsx b/source/widgets/tooltip/Tooltip.tsx
@@ -8,7 +8,7 @@ interface ITooltipProps {
   style?: object;
 }
 
-export const ContentContainer = (props: { label: string; body?: string }) => (
+export const ContentContainer = (props: { label: string; body?: React.ReactNode }) => (
   <div className={styles.contentContainer}>
     <div className={styles.label}>{props.label}</div>
     { props.body ?? <div className={styles.body}>{props.body}</div> }