Responsive New Asset Flow (#306)

src/components/CreateNonFungiblePage/CollectionSelect.tsx

@@ -1,63 +1,23 @@
 import React, { useEffect } from 'react';
-import { Flex, Heading, Text } from '@chakra-ui/react';
+import {
+  Flex,
+  Heading,
+  Box,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuOptionGroup,
+  MenuItemOption
+} from '@chakra-ui/react';
 import { CreateCollectionButton } from '../common/CreateCollection';
 import { useSelector, useDispatch } from '../../reducer';
-import {
-  CreateNftState,
-  selectCollection
-} from '../../reducer/slices/createNft';
+import { selectCollection } from '../../reducer/slices/createNft';
 import { getWalletAssetContractsQuery } from '../../reducer/async/queries';
-
-interface CollectionRowProps {
-  name: string;
-  address: string;
-  state: CreateNftState;
-  dispatch: ReturnType<typeof useDispatch>;
-}
-
-function CollectionRow({ state, dispatch, name, address }: CollectionRowProps) {
-  const selected = state.collectionAddress === address;
-  return (
-    <Flex
-      align="center"
-      py={4}
-      px={4}
-      mb={4}
-      border="1px solid"
-      borderColor={selected ? 'brand.blue' : 'brand.brightGray'}
-      borderRadius="4px"
-      bg={selected ? 'brand.blue' : 'white'}
-      _hover={{
-        cursor: 'pointer'
-      }}
-      onClick={() => dispatch(selectCollection(address))}
-    >
-      <Flex
-        align="center"
-        justify="center"
-        w={8}
-        h={8}
-        bg={selected ? 'white' : 'brand.blue'}
-        color={selected ? 'brand.blue' : 'white'}
-        borderRadius="100%"
-        fontWeight="600"
-      >
-        <Text>{name[0]}</Text>
-      </Flex>
-      <Text
-        color={selected ? 'white' : 'black'}
-        pl={4}
-        fontSize="md"
-        fontWeight={selected ? '600' : 'normal'}
-      >
-        {name}
-      </Text>
-    </Flex>
-  );
-}
+import { ChevronDown } from 'react-feather';
 
 export default function CollectionSelect() {
-  const { collections } = useSelector(s => s.collections);
+  const collections = useSelector(s => s.collections.collections);
   const state = useSelector(s => s.createNft);
   const dispatch = useDispatch();
 
@@ -66,30 +26,49 @@ export default function CollectionSelect() {
   }, [collections, dispatch]);
 
   return (
-    <Flex flexDir="column" pt={8}>
-      <Flex
-        align="center"
-        justify="space-between"
-        mb={4}
-        pb={4}
-        borderBottom="1px solid"
-        borderColor="brand.brightGray"
-      >
-        <Heading size="lg">Collections</Heading>
+    <Flex pb={8} flexDir="column">
+      <Flex pb={4} align="center" justify="space-between">
+        <Heading size="md">Select a collection</Heading>
         <CreateCollectionButton />
       </Flex>
-      {Object.keys(collections).map(key => {
-        const { address, metadata } = collections[key];
-        return (
-          <CollectionRow
-            key={collections[key].address}
-            name={metadata.name || address}
-            address={address}
-            dispatch={dispatch}
-            state={state}
-          />
-        );
-      })}
+      <Menu>
+        <MenuButton
+          as={Button}
+          border="1px solid"
+          borderColor="brand.gray"
+          fontSize="lg"
+          fontWeight="normal"
+          py={3}
+          height="auto"
+          color={state.collectionAddress ? 'brand.black' : 'brand.gray'}
+        >
+          <Flex align="center">
+            <Box mr={3}>
+              <ChevronDown />
+            </Box>
+            {(state.collectionAddress &&
+              collections[state.collectionAddress]?.metadata?.name) ||
+              'No collection selected'}
+          </Flex>
+        </MenuButton>
+        <MenuList>
+          <MenuOptionGroup
+            type="radio"
+            defaultValue={state.collectionAddress || ''}
+          >
+            {Object.keys(collections).map(address => (
+              <MenuItemOption
+                key={address}
+                value={address}
+                selected={address === state.collectionAddress}
+                onClick={() => dispatch(selectCollection(address))}
+              >
+                {collections[address].metadata.name}
+              </MenuItemOption>
+            ))}
+          </MenuOptionGroup>
+        </MenuList>
+      </Menu>
     </Flex>
   );
 }

src/components/CreateNonFungiblePage/Confirmation.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  Box,
+  Heading,
+  Text,
+  Flex,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel
+} from '@chakra-ui/react';
+import { useSelector } from '../../reducer';
+import { FilePreview } from './FileUpload';
+
+function Label(props: { children: React.ReactNode }) {
+  return (
+    <Text fontSize="md" fontFamily="mono" color="brand.darkGray">
+      {props.children}
+    </Text>
+  );
+}
+
+export default function Confirmation() {
+  const selectedFile = useSelector(s => s.createNft.selectedFile);
+  const collections = useSelector(s => s.collections.collections);
+  const fields = useSelector(s => s.createNft.fields);
+  const attributes = useSelector(s => s.createNft.attributes);
+  const collectionAddress = useSelector(s => s.createNft.collectionAddress);
+
+  return (
+    <Box>
+      <Heading size="lg" mb={4}>
+        Confirm Details
+      </Heading>
+      <Flex w="100%" justify="center" mb={8}>
+        <FilePreview file={selectedFile!} />
+      </Flex>
+      <Label>Collection</Label>
+      <Text fontSize="md" mb={[2, 4]}>
+        {collections[collectionAddress!]?.metadata?.name}
+      </Text>
+      <Label>Name</Label>
+      <Text fontSize="md" mb={[2, 4]}>
+        {fields.name}
+      </Text>
+      <Label>Description</Label>
+      <Text fontSize="md" mb={[2, 4]}>
+        {fields.description || 'No description provided'}
+      </Text>
+      <Accordion allowToggle>
+        <AccordionItem border="none">
+          <AccordionButton mt={[4, 8]} p={0}>
+            <Text color="brand.neutralGray">Metadata</Text>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4}>
+            {attributes?.map(({ name, value }) => (
+              <Flex mt={[4, 8]}>
+                <Text color="brand.neutralGray">{name}:</Text>
+                <Text color="brand.darkGray" fontWeight="bold" ml={[1]}>
+                  {value}
+                </Text>
+              </Flex>
+            ))}
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  );
+}

src/components/CreateNonFungiblePage/FileUpload.tsx

@@ -11,7 +11,14 @@ import {
 export function FilePreview({ file }: { file: SelectedFile }) {
   const dispatch = useDispatch();
   if (/^image\/.*/.test(file.type)) {
-    return <Image src={file.objectUrl} width="100%" height="100%" objectFit='contain' />;
+    return (
+      <Image
+        src={file.objectUrl}
+        width="100%"
+        height="100%"
+        objectFit="contain"
+      />
+    );
   }
   if (/^video\/.*/.test(file.type)) {
     const canvasRef = createRef<HTMLCanvasElement>();
@@ -76,7 +83,16 @@ export default function FileUpload() {
   });
 
   return (
-    <Flex align="center" flexDir="column" width="100%" flex="1" pt={28}>
+    <Flex
+      align="center"
+      flexDir="column"
+      width="100%"
+      flex="1"
+      pt={{
+        base: 2,
+        md: 12
+      }}
+    >
       <Heading size="lg" paddingBottom={8} textAlign="center">
         Upload your file
       </Heading>
@@ -118,11 +134,13 @@ export default function FileUpload() {
             borderWidth="1px"
             flexDir="column"
             align="center"
-            py={10}
+            py={24}
             bg="brand.brightGray"
             flex="1"
           >
-            <Text fontSize={20}>Click or drag file to this area to upload</Text>
+            <Text fontSize={20} textAlign="center" paddingX={4}>
+              Click or drag file to this area to upload
+            </Text>
             <Text fontSize={18} color="brand.gray">
               Support for single file
             </Text>

src/components/CreateNonFungiblePage/Form.tsx

@@ -21,6 +21,7 @@ import {
   updateMetadataRowName,
   updateMetadataRowValue
 } from '../../reducer/slices/createNft';
+import CollectionSelect from './CollectionSelect';
 
 const DESCRIPTION_PLACEHOLDER =
   'e.g. “This is an exclusive japanese comic illustration. Once you purchase it you will be able to get the t-shirt”';
@@ -31,8 +32,9 @@ export default function Form() {
   const { name, description } = state.fields;
   return (
     <>
+      <CollectionSelect />
       <Heading size="md" paddingBottom={6}>
-        What properties would you like to give your assets?
+        What properties would you like to give your asset?
       </Heading>
       <FormControl paddingBottom={6}>
         <FormLabel fontFamily="mono">Asset Name</FormLabel>