From 1d64c5a141be2f54aa2f2cc11efce8e42dbe3f14 Mon Sep 17 00:00:00 2001
From: thibautbremand <thibaut.bremand@gmail.com>
Date: Wed, 28 Jun 2023 18:34:51 +0200
Subject: [PATCH] Add NFT details modal

---
 .../molecules/NFTCard/NFTCard.test.tsx        |  13 +-
 .../components/molecules/NFTCard/NFTCard.tsx  | 150 ++++++++++--------
 .../organisms/NFTDetails/NFTDetails.tsx       |  79 +++++++++
 .../components/organisms/NFTDetails/index.ts  |   1 +
 .../src/components/organisms/index.ts         |   2 +
 5 files changed, 171 insertions(+), 74 deletions(-)
 create mode 100644 packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx
 create mode 100644 packages/extension/src/components/organisms/NFTDetails/index.ts

diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx
index f3b546825..e6c3aba08 100644
--- a/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx
+++ b/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
 
 import { LedgerContext } from '../../../contexts';
 import { valueLedgerContext } from '../../../mocks';
@@ -72,15 +72,4 @@ describe('NFTCard', () => {
     // Check that the NFT data is not displayed when an error occurs
     expect(screen.queryByTestId('nft_name')).not.toBeInTheDocument();
   });
-
-  test('button redirects to the correct URL', async () => {
-    const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation();
-
-    renderNFTCard({ NFT: mockNFT });
-    await waitFor(() => expect(mockGetNFTData).toHaveBeenCalled());
-
-    fireEvent.click(screen.getByRole('button'));
-
-    expect(windowOpenSpy).toHaveBeenCalledWith('someurl', '_blank');
-  });
 });
diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
index 3d4a622a7..5897021b7 100644
--- a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
+++ b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
@@ -1,22 +1,42 @@
-import { FC, useContext, useEffect, useState } from 'react';
+import { FC, forwardRef, useCallback, useContext, useEffect, useState } from 'react';
 
 import { OpenInNewOutlined } from '@mui/icons-material';
-import { Button, CircularProgress, ListItem, Paper, Tooltip } from '@mui/material';
+import { Button, CircularProgress, Dialog, ListItem, Paper, Slide, Tooltip } from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 import { AccountNFToken, NFTData } from '@gemwallet/constants';
 
 import { LedgerContext } from '../../../contexts';
 import { GemWallet } from '../../atoms';
+import { NFTDetails } from '../../organisms';
 
 export interface NFTCardProps {
   NFT: AccountNFToken;
 }
 
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement;
+  },
+  ref: React.Ref<unknown>
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
 export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
   const { getNFTData } = useContext(LedgerContext);
   const [NFTData, setNFTData] = useState<NFTData | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  const handleViewNFTClick = useCallback(() => {
+    setDialogOpen(true);
+  }, []);
+
+  const handleCloseDialog = useCallback(() => {
+    setDialogOpen(false);
+  }, []);
 
   useEffect(() => {
     const fetchNFTImg = async () => {
@@ -33,77 +53,83 @@ export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
     fetchNFTImg();
   }, [getNFTData, NFT]);
 
-  const handleViewNFTClick = () => {
-    window.open('someurl', '_blank'); // TODO: Add redirection url (Potential collaboration with NFT marketplace)?
-  };
-
   const handleTokenIdClick = (tokenId: string) => {
     navigator.clipboard.writeText(tokenId);
   };
 
   return (
-    <Paper
-      elevation={5}
-      style={{
-        padding: '10px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: '10px'
-      }}
-    >
-      <ListItem
+    <>
+      <Dialog
+        open={dialogOpen}
+        onClose={handleCloseDialog}
+        fullScreen
+        TransitionComponent={Transition}
+      >
+        {NFTData && <NFTDetails NFTData={NFTData} handleClose={handleCloseDialog} />}
+      </Dialog>
+      <Paper
+        elevation={5}
         style={{
-          flexDirection: 'column',
-          textAlign: 'center'
+          padding: '10px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: '10px'
         }}
       >
-        {loading ? (
-          <CircularProgress data-testid="progressbar" />
-        ) : NFTData?.image ? (
-          <LazyLoadImage
-            alt="nft"
-            height={150}
-            style={{ borderRadius: '4px', boxShadow: '4px 4px 0px black' }}
-            beforeLoad={() => <CircularProgress />}
-            effect="blur"
-            src={NFTData?.image}
-            width={150}
-          />
-        ) : (
-          <GemWallet />
-        )}
-        {NFTData ? (
-          <Tooltip title={NFTData.NFTokenID}>
+        <ListItem
+          style={{
+            flexDirection: 'column',
+            textAlign: 'center'
+          }}
+        >
+          {loading ? (
+            <CircularProgress data-testid="progressbar" />
+          ) : NFTData?.image ? (
+            <LazyLoadImage
+              alt="nft"
+              height={150}
+              style={{ borderRadius: '4px', boxShadow: '4px 4px 0px black' }}
+              beforeLoad={() => <CircularProgress />}
+              effect="blur"
+              src={NFTData?.image}
+              width={150}
+            />
+          ) : (
+            <GemWallet />
+          )}
+          {NFTData ? (
+            <Tooltip title={NFTData.NFTokenID}>
+              <div
+                style={{ fontSize: '14px', color: 'grey', marginTop: '10px', cursor: 'pointer' }}
+                onClick={() => handleTokenIdClick(NFTData.NFTokenID)}
+              >
+                {NFTData.NFTokenID.substring(0, 10) + '...'}
+              </div>
+            </Tooltip>
+          ) : null}
+          {NFTData?.name ? (
             <div
-              style={{ fontSize: '14px', color: 'grey', marginTop: '10px', cursor: 'pointer' }}
-              onClick={() => handleTokenIdClick(NFTData.NFTokenID)}
+              style={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
+              data-testid="nft_name"
             >
-              {NFTData.NFTokenID.substring(0, 10) + '...'}
+              {NFTData.name}
             </div>
-          </Tooltip>
-        ) : null}
-        {NFTData?.name ? (
-          <div
-            style={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
-            data-testid="nft_name"
+          ) : null}
+          {NFTData?.description ? (
+            <div style={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}>
+              {NFTData.description}
+            </div>
+          ) : null}
+          <Button
+            variant="outlined"
+            style={{ marginTop: '10px', fontSize: '14px', gap: '10px' }}
+            onClick={handleViewNFTClick}
           >
-            {NFTData.name}
-          </div>
-        ) : null}
-        {NFTData ? (
-          <div style={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}>
-            {NFTData.description}
-          </div>
-        ) : null}
-        <Button
-          variant="outlined"
-          style={{ marginTop: '10px', fontSize: '14px', gap: '10px' }}
-          onClick={handleViewNFTClick}
-        >
-          View <OpenInNewOutlined style={{ fontSize: '16px' }} />
-        </Button>
-      </ListItem>
-    </Paper>
+            View <OpenInNewOutlined style={{ fontSize: '16px' }} />
+          </Button>
+        </ListItem>
+      </Paper>
+    </>
   );
 };
diff --git a/packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx b/packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx
new file mode 100644
index 000000000..6851b3d7c
--- /dev/null
+++ b/packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx
@@ -0,0 +1,79 @@
+import React, { FC } from 'react';
+
+import CloseIcon from '@mui/icons-material/Close';
+import {
+  AppBar,
+  CircularProgress,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Toolbar,
+  Typography
+} from '@mui/material';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+import { NFTData } from '@gemwallet/constants';
+
+import { GemWallet } from '../../atoms';
+
+interface NFTDetailsProps {
+  NFTData: NFTData;
+  handleClose: () => void;
+}
+
+export const NFTDetails: FC<NFTDetailsProps> = ({ NFTData, handleClose }) => {
+  return (
+    <>
+      <AppBar sx={{ position: 'relative' }}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="close"
+            onClick={handleClose}
+            style={{ cursor: 'pointer' }}
+            data-testid="close-button"
+          >
+            <CloseIcon />
+          </IconButton>
+          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            NFT Details
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <List sx={{ width: '100%', wordBreak: 'break-word' }}>
+        {NFTData.image ? (
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <LazyLoadImage
+              alt="nft"
+              height={250}
+              style={{ borderRadius: '4px', boxShadow: '4px 4px 0px black' }}
+              beforeLoad={() => <CircularProgress />}
+              effect="blur"
+              src={NFTData?.image}
+              width={250}
+            />
+          </div>
+        ) : (
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <GemWallet />
+          </div>
+        )}
+        <ListItem style={{ padding: '8px 24px' }}>
+          <ListItemText primary="Token ID" secondary={NFTData.NFTokenID} />
+        </ListItem>
+        {NFTData.name ? (
+          <ListItem style={{ padding: '8px 24px' }}>
+            <ListItemText primary="Name" secondary={NFTData.name} />
+          </ListItem>
+        ) : null}
+        {NFTData.description ? (
+          <ListItem style={{ padding: '8px 24px' }}>
+            <ListItemText primary="Description" secondary={NFTData.description} />
+          </ListItem>
+        ) : null}
+      </List>
+    </>
+  );
+};
diff --git a/packages/extension/src/components/organisms/NFTDetails/index.ts b/packages/extension/src/components/organisms/NFTDetails/index.ts
new file mode 100644
index 000000000..f73711124
--- /dev/null
+++ b/packages/extension/src/components/organisms/NFTDetails/index.ts
@@ -0,0 +1 @@
+export * from './NFTDetails';
diff --git a/packages/extension/src/components/organisms/index.ts b/packages/extension/src/components/organisms/index.ts
index 9d8fad5d8..02e636d13 100644
--- a/packages/extension/src/components/organisms/index.ts
+++ b/packages/extension/src/components/organisms/index.ts
@@ -1,5 +1,7 @@
 export * from './BaseTransaction';
 export * from './Header';
 export * from './NavMenu';
+export * from './NFTDetails';
+export * from './NFTListing';
 export * from './TokenListing';
 export * from './TransactionListing';