explore/ui/shared/SocketNewItemsNotice.tsx

import React from 'react';

import config from 'configs/app';
import { Alert } from '@luxfi/ui/alert';
import { Link } from 'toolkit/next/link';
import { Skeleton } from '@luxfi/ui/skeleton';
import { TableCell, TableRow } from '@luxfi/ui/table';

const flashblocksFeature = config.features.flashblocks;

interface InjectedProps {
  content: React.ReactNode;
}

interface Props {
  type?: 'transaction' | 'token_transfer' | 'deposit' | 'block' | 'flashblock' | 'cross_chain_transaction';
  children?: (props: InjectedProps) => React.JSX.Element;
  className?: string;
  url?: string;
  showErrorAlert?: boolean;
  num?: number;
  isLoading?: boolean;
  onLinkClick?: () => void;
}

const SocketNewItemsNotice = ({ children, className, url, num, showErrorAlert, type = 'transaction', isLoading, onLinkClick }: Props) => {
  const handleLinkClick = React.useCallback(() => {
    onLinkClick ? onLinkClick() : window.location.reload();
  }, [ onLinkClick ]);

  const alertContent = (() => {
    if (showErrorAlert) {
      return 'Live updates temporarily delayed';
    }

    let name;

    switch (type) {
      case 'token_transfer':
        name = 'token transfer';
        break;
      case 'deposit':
        name = 'deposit';
        break;
      case 'block':
        name = 'block';
        break;
      case 'flashblock': {
        if (flashblocksFeature.isEnabled) {
          name = flashblocksFeature.name;
        }
        break;
      }
      case 'cross_chain_transaction':
        name = 'cross chain transaction';
        break;
      default:
        name = 'transaction';
        break;
    }

    if (!num) {
      return null;
    }

    if (type === 'cross_chain_transaction') {
      return (
        <Link href={ url } onClick={ !url ? handleLinkClick : undefined }>More { name }s available</Link>
      );
    }

    return (
      <>
        <Link href={ url } onClick={ !url ? handleLinkClick : undefined }>{ num.toLocaleString() } more { name }{ num > 1 ? 's' : '' }</Link>
        <span className="whitespace-pre"> ha{ num > 1 ? 've' : 's' } come in</span>
      </>
    );
  })();

  if (!alertContent && !isLoading) {
    return null;
  }

  const content = !isLoading ? (
    <Alert
      className={ `${ className ?? '' } px-4 py-[6px] text-sm`.trim() }
      status={ showErrorAlert ? 'warning_table' : 'info' }
    >
      { alertContent }
    </Alert>
  ) : <Skeleton className={ className } h="36px" loading={ true }/>;

  return children ? children({ content }) : content;
};

export default SocketNewItemsNotice;

export const Desktop = ({ ...props }: Props) => {
  return (
    <SocketNewItemsNotice
      { ...props }
    >
      { ({ content }) => <TableRow><TableCell colSpan={ 100 } p={ 0 }>{ content }</TableCell></TableRow> }
    </SocketNewItemsNotice>
  );
};

export const Mobile = ({ ...props }: Props) => {
  return (
    <SocketNewItemsNotice
      { ...props }
    />
  );
};