design changes

ui/address/details/AddressQrCode.tsx

@@ -21,10 +21,11 @@ import QRCode from 'qrcode';
 import React from 'react';
 
 import type { Address as AddressType } from 'types/api/address';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
 import qrCodeIcon from 'icons/qr_code.svg';
 import getPageType from 'lib/mixpanel/getPageType';
 import * as mixpanel from 'lib/mixpanel/index';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 const SVG_OPTIONS = {
   margin: 0,
@@ -101,7 +102,6 @@ const AddressQrCode = ({ address, className, isLoading }: Props) => {
               <ModalBody mb={ 0 }>
                 <AddressEntity
                   mb={ 3 }
-                  fontSize="md"
                   fontWeight={ 500 }
                   color="text"
                   address={ address }

ui/address/tokens/NFTItem.tsx

-import { Flex, Link, Text, LinkBox, LinkOverlay, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Box, Flex, Link, Text, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
@@ -12,27 +12,26 @@ import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 type Props = AddressTokenBalance & { isLoading: boolean };
 
 const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLoading }: Props) => {
-  const tokenLink = route({ pathname: '/token/[hash]', query: { hash: token.address } });
+  const tokenInstanceLink = tokenId ? route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenId } }) : undefined;
 
   return (
-    <LinkBox
+    <Box
       w={{ base: '100%', lg: '210px' }}
       border="1px solid"
       borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
       borderRadius="12px"
       p="10px"
-      _hover={{ boxShadow: 'md' }}
       fontSize="sm"
       fontWeight={ 500 }
       lineHeight="20px"
     >
-      <LinkOverlay href={ isLoading ? undefined : tokenLink }>
+      <Link href={ isLoading ? undefined : tokenInstanceLink }>
         <NftMedia
           mb="18px"
           url={ tokenInstance?.animation_url || tokenInstance?.image_url || null }
           isLoading={ isLoading }
         />
-      </LinkOverlay>
+      </Link>
       { tokenId && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
@@ -44,7 +43,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLo
                 whiteSpace="nowrap"
                 textOverflow="ellipsis"
                 overflow="hidden"
-                href={ route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenId } }) }
+                href={ tokenInstanceLink }
               >
                 { tokenId }
               </Link>
@@ -58,7 +57,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLo
         noCopy
         noSymbol
       />
-    </LinkBox>
+    </Box>
   );
 };
 

ui/shared/nft/NftFallback.tsx

-import { Icon, useColorModeValue } from '@chakra-ui/react';
+import { Icon, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import nftIcon from 'icons/nft_shield.svg';
 
-const NftFallback = () => {
+const NftFallback = ({ className }: {className?: string}) => {
   return (
     <Icon
+      className={ className }
       as={ nftIcon }
       p="50px"
       color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') }
@@ -14,4 +15,4 @@ const NftFallback = () => {
   );
 };
 
-export default NftFallback;
+export default chakra(NftFallback);

ui/shared/nft/NftImageWithFullscreen.tsx

@@ -20,7 +20,7 @@ const NftImageWithFullscreen = ({ src, onLoad, onError }: Props) => {
     <>
       <NftImage src={ src } onLoad={ onLoad } onError={ onError } onClick={ onOpen }/>
       <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-        <Image src={ src } alt="Token instance image" maxH="90vh" w="100%" maxW="90vw"/>
+        <Image src={ src } alt="Token instance image" maxH="90vh" maxW="90vw"/>
       </NftMediaFullscreenModal>
     </>
   );

ui/shared/nft/NftMedia.tsx

@@ -10,6 +10,7 @@ import NftImageWithFullscreen from './NftImageWithFullscreen';
 import NftVideo from './NftVideo';
 import NftVideoWithFullscreen from './NftVideoWithFullscreen';
 import useNftMediaType from './useNftMediaType';
+import { mediaStyleProps } from './utils';
 
 interface Props {
   url: string | null;
@@ -23,6 +24,7 @@ const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
   const [ isLoadingError, setIsLoadingError ] = React.useState(false);
 
   const { ref, inView } = useInView({ triggerOnce: true });
+
   const type = useNftMediaType(url, !isLoading && inView);
 
   const handleMediaLoaded = React.useCallback(() => {
@@ -36,7 +38,8 @@ const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
 
   const content = (() => {
     if (!url || isLoadingError) {
-      return <NftFallback/>;
+      const styleProps = withFullscreen ? {} : mediaStyleProps;
+      return <NftFallback { ...styleProps }/>;
     }
 
     const props = {

ui/shared/nft/NftMediaFullscreenModal.tsx

@@ -17,7 +17,7 @@ const NftMediaFullscreenModal = ({ isOpen, onClose, children }: Props) => {
     <Modal isOpen={ isOpen } onClose={ onClose } motionPreset="none">
       <ModalOverlay/>
       <ModalContent w="unset" maxW="100vw" p={ 0 }>
-        <ModalCloseButton position="fixed" color="whiteAlpha.800"/>
+        <ModalCloseButton position="fixed" top={{ base: 2.5, lg: 8 }} right={{ base: 2.5, lg: 8 }} color="whiteAlpha.800"/>
         { children }
       </ModalContent>
     </Modal>

ui/shared/nft/NftVideo.tsx

 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import { mediaStyleProps } from './utils';
+import { mediaStyleProps, videoPlayProps } from './utils';
 
 interface Props {
   src: string;
@@ -13,12 +13,8 @@ interface Props {
 const NftVideo = ({ src, onLoad, onError, onClick }: Props) => {
   return (
     <chakra.video
+      { ...videoPlayProps }
       src={ src }
-      autoPlay
-      disablePictureInPicture
-      loop
-      muted
-      playsInline
       onCanPlayThrough={ onLoad }
       onError={ onError }
       borderRadius="md"

ui/shared/nft/NftVideoWithFullscreen.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import NftMediaFullscreenModal from './NftMediaFullscreenModal';
 import NftVideo from './NftVideo';
+import { videoPlayProps } from './utils';
 
 interface Props {
   src: string;
@@ -21,12 +22,8 @@ const NftVideoWithFullscreen = ({ src, onLoad, onError }: Props) => {
       <NftVideo src={ src } onLoad={ onLoad } onError={ onError } onClick={ onOpen }/>
       <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
         <chakra.video
+          { ...videoPlayProps }
           src={ src }
-          autoPlay
-          disablePictureInPicture
-          loop
-          muted
-          playsInline
           onCanPlayThrough={ onLoad }
           onError={ onError }
           maxH="90vh"

ui/shared/nft/utils.ts

@@ -39,3 +39,11 @@ export const mediaStyleProps = {
     },
   },
 };
+
+export const videoPlayProps = {
+  autoPlay: true,
+  disablePictureInPicture: true,
+  loop: true,
+  muted: true,
+  playsInline: true,
+};

ui/token/TokenInventoryItem.tsx

-import { Flex, Text, LinkBox, LinkOverlay, useColorModeValue, Skeleton } from '@chakra-ui/react';
-import NextLink from 'next/link';
+import { Box, Flex, Text, Link, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
 
+import { route } from 'nextjs-routes';
+
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -24,29 +25,22 @@ const NFTItem = ({ item, isLoading }: Props) => {
     />
   );
 
+  const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: item.token.address, id: item.id } });
+
   return (
-    <LinkBox
+    <Box
       w={{ base: '100%', lg: '210px' }}
       border="1px solid"
       borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
       borderRadius="12px"
       p="10px"
-      _hover={{ boxShadow: isLoading ? 'none' : 'md' }}
       fontSize="sm"
       fontWeight={ 500 }
       lineHeight="20px"
     >
-      { isLoading ? mediaElement : (
-        <NextLink
-          href={{ pathname: '/token/[hash]/instance/[id]', query: { hash: item.token.address, id: item.id } }}
-          passHref
-          legacyBehavior
-        >
-          <LinkOverlay>
+      <Link href={ isLoading ? undefined : url }>
         { mediaElement }
-          </LinkOverlay>
-        </NextLink>
-      ) }
+      </Link>
       { item.id && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
@@ -58,6 +52,7 @@ const NFTItem = ({ item, isLoading }: Props) => {
                 whiteSpace="nowrap"
                 display="block"
                 isLoading={ isLoading }
+                href={ url }
               >
                 { item.id }
               </LinkInternal>
@@ -77,7 +72,7 @@ const NFTItem = ({ item, isLoading }: Props) => {
           />
         </Flex>
       ) }
-    </LinkBox>
+    </Box>
   );
 };