From e44a98dd0a229601abd527fef77cb85f96d3964d Mon Sep 17 00:00:00 2001 From: Rhys Bartels-Waller Date: Wed, 17 Mar 2021 18:33:49 +1100 Subject: [PATCH] feature: asset metadata in tooltip Adds the description, name, and ticker --- source/features/address/api/transformers.ts | 8 ++-- source/features/assets/api/transformers.ts | 15 +++++++ .../api/searchForPaymentAddress.graphql | 3 ++ .../api/TransactionDetails.graphql | 9 ++++ .../features/transactions/api/transformers.ts | 24 ++++------- .../TransactionTokenList.module.scss | 1 - .../components/TransactionTokenList.tsx | 43 +++++++++++++++---- source/features/transactions/types.ts | 5 +++ source/widgets/tooltip/Tooltip.module.scss | 6 +-- source/widgets/tooltip/Tooltip.tsx | 2 +- 10 files changed, 83 insertions(+), 33 deletions(-) create mode 100644 source/features/assets/api/transformers.ts diff --git a/source/features/address/api/transformers.ts b/source/features/address/api/transformers.ts index cb35965b..ed0d29a9 100644 --- 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 new file mode 100644 index 00000000..98cc8f4d --- /dev/null +++ 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 index 17155a9f..5ec8f402 100644 --- 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 index 1efb8c68..96f019cc 100644 --- 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 index 1626a034..5b916d63 100644 --- 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,12 +44,10 @@ 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) => ({ @@ -59,9 +55,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), diff --git a/source/features/transactions/components/TransactionTokenList.module.scss b/source/features/transactions/components/TransactionTokenList.module.scss index 26900af0..60762751 100644 --- 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 index 0dff6fb0..3fa77a6a 100644 --- a/source/features/transactions/components/TransactionTokenList.tsx +++ b/source/features/transactions/components/TransactionTokenList.tsx @@ -8,12 +8,17 @@ import styles from './TransactionTokenList.module.scss'; const TokenList = (props: { tokens: IToken[]; }) => { const [tooltipPosition, setTooltipPosition] = useState({}); const containerRef = useRef(null); - const [fingerprint, setFingerprint] = useState('test'); + const [asset, setAsset] = useState({ + assetName: '', + description: '', + fingerprint: '', + policyId: '' + }); const [isVisible, setIsVisible] = useState(false); const handleMouseOver = ( event: React.MouseEvent, - value: IAsset['fingerprint'] + item: IAsset ) => { const { offsetLeft } = event.currentTarget; setTooltipPosition((prevState) => ({ @@ -21,7 +26,7 @@ const TokenList = (props: { tokens: IToken[]; }) => { left: offsetLeft + 120 * 0.75, top: containerRef.current?.offsetTop! + 75, })); - setFingerprint(value); + setAsset(item); setIsVisible(true); }; @@ -29,7 +34,17 @@ const TokenList = (props: { tokens: IToken[]; }) => { <> {isVisible && (
- + +
  • Ticker: {asset.ticker}
    • +
  • Name: {asset.name}
    • +
  • Description: {asset.description}
    • +
  • Policy ID: {asset.policyId}
    • +
  • Asset Name: {asset.assetName}
    • + } + />
    )} @@ -37,31 +52,41 @@ const TokenList = (props: { tokens: IToken[]; }) => {
    {props.tokens.map((t) => ( 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)}`}{' '} ))}
    ) : (
    {props.tokens.map((t) => ( - + +
      +
    • Ticker: {t.asset.ticker}
      • +
    • Name: {t.asset.name}
      • +
    • Description: {t.asset.description}
      • +
    • Policy ID: {t.asset.policyId}
      • +
    • Asset Name: {t.asset.assetName}
      • +
    + } /> } > - {`${t.quantity} ${addEllipsis(t.asset.fingerprint, 9, 4)}`} + {`${t.quantity} ${t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)}`}     - ))} + ) + )}
    )} diff --git a/source/features/transactions/types.ts b/source/features/transactions/types.ts index b0255dc7..100c5eec 100644 --- 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 index 1b76ce02..9f8876fd 100644 --- 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 index a500c026..4e9cbd28 100644 --- 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 }) => (
    {props.label}
    { props.body ??
    {props.body}
    }