(chore) - remove extraneous deps (#149)

* remove extraneous deps

* try whatwg polyfill

* add changeset

Author: JoviDeCroock

.changeset/few-queens-bathe.md

@@ -0,0 +1,6 @@
+---
+'@web3-ui/components': patch
+'@web3-ui/core': patch
+---
+
+Remove the `cross-fetch` polyfill

package.json

@@ -45,7 +45,8 @@
     "jest": "^26.6.3",
     "lint-staged": "^12.1.3",
     "msw": "^0.35.0",
-    "ts-jest": "^26.4.4"
+    "ts-jest": "^26.4.4",
+    "whatwg-fetch": "^3.6.2"
   },
   "lint-staged": {
     "*.{ts,tsx,md,json}": [

packages/components/package.json

@@ -30,10 +30,8 @@
     "@babel/runtime": "^7.16.3",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.2",
-    "@emotion/core": "^11.0.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "cross-fetch": "^3.1.4",
     "ethers": "^5.5.2",
     "framer-motion": "^4"
   },

packages/components/src/components/NFT/NFT.tsx

@@ -9,9 +9,8 @@ import {
   VStack,
   Skeleton,
   Alert,
-  AlertIcon,
+  AlertIcon
 } from '@chakra-ui/react';
-import fetch from 'cross-fetch';
 
 export interface NFTProps {
   /**
@@ -47,7 +46,9 @@ export const NFT = ({ contractAddress, tokenId, size = 'xs' }: NFTProps) => {
 
   const fetchNFTData = useCallback(async () => {
     try {
-      const res = await fetch(`https://api.opensea.io/api/v1/asset/${contractAddress}/${tokenId}/`);
+      const res = await fetch(
+        `https://api.opensea.io/api/v1/asset/${contractAddress}/${tokenId}/`
+      );
       if (!res.ok) {
         throw Error(
           `OpenSea request failed with status: ${res.status}. Make sure you are on mainnet.`
@@ -61,7 +62,7 @@ export const NFT = ({ contractAddress, tokenId, size = 'xs' }: NFTProps) => {
           name: data.name,
           assetContractName: data.asset_contract.name,
           assetContractSymbol: data.asset_contract.symbol,
-          animationUrl: data.animation_url,
+          animationUrl: data.animation_url
         });
       }
     } catch (error) {
@@ -90,7 +91,7 @@ export const NFT = ({ contractAddress, tokenId, size = 'xs' }: NFTProps) => {
 export const NFTCard = ({
   data,
   errorMessage = '',
-  size,
+  size
 }: {
   data: NFTData | undefined | null;
   errorMessage?: string | undefined;
@@ -106,38 +107,49 @@ export const NFTCard = ({
 
   if (errorMessage) {
     return (
-      <Alert status='error'>
+      <Alert status="error">
         <AlertIcon />
         {errorMessage}
       </Alert>
     );
   }
 
   return (
-    <Skeleton isLoaded={!!data} maxW={size} h='md'>
-      <Box maxW={size} borderRadius='lg' borderWidth='1px' overflow='hidden'>
+    <Skeleton isLoaded={!!data} maxW={size} h="md">
+      <Box maxW={size} borderRadius="lg" borderWidth="1px" overflow="hidden">
         {animationUrl ? (
           animationUrl.endsWith('.mp3') ? (
             <VStack>
-              <Image src={imageUrl} alt={displayName} borderRadius='lg' w={size} />
-              <audio src={animationUrl} controls autoPlay muted style={{ borderRadius: '7px' }} />
+              <Image
+                src={imageUrl}
+                alt={displayName}
+                borderRadius="lg"
+                w={size}
+              />
+              <audio
+                src={animationUrl}
+                controls
+                autoPlay
+                muted
+                style={{ borderRadius: '7px' }}
+              />
             </VStack>
           ) : (
-            <Flex w={size} h={size} bg='black' justifyContent='center'>
+            <Flex w={size} h={size} bg="black" justifyContent="center">
               <video src={animationUrl} controls autoPlay muted />
             </Flex>
           )
         ) : (
-          <Image src={imageUrl} alt={displayName} borderRadius='lg' w={size} />
+          <Image src={imageUrl} alt={displayName} borderRadius="lg" w={size} />
         )}
-        <Box p='6'>
-          <Flex alignItems='center' justifyContent='space-between' pb='2'>
-            <Heading as='h3' size='sm' style={{ overflowWrap: 'anywhere' }}>
+        <Box p="6">
+          <Flex alignItems="center" justifyContent="space-between" pb="2">
+            <Heading as="h3" size="sm" style={{ overflowWrap: 'anywhere' }}>
               {displayName}
             </Heading>
-            {assetContractSymbol && <Tag size='sm'>{assetContractSymbol}</Tag>}
+            {assetContractSymbol && <Tag size="sm">{assetContractSymbol}</Tag>}
           </Flex>
-          <Text fontSize='xs'>
+          <Text fontSize="xs">
             {assetContractName} #{tokenId}
           </Text>
         </Box>

packages/components/src/components/NFTGallery/NFTGallery.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import fetch from 'cross-fetch';
 import { ethers } from 'ethers';
 import { VStack, Heading, Grid, Alert, AlertIcon } from '@chakra-ui/react';
 import { NFTCard } from '../NFT';
@@ -35,7 +34,11 @@ export interface OpenSeaAsset {
  * Component to display a grid of NFTs owned by an address. It uses the OpenSea API to fetch
  * the NFTs.
  */
-export const NFTGallery = ({ address, gridWidth = 4, web3Provider }: NFTGalleryProps) => {
+export const NFTGallery = ({
+  address,
+  gridWidth = 4,
+  web3Provider
+}: NFTGalleryProps) => {
   const [nfts, setNfts] = React.useState<OpenSeaAsset[]>([]);
   const [errorMessage, setErrorMessage] = React.useState();
 
@@ -65,9 +68,9 @@ export const NFTGallery = ({ address, gridWidth = 4, web3Provider }: NFTGalleryP
 
   return (
     <VStack>
-      <Heading size='lg'>NFT Gallery</Heading>
+      <Heading size="lg">NFT Gallery</Heading>
       {errorMessage && (
-        <Alert status='error'>
+        <Alert status="error">
           <AlertIcon />
           {errorMessage}
         </Alert>
@@ -81,9 +84,9 @@ export const NFTGallery = ({ address, gridWidth = 4, web3Provider }: NFTGalleryP
               imageUrl: nft.image_url,
               tokenId: nft.token_id,
               assetContractName: nft.asset_contract.name,
-              assetContractSymbol: nft.asset_contract.symbol,
+              assetContractSymbol: nft.asset_contract.symbol
             }}
-            size='xs'
+            size="xs"
           />
         ))}
       </Grid>

packages/core/package.json

@@ -29,11 +29,8 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@chakra-ui/react": "^1.7.2",
-    "@emotion/core": "^11.0.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "classnames": "^2.2.6",
-    "cross-fetch": "^3.1.4",
     "framer-motion": "^4",
     "@web3-ui/components": "^0.3.0",
     "@web3-ui/hooks": "^0.5.0"

utils/setupTests.ts

@@ -1,5 +1,6 @@
-import "@testing-library/jest-dom";
-import { server } from "./server";
+import '@testing-library/jest-dom';
+import { server } from './server';
+require('whatwg-fetch');
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());

yarn.lock

@@ -1999,11 +1999,6 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
-"@emotion/core@^11.0.0":
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-11.0.0.tgz#d075867e07864119de7cfd5268c15012bd2d6290"
-  integrity sha512-w4sE3AmHmyG6RDKf6mIbtHpgJUSJ2uGvPQb8VXFL7hFjMPibE8IiehG8cMX3Ztm4svfCQV6KqusQbeIOkurBcA==
-
 "@emotion/css@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
@@ -6896,13 +6891,6 @@ cross-fetch@^2.1.0:
     node-fetch "2.6.1"
     whatwg-fetch "2.0.4"
 
-cross-fetch@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
-  integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
-  dependencies:
-    node-fetch "2.6.1"
-
 [email protected], cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -16500,6 +16488,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
   integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
 
+whatwg-fetch@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
 whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"