Lint entire codebase (#158)

Author: Dhaiwat10

packages/components/.babelrc

@@ -4,7 +4,5 @@
     "@babel/preset-typescript",
     "@babel/preset-react"
   ],
-  "plugins": [
-    "@babel/plugin-transform-runtime"
-  ]
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

packages/components/src/components/Address/Address.stories.tsx

@@ -6,15 +6,17 @@ import { Button, VStack } from '@chakra-ui/react';
 
 export default {
   title: 'Components/Address',
-  component: Address,
+  component: Address
 };
 
-export const Default = () => <Address value='testaddress.eth' />;
+export const Default = () => <Address value="testaddress.eth" />;
 
-export const DefaultShortenedWithENS = () => <Address shortened value='testaddress.eth' />;
+export const DefaultShortenedWithENS = () => (
+  <Address shortened value="testaddress.eth" />
+);
 
 export const DefaultShortenedWithHexAddress = () => (
-  <Address shortened value='0x7Be8076f4EA4A4AD08075C2508e481d6C946D12b' />
+  <Address shortened value="0x7Be8076f4EA4A4AD08075C2508e481d6C946D12b" />
 );
 
 type AddressProps = {
@@ -28,7 +30,11 @@ const AddressUsingProvider = (props: AddressProps) => {
     <VStack>
       <Address
         copiable
-        value={connected ? connection.ens || connection.userAddress || '' : 'Not connected'}
+        value={
+          connected
+            ? connection.ens || connection.userAddress || ''
+            : 'Not connected'
+        }
         shortened={props.shortened}
       />
       <Button onClick={connectWallet}>Connect wallet</Button>
@@ -48,4 +54,4 @@ export const WithWalletShortened = () => (
   </Provider>
 );
 
-export const CanBeCopied = () => <Address value='0x00000000000000' copiable />;
+export const CanBeCopied = () => <Address value="0x00000000000000" copiable />;

packages/components/src/components/Address/Address.test.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { jest } from '@jest/globals';
-import { render, fireEvent, waitFor, getByTestId } from '@testing-library/react';
+import {
+  render,
+  fireEvent,
+  waitFor,
+  getByTestId
+} from '@testing-library/react';
 
 import { Address } from './Address';
 
@@ -12,45 +17,49 @@ import { Address } from './Address';
  */
 Object.assign(navigator, {
   clipboard: {
-    writeText: () => {},
-  },
+    writeText: () => {}
+  }
 });
 
 describe('Address', () => {
   it('renders without throwing', () => {
-    const { container } = render(<Address value='taylorswift.eth' />);
+    const { container } = render(<Address value="taylorswift.eth" />);
     expect(container).toBeInTheDocument();
   });
 });
 
 describe('Address copiable prop true', () => {
   it('renders without throwing', () => {
-    const { container } = render(<Address copiable value='taylorswift.eth' />);
+    const { container } = render(<Address copiable value="taylorswift.eth" />);
     expect(container).toBeInTheDocument();
   });
 
   it('renders with icon', () => {
-    const { container } = render(<Address copiable value='taylorswift.eth' />);
+    const { container } = render(<Address copiable value="taylorswift.eth" />);
     const svg = container.querySelector('svg') as SVGElement;
 
     expect(svg).toBeInTheDocument();
   });
 
   it('uses writeText from Clipboard API', async () => {
-    const { container } = render(<Address copiable value='taylorswift.eth' />);
+    const { container } = render(<Address copiable value="taylorswift.eth" />);
     const addressContainer = getByTestId(container, 'address-container');
 
     jest.spyOn(navigator.clipboard, 'writeText');
 
     fireEvent.click(addressContainer);
 
     await waitFor(() => {
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('taylorswift.eth');
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        'taylorswift.eth'
+      );
     });
   });
 
   it('checks the length of the address when shortened', () => {
-    const { container } = render(<Address value='0x00000000000000' shortened />);
+    const { container } = render(
+      <Address value="0x00000000000000" shortened />
+    );
     expect(container.textContent).toContain('0x00...0000');
   });
 });

packages/components/src/components/Address/Address.tsx

@@ -1,4 +1,10 @@
-import { Box, Flex, FormControl, FormErrorMessage, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  Text
+} from '@chakra-ui/react';
 import { CopyIcon, CheckIcon } from '@chakra-ui/icons';
 import React, { useState, useEffect } from 'react';
 
@@ -20,7 +26,11 @@ export interface AddressProps {
 /**
  * A component to display an address
  */
-export const Address: React.FC<AddressProps> = ({ value, copiable = false, shortened = false }) => {
+export const Address: React.FC<AddressProps> = ({
+  value,
+  copiable = false,
+  shortened = false
+}) => {
   const [error, setError] = useState<null | string>(null);
   const [copied, setCopied] = useState<boolean>(false);
   let feedbackTimeOut: ReturnType<typeof setTimeout>;
@@ -59,15 +69,19 @@ export const Address: React.FC<AddressProps> = ({ value, copiable = false, short
   return (
     <FormControl isInvalid={!!error}>
       <Flex
-        data-testid='address-container'
-        alignItems='center'
+        data-testid="address-container"
+        alignItems="center"
         cursor={copiable ? 'pointer' : 'initial'}
         onClick={handleClick}
       >
         <Text>{displayAddress}</Text>
         {copiable && (
-          <Box ml='auto'>
-            {copied ? <CheckIcon color='green.500' /> : <CopyIcon color='gray.300' />}
+          <Box ml="auto">
+            {copied ? (
+              <CheckIcon color="green.500" />
+            ) : (
+              <CopyIcon color="gray.300" />
+            )}
           </Box>
         )}
       </Flex>

packages/components/src/components/AddressInput/AddressInput.stories.tsx

@@ -9,8 +9,8 @@ export default {
   component: AddressInput,
   parameters: {
     // TODO: Fix window.ethereum is undefined breaking chromatic
-    chromatic: { disableSnapshot: true },
-  },
+    chromatic: { disableSnapshot: true }
+  }
 };
 
 const WithUseWallet = () => {
@@ -19,11 +19,15 @@ const WithUseWallet = () => {
 
   return (
     <VStack>
-      <AddressInput value={value} onChange={e => setValue(e)} provider={provider!} />
+      <AddressInput
+        value={value}
+        onChange={e => setValue(e)}
+        provider={provider!}
+      />
       <Text>Value: {value}</Text>
-      <Text fontSize='sm'>
-        You need to be connected to the Ethereum mainnet for ENS to work right now. We are working
-        on adding better support for ENS.
+      <Text fontSize="sm">
+        You need to be connected to the Ethereum mainnet for ENS to work right
+        now. We are working on adding better support for ENS.
       </Text>
     </VStack>
   );
@@ -38,13 +42,13 @@ const Component = ({ ...props }) => {
         value={value}
         onChange={e => setValue(e)}
         provider={provider}
-        placeholder='Enter input address'
+        placeholder="Enter input address"
         {...props}
       />
       <Text>Value: {value}</Text>
-      <Text fontSize='sm'>
-        You need to be connected to the Ethereum mainnet for ENS to work right now. We are working
-        on adding better support for ENS.
+      <Text fontSize="sm">
+        You need to be connected to the Ethereum mainnet for ENS to work right
+        now. We are working on adding better support for ENS.
       </Text>
     </VStack>
   );
@@ -58,4 +62,4 @@ export const UsingWeb3Hooks = () => {
     </Provider>
   );
 };
-export const Label = () => <Component label='Address' />;
+export const Label = () => <Component label="Address" />;

packages/components/src/components/AddressInput/AddressInput.test.tsx

@@ -18,16 +18,16 @@ const WINDOW_ETHEREUM = {
     }
 
     throw Error(`Unknown request: ${request.method}`);
-  },
+  }
 };
 
 jest.mock('ethers', () => {
   const original = jest.requireActual('ethers');
   return {
     ...original,
     ethers: {
-      ...original.ethers,
-    },
+      ...original.ethers
+    }
   };
 });
 
@@ -38,9 +38,9 @@ const Component = () => {
   return (
     <AddressInput
       value={value}
-      onChange={(e) => setValue(e)}
+      onChange={e => setValue(e)}
       provider={provider}
-      placeholder='Input address'
+      placeholder="Input address"
     />
   );
 };

packages/components/src/components/AddressInput/AddressInput.tsx

@@ -1,4 +1,10 @@
-import { FormControl, FormLabel, Input, FormErrorMessage, InputProps } from '@chakra-ui/react';
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  FormErrorMessage,
+  InputProps
+} from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 import { ethers } from 'ethers';
 import { useDebounce } from './useDebounce';
@@ -57,7 +63,10 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
       setError(null);
       if (regex.test(debouncedValue)) {
         onChange(debouncedValue);
-      } else if (debouncedValue.endsWith('.eth') || debouncedValue.endsWith('.xyz')) {
+      } else if (
+        debouncedValue.endsWith('.eth') ||
+        debouncedValue.endsWith('.xyz')
+      ) {
         getAddressFromEns().then(address => onChange(address ? address : ''));
       }
     }

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

@@ -3,30 +3,43 @@ import { NFT } from '.';
 
 export default {
   title: 'Components/NFT',
-  component: NFT,
+  component: NFT
 };
 
 export const image = () => (
-  <NFT tokenId='1' contractAddress='0x25ed58c027921e14d86380ea2646e3a1b5c55a8b' />
+  <NFT
+    tokenId="1"
+    contractAddress="0x25ed58c027921e14d86380ea2646e3a1b5c55a8b"
+  />
 );
 
 export const GIF = () => (
   <NFT
-    contractAddress='0x495f947276749ce646f68ac8c248420045cb7b5e'
-    tokenId='107788331033457039753851660026809005506934842002275129649229957686061111967745'
+    contractAddress="0x495f947276749ce646f68ac8c248420045cb7b5e"
+    tokenId="107788331033457039753851660026809005506934842002275129649229957686061111967745"
   />
 );
 
 export const Video = () => (
-  <NFT contractAddress='0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0' tokenId='29192' />
+  <NFT
+    contractAddress="0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0"
+    tokenId="29192"
+  />
 );
 
 export const Audio = () => (
-  <NFT contractAddress='0x0eede4764cfdfcd5dac0e00b3b7f4778c0cc994e' tokenId='1' />
+  <NFT
+    contractAddress="0x0eede4764cfdfcd5dac0e00b3b7f4778c0cc994e"
+    tokenId="1"
+  />
 );
 
 export const Big = () => (
-  <NFT contractAddress='0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D' tokenId='1' size='lg' />
+  <NFT
+    contractAddress="0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D"
+    tokenId="1"
+    size="lg"
+  />
 );
 
-export const Error = () => <NFT contractAddress='abcd' tokenId='1' />;
+export const Error = () => <NFT contractAddress="abcd" tokenId="1" />;

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

@@ -7,7 +7,12 @@ import { act } from 'react-dom/test-utils';
 describe('NFT', () => {
   it('displays an image NFT properly', async () => {
     act(() => {
-      render(<NFT tokenId='1' contractAddress='0x25ed58c027921e14d86380ea2646e3a1b5c55a8b' />);
+      render(
+        <NFT
+          tokenId="1"
+          contractAddress="0x25ed58c027921e14d86380ea2646e3a1b5c55a8b"
+        />
+      );
     });
     const name = await screen.findByText('Dev #1');
     const image = await screen.findByAltText('Dev #1');

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

@@ -4,11 +4,14 @@ import { NFTGallery } from '.';
 
 export default {
   title: 'Components/NFTGallery',
-  component: NFTGallery,
+  component: NFTGallery
 };
 
 export const nftsOwnedByAnAccount = () => (
-  <NFTGallery address='0x1A16c87927570239FECD343ad2654fD81682725e' gridWidth={2} />
+  <NFTGallery
+    address="0x1A16c87927570239FECD343ad2654fD81682725e"
+    gridWidth={2}
+  />
 );
 
 const nftsOwnedByAnENSStory = () => {
@@ -23,14 +26,14 @@ const nftsOwnedByAnENSStory = () => {
     return <>Loading...</>;
   }
 
-  return <NFTGallery address='dhaiwat.eth' web3Provider={provider} />;
+  return <NFTGallery address="dhaiwat.eth" web3Provider={provider} />;
 };
 
 export const nftsOwnedByAnENS = nftsOwnedByAnENSStory.bind({});
 // @ts-expect-error
 nftsOwnedByAnENS.parameters = {
   // disables Chromatic's snapshotting on a story level
-  chromatic: { disableSnapshot: true },
+  chromatic: { disableSnapshot: true }
 };
 
-export const WithAnError = () => <NFTGallery address='bad_address' />;
+export const WithAnError = () => <NFTGallery address="bad_address" />;