pezkuwi-apps/packages/page-teyrchains/src/Crowdloan/BannerAssetHubMigration.tsx

// Copyright 2017-2026 @pezkuwi/app-teyrchains authors & contributors
// SPDX-License-Identifier: Apache-2.0

import React from 'react';

import { MarkWarning, styled } from '@pezkuwi/react-components';
import { useStakingAsyncApis } from '@pezkuwi/react-hooks';

import { useTranslation } from '../translate.js';

const BannerAssetHubMigration = () => {
  const { t } = useTranslation();
  const { isRelayChain } = useStakingAsyncApis();

  if (!isRelayChain) {
    return null;
  }

  return (
    <StyledBanner
      className='warning centered'
      withIcon={false}
    >
      <p>
        {t('After the Asset Hub migration, crowdloan related activity has been transferred to the `ah_ops` pallet on Asset Hub. You can claim your funds from there, or visit ')}
        <a
          href='https://pezkuwi-crowdloan.com/'
          rel='noopener noreferrer'
          target='_blank'
        >
          {t('the Pezkuwi Crowdloan UI')}
        </a>
        {t(' for more details.')}
      </p>
    </StyledBanner>
  );
};

const StyledBanner = styled(MarkWarning)`
  border: 1px solid #ffc107;
  background: #ffc10720;
  font-size: 1rem !important;
`;

export default React.memo(BannerAssetHubMigration);