explore/ui/address/Address3rdPartyWidgets.tsx

import { useRouter } from 'next/router';
import { useMemo } from 'react';

import type { Address3rdPartyWidget } from 'types/views/address';

import { route } from 'nextjs-routes';

import useIsMounted from 'lib/hooks/useIsMounted';
import getQueryParamString from 'lib/router/getQueryParamString';
import { Link } from 'toolkit/next/link';

import Address3rdPartyWidgetCard from './address3rdPartyWidgets/Address3rdPartyWidgetCard';
import useAddress3rdPartyWidgets from './address3rdPartyWidgets/useAddress3rdPartyWidgets';

type Props = {
  shouldRender?: boolean;
  isQueryEnabled?: boolean;
  addressType: Address3rdPartyWidget['pages'][number];
  showAll?: boolean;
  isLoading?: boolean;
};

const NUMBER_OF_WIDGETS_TO_DISPLAY = 8;

const Address3rdPartyWidgets = ({ shouldRender = true, isQueryEnabled = true, addressType, isLoading = false, showAll }: Props) => {
  const router = useRouter();
  const isMounted = useIsMounted();

  const addressHash = getQueryParamString(router.query.hash);

  const { items: widgets, configQuery } = useAddress3rdPartyWidgets(addressType, isLoading, isQueryEnabled);

  const displayedWidgets = useMemo(() => {
    return showAll ? widgets : widgets.slice(0, NUMBER_OF_WIDGETS_TO_DISPLAY);
  }, [ widgets, showAll ]);

  const shouldShowViewAllLink = !showAll && !isLoading && !configQuery.isPlaceholderData && widgets.length > displayedWidgets.length;

  if (!isMounted || !shouldRender) {
    return null;
  }

  return (
    <div className="flex w-full flex-col items-start gap-3">
      <div
        className="grid gap-3 w-full"
        style={{
          gridTemplateColumns: 'repeat(auto-fit, minmax(238px, 1fr))',
          maxWidth: widgets.length < 5 ? `${ (widgets.length * (360 + 12)) - 12 }px` : undefined,
        }}
      >
        { displayedWidgets.map((name) => (
          <Address3rdPartyWidgetCard
            key={ name }
            name={ name }
            config={ configQuery.data?.[name] }
            address={ addressHash }
            isLoading={ configQuery.isPlaceholderData || isLoading }
          />
        )) }
      </div>
      { shouldShowViewAllLink && (
        <Link
          href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'widgets' } }) }
          textStyle="sm"
          ml={ 0.5 }
        >
          View all
        </Link>
      ) }
    </div>
  );
};

export default Address3rdPartyWidgets;