full success result screen

ui/publicTags/submit/PublicTagsSubmitResult.tsx

-import { Alert, Box, Grid, GridItem } from '@chakra-ui/react';
+import { Alert, Box, Button, Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormSubmitResult } from './types';
 
+import { route } from 'nextjs-routes';
+
 import makePrettyLink from 'lib/makePrettyLink';
 import LinkExternal from 'ui/shared/LinkExternal';
 
@@ -21,12 +23,12 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
     <div>
       { !hasErrors && (
         <Alert status="success" mb={ 6 }>
-        Success! All tags went into moderation pipeline and soon will appear in the explorer.
+          Success! All tags went into moderation pipeline and soon will appear in the explorer.
         </Alert>
       ) }
 
       <Box as="h2" textStyle="h4">Company info</Box>
-      <Grid rowGap={ 3 } columnGap={ 6 } gridTemplateColumns="185px 1fr" mt={ 6 }>
+      <Grid rowGap={ 3 } columnGap={ 6 } gridTemplateColumns="170px 1fr" mt={ 6 }>
         <GridItem>Your name</GridItem>
         <GridItem>{ data[0].payload.requesterName }</GridItem>
         <GridItem>Email</GridItem>
@@ -49,8 +51,10 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
 
       <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
       { hasErrors ? <PublicTagsSubmitResultWithErrors data={ data }/> : <PublicTagsSubmitResultSuccess data={ data }/> }
+
+      <Button size="lg" mt={ 8 } as="a" href={ route({ pathname: '/public-tags/submit' }) }>Add new tag</Button>
     </div>
   );
 };
 
-export default PublicTagsSubmitResult;
+export default React.memo(PublicTagsSubmitResult);

ui/publicTags/submit/mocks.ts

@@ -4,24 +4,30 @@ export const item1: FormSubmitResultItem = {
   error: null,
   payload: {
     addresses: [
-      {
-        hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254',
-      },
+      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' },
+      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51255' },
+      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51256' },
+      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51257' },
     ],
     tags: [
       {
         name: 'hello',
-        type: {
-          label: 'name',
-          value: 'name',
-        },
+        type: { label: 'name', value: 'name' },
         url: 'https://ohhhh.me',
         tooltipDescription: 'hello again',
         bgColor: 'add',
         textColor: '00aa11',
       },
+      {
+        name: 'hello it is me.. i was wondering if after all these years you would like to meet',
+        type: { label: 'generic', value: 'generic' },
+        url: undefined,
+        tooltipDescription: undefined,
+        bgColor: undefined,
+        textColor: undefined,
+      },
     ],
-    requesterName: 'tomm',
+    requesterName: 'tommasdf jalskdfj asdflkjkas lasdfkj ',
     requesterEmail: 'tom@ohhhh.me',
     companyName: 'OHHHH',
     companyWebsite: 'https://ohhhh.me',

ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormSubmitResult } 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;
 }
 
 const PublicTagsSubmitResultSuccess = (props: Props) => {
-  return <Box>{ props.data.length }</Box>;
+  const isMobile = useIsMobile();
+
+  return (
+    <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 }>
+          { props.data
+            .map((item) => item.payload.addresses)
+            .flat()
+            .map((item) => <AddressEntity key={ item.hash } address={ item } noIcon truncation={ isMobile ? 'constant' : 'dynamic' }/>) }
+        </Flex>
+      </GridItem>
+      <GridItem>
+        <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+        <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
+          { props.data
+            .map((item) => item.payload.tags)
+            .flat()
+            .map((item) => (
+              <EntityTag
+                key={ item.name }
+                truncate
+                data={{
+                  name: item.name,
+                  tagType: item.type.value,
+                  meta: {
+                    bgColor: item.bgColor ? `#${ item.bgColor }` : undefined,
+                    textColor: item.textColor ? `#${ item.textColor }` : undefined,
+                    tooltipDescription: item.tooltipDescription,
+                    tagUrl: item.url,
+                  },
+                  slug: item.name,
+                  ordinal: 0,
+                }}/>
+            )) }
+        </Flex>
+      </GridItem>
+    </Grid>
+  );
 };
 
-export default PublicTagsSubmitResultSuccess;
+export default React.memo(PublicTagsSubmitResultSuccess);