add tests for AddressFromTo

ui/shared/address/AddressFromTo.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
+
+import AddressFromTo from './AddressFromTo';
+
+test.use({ viewport: configs.viewport.mobile });
+
+test('outgoing txn', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AddressFromTo
+        from={ addressMock.withoutName }
+        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+        current={ addressMock.withoutName.hash }
+      />
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('incoming txn', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AddressFromTo
+        from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+        to={ addressMock.withoutName }
+        current={ addressMock.withoutName.hash }
+      />
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('compact mode', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AddressFromTo
+        from={ addressMock.withoutName }
+        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+        mode="compact"
+      />
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('loading state', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AddressFromTo
+        from={ addressMock.withoutName }
+        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+        isLoading
+      />
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});

ui/shared/address/AddressFromToIcon.pw.tsx

+import { Box } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import AddressFromToIcon from './AddressFromToIcon';
+
+test.use({ viewport: { width: 36, height: 36 } });
+
+[ 'in', 'out', 'self', 'unspecified' ].forEach((type) => {
+  test(`${ type } txn type +@dark-mode`, async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Box p={ 2 }>
+          <AddressFromToIcon type={ type }/>
+        </Box>
+      </TestApp>,
+    );
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/shared/address/AddressFromToIcon.tsx

@@ -22,8 +22,8 @@ const AddressFromToIcon = ({ isLoading, type, className }: Props) => {
       bgColor: useColorModeValue('orange.50', 'yellow.900'),
     },
     self: {
-      color: useColorModeValue('gray.500', 'gray.300'),
-      bgColor: 'transparent',
+      color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
+      bgColor: useColorModeValue('blackAlpha.50', 'whiteAlpha.50'),
     },
     unspecified: {
       color: useColorModeValue('gray.500', 'gray.300'),
@@ -33,7 +33,7 @@ const AddressFromToIcon = ({ isLoading, type, className }: Props) => {
   const labels = {
     'in': 'Incoming txn',
     out: 'Outgoing txn',
-    self: 'Self txn',
+    self: 'Txn to the same address',
   };
 
   const icon = (