fix: Resolved conflicts

.eslintrc.js

@@ -0,0 +1,122 @@
+const parserOptions = {
+  ecmaVersion: 6,
+  sourceType: 'module',
+}
+
+const eslintRules = {
+  'arrow-body-style': 'warn', // WARN b/c blocks style allows for readability and ensure scope
+  'arrow-spacing': 'error',
+  'eol-last': 'error',
+  'func-call-spacing': 'error',
+  'indent': 'off', // OFF b/c causes problems between Prettier and ESLint
+  'linebreak-style': 'off', // OFF b/c Windows (Git) puts CRLF line endings
+  'missing-declaration': 'off', // OFF b/c throws errors on imports / require statements
+  'multiline-ternary': 'off', // OFF b/c causes problems between Prettier and ESLint
+  'no-alert': 'error',
+  'no-async-promise-executor': 'error',
+  'no-case-declarations': 'error',
+  'no-console': ['error', { allow: ['error', 'warn'] }],
+  'no-control-regex': 'error',
+  'no-dupe-keys': 'error',
+  'no-empty': 'error',
+  'no-extra-boolean-cast': 'error',
+  'no-extra-parens': 'off',
+  'no-extra-semi': 'error',
+  'no-fallthrough': 'error',
+  'no-import-assign': 'error',
+  'no-irregular-whitespace': 'error',
+  'no-prototype-builtins': 'error',
+  'no-return-await': 'error',
+  'no-trailing-spaces': 'error',
+  'no-useless-escape': 'error',
+  'no-undef': 'error',
+  'no-underscore-dangle': 'off', // OFF b/c this syntax is used for defining local callback methods
+  'no-unreachable': 'error',
+  'no-unused-export-let': 'off', // OFF b/c troublesome with some .js files in packages/shared
+  'no-unused-vars': 'off', // OFF b/c there are simply too many and they're harmless
+  'no-var': 'error',
+  'prefer-arrow-callback': 'warn',
+  'prefer-const': 'warn',
+  'prefer-destructuring': 'off', // OFF b/c it's not really correct
+  'quotes': ['error', 'single'],
+  'semi': 'off', // OFF b/c we aren't using semicolons
+  'space-before-function-paren': 'off', // OFF b/c we aren't using spaces before function parameters / signatures
+  'spaced-comment': 'error',
+}
+
+const eslintRulesOnlyTypescript = {
+  'no-undef': 'off' // Typescript handles undefined variables better than eslint
+}
+
+const typescriptEslintRules = {
+  '@typescript-eslint/array-type': 'error',
+  '@typescript-eslint/await-thenable': 'error',
+  '@typescript-eslint/ban-types': 'error',
+  '@typescript-eslint/ban-ts-comment': 'warn',
+  '@typescript-eslint/explicit-module-boundary-types': 'error',
+  '@typescript-eslint/no-array-constructor': 'error',
+  '@typescript-eslint/no-empty-function': 'off', // OFF b/c we use empty functions a lot (esp. for initialization)
+  '@typescript-eslint/no-explicit-any': 'error',
+  '@typescript-eslint/no-extra-non-null-assertion': 'error',
+  '@typescript-eslint/no-extra-semi': 'error',
+  '@typescript-eslint/no-floating-promises': 'warn', // Warn b/c we have existing code in migration that I don't want to touch to pass new linting rules
+  '@typescript-eslint/no-implied-eval': 'error',
+  '@typescript-eslint/no-inferrable-types': 'off', // OFF b/c this errors on some useful code annotations for function signatures
+  '@typescript-eslint/no-misused-new': 'error',
+  '@typescript-eslint/no-misused-promises': 'error',
+  '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
+  '@typescript-eslint/no-non-null-assertion': 'error',
+  '@typescript-eslint/no-this-alias': 'error',
+  '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+  '@typescript-eslint/no-unsafe-assignment': 'off',
+  '@typescript-eslint/no-unsafe-call': 'off',
+  '@typescript-eslint/no-unsafe-member-access': 'off', // OFF b/c there are simply too many linting errors
+  '@typescript-eslint/no-unsafe-return': 'off',
+  '@typescript-eslint/no-unused-vars': 'off', // OFF b/c there are simply too many and they're harmless
+  '@typescript-eslint/no-var-requires': 'error',
+  '@typescript-eslint/prefer-regexp-exec': 'error',
+  '@typescript-eslint/restrict-plus-operands': 'off', // OFF b/c not entirely accurate despite proper typings
+  '@typescript-eslint/restrict-template-expressions': 'off', // OFF b/c using any is useful in template expressions
+  '@typescript-eslint/require-await': 'error',
+  '@typescript-eslint/unbound-method': 'error',
+}
+
+
+module.exports = {
+  env: {
+      browser: true,
+      es6: true,
+      node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@next/next/recommended'],
+  overrides: [
+      {
+          files: ['**/*.ts', '**/*.tsx'],
+          extends: [
+              'plugin:@typescript-eslint/eslint-recommended',
+              'plugin:@typescript-eslint/recommended',
+              'plugin:@typescript-eslint/recommended-requiring-type-checking',
+          ],
+          parser: '@typescript-eslint/parser',
+          parserOptions: {
+              ...parserOptions,
+              project: './tsconfig.json',
+              tsconfigRootDir: './',
+          },
+          plugins: ['@typescript-eslint'],
+          rules: {
+              ...eslintRules,
+              ...eslintRulesOnlyTypescript,
+              ...typescriptEslintRules,
+          },
+      },
+  ],
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+      ...parserOptions,
+      requireConfigFile: false,
+  },
+  rules: {
+      ...eslintRules,
+  },
+}

.github/workflows/check-linter.yaml

@@ -0,0 +1,13 @@
+name: Check linter in PRs
+on:
+  pull_request:
+    types: [opened,edited,reopened,synchronize]
+jobs:
+  linter:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: yarn
+      - name: Run Prettier ESLint check
+        run: yarn lint

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+npx lint-staged --allow-empty

components/Breadcrumb.tsx

@@ -12,9 +12,7 @@ const Breadcrumb: FC = () => {
 
     useEffect(() => {
         if (router) {
-            const isCM = (path: string): boolean => {
-                return router.query.candy_machine_ID === path
-            }
+            const isCM = (path: string): boolean => router.query.candy_machine_ID === path
             const linkPath = router.asPath.split('/')
             linkPath.shift()
             const pathArray = linkPath?.map((path, i) => ({
@@ -31,18 +29,16 @@ const Breadcrumb: FC = () => {
     return (
         <>
             <Breadcrumbs className='d-none d-md-flex flex-row ml-3'>
-                {breadcrumbs.map((element) => {
-                    return (
-                        <Link href={element.url} key={element.title}>
-                            <Breadcrumbs.Item
-                                className={`${router.asPath === element.url ? 'text-bold' : ''} color-fg-on-emphasis`}
-                                style={{ cursor: 'pointer' }}
-                            >
-                                {element.title}
-                            </Breadcrumbs.Item>
-                        </Link>
-                    )
-                })}
+                {breadcrumbs.map((element) => (
+                    <Link href={element.url} key={element.title}>
+                        <Breadcrumbs.Item
+                            className={`${router.asPath === element.url ? 'text-bold' : ''} color-fg-on-emphasis`}
+                            style={{ cursor: 'pointer' }}
+                        >
+                            {element.title}
+                        </Breadcrumbs.Item>
+                    </Link>
+                ))}
             </Breadcrumbs>
             <div className='d-md-none'>
                 <div
@@ -71,18 +67,16 @@ const Breadcrumb: FC = () => {
                 }}
                 sx={{ height: '100vh' }}
             >
-                {breadcrumbs.map((element) => {
-                    return (
-                        <Link href={element.url} key={element.title}>
-                            <NavList.Item
-                                onClick={() => setOpen(!open)}
-                                className={`${router.asPath === element.url ? 'text-bold' : ''} color-fg-on-emphasis`}
-                            >
-                                {element.title}
-                            </NavList.Item>
-                        </Link>
-                    )
-                })}
+                {breadcrumbs.map((element) => (
+                    <Link href={element.url} key={element.title}>
+                        <NavList.Item
+                            onClick={() => setOpen(!open)}
+                            className={`${router.asPath === element.url ? 'text-bold' : ''} color-fg-on-emphasis`}
+                        >
+                            {element.title}
+                        </NavList.Item>
+                    </Link>
+                ))}
             </NavList>
         </>
     )

components/Footer.tsx

@@ -2,37 +2,35 @@ import Link from 'next/link'
 import { FC } from 'react'
 import { version } from '../version.json'
 
-const Footer: FC = () => {
-    return (
-        <footer
-            className='color-bg-emphasis color-fg-on-emphasis position-fixed bottom-0 left-0
+const Footer: FC = () => (
+    <footer
+        className='color-bg-emphasis color-fg-on-emphasis position-fixed bottom-0 left-0
       z-10 d-flex flex-row flex-justify-center flex-items-center py-3 px-6 width-full bg-gray-200'
-        >
-            <div>
-                <Link href='https://github.com/boxfish-studio/sugar-rush/'>
-                    <a
-                        target='_blank'
-                        rel='noopener noreferrer'
-                        className='color-fg-on-emphasis text-underline'
-                        style={{ cursor: 'pointer' }}
-                    >
-                        Sugar Rush {version}
-                    </a>
-                </Link>
-                <span className='mr-1'> - by</span>
-                <Link href='https://boxfish.studio/'>
-                    <a
-                        target='_blank'
-                        rel='noopener noreferrer'
-                        className='color-fg-on-emphasis text-underline'
-                        style={{ cursor: 'pointer' }}
-                    >
-                        Boxfish Studio
-                    </a>
-                </Link>
-            </div>
-        </footer>
-    )
-}
+    >
+        <div>
+            <Link href='https://github.com/boxfish-studio/sugar-rush/'>
+                <a
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='color-fg-on-emphasis text-underline'
+                    style={{ cursor: 'pointer' }}
+                >
+                    Sugar Rush {version}
+                </a>
+            </Link>
+            <span className='mr-1'> - by</span>
+            <Link href='https://boxfish.studio/'>
+                <a
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='color-fg-on-emphasis text-underline'
+                    style={{ cursor: 'pointer' }}
+                >
+                    Boxfish Studio
+                </a>
+            </Link>
+        </div>
+    </footer>
+)
 
 export default Footer

components/Navbar.tsx

@@ -3,26 +3,24 @@ import Image from 'next/image'
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
 import { NetworkSelector, NetworkTps, Breadcrumb } from 'components'
 
-const Navbar: FC = () => {
-    return (
-        <nav
-            className='color-bg-emphasis color-fg-subtle position-fixed top-0 left-0 z-3 width-full d-flex flex-row color-fg-on-emphasis'
-            style={{ height: '70px' }}
-        >
-            <div className='d-flex width-full container-xl p-responsive py-4 flex-justify-between flex-items-center'>
-                <div className='d-flex flex-items-center flex-justify-start width-full'>
-                    <div className='d-flex flex-shrink-0'>
-                        <Image src='/logo.png' alt='logo' width={29} height={21} />
-                        <h4 className='ml-2'>Sugar Rush</h4>
-                    </div>
-                    <Breadcrumb />
+const Navbar: FC = () => (
+    <nav
+        className='color-bg-emphasis color-fg-subtle position-fixed top-0 left-0 z-3 width-full d-flex flex-row color-fg-on-emphasis'
+        style={{ height: '70px' }}
+    >
+        <div className='d-flex width-full container-xl p-responsive py-4 flex-justify-between flex-items-center'>
+            <div className='d-flex flex-items-center flex-justify-start width-full'>
+                <div className='d-flex flex-shrink-0'>
+                    <Image src='/logo.png' alt='logo' width={29} height={21} />
+                    <h4 className='ml-2'>Sugar Rush</h4>
                 </div>
-                <NetworkTps />
-                <NetworkSelector />
-                <WalletMultiButton />
+                <Breadcrumb />
             </div>
-        </nav>
-    )
-}
+            <NetworkTps />
+            <NetworkSelector />
+            <WalletMultiButton />
+        </div>
+    </nav>
+)
 
 export default Navbar

components/NetworkSelector.tsx

@@ -25,7 +25,7 @@ const NetworkSelector: FC = () => {
 
     const detailsRef = useRef<HTMLDetailsElement>(null)
     function hideUl() {
-        detailsRef.current!.removeAttribute('open')
+        detailsRef.current?.removeAttribute('open')
     }
 
     useEffect(() => {

components/Notification.tsx

@@ -10,6 +10,7 @@ const Notification: FC<INotification> = ({ type, message, onClose, icon, timeout
 
     useEffect(() => {
         if (timeout !== NOTIFICATION_TIMEOUT_NEVER) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const destroyTimeout = setTimeout(() => removeNotification(id!), timeout)
             return () => clearTimeout(destroyTimeout)
         }

components/NotificationManager.tsx

@@ -3,10 +3,12 @@ import { Notification } from 'components'
 import { useNotification } from 'hooks'
 import { INotification, NotificationType } from 'lib/interfaces'
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default function NotificationManager() {
     const { notifications, removeNotification } = useNotification()
 
     const onClose = (notification: INotification) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         removeNotification(notification.id!)
     }
 
@@ -26,16 +28,14 @@ export default function NotificationManager() {
 
     return (
         <div className='notifications'>
-            {notifications?.map((notification) => {
-                return (
-                    <Notification
-                        key={`notification-${notification.id}`}
-                        {...notification}
-                        icon={getNotificationIcon(notification?.type)}
-                        onClose={() => onClose(notification)}
-                    />
-                )
-            })}
+            {notifications?.map((notification) => (
+                <Notification
+                    key={`notification-${notification.id}`}
+                    {...notification}
+                    icon={getNotificationIcon(notification?.type)}
+                    onClose={() => onClose(notification)}
+                />
+            ))}
         </div>
     )
 }

components/Popup.tsx

@@ -5,7 +5,7 @@ import { XCircleIcon } from '@primer/octicons-react'
 type Size = 'small' | 'large'
 
 const Popup: FC<{
-    children: any
+    children: React.ReactNode
     title: string
     onClose: () => void
     size: Size