design fixes and tests 2

ui/address/contract/methods/ContractAbiItem.tsx

@@ -59,7 +59,7 @@ const ContractAbiItem = ({ data, index, id, addressHash, tab, onSubmit }: Props)
         <>
           <Element as="h2" name={ 'method_id' in data ? getElementName(data.method_id) : '' }>
             <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left" as="div" cursor="pointer">
-              { 'method_id' in data && <CopyToClipboard text={ url } onClick={ handleCopyLinkClick } type="link" mr={ 2 } color="text_secondary"/> }
+              { 'method_id' in data && <CopyToClipboard text={ url } onClick={ handleCopyLinkClick } type="link" mr={ 2 } ml={ 0 } color="text_secondary"/> }
               <Box as="span" fontWeight={ 500 } mr={ 1 }>
                 { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
               </Box>

ui/address/mud/AddressMudBreadcrumbs.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import isBrowser from 'lib/isBrowser';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
@@ -33,6 +34,8 @@ type BreadcrumbItemProps = {
 const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps) => {
   const iconColor = useColorModeValue('gray.300', 'gray.600');
 
+  const currentUrl = isBrowser() ? window.location.href : '';
+
   const onLinkClick = React.useCallback(() => {
     window.setTimeout(() => {
       // cannot do scroll instantly, have to wait a little
@@ -50,7 +53,7 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
         >
           { text }
         </Box>
-        <CopyToClipboard text={ href } type="link" mx={ 0 } color="text_secondary"/>
+        <CopyToClipboard text={ currentUrl } type="link" mx={ 0 } color="text_secondary"/>
       </Grid>
     );
   }

ui/address/mud/AddressMudRecordsTable.tsx

@@ -111,7 +111,7 @@ const AddressMudRecordsTable = ({
     whiteSpace: 'normal',
     minW: `${ colW }px`,
     w: `${ colW }px`,
-    verticalAlign: 'baseline',
+    verticalAlign: 'top',
     lineHeight: '20px',
   };
 
@@ -143,19 +143,34 @@ const AddressMudRecordsTable = ({
               return (
                 <Th key={ keyName } { ...tdStyles }>
                   { index < 2 ? (
-                    <Flex>
-                      <Link onClick={ onKeySortClick } data-id={ index } display="flex" alignItems="start" lineHeight="20px" mr={ 2 }>
-                        { sorting?.sort === `key${ index }` && sorting.order &&
-                        <IconSvg name="arrows/east" boxSize={ 5 } mr={ 2 } transform={ sorting.order === 'asc' ? 'rotate(-90deg)' : 'rotate(90deg)' }/>
-                        }
+                    <Flex alignItems="center">
+                      <Link
+                        onClick={ onKeySortClick }
+                        data-id={ index }
+                        display="flex"
+                        alignItems="start"
+                        lineHeight="20px"
+                        mr={ 2 }
+                      >
+                        { sorting?.sort === `key${ index }` && sorting.order && (
+                          <Box minW="24px" w="24px" mr={ 2 }>
+                            <IconSvg
+                              name="arrows/east"
+                              boxSize={ 5 }
+                              transform={ sorting.order === 'asc' ? 'rotate(-90deg)' : 'rotate(90deg)' }
+                            />
+                          </Box>
+                        ) }
                         { text }
                       </Link>
+                      <Box minW="20px" w="20px">
                         <AddressMudRecordsKeyFilter
                           value={ filters[index === 0 ? 'filter_key0' : 'filter_key1'] }
                           title={ text }
                           columnName={ keyName }
                           handleFilterChange={ handleFilterChange(index === 0 ? 'filter_key0' : 'filter_key1') }
                         />
+                      </Box>
                     </Flex>
                   ) : text }
                 </Th>

ui/address/mud/AddressMudTablesTableItem.tsx

@@ -86,7 +86,7 @@ const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props)
             <Table>
               { Boolean(item.schema.key_names.length) && (
                 <Tr>
-                  <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 } verticalAlign="middle">Key</Td>
+                  <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 } pl={ 0 } verticalAlign="middle">Key</Td>
                   <Td py={ 2 }>
                     <VStack gap={ 1 } alignItems="start">
                       { item.schema.key_names.map((name, index) => (
@@ -99,7 +99,7 @@ const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props)
                 </Tr>
               ) }
               <Tr borderBottomStyle="hidden">
-                <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 }>Value</Td>
+                <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 } pl={ 0 } >Value</Td>
                 <Td fontSize="sm" py={ 2 }>
                   <VStack gap={ 1 } alignItems="start">
                     { item.schema.value_names.map((name, index) => (

ui/address/mud/utils.ts

@@ -14,5 +14,5 @@ export const getValueString = (value: string | Array<string>) => {
     return value.join(', ');
   }
 
-  return value;
+  return value.toString();
 };

ui/pages/Address.tsx

@@ -107,7 +107,10 @@ const AddressPageContent = () => {
     undefined;
 
   const isLoading = addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData);
-  const isTabsLoading = isLoading || addressTabsCountersQuery.isPlaceholderData || mudTablesCountQuery.isPlaceholderData;
+  const isTabsLoading =
+    isLoading ||
+    addressTabsCountersQuery.isPlaceholderData ||
+    (config.features.mudFramework.isEnabled && mudTablesCountQuery.isPlaceholderData);
 
   const handleFetchedBytecodeMessage = React.useCallback(() => {
     addressQuery.refetch();