Implement acceptOwnership UI for UpgradeableRegistrarController

apps/web/src/components/Basenames/AcceptOwnershipBanner/index.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import AcceptOwnershipBanner from './index';
+import { WriteTransactionWithReceiptStatus } from 'apps/web/src/hooks/useAcceptOwnership';
+
+// Mock the hooks
+const mockUsePendingOwnerStatus = jest.fn();
+const mockUseAcceptOwnership = jest.fn();
+
+jest.mock('apps/web/src/hooks/usePendingOwnerStatus', () => ({
+  usePendingOwnerStatus: () => mockUsePendingOwnerStatus(),
+}));
+
+jest.mock('apps/web/src/hooks/useAcceptOwnership', () => ({
+  useAcceptOwnership: () => mockUseAcceptOwnership(),
+  WriteTransactionWithReceiptStatus: {
+    Idle: 'idle',
+    Initiated: 'initiated',
+    Canceled: 'canceled',
+    Approved: 'approved',
+    Processing: 'processing',
+    Reverted: 'reverted',
+    Success: 'success',
+  },
+}));
+
+// Mock WalletIdentity component
+jest.mock('apps/web/src/components/WalletIdentity', () => {
+  return function MockWalletIdentity({ address }: { address: string }) {
+    return <div data-testid="wallet-identity">{address}</div>;
+  };
+});
+
+describe('AcceptOwnershipBanner', () => {
+  const mockCurrentOwner = '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd' as const;
+  const mockAcceptOwnership = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: false,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    mockUseAcceptOwnership.mockReturnValue({
+      acceptOwnership: mockAcceptOwnership,
+      transactionStatus: WriteTransactionWithReceiptStatus.Idle,
+      transactionIsLoading: false,
+      transactionIsSuccess: false,
+      transactionIsError: false,
+      transactionError: null,
+    });
+  });
+
+  it('should not render when user is not pending owner', () => {
+    const { container } = render(<AcceptOwnershipBanner />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should not render when loading', () => {
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: false,
+      currentOwner: mockCurrentOwner,
+      isLoading: true,
+    });
+
+    const { container } = render(<AcceptOwnershipBanner />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render banner when user is pending owner', () => {
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: true,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    render(<AcceptOwnershipBanner />);
+
+    expect(screen.getByText('Pending Ownership Transfer')).toBeInTheDocument();
+    expect(
+      screen.getByText(/You have been designated as the pending owner/i),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Accept Ownership')).toBeInTheDocument();
+  });
+
+  it('should display current owner address', () => {
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: true,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    render(<AcceptOwnershipBanner />);
+
+    expect(screen.getByText('Current owner:')).toBeInTheDocument();
+    expect(screen.getByTestId('wallet-identity')).toHaveTextContent(mockCurrentOwner);
+  });
+
+  it('should call acceptOwnership when button is clicked', async () => {
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: true,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    mockAcceptOwnership.mockResolvedValue(undefined);
+
+    render(<AcceptOwnershipBanner />);
+
+    const button = screen.getByText('Accept Ownership');
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(mockAcceptOwnership).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should disable button when transaction is processing', () => {
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: true,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    mockUseAcceptOwnership.mockReturnValue({
+      acceptOwnership: mockAcceptOwnership,
+      transactionStatus: WriteTransactionWithReceiptStatus.Processing,
+      transactionIsLoading: true,
+      transactionIsSuccess: false,
+      transactionIsError: false,
+      transactionError: null,
+    });
+
+    render(<AcceptOwnershipBanner />);
+
+    const button = screen.getByText('Processing...');
+    expect(button).toBeDisabled();
+  });
+
+  it('should display error message when transaction fails', () => {
+    const mockError = new Error('Transaction failed');
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: true,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    mockUseAcceptOwnership.mockReturnValue({
+      acceptOwnership: mockAcceptOwnership,
+      transactionStatus: WriteTransactionWithReceiptStatus.Idle,
+      transactionIsLoading: false,
+      transactionIsSuccess: false,
+      transactionIsError: true,
+      transactionError: mockError,
+    });
+
+    render(<AcceptOwnershipBanner />);
+
+    expect(screen.getByText('Error accepting ownership')).toBeInTheDocument();
+    expect(screen.getByText('Transaction failed')).toBeInTheDocument();
+  });
+
+  it('should not render after successful transaction', () => {
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: true,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    mockUseAcceptOwnership.mockReturnValue({
+      acceptOwnership: mockAcceptOwnership,
+      transactionStatus: WriteTransactionWithReceiptStatus.Success,
+      transactionIsLoading: false,
+      transactionIsSuccess: true,
+      transactionIsError: false,
+      transactionError: null,
+    });
+
+    const { container } = render(<AcceptOwnershipBanner />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should show transaction status', () => {
+    mockUsePendingOwnerStatus.mockReturnValue({
+      isPendingOwner: true,
+      currentOwner: mockCurrentOwner,
+      isLoading: false,
+    });
+
+    mockUseAcceptOwnership.mockReturnValue({
+      acceptOwnership: mockAcceptOwnership,
+      transactionStatus: WriteTransactionWithReceiptStatus.Approved,
+      transactionIsLoading: false,
+      transactionIsSuccess: false,
+      transactionIsError: false,
+      transactionError: null,
+    });
+
+    render(<AcceptOwnershipBanner />);
+
+    expect(screen.getByText(/Status: approved/i)).toBeInTheDocument();
+  });
+});

apps/web/src/components/Basenames/AcceptOwnershipBanner/index.tsx

@@ -0,0 +1,94 @@
+'use client';
+import { useCallback } from 'react';
+import { usePendingOwnerStatus } from 'apps/web/src/hooks/usePendingOwnerStatus';
+import {
+  useAcceptOwnership,
+  WriteTransactionWithReceiptStatus,
+} from 'apps/web/src/hooks/useAcceptOwnership';
+import WalletIdentity from 'apps/web/src/components/WalletIdentity';
+
+export default function AcceptOwnershipBanner() {
+  const { isPendingOwner, currentOwner, isLoading: isPendingOwnerLoading } = usePendingOwnerStatus();
+  const {
+    acceptOwnership,
+    transactionStatus,
+    transactionIsLoading,
+    transactionIsSuccess,
+    transactionIsError,
+    transactionError,
+  } = useAcceptOwnership();
+
+  const handleAcceptOwnership = useCallback(async () => {
+    try {
+      await acceptOwnership();
+    } catch (error) {
+      console.error('Failed to accept ownership:', error);
+    }
+  }, [acceptOwnership]);
+
+  // Don't show the banner if the user is not the pending owner
+  if (isPendingOwnerLoading || !isPendingOwner) {
+    return null;
+  }
+
+  // Don't show after successful acceptance
+  if (transactionIsSuccess) {
+    return null;
+  }
+
+  const isProcessing =
+    transactionStatus === WriteTransactionWithReceiptStatus.Initiated ||
+    transactionStatus === WriteTransactionWithReceiptStatus.Approved ||
+    transactionStatus === WriteTransactionWithReceiptStatus.Processing;
+
+  const canAccept = !transactionIsLoading && !isProcessing;
+
+  return (
+    <div className="mb-6 rounded-2xl border border-yellow-500 bg-yellow-50 p-6">
+      <div className="flex flex-col gap-4">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900">
+            Pending Ownership Transfer
+          </h3>
+          <p className="mt-2 text-sm text-gray-600">
+            You have been designated as the pending owner of the UpgradeableRegistrarController.
+            Accept ownership to complete the transfer.
+          </p>
+        </div>
+
+        {currentOwner && (
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-gray-600">Current owner:</span>
+            <WalletIdentity address={currentOwner} />
+          </div>
+        )}
+
+        {transactionIsError && transactionError && (
+          <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700">
+            <p className="font-medium">Error accepting ownership</p>
+            <p className="mt-1 text-xs">{transactionError.message}</p>
+          </div>
+        )}
+
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={() => {
+              void handleAcceptOwnership();
+            }}
+            disabled={!canAccept}
+            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? 'Processing...' : 'Accept Ownership'}
+          </button>
+
+          {transactionStatus !== WriteTransactionWithReceiptStatus.Idle && (
+            <span className="flex items-center text-sm text-gray-600">
+              Status: {transactionStatus}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/Basenames/UsernameProfileSettingsOwnership/index.tsx

@@ -7,6 +7,7 @@ import Label from 'apps/web/src/components/Label';
 import UsernameProfileTransferOwnershipModal from 'apps/web/src/components/Basenames/UsernameProfileTransferOwnershipModal';
 import ProfileTransferOwnershipProvider from 'apps/web/src/components/Basenames/UsernameProfileTransferOwnershipModal/context';
 import WalletIdentity from 'apps/web/src/components/WalletIdentity';
+import AcceptOwnershipBanner from 'apps/web/src/components/Basenames/AcceptOwnershipBanner';
 
 const settingTabClass = classNames(
   'flex flex-col justify-between gap-8 text-gray/60 md:items-center p-4 md:p-8',
@@ -21,6 +22,7 @@ export default function UsernameProfileSettingsOwnership() {
 
   return (
     <section className={settingTabClass}>
+      <AcceptOwnershipBanner />
       <Fieldset>
         <Label>Owner</Label>
         <div className="flex items-center gap-4 rounded-2xl border border-gray-40/20 p-4">