design fixes and tests

blockscout · Jul 23, 2024 · 5b2773f · 5b2773f
1 parent dbcd4bb
commit 5b2773f
Show file tree

Hide file tree

Showing 33 changed files with 435 additions and 91 deletions.
diff --git a/icons/MUD_menu.svg b/icons/MUD_menu.svg
diff --git a/mocks/mud/mudTables.ts b/mocks/mud/mudTables.ts
@@ -0,0 +1,94 @@
+/* eslint-disable max-len */
+import type { AddressMudRecord, AddressMudRecords, AddressMudRecordsItem, AddressMudTables } from 'types/api/address';
+import type { MudWorldSchema, MudWorldTable } from 'types/api/mudWorlds';
+
+export const table1: MudWorldTable = {
+  table_full_name: 'tb.store.Tables',
+  table_id: '0x746273746f72650000000000000000005461626c657300000000000000000000',
+  table_name: 'Tables',
+  table_namespace: 'store',
+  table_type: 'onchain',
+};
+
+export const table2: MudWorldTable = {
+  table_full_name: 'ot.world.FunctionSignatur',
+  table_id: '0x6f74776f726c6400000000000000000046756e6374696f6e5369676e61747572',
+  table_name: 'FunctionSignatur',
+  table_namespace: 'world',
+  table_type: 'offchain',
+};
+
+export const schema1: MudWorldSchema = {
+  key_names: [ 'moduleAddress', 'argumentsHash' ],
+  key_types: [ 'address', 'bytes32' ],
+  value_names: [ 'fieldLayout', 'keySchema', 'valueSchema', 'abiEncodedKeyNames', 'abiEncodedFieldNames' ],
+  value_types: [ 'bytes32', 'bytes32', 'bytes32', 'bytes', 'bytes' ],
+};
+
+export const schema2: MudWorldSchema = {
+  key_names: [],
+  key_types: [],
+  value_names: [ 'value' ],
+  value_types: [ 'address' ],
+};
+
+export const mudTables: AddressMudTables = {
+  items: [
+    {
+      table: table1,
+      schema: schema1,
+    },
+    {
+      table: table2,
+      schema: schema2,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    table_id: '1',
+  },
+};
+
+const record: AddressMudRecordsItem = {
+  decoded: {
+    abiEncodedFieldNames: '0x00000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000003000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000e00000000000000000000000000000000000000000000000000000000000000006706c617965720000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000576616c7565000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000974696d657374616d700000000000000000000000000000000000000000000000',
+    abiEncodedKeyNames: '0x00000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000026964000000000000000000000000000000000000000000000000000000000000',
+    goldCosts: [ '100000', '150000', '200000', '250000', '400000', '550000', '700000' ],
+    prototypeIds: [
+      '0x53776f7264736d616e0000000000000000000000000000000000000000000000',
+      '0x50696b656d616e00000000000000000000000000000000000000000000000000',
+      '0x50696b656d616e00000000000000000000000000000000000000000000000000',
+      '0x4172636865720000000000000000000000000000000000000000000000000000',
+      '0x4b6e696768740000000000000000000000000000000000000000000000000000',
+    ],
+    keySchema: '0x002001001f000000000000000000000000000000000000000000000000000000',
+    tableId: '0x6f74000000000000000000000000000044726177557064617465000000000000',
+    valueSchema: '0x00540300611f1f00000000000000000000000000000000000000000000000000',
+  },
+  id: '0x007a651a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000007',
+  is_deleted: false,
+  timestamp: '2024-05-09T15:14:32.000000Z',
+};
+
+export const mudRecords: AddressMudRecords = {
+  items: [ record, record ],
+  next_page_params: {
+    items_count: 50,
+    key0: '1',
+    key1: '2',
+    key_bytes: '3',
+  },
+  schema: {
+    key_names: [ 'tableId' ],
+    key_types: [ 'bytes32' ],
+    value_names: [ 'prototypeIds', 'goldCosts', 'keySchema', 'valueSchema', 'abiEncodedKeyNames', 'abiEncodedFieldNames' ],
+    value_types: [ 'bytes32[]', 'int32[]', 'bytes32', 'bytes32', 'bytes32', 'bytes', 'bytes' ],
+  },
+  table: table1,
+};
+
+export const mudRecord: AddressMudRecord = {
+  record,
+  schema: mudRecords.schema,
+  table: table1,
+};
diff --git a/mocks/mud/mudWorlds.ts b/mocks/mud/mudWorlds.ts
@@ -0,0 +1,27 @@
+import type { MudWorldsResponse } from 'types/api/mudWorlds';
+
+import { withName, withoutName } from 'mocks/address/address';
+
+export const mudWorlds: MudWorldsResponse = {
+  items: [
+    {
+      address: withName,
+      coin_balance: '300000000000000000',
+      tx_count: 3938,
+    },
+    {
+      address: withoutName,
+      coin_balance: '0',
+      tx_count: 0,
+    },
+    {
+      address: withoutName,
+      coin_balance: '0',
+      tx_count: 0,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    world: '0x18f01f12ca21b6fc97b917c3e32f671f8a933caa',
+  },
+};
diff --git a/types/api/address.ts b/types/api/address.ts
@@ -230,7 +230,7 @@ export type AddressMudRecords = {
 }
 
 export type AddressMudRecordsItem = {
-  decoded: Record<string, string>;
+  decoded: Record<string, string | Array<string>>;
   id: string;
   is_deleted: boolean;
   timestamp: string;

diff --git a/ui/address/mud/AddressMudBreadcrumbs.tsx b/ui/address/mud/AddressMudBreadcrumbs.tsx
@@ -1,4 +1,4 @@
-import { Box, useColorModeValue, chakra, HStack } from '@chakra-ui/react';
+import { Box, useColorModeValue, chakra, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -8,6 +8,8 @@ import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
+import useAddressQuery from '../utils/useAddressQuery';
+
 type TableViewProps = {
   scrollRef?: React.RefObject<HTMLDivElement>;
   className?: string;
@@ -40,7 +42,7 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
 
   if (isLast) {
     return (
-      <HStack gap={ 2 } overflow="hidden">
+      <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px">
         <Box
           overflow="hidden"
           whiteSpace="nowrap"
@@ -49,12 +51,12 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
           { text }
         </Box>
         <CopyToClipboard text={ href } type="link" mx={ 0 } color="text_secondary"/>
-      </HStack>
+      </Grid>
     );
   }
 
   return (
-    <HStack gap={ 2 } overflow="hidden">
+    <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px">
       <LinkInternal
         href={ href }
         onClick={ onLinkClick }
@@ -65,14 +67,16 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
         { text }
       </LinkInternal>
       { !isLast && <IconSvg name="arrows/east" boxSize={ 6 } color={ iconColor }/> }
-    </HStack>
+    </Grid>
   );
 };
 
 const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
   const queryParams = { tab: 'mud', hash: props.hash };
   const isMobile = useIsMobile();
 
+  const addressQuery = useAddressQuery({ hash: props.hash });
+
   return (
     <Box
       display={ isMobile ? 'flex' : 'grid' }
@@ -82,8 +86,9 @@ const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
       alignItems="center"
       className={ props.className }
       width="fit-content"
+      fontSize="sm"
     >
-      <IconSvg name="MUD" boxSize={ 5 } color="green.500"/>
+      <IconSvg name="MUD" boxSize={ 5 } color={ addressQuery.data?.is_verified ? 'green.500' : 'text_secondary' }/>
       <BreadcrumbItem
         text="MUD World"
         href={ route({ pathname: '/address/[hash]', query: queryParams }) }

diff --git a/ui/address/mud/AddressMudRecord.pw.tsx b/ui/address/mud/AddressMudRecord.pw.tsx
@@ -0,0 +1,46 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mudRecord } from 'mocks/mud/mudTables';
+import { test, expect, devices } from 'playwright/lib';
+
+import AddressMudRecord from './AddressMudRecord';
+
+const ADDRESS_HASH = 'hash';
+const TABLE_ID = '123';
+const RECORD_ID = '234';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH },
+  },
+};
+
+test('base view', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_record', mudRecord, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID, record_id: RECORD_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudRecord tableId={ TABLE_ID } recordId={ RECORD_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_mud_record', mudRecord, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID, record_id: RECORD_ID } });
+
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
+        <AddressMudRecord tableId={ TABLE_ID } recordId={ RECORD_ID }/>
+      </Box>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/address/mud/AddressMudRecord.tsx b/ui/address/mud/AddressMudRecord.tsx
@@ -10,6 +10,7 @@ import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
 import AddressMudRecordValues from './AddressMudRecordValues';
+import { getValueString } from './utils';
 
 type Props ={
   scrollRef?: React.RefObject<HTMLDivElement>;
@@ -55,12 +56,12 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
         <Table borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%" overflow="hidden">
           { data?.schema.key_names.length && data?.schema.key_names.map((keyName, index) => (
             <Tr key={ keyName } borderBottomStyle={ index === data.schema.key_names.length - 1 ? 'hidden' : 'solid' }>
-              <Td fontWeight={ 600 } whiteSpace="nowrap">
+              <Td fontWeight={ 600 } whiteSpace="nowrap" fontSize="sm">
                 { keyName } ({ data.schema.key_types[index] })
               </Td>
-              <Td colSpan={ 2 }>
+              <Td colSpan={ 2 } fontSize="sm">
                 <Flex justifyContent="space-between">
-                  <TruncatedValue value={ data.record.decoded[keyName] } mr={ 2 }/>
+                  <TruncatedValue value={ getValueString(data.record.decoded[keyName]) } mr={ 2 }/>
                   { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
                 </Flex>
               </Td>
@@ -72,12 +73,12 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
       <Hide above="lg" ssr={ false }>
         <>
           { data?.schema.key_names.length && data?.schema.key_names.map((keyName, index) => (
-            <VStack gap={ 1 } key={ keyName } alignItems="start">
+            <VStack gap={ 1 } key={ keyName } alignItems="start" fontSize="sm">
               <Divider/>
               <Text fontWeight={ 600 } whiteSpace="nowrap">
                 { keyName } ({ data.schema.key_types[index] })
               </Text>
-              <Text wordBreak="break-all">{ data.record.decoded[keyName] }</Text>
+              <Text wordBreak="break-word">{ getValueString(data.record.decoded[keyName]) }</Text>
               { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
             </VStack>
           )) }

diff --git a/ui/address/mud/AddressMudRecordValues.tsx b/ui/address/mud/AddressMudRecordValues.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 
 import type { AddressMudRecord } from 'types/api/address';
 
+import { getValueString } from './utils';
+
 type Props ={
   data?: AddressMudRecord;
 }
@@ -16,19 +18,19 @@ const AddressMudRecordValues = ({ data }: Props) => {
 
   return (
     <>
-      <Tr backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
-        <Td fontWeight={ 600 }>Field</Td>
-        <Td fontWeight={ 600 }>Type</Td>
-        <Td fontWeight={ 600 } w="100%" wordBreak="break-all">Value</Td>
+      <Tr backgroundColor={ valuesBgColor } borderBottomStyle="hidden" >
+        <Td fontWeight={ 600 } w="100px" fontSize="sm">Field</Td>
+        <Td fontWeight={ 600 } w="90px" fontSize="sm">Type</Td>
+        <Td fontWeight={ 600 } fontSize="sm">Value</Td>
       </Tr>
       {
         data?.schema.value_names.map((valName, index) => (
           <Tr key={ valName } backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
-            <Td whiteSpace="nowrap" py={ 0 } pb={ 4 }>{ valName }</Td>
-            <Td py={ 0 } pb={ 4 }>{ data.schema.value_types[index] }</Td>
-            <Td w="100%" wordBreak="break-all" py={ 0 } pb={ 4 }>
+            <Td fontSize="sm" w="100px" py={ 0 } pb={ 4 } pr={ 0 }wordBreak="break-all">{ valName }</Td>
+            <Td fontSize="sm" w="90px" py={ 0 } pb={ 4 } wordBreak="break-all">{ data.schema.value_types[index] }</Td>
+            <Td fontSize="sm" wordBreak="break-word" py={ 0 } pb={ 4 }>
               <Box>
-                { data.record.decoded[valName] }
+                { getValueString(data.record.decoded[valName]) }
               </Box>
             </Td>
           </Tr>