qr code modal

theme/components/Modal.ts

@@ -72,6 +72,14 @@ const baseStyle = definePartsStyle((props) => ({
 }));
 
 const sizes = {
+  sm: definePartsStyle({
+    dialogContainer: {
+      height: '100%',
+    },
+    dialog: {
+      maxW: '536px',
+    },
+  }),
   md: definePartsStyle({
     dialogContainer: {
       height: '100%',

ui/address/details/AddressQrCode.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as addressMock from 'mocks/address/address';
 import TestApp from 'playwright/TestApp';
 
 import AddressQrCode from './AddressQrCode';
@@ -8,7 +9,7 @@ import AddressQrCode from './AddressQrCode';
 test('default view +@mobile +@dark-mode', async({ mount, page }) => {
   await mount(
     <TestApp>
-      <AddressQrCode hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29"/>
+      <AddressQrCode address={ addressMock.withoutName }/>
     </TestApp>,
   );
   await page.getByRole('button', { name: /qr code/i }).click();

ui/address/details/AddressQrCode.tsx

@@ -6,7 +6,9 @@ import {
   ModalBody,
   ModalContent,
   ModalCloseButton,
+  ModalHeader,
   ModalOverlay,
+  LightMode,
   Box,
   useDisclosure,
   Tooltip,
@@ -18,8 +20,9 @@ import { useRouter } from 'next/router';
 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 useIsMobile from 'lib/hooks/useIsMobile';
 import getPageType from 'lib/mixpanel/getPageType';
 import * as mixpanel from 'lib/mixpanel/index';
 
@@ -29,13 +32,13 @@ const SVG_OPTIONS = {
 
 interface Props {
   className?: string;
-  hash: string;
+  address: AddressType;
   isLoading?: boolean;
 }
 
-const AddressQrCode = ({ hash, className, isLoading }: Props) => {
+const AddressQrCode = ({ address, className, isLoading }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const isMobile = useIsMobile();
+
   const router = useRouter();
 
   const [ qr, setQr ] = React.useState('');
@@ -45,7 +48,7 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
 
   React.useEffect(() => {
     if (isOpen) {
-      QRCode.toString(hash, SVG_OPTIONS, (error: Error | null | undefined, svg: string) => {
+      QRCode.toString(address.hash, SVG_OPTIONS, (error: Error | null | undefined, svg: string) => {
         if (error) {
           setError('We were unable to generate QR code.');
           Sentry.captureException(error, { tags: { source: 'qr_code' } });
@@ -57,7 +60,7 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
         mixpanel.logEvent(mixpanel.EventTypes.QR_CODE, { 'Page type': pageType });
       });
     }
-  }, [ hash, isOpen, onClose, pageType ]);
+  }, [ address.hash, isOpen, onClose, pageType ]);
 
   if (isLoading) {
     return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
@@ -77,15 +80,39 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
           icon={ <Icon as={ qrCodeIcon } boxSize={ 5 }/> }
         />
       </Tooltip>
-      <Modal isOpen={ isOpen } onClose={ onClose } size={{ base: 'full', lg: 'sm' }}>
-        <ModalOverlay/>
-        <ModalContent bgColor={ error ? undefined : 'white' }>
-          { isMobile && <ModalCloseButton/> }
-          <ModalBody mb={ 0 }>
-            { error ? <Alert status="warning">{ error }</Alert> : <Box dangerouslySetInnerHTML={{ __html: qr }}/> }
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+
+      { error && (
+        <Modal isOpen={ isOpen } onClose={ onClose } size={{ base: 'full', lg: 'sm' }}>
+          <ModalOverlay/>
+          <ModalContent>
+            <ModalBody mb={ 0 }>
+              <Alert status="warning">{ error }</Alert>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      ) }
+      { !error && (
+        <LightMode>
+          <Modal isOpen={ isOpen } onClose={ onClose } size={{ base: 'full', lg: 'sm' }}>
+            <ModalOverlay/>
+            <ModalContent>
+              <ModalHeader fontWeight="500" textStyle="h3" mb={ 4 }>Address QR code</ModalHeader>
+              <ModalCloseButton/>
+              <ModalBody mb={ 0 }>
+                <AddressEntity
+                  mb={ 3 }
+                  fontSize="md"
+                  fontWeight={ 500 }
+                  color="text"
+                  address={ address }
+                  noLink
+                />
+                <Box p={ 4 } dangerouslySetInnerHTML={{ __html: qr }}/>
+              </ModalBody>
+            </ModalContent>
+          </Modal>
+        </LightMode>
+      ) }
     </>
   );
 };

ui/shared/AddressHeadingInfo.tsx

@@ -37,7 +37,7 @@ const AddressHeadingInfo = ({ address, token, isLinkDisabled, isLoading }: Props
       { !isLoading && !address.is_contract && config.features.account.isEnabled && (
         <AddressFavoriteButton hash={ address.hash } watchListId={ address.watchlist_address_id } ml={ 3 }/>
       ) }
-      <AddressQrCode hash={ address.hash } ml={ 2 } isLoading={ isLoading } flexShrink={ 0 }/>
+      <AddressQrCode address={ address } ml={ 2 } isLoading={ isLoading } flexShrink={ 0 }/>
       { config.features.account.isEnabled && <AddressActionsMenu isLoading={ isLoading }/> }
     </Flex>
   );