explore/ui/nameDomain/details/NameDomainDetailsAlert.tsx

import React from 'react';

import type * as bens from '@luxfi/bens-types';

import { Alert } from '@luxfi/ui/alert';
import { Link } from 'toolkit/next/link';

interface Props {
  data: bens.DetailedDomain | undefined;
}

const NameDomainDetailsAlert = ({ data }: Props) => {

  if (!data?.stored_offchain && !data?.resolved_with_wildcard) {
    return null;
  }

  return (
    <Alert status="info" className="inline-block whitespace-pre-wrap mb-6">
      <span>The domain name is resolved offchain using </span>
      { data.stored_offchain && <Link external href="https://eips.ethereum.org/EIPS/eip-3668">EIP-3668: CCIP Read</Link> }
      { data.stored_offchain && data.resolved_with_wildcard && <span> & </span> }
      { data.resolved_with_wildcard && <Link external href="https://eips.ethereum.org/EIPS/eip-2544">EIP-2544: Wildcard Resolution</Link> }
    </Alert>
  );
};

export default React.memo(NameDomainDetailsAlert);