better array display

ui/tokenInstance/metadata/MetadataAccordion.tsx

@@ -24,21 +24,23 @@ const MetadataAccordion = ({ data, level = 0 }: Props) => {
     return 24;
   })();
 
+  const isFlat = Object.entries(data).every(([ , value ]) => typeof value !== 'object');
+
   const renderItem = React.useCallback((name: string, value: unknown) => {
     switch (typeof value) {
       case 'string':
       case 'number':
       case 'boolean': {
-        return <MetadataItemPrimitive name={ name } value={ value }/>;
+        return <MetadataItemPrimitive name={ name } value={ value } isFlat={ isFlat }/>;
       }
 
       case 'object': {
         if (value === null) {
-          return <MetadataItemPrimitive name={ name } value={ value }/>;
+          return <MetadataItemPrimitive name={ name } value={ value } isFlat={ isFlat }/>;
         }
 
         if (Array.isArray(value) && value.length > 0) {
-          return <MetadataItemArray name={ name } value={ value }/>;
+          return <MetadataItemArray name={ name } value={ value } level={ level }/>;
         }
 
         if (Object.keys(value).length > 0) {
@@ -47,16 +49,14 @@ const MetadataAccordion = ({ data, level = 0 }: Props) => {
       }
       // eslint-disable-next-line no-fallthrough
       default: {
-        return <MetadataItemPrimitive name={ name } value={ String(value) }/>;
+        return <MetadataItemPrimitive name={ name } value={ String(value) } isFlat={ isFlat }/>;
       }
     }
-  }, [ level ]);
+  }, [ level, isFlat ]);
 
   return (
     <Accordion allowMultiple fontSize="sm" ml={ `${ ml }px` } defaultIndex={ level === 0 ? [ 0 ] : undefined }>
-      { Object.entries(data).map(([ key, value ]) => {
-        return renderItem(key, value);
-      }) }
+      { Object.entries(data).map(([ key, value ]) => renderItem(key, value)) }
     </Accordion>
   );
 };

ui/tokenInstance/metadata/MetadataItemArray.tsx

-import { AccordionButton, AccordionIcon, AccordionPanel, Box, Flex } from '@chakra-ui/react';
+import { AccordionButton, AccordionIcon, AccordionPanel, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import MetadataAccordionItem from './MetadataAccordionItem';
 import MetadataAccordionItemTitle from './MetadataAccordionItemTitle';
+import MetadataItemPrimitive from './MetadataItemPrimitive';
 
 interface Props {
   name: string;
   value: Array<unknown>;
+  level: number;
 }
 
-const MetadataItemArray = ({ name, value }: Props) => {
+const MetadataItemArray = ({ name, value, level }: Props) => {
 
   return (
     <MetadataAccordionItem
@@ -32,25 +34,35 @@ const MetadataItemArray = ({ name, value }: Props) => {
         <AccordionIcon boxSize={ 6 } p={ 1 }/>
         <MetadataAccordionItemTitle name={ name }/>
       </AccordionButton>
-      <AccordionPanel p={ 0 } ml={ 126 }>
+      <AccordionPanel p={ 0 } ml={ level === 0 ? '126px' : '24px' }>
         { value.map((item, index) => {
-
           const content = (() => {
             switch (typeof item) {
+              case 'string':
+              case 'number':
+              case 'boolean': {
+                return <MetadataItemPrimitive value={ item } isItem={ false }/>;
+              }
               case 'object': {
-                if (item && !Array.isArray(item)) {
-                  return Object.entries(item).map(([ name, value ], index) => (
-                    <Flex key={ index } columnGap={ 3 }>
-                      <MetadataAccordionItemTitle name={ name } w="70px" fontWeight={ 400 }/>
-                      <Box>{ value }</Box>
-                    </Flex>
-                  ));
+                if (item) {
+                  if (Array.isArray(item)) {
+                    return <span>{ JSON.stringify(item, undefined, 2) }</span>;
+                  } else {
+                    return Object.entries(item).map(([ name, value ], index) => {
+                      return (
+                        <Flex key={ index } columnGap={ 3 }>
+                          <MetadataAccordionItemTitle name={ name } fontWeight={ 400 }/>
+                          <MetadataItemPrimitive value={ typeof value === 'object' ? JSON.stringify(value, undefined, 2) : value } isItem={ false }/>
+                        </Flex>
+                      );
+                    });
+                  }
+                } else {
+                  return <span>{ String(item) }</span>;
                 }
               }
-
-              // eslint-disable-next-line no-fallthrough
               default: {
-                return <span>{ JSON.stringify(item) }</span>;
+                return <span>{ String(item) }</span>;
               }
             }
           })();

ui/tokenInstance/metadata/MetadataItemObject.tsx

@@ -15,7 +15,7 @@ const MetadataItemObject = ({ name, value, level }: Props) => {
 
   if (level >= 4) {
     return (
-      <MetadataAccordionItem level={ level }>
+      <MetadataAccordionItem level={ level } pl={{ base: 0, lg: 0 }}>
         <MetadataAccordionItemTitle name={ name }/>
         <Box whiteSpace="pre-wrap">{ JSON.stringify(value, undefined, 2) }</Box>
       </MetadataAccordionItem>

ui/tokenInstance/metadata/MetadataItemPrimitive.tsx

+import { Box } from '@chakra-ui/react';
 import React from 'react';
 import type { Primitive } from 'react-hook-form';
 
@@ -9,9 +10,13 @@ import MetadataAccordionItemTitle from './MetadataAccordionItemTitle';
 interface Props {
   name?: string;
   value: Primitive;
+  isItem?: boolean;
+  isFlat?: boolean;
 }
 
-const MetadataItemPrimitive = ({ name, value }: Props) => {
+const MetadataItemPrimitive = ({ name, value, isItem = true, isFlat }: Props) => {
+
+  const Component = isItem ? MetadataAccordionItem : Box;
 
   const content = (() => {
     switch (typeof value) {
@@ -29,14 +34,13 @@ const MetadataItemPrimitive = ({ name, value }: Props) => {
         return <div>{ String(value) }</div>;
       }
     }
-
   })();
 
   return (
-    <MetadataAccordionItem>
+    <Component { ...(isFlat ? { pl: { base: 0, lg: 0 } } : {}) }>
       { name && <MetadataAccordionItemTitle name={ name }/> }
       { content }
-    </MetadataAccordionItem>
+    </Component>
   );
 };
 

ui/tokenInstance/metadata/data.ts

@@ -97,6 +97,32 @@ const data = {
     primary: [
       'QmPGMksnyQemncHKQ67zGiuTAsnFi8HTJkY9ebQ6eVVQLv',
       'https://nftu.com/nft/92ee5f5c-bce9-4d64-8a25-c7e1e6305572/949',
+      {
+        label: 'foo',
+        data: [
+          {
+            name: 'John',
+            email: 'john@foo.com',
+          },
+          {
+            name: 'Mary',
+            email: 'mary@foo.com',
+          },
+          [ 1, 2 ],
+        ],
+      },
+      [
+        {
+          address: 'foo',
+          age: 523,
+          gender: 'male',
+        },
+        {
+          address: 'bar',
+          age: 24,
+          gender: 'https://nftu.com/nft/92ee5f5c-bce9-4d64-8a25-c7e1e6305572/949',
+        },
+      ],
     ],
   },
   royalty_amount: 1000,