Newer
Older
CrypticOreWallet / src / components / transactions / TransactionConciseMetadata.tsx
@Drew Lemmy Drew Lemmy on 12 Mar 2021 1 KB feat: address picker hints
// Copyright (c) 2020-2021 Drew Lemmy
// This file is part of KristWeb 2 under GPL-3.0.
// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
import classNames from "classnames";

import { KristTransaction } from "@api/types";
import { useNameSuffix, stripNameFromMetadata } from "@utils/currency";

import "./TransactionConciseMetadata.less";

interface Props {
  transaction?: KristTransaction;
  metadata?: string;
  limit?: number;
  className?: string;
}

/**
 * Trims the name and metaname from the start of metadata, and truncates it
 * to a specified amount of characters.
 */
export function TransactionConciseMetadata({ transaction, metadata, limit = 30, className }: Props): JSX.Element | null {
  const nameSuffix = useNameSuffix();

  // Don't render anything if there's no metadata (after the hooks)
  const meta = metadata || transaction?.metadata;
  if (!meta) return null;

  // Strip the name from the start of the transaction metadata, if it is present
  const hasName = transaction && (transaction.sent_name || transaction.sent_metaname);
  const withoutName = hasName
    ? stripNameFromMetadata(nameSuffix, meta)
    : meta;

  // Trim it down to the limit if necessary
  const wasTruncated = withoutName.length > limit;
  const truncated = wasTruncated ? withoutName.substr(0, limit) : withoutName;

  const classes = classNames("transaction-concise-metadata", className, {
    "transaction-concise-metadata-truncated": wasTruncated
  });

  return <span className={classes}>{truncated}</span>;
}