rename components

ui/snippets/walletMenu/WalletMenuDesktop.pw.tsx

@@ -5,7 +5,7 @@ import type { Address } from 'types/api/address';
 import * as addressMock from 'mocks/address/address';
 import { test, expect } from 'playwright/lib';
 
-import { WalletMenuDesktopComponent } from './WalletMenuDesktop';
+import { WalletMenuDesktop } from './WalletMenuDesktop';
 
 const props = {
   isWalletConnected: false,
@@ -20,24 +20,24 @@ const props = {
 test.use({ viewport: { width: 1440, height: 750 } }); // xl
 
 test('wallet is not connected +@dark-mode', async({ page, render }) => {
-  await render(<WalletMenuDesktopComponent { ...props }/>);
+  await render(<WalletMenuDesktop { ...props }/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
 });
 
 test('wallet is not connected (home page) +@dark-mode', async({ page, render }) => {
-  await render(<WalletMenuDesktopComponent { ...props } isHomePage/>);
+  await render(<WalletMenuDesktop { ...props } isHomePage/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
 });
 
 test('wallet is loading', async({ page, render }) => {
-  await render(<WalletMenuDesktopComponent { ...props } isModalOpen/>);
+  await render(<WalletMenuDesktop { ...props } isModalOpen/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
 });
 
 test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
   await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
 
-  const component = await render(<WalletMenuDesktopComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  const component = await render(<WalletMenuDesktop { ...props } isWalletConnected address={ addressMock.hash }/>);
   await component.locator('button').click();
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
@@ -46,7 +46,7 @@ test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) =>
 test('wallet connected (home page) +@dark-mode', async({ page, render, mockApiResponse }) => {
   await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
 
-  const component = await render(<WalletMenuDesktopComponent { ...props } isHomePage isWalletConnected address={ addressMock.hash }/>);
+  const component = await render(<WalletMenuDesktop { ...props } isHomePage isWalletConnected address={ addressMock.hash }/>);
   await component.locator('button').click();
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
@@ -55,7 +55,7 @@ test('wallet connected (home page) +@dark-mode', async({ page, render, mockApiRe
 test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
   await mockApiResponse('address', { ...addressMock.eoa, ...addressMock.withEns } as Address, { pathParams: { hash: addressMock.hash } });
 
-  const component = await render(<WalletMenuDesktopComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  const component = await render(<WalletMenuDesktop { ...props } isWalletConnected address={ addressMock.hash }/>);
   await component.locator('button').click();
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -33,7 +33,7 @@ type ComponentProps = Props & {
   openModal: () => void;
 };
 
-export const WalletMenuDesktopComponent = ({
+export const WalletMenuDesktop = ({
   isHomePage, className, size = 'md', isWalletConnected, address, connect,
   disconnect, isModalOpening, isModalOpen, openModal,
 }: ComponentProps) => {
@@ -155,14 +155,14 @@ export const WalletMenuDesktopComponent = ({
 };
 
 // separated the useWallet hook from the main component because it's hard to mock it in tests
-const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
+const WalletMenuDesktopWrapper = ({ isHomePage, className, size = 'md' }: Props) => {
   const {
     isWalletConnected, address, connect, disconnect,
     isModalOpening, isModalOpen, openModal,
   } = useWallet({ source: 'Header' });
 
   return (
-    <WalletMenuDesktopComponent
+    <WalletMenuDesktop
       isHomePage={ isHomePage }
       className={ className }
       size={ size }
@@ -177,4 +177,4 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
   );
 };
 
-export default chakra(WalletMenuDesktop);
+export default chakra(WalletMenuDesktopWrapper);

ui/snippets/walletMenu/WalletMenuMobile.pw.tsx

@@ -5,7 +5,7 @@ import type { Address } from 'types/api/address';
 import * as addressMock from 'mocks/address/address';
 import { test, expect, devices } from 'playwright/lib';
 
-import { WalletMenuMobileComponent } from './WalletMenuMobile';
+import { WalletMenuMobile } from './WalletMenuMobile';
 
 const props = {
   isWalletConnected: false,
@@ -20,19 +20,19 @@ const props = {
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
 test('wallet is not connected +@dark-mode', async({ page, render }) => {
-  await render(<WalletMenuMobileComponent { ...props }/>);
+  await render(<WalletMenuMobile { ...props }/>);
   await expect(page).toHaveScreenshot();
 });
 
 test('wallet is loading', async({ page, render }) => {
-  await render(<WalletMenuMobileComponent { ...props } isModalOpen/>);
+  await render(<WalletMenuMobile { ...props } isModalOpen/>);
   await expect(page).toHaveScreenshot();
 });
 
 test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
   await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
 
-  const component = await render(<WalletMenuMobileComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  const component = await render(<WalletMenuMobile { ...props } isWalletConnected address={ addressMock.hash }/>);
   await component.locator('button').click();
 
   await expect(page).toHaveScreenshot();
@@ -41,7 +41,7 @@ test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) =>
 test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
   await mockApiResponse('address', { ...addressMock.eoa, ...addressMock.withEns } as Address, { pathParams: { hash: addressMock.hash } });
 
-  const component = await render(<WalletMenuMobileComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  const component = await render(<WalletMenuMobile { ...props } isWalletConnected address={ addressMock.hash }/>);
   await component.locator('button').click();
 
   await expect(page).toHaveScreenshot();

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -24,7 +24,7 @@ type ComponentProps = {
   openModal: () => void;
 };
 
-export const WalletMenuMobileComponent = (
+export const WalletMenuMobile = (
   { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal }: ComponentProps,
 ) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -102,14 +102,14 @@ export const WalletMenuMobileComponent = (
   );
 };
 
-const WalletMenuMobile = () => {
+const WalletMenuMobileWrapper = () => {
   const {
     isWalletConnected, address, connect, disconnect,
     isModalOpening, isModalOpen, openModal,
   } = useWallet({ source: 'Header' });
 
   return (
-    <WalletMenuMobileComponent
+    <WalletMenuMobile
       isWalletConnected={ isWalletConnected }
       address={ address }
       connect={ connect }
@@ -121,4 +121,4 @@ const WalletMenuMobile = () => {
   );
 };
 
-export default WalletMenuMobile;
+export default WalletMenuMobileWrapper;