removed prop ipfsEnabled and used with selector

MetaMask · Jul 31, 2023 · c15d839 · c15d839 · Ameralameri · Jul 31, 2023
1 parent 41a5b4c
commit c15d839
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 49 deletions.
diff --git a/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap b/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap
@@ -6,13 +6,7 @@ exports[`NFT Default Image should match snapshot with all provided props 1`] = `
     class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
-  >
-    <button
-      class="mm-box mm-text mm-button-base mm-button-base--block nft-default__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-    >
-      Show
-    </button>
-  </div>
+  />
 </div>
 `;
 
@@ -22,13 +16,7 @@ exports[`NFT Default Image should match snapshot with missing clickable prop 1`]
     class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
-  >
-    <button
-      class="mm-box mm-text mm-button-base mm-button-base--block nft-default__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-    >
-      Show
-    </button>
-  </div>
+  />
 </div>
 `;
 
@@ -38,12 +26,6 @@ exports[`NFT Default Image should render with no props 1`] = `
     class="mm-box nft-default mm-box--display-flex mm-box--rounded-lg"
     data-testid="nft-default-image"
     tabindex="0"
-  >
-    <button
-      class="mm-box mm-text mm-button-base mm-button-base--block nft-default__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-    >
-      Show
-    </button>
-  </div>
+  />
 </div>
 `;
diff --git a/ui/components/app/nft-default-image/nft-default-image.js b/ui/components/app/nft-default-image/nft-default-image.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Display,
   AlignItems,
@@ -11,14 +11,12 @@ import {
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { ButtonLink, Box } from '../../component-library';
 import { showIpfsModal } from '../../../store/actions';
+import { getIpfsGateway } from '../../../selectors';
 
-export default function NftDefaultImage({
-  className,
-  isIpfsEnabled,
-  clickable,
-}) {
+export default function NftDefaultImage({ className, clickable }) {
   const t = useI18nContext();
   const dispatch = useDispatch();
+  const isIpfsEnabled = useSelector(getIpfsGateway);
 
   return (
     <Box
@@ -53,10 +51,6 @@ NftDefaultImage.propTypes = {
    * Controls the css class for the cursor hover
    */
   clickable: PropTypes.bool,
-  /**
-   * Check if ipfs is Enabled or not based on Ipfs Value
-   */
-  isIpfsEnabled: PropTypes.bool,
   /**
    * An additional className to apply to the NFT default image
    */

diff --git a/ui/components/app/nft-default-image/nft-default-image.stories.js b/ui/components/app/nft-default-image/nft-default-image.stories.js
@@ -8,13 +8,6 @@ export default {
     clickable: {
       control: 'boolean',
     },
-    isIpfsEnabled: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    clickable: true,
-    isIpfsEnabled: false,
   },
 };
 

diff --git a/ui/components/app/nft-details/nft-details.js b/ui/components/app/nft-details/nft-details.js
@@ -194,7 +194,6 @@ export default function NftDetails({ nft }) {
               tokenId={tokenId}
               networkName={currentChain.nickname}
               networkSrc={currentChain.rpcPrefs?.imageUrl}
-              isIpfsEnabled={Boolean(ipfsGateway)}
             />
           </Box>
           <Box

diff --git a/ui/components/app/nfts-items/nfts-items.js b/ui/components/app/nfts-items/nfts-items.js
@@ -190,7 +190,6 @@ export default function NftsItems({
                     networkName={currentChain.nickname}
                     networkSrc={currentChain.rpcPrefs?.imageUrl}
                     onClick={handleImageClick}
-                    isIpfsEnabled={Boolean(ipfsGateway)}
                     clickable
                   />
                 </Box>

diff --git a/ui/components/multichain/nft-item/nft-item.js b/ui/components/multichain/nft-item/nft-item.js
@@ -15,7 +15,10 @@ import {
   Display,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import { getTestNetworkBackgroundColor } from '../../../selectors';
+import {
+  getIpfsGateway,
+  getTestNetworkBackgroundColor,
+} from '../../../selectors';
 
 export const NftItem = ({
   alt,
@@ -25,10 +28,10 @@ export const NftItem = ({
   networkSrc,
   tokenId,
   onClick,
-  isIpfsEnabled,
   clickable,
 }) => {
   const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+  const isIpfsEnabled = useSelector(getIpfsGateway);
   return (
     <Box
       className="nft-item__container"
@@ -76,7 +79,6 @@ export const NftItem = ({
             name={name}
             tokenId={tokenId}
             clickable={clickable}
-            isIpfsEnabled={isIpfsEnabled}
           />
         )}
       </BadgeWrapper>
@@ -93,5 +95,4 @@ NftItem.propTypes = {
   tokenId: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   clickable: PropTypes.bool,
-  isIpfsEnabled: PropTypes.bool,
 };
diff --git a/ui/components/multichain/nft-item/nft-item.test.js b/ui/components/multichain/nft-item/nft-item.test.js
@@ -1,13 +1,25 @@
 import React from 'react';
-import configureStore from 'redux-mock-store';
 import { fireEvent } from '@testing-library/react';
+import configureStore from '../../../store/store';
 import '@testing-library/jest-dom/extend-expect';
 import mockState from '../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { NftItem } from '.';
 
+const store = configureStore({
+  metamask: {
+    ...mockState.metamask,
+  },
+});
+
+const noIpsStore = configureStore({
+  metamask: {
+    ...mockState.metamask,
+    ipfsGateway: '',
+  },
+});
+
 describe('NftItem component', () => {
-  const store = configureStore()(mockState);
   jest.mock('../../../store/actions.ts', () => ({
     getTokenStandardAndDetails: jest.fn().mockResolvedValue(),
   }));
@@ -21,7 +33,6 @@ describe('NftItem component', () => {
       networkSrc: 'test-network-src',
       tokenId: '1',
       onClick: jest.fn(),
-      isIpfsEnabled: true,
     };
 
     it('renders correctly with an image source', () => {
@@ -35,8 +46,8 @@ describe('NftItem component', () => {
 
     it('renders correctly with default image when no image source is provided', () => {
       const { getByTestId, queryByTestId } = renderWithProvider(
-        <NftItem {...props} isIpfsEnabled={false} />,
-        store,
+        <NftItem {...props} />,
+        noIpsStore,
       );
 
       expect(queryByTestId('nft-image')).not.toBeInTheDocument();