Lint ptokens dapp

.changeset/lazy-yaks-thank.md

@@ -0,0 +1,2 @@
+---
+---

.eslintrc

@@ -23,11 +23,12 @@
     }
   },
   "rules": {
+    "no-unused-vars": "error",
     "prettier/prettier": "error",
     "no-console": [
       "error",
       {
-        "allow": ["warn", "error"]
+        "allow": ["info", "warn", "error"]
       }
     ],
     "import/newline-after-import": "error",

commitlint.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
-    'header-max-length': [0, 'always', 150]
-  }
+    'header-max-length': [0, 'always', 150],
+  },
 }

manifest.json

@@ -11,7 +11,7 @@
       "src": "favicon.ico",
       "type": "image/png",
       "sizes": "512x512 128x128"
-    }	    
+    }
   ],
   "start_url": ".",
   "display": "standalone",

package.json

@@ -12,7 +12,8 @@
     "deploy": "node ./scripts/check-env.js && npm ci && npm run build && npx thirdweb upload dist",
     "create-version-file": "node ./scripts/generate-buildno.cjs",
     "prepare": "husky install",
-    "lint": "eslint --ext .js,.jsx .",
+    "lint": "eslint --fix --ext .js,.jsx .",
+    "format": "prettier --config ./.prettierrc --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"",
     "changeset-version": "changeset version && npm i --package-lock-only"
   },
   "dependencies": {

public/manifest.json

@@ -11,7 +11,7 @@
       "src": "favicon.ico",
       "type": "image/png",
       "sizes": "512x512 128x128"
-    }	    
+    }
   ],
   "start_url": ".",
   "display": "standalone",

scripts/fetch-addresses-assets.js

@@ -1,7 +1,9 @@
 // NOTE: before run this scripts go to settings/swap-assets and change export default into module.exports =
-const { constants, helpers } = require('ptokens-utils')
-const { NodeSelector } = require('ptokens-node-selector')
 const fs = require('fs')
+
+const { NodeSelector } = require('ptokens-node-selector')
+const { constants, helpers } = require('ptokens-utils')
+
 const assets = require('../src/settings/swap-assets')
 
 const start = async () => {
@@ -19,23 +21,23 @@ const start = async () => {
           {
             pToken: workingName,
             blockchain: helpers.getBlockchainType(blockchain.toLowerCase()),
-            network
+            network,
           },
           helpers.getNativeBlockchainFromPtokenName(workingName)
         )
 
-        return new Promise(_resolve =>
+        return new Promise((_resolve) =>
           nodeSelector
             .select({
               timeout: 20 * 1000,
               pToken: workingName.toLowerCase() === 'peth' ? 'pweth' : workingName.toLowerCase(),
               nativeBlockchain,
               nativeNetwork,
               hostBlockchain,
-              hostNetwork
+              hostNetwork,
             })
             .then(_resolve)
-            .catch(_err => {
+            .catch((_err) => {
               console.error(_err)
               _resolve(null)
             })
@@ -45,8 +47,8 @@ const start = async () => {
 
     const pTokensAddresses = await Promise.all(
       nodes.map(
-        _node =>
-          new Promise(_resolve =>
+        (_node) =>
+          new Promise((_resolve) =>
             _node
               ? _node
                   .getInfo()
@@ -59,7 +61,7 @@ const start = async () => {
                         : null
                     )
                   })
-                  .catch(_err => {
+                  .catch((_err) => {
                     console.error(_err)
                     _resolve(null)
                   })
@@ -75,7 +77,7 @@ const start = async () => {
 
       return {
         address: nativeAddress ? nativeAddress : pTokensAddresses[_index],
-        ..._asset
+        ..._asset,
       }
     })
 

scripts/generate-buildno.cjs

@@ -1,22 +1,23 @@
-const childProcess = require("child_process")
-const fs = require("fs")
-const os = require("os")
+const childProcess = require('child_process')
+const fs = require('fs')
+const os = require('os')
 
 const file = './.env'
 
 function setEnvValue(key, value) {
-  if (!fs.existsSync(file))
-    fs.writeFileSync('.env', '')
-  const ENV_VARS = fs.readFileSync(file, "utf8").split(os.EOL);
-  const target = ENV_VARS.indexOf(ENV_VARS.find((line) => {
-    return line.match(new RegExp(key))
-  }));
+  if (!fs.existsSync(file)) fs.writeFileSync('.env', '')
+  const ENV_VARS = fs.readFileSync(file, 'utf8').split(os.EOL)
+  const target = ENV_VARS.indexOf(
+    ENV_VARS.find((line) => {
+      return line.match(new RegExp(key))
+    })
+  )
   ENV_VARS.splice(target, 1, `${key}=${value}`)
   fs.writeFileSync(file, ENV_VARS.join(os.EOL))
 }
 
-(() => {
-  childProcess.exec("git rev-parse --short HEAD", (err, stdout) => {
-    setEnvValue("VITE_REACT_APP_GIT_SHA", stdout)
-  });
-})();
+;(() => {
+  childProcess.exec('git rev-parse --short HEAD', (err, stdout) => {
+    setEnvValue('VITE_REACT_APP_GIT_SHA', stdout)
+  })
+})()

scripts/redirect-old-links.js

@@ -1,29 +1,30 @@
-const fs = require('fs');
-const dirList = ['swap', 'migration', 'migration/a', 'migration/b', 'migration/c', 'migration/d', 'risks', 'nfts'];
+const fs = require('fs')
+
+const dirList = ['swap', 'migration', 'migration/a', 'migration/b', 'migration/c', 'migration/d', 'risks', 'nfts']
 const basePath = './build'
 
 for (let i = 0; i < dirList.length; i++) {
-   let dir = dirList[i]
-   let dirSub = dir
-   let path = basePath + '/' + dir
-   if (!fs.existsSync(path)){
-      fs.mkdirSync(path);
-   }
-   /*
-    * This script takes the current url and adds '/#/' before the directory name.
-    * Afterwords it redirects the browser to the new created URL.
-    * This allows to redirect old links of the type 'https://dapp/directory' to 
-    * 'https://dapp/#/directory' for all the directories listed in `dirList`
-    */
-   if (dir == 'migration/a') {
-      dirSub = 'migration/pBTC-v1-to-v2'
-   }
-   fs.writeFileSync(
-      `${path}/index.html`, 
-      `<script>
+  let dir = dirList[i]
+  let dirSub = dir
+  let path = basePath + '/' + dir
+  if (!fs.existsSync(path)) {
+    fs.mkdirSync(path)
+  }
+  /*
+   * This script takes the current url and adds '/#/' before the directory name.
+   * Afterwords it redirects the browser to the new created URL.
+   * This allows to redirect old links of the type 'https://dapp/directory' to
+   * 'https://dapp/#/directory' for all the directories listed in `dirList`
+   */
+  if (dir === 'migration/a') {
+    dirSub = 'migration/pBTC-v1-to-v2'
+  }
+  fs.writeFileSync(
+    `${path}/index.html`,
+    `<script>
       window.location.replace(window.location.href.replace('/${dir}/','/#/${dirSub}'));
       </script>
       `,
-      {encoding:'utf8', flag:'w'}
-   );
+    { encoding: 'utf8', flag: 'w' }
+  )
 }

src/App.jsx

@@ -1,21 +1,9 @@
-import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { Route, Switch, Redirect, useRouteMatch } from 'react-router-dom'
 import queryString from 'query-string'
+import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
+import { Route, Switch, Redirect, useRouteMatch } from 'react-router-dom'
 
-import SwapController from './components/pages/swap/SwapController'
-import { sendPageView, setPageLocation } from './ga4'
-import SwapOldPntController from './components/pages/swapOldPnt/SwapOldPntController'
-import { loadSwapData } from './store/swap/swap.actions'
-import { loadMigrationData } from './store/migration/migration.actions'
-import { loadSwapOldPntData } from './store/swap-old-pnt/swap-old-pnt.actions'
-import { selectPage, setTheme } from './store/pages/pages.actions'
-import history from './utils/history'
-import MigrationController from './components/pages/migration/MigrationController'
-import MigrationHomeController from './components/pages/migrationHome/MigrationHomeController'
-import NftsController from './components/pages/nfts/NftsController'
-import Risks from './components/pages/risks/Risks'
 import MainWrapper from './components/atoms/mainWrapper/MainWrapper'
 import Notifications from './components/molecules/notifications/Notifications'
 import Popup from './components/molecules/popup/Popup'
@@ -24,6 +12,18 @@ import WarningPopup from './components/molecules/popup/Warning'
 import SocialLinks from './components/molecules/socials/Socials'
 import Version from './components/molecules/version/Version'
 import HeaderController from './components/organisms/header/HeaderController'
+import MigrationController from './components/pages/migration/MigrationController'
+import MigrationHomeController from './components/pages/migrationHome/MigrationHomeController'
+import NftsController from './components/pages/nfts/NftsController'
+import Risks from './components/pages/risks/Risks'
+import SwapController from './components/pages/swap/SwapController'
+import SwapOldPntController from './components/pages/swapOldPnt/SwapOldPntController'
+import { sendPageView, setPageLocation } from './ga4'
+import { loadMigrationData } from './store/migration/migration.actions'
+import { selectPage, setTheme } from './store/pages/pages.actions'
+import { loadSwapData } from './store/swap/swap.actions'
+import { loadSwapOldPntData } from './store/swap-old-pnt/swap-old-pnt.actions'
+import history from './utils/history'
 
 history.listen((location) => {
   setPageLocation(location.pathname)
@@ -112,7 +112,7 @@ const App = ({ loading, setTheme, loadSwapData, loadSwapOldPntData, loadMigratio
       <MainWrapper>
         <Notifications />
         <HeaderController />
-        <RedirectBanner/>
+        <RedirectBanner />
         <WarningPopup show={showWarningPopup} onClose={() => setShowWarningPopup(false)} />
         <Switch>
           <Route exact path={'/swap'} render={() => <SwapController />} />
@@ -121,7 +121,6 @@ const App = ({ loading, setTheme, loadSwapData, loadSwapOldPntData, loadMigratio
             path={'/nfts'}
             render={() => (
               <React.Fragment>
-                {/* <Loader loading={loading} /> */}
                 <NftsController />
               </React.Fragment>
             )}

src/components/atoms/icon/Icon.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled, { css } from 'styled-components'
+
 import getIconSource from './icon-importer'
 
 const commonCss = css`

src/components/atoms/icon/icon-importer.js

@@ -7,14 +7,14 @@ import close from './icons/close.svg?raw'
 import copy from './icons/copy.svg?raw'
 import descendant from './icons/descendant.svg?raw'
 import downArrow from './icons/down-arrow.svg?raw'
+import info from './icons/info.svg?raw'
 import metamask from './icons/metamask.svg?raw'
 import moon from './icons/moon.svg?raw'
 import sort from './icons/sort.svg?raw'
 import sun from './icons/sun.svg?raw'
 import wallet from './icons/wallet.svg?raw'
-import world from './icons/world.svg?raw'
 import warning from './icons/warning.svg?raw'
-import info from './icons/info.svg?raw'
+import world from './icons/world.svg?raw'
 
 const getIconSource = (icon) => {
   switch (icon) {

src/components/atoms/switch/Switch.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
-import { ThemeContext } from 'styled-components'
 import Switch from 'react-switch'
+import { ThemeContext } from 'styled-components'
 
 const CustomSwitch = ({ checked, onChange, ..._props }) => {
   const theme = useContext(ThemeContext)

src/components/molecules/banner/Banner.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import styled from 'styled-components'
 import { Row, Col, Container } from 'react-bootstrap'
+import styled from 'styled-components'
+
 import Icon from '../../atoms/icon/Icon'
 
 const ContainerBanner = styled(Container)`

src/components/molecules/modal/Modal.jsx

@@ -1,7 +1,7 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Modal } from 'react-bootstrap'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 
 const StyledModalTitle = styled(Modal.Title)`
   color: ${({ theme }) => theme.text1};

src/components/molecules/popup/AddressWarning.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import React from 'react'
 import { Modal } from 'react-bootstrap'
+import styled from 'styled-components'
 
 const StyledModalTitle = styled(Modal.Title)`
   color: ${({ theme }) => theme.text1};

src/components/molecules/popup/Popup.jsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import styled, { keyframes } from 'styled-components'
+import React, { useState } from 'react'
 import { bounceInUp } from 'react-animations'
 import { Card } from 'react-bootstrap'
+import styled, { keyframes } from 'styled-components'
+
 import Icon from '../../atoms/icon/Icon'
 
 const StyledCard = styled(Card)`

src/components/molecules/popup/RedirectBanner.jsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import { Alert, Row } from 'react-bootstrap'
 import styled from 'styled-components'

src/components/molecules/popup/TermsOfService.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import React from 'react'
 import { Modal } from 'react-bootstrap'
+import styled from 'styled-components'
 
 const StyledModalTitle = styled(Modal.Title)`
   color: ${({ theme }) => theme.text1};

src/components/molecules/popup/__test__/RedirectBanner.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/first */
 import { render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect } from 'vitest'
 
 import RedirectBanner from '../RedirectBanner'
 

src/components/molecules/progress/Progress.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import React from 'react'
 import { ProgressBar, Step } from 'react-step-progress-bar'
+import styled from 'styled-components'
 
 const ContainerProgress = styled.div`
   padding-left: 10px;