display mixed submit result

ui/pages/PublicTagsSubmit.tsx

@@ -15,7 +15,7 @@ type Screen = 'form' | 'result' | 'initializing' | 'error';
 const PublicTagsSubmit = () => {
 
   const [ screen, setScreen ] = React.useState<Screen>('result');
-  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>(mocks.allSuccessResponses);
+  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>(mocks.mixedResponses);
 
   const configQuery = useApiQuery('address_metadata_tag_types');
 

ui/publicTags/submit/PublicTagsSubmitResult.tsx

@@ -18,7 +18,7 @@ interface Props {
 
 const PublicTagsSubmitResult = ({ data }: Props) => {
   const groupedData = React.useMemo(() => groupSubmitResult(data), [ data ]);
-  const hasErrors = groupedData.items.length > 0 && groupedData.items[0].error !== null;
+  const hasErrors = groupedData.items.some((item) => item.error !== null);
   const companyWebsite = makePrettyLink(groupedData.companyWebsite);
 
   return (
@@ -52,7 +52,7 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
       </Grid>
 
       <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
-      { hasErrors ? <PublicTagsSubmitResultWithErrors data={ data }/> : <PublicTagsSubmitResultSuccess data={ groupedData }/> }
+      { hasErrors ? <PublicTagsSubmitResultWithErrors data={ groupedData }/> : <PublicTagsSubmitResultSuccess data={ groupedData }/> }
 
       <Button size="lg" mt={ 8 } as="a" href={ route({ pathname: '/public-tags/submit' }) }>Add new tag</Button>
     </div>

ui/publicTags/submit/mocks.ts

 import type { FormSubmitResultItem } from './types';
 
-const address1 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
-const address2 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5858';
-const address3 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5857';
-const address4 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5856';
+const address1 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5851';
+const address2 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5852';
+const address3 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5853';
+const address4 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5854';
 const address5 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5855';
 
 const responseBaseFields = {
@@ -57,3 +57,41 @@ export const allSuccessResponses: Array<FormSubmitResultItem> = [
     },
   }))))
   .flat();
+
+export const mixedResponses: Array<FormSubmitResultItem> = [
+  // address1
+  {
+    error: null,
+    payload: { address: address1, ...tag1 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address1, ...tag2 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address1, ...tag3 },
+  },
+  // address2
+  {
+    error: 'Some error',
+    payload: { address: address2, ...tag2 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address2, ...tag3 },
+  },
+  // address3
+  {
+    error: 'Some error',
+    payload: { address: address3, ...tag1 },
+  },
+  {
+    error: 'Another nasty error',
+    payload: { address: address3, ...tag2 },
+  },
+  {
+    error: null,
+    payload: { address: address3, ...tag3 },
+  },
+].map((item) => ({ ...item, payload: { ...item.payload, ...responseBaseFields } }));

ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx

@@ -18,7 +18,7 @@ const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
     <Grid gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 3 } columnGap={ 3 }>
       <GridItem>
         <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
-        <Flex flexDir="column" rowGap={ 3 } mt={ 2 }>
+        <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
           { data.items
             .map(({ addresses }) => addresses)
             .flat()

ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, Button, Flex, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import type { FormSubmitResult } from '../types';
+import type { FormSubmitResultGrouped } from '../types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
 
 interface Props {
-  data: FormSubmitResult;
+  data: FormSubmitResultGrouped;
 }
 
-const PublicTagsSubmitResultWithErrors = (props: Props) => {
-  return <Box>{ props.data.length }</Box>;
+const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
+  const isMobile = useIsMobile();
+  const bgColorSuccess = useColorModeValue('green.50', 'green.800');
+  const bgColorError = useColorModeValue('red.50', 'red.800');
+
+  return (
+    <Flex flexDir="column" rowGap={ 3 }>
+      { data.items.map((item, index) => {
+
+        return (
+          <Flex key={ index } flexDir={{ base: 'column', lg: 'row' }}>
+            <Box flexGrow={ 1 }>
+              <Grid
+                gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }}
+                bgColor={ item.error ? bgColorError : bgColorSuccess }
+                borderRadius="base"
+                rowGap={ 3 }
+              >
+                <GridItem px={ 6 } pt={ 4 } pb={{ base: 0, lg: 4 }}>
+                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
+                  <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
+                    { item.addresses.map((hash) => (
+                      <AddressEntity
+                        key={ hash }
+                        address={{ hash }}
+                        noIcon
+                        truncation={ isMobile ? 'constant' : 'dynamic' }
+                      />
+                    )) }
+                  </Flex>
+                </GridItem>
+                <GridItem px={ 6 } pb={ 4 } pt={{ base: 0, lg: 4 }}>
+                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+                  <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
+                    { item.tags.map((tag) => (
+                      <EntityTag
+                        key={ tag.name }
+                        truncate
+                        data={{ ...tag, slug: '', ordinal: 0 }}
+                      />
+                    )) }
+                  </Flex>
+                </GridItem>
+              </Grid>
+              { item.error && <Box color="red.500" mt={ 1 } fontSize="sm">{ item.error }</Box> }
+            </Box>
+            { item.error && (
+              <Button
+                variant="outline"
+                size="sm"
+                flexShrink={ 0 }
+                mt={{ base: 1, lg: 6 }}
+                ml={{ base: 0, lg: 6 }}
+                w="min-content"
+              >
+                Start  over
+              </Button>
+            ) }
+            { !item.error && !isMobile && <Box w="95px" ml={ 6 } flexShrink={ 0 }/> }
+          </Flex>
+        );
+      }) }
+    </Flex>
+  );
 };
 
-export default PublicTagsSubmitResultWithErrors;
+export default React.memo(PublicTagsSubmitResultWithErrors);

ui/publicTags/submit/utils.ts

-import type { FormSubmitResult, FormSubmitResultGrouped, FormSubmitResultItemGrouped } from './types';
+import _isEqual from 'lodash/isEqual';
 
-const tagIdentity = (tag: FormSubmitResultItemGrouped['tags'][number]) => tag.name + ':' + tag.tagType;
+import type { FormSubmitResult, FormSubmitResultGrouped, FormSubmitResultItemGrouped } from './types';
 
 export function groupSubmitResult(data: FormSubmitResult): FormSubmitResultGrouped {
   const _items: Array<FormSubmitResultItemGrouped> = [];
@@ -24,9 +24,7 @@ export function groupSubmitResult(data: FormSubmitResult): FormSubmitResultGroup
 
   // merge items with the same error and tags
   for (const item of _items) {
-    const existingItem = items.find(({ error, tags }) => error === item.error &&
-        tags.length === item.tags.length && tags.every(tagIdentity),
-    );
+    const existingItem = items.find(({ error, tags }) => error === item.error && _isEqual(tags, item.tags));
     if (existingItem) {
       existingItem.addresses.push(...item.addresses);
       continue;
@@ -40,6 +38,14 @@ export function groupSubmitResult(data: FormSubmitResult): FormSubmitResultGroup
     requesterEmail: data[0].payload.requesterEmail,
     companyName: data[0].payload.companyName,
     companyWebsite: data[0].payload.companyWebsite,
-    items,
+    items: items.sort((a, b) => {
+      if (a.error && !b.error) {
+        return 1;
+      }
+      if (!a.error && b.error) {
+        return -1;
+      }
+      return 0;
+    }),
   };
 }