refactor: apply snapper

PolkaGate · Jan 26, 2025 · c8a617f · c8a617f
1 parent cccfba7
commit c8a617f
Show file tree

Hide file tree

Showing 163 changed files with 5,939 additions and 12,766 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,12 +4,12 @@ module.exports = {
     sourceType: 'module',
   },
 
-  extends: ['@metamask/eslint-config'],
+  extends: [require.resolve('@metamask/eslint-config')],
 
   overrides: [
     {
       files: ['**/*.js', '**/*.cjs'],
-      extends: ['@metamask/eslint-config-nodejs'],
+      extends: [require.resolve('@metamask/eslint-config-nodejs')],
 
       parserOptions: {
         ecmaVersion: 2020,
@@ -26,8 +26,15 @@ module.exports = {
 
     {
       files: ['**/*.ts', '**/*.tsx', '**/*.mts'],
-      extends: ["@metamask/eslint-config-typescript"],
+      extends: [require.resolve("@metamask/eslint-config-typescript")],
       rules: {
+        '@typescript-eslint/consistent-type-imports': [
+          'warn', // Change 'warn' to 'error' if you want it to be strictly enforced
+          {
+            prefer: 'type-imports',
+            disallowTypeAnnotations: false, // Allows flexibility in certain scenarios
+          },
+        ],
         // This allows importing the `Text` JSX component.
         "@typescript-eslint/no-shadow": [
           "error",
@@ -50,8 +57,8 @@ module.exports = {
     },
 
     {
-      files: ['**/*.test.ts',"**/*.test.tsx", '**/*.test.js'],
-      extends: ['@metamask/eslint-config-jest'],
+      files: ['**/*.test.ts', "**/*.test.tsx", '**/*.test.js'],
+      extends: [require.resolve('@metamask/eslint-config-jest')],
       rules: {
         '@typescript-eslint/no-shadow': [
           'error',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,23 +33,26 @@
     "compose": "docker-compose build --build-arg CACHEBUST=$(date +%s) && docker-compose up -d"
   },
   "devDependencies": {
-    "@metamask/eslint-config": "^14.0.0",
+    "@metamask/eslint-config": "latest",
     "@metamask/eslint-config-jest": "^14.0.0",
     "@metamask/eslint-config-nodejs": "^14.0.0",
     "@metamask/eslint-config-typescript": "^14.0.0",
     "@metamask/snaps-cli": "^6.5.4",
     "@metamask/snaps-jest": "^8.5.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^9.11.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import-x": "^4.3.0",
     "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jsdoc": "^39.6.2",
+    "eslint-plugin-jsdoc": "^50.2.4",
+    "eslint-plugin-n": "^17.10.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.1.0",
     "jest": "^29.7.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.3.3",
     "prettier-plugin-packagejson": "^2.2.18",
     "ts-jest": "^29.1.0",
     "tsup": "^8.0.1",
@@ -77,5 +80,11 @@
     "lodash": "^4.17.21",
     "qrcode": "^1.5.4",
     "webdriverio": "latest"
+  },
+  "peerDependencies": {
+    "eslint-plugin-jest": "*"
+  },
+  "resolutions": {
+    "eslint-plugin-react": "^7.32.0"
   }
 }
diff --git a/packages/dapp/index.html b/packages/dapp/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="A simple dApp to try Polkagate Snap" />
+    <link rel="apple-touch-icon" href="/logo128.png" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Polkagate Snap dApp</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/dapp/package.json b/packages/dapp/package.json
@@ -23,21 +23,21 @@
     "@types/node": "^16.18.66",
     "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.0",
-    "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
+    "vite": "^6.0.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "preinstall": "NODE_ENV=production node ./setDappPath.mjs",
-    "dev": "NODE_ENV=development node ./setDappPath.mjs ",
-    "start": "PORT=8000 react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "clean": "yarn cache clean --all"
+    "dev": "NODE_ENV=development node ./setDappPath.mjs",
+    "start": "vite",
+    "build": "vite build",
+    "clean": "yarn cache clean --all",
+    "preview": "vite preview"
   },
   "eslintConfig": {
     "extends": [

diff --git a/packages/dapp/public/index.html b/packages/dapp/public/index.html
@@ -1,43 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="A simple dApp to try Polkagate Snap"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo128.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <meta name="description" content="A simple dApp to try Polkagate Snap" />
+    <link rel="apple-touch-icon" href="/logo128.png" />
+    <link rel="manifest" href="/manifest.json" />
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Polkagate Snap dApp</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/dapp/src/SignMessage.tsx b/packages/dapp/src/SignMessage.tsx
@@ -5,7 +5,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import { Key as KeyIcon, CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 import { web3FromSource } from '@polkagate/extension-dapp';
 import { Divider, Grid, TextField, Typography } from '@mui/material';
-import { ApiPromise } from '@polkadot/api';
+import type { ApiPromise } from '@polkadot/api';
 import { SignerPayloadRaw } from '@polkadot/types/types';
 import { verifySignature } from './util/verifySignature';
 

diff --git a/packages/dapp/src/SwitchChain.tsx b/packages/dapp/src/SwitchChain.tsx
@@ -17,7 +17,7 @@ function TransferFund({ currentChainName, setChainName }: Props) {
   const handleChange = (event: SelectChangeEvent) => {
     setCurrentGenesisHash(event.target.value as string);
     const chain = getChain(event.target.value);
-    setChainName(sanitizeChainName(chain.displayName)?.toLowerCase() || currentChainName);
+    setChainName(sanitizeChainName(chain.displayName)?.toLowerCase() ?? currentChainName);
   };
 
   return (

diff --git a/packages/dapp/src/TransferFund.tsx b/packages/dapp/src/TransferFund.tsx
@@ -5,7 +5,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import SendIcon from '@mui/icons-material/Send';
 import { web3FromSource } from '@polkagate/extension-dapp';
 import { Box, CircularProgress, Divider, Grid, InputAdornment, Link, Skeleton, TextField, Typography } from '@mui/material';
-import { ApiPromise } from '@polkadot/api';
+import type { ApiPromise } from '@polkadot/api';
 import type { DeriveBalancesAll } from '@polkadot/api-derive/types';
 import { TxResult, send } from './apis/send';
 import { amountToMachine } from './util/utils';
@@ -23,7 +23,7 @@ interface Props {
   token: string | undefined;
 
 }
-function TransferFund({ api, account, balances, currentChainName, formatted, isPolkaMaskInstalled, token }: Props):React.ReactElement<Props> {
+function TransferFund({ api, account, balances, currentChainName, formatted, isPolkaMaskInstalled, token }: Props): React.ReactElement<Props> {
   const [toAddress, setToAddress] = useState<string>();
   const [_signature, setSignature] = useState<string>();
   const [_result, setResult] = useState<TxResult>();
@@ -49,7 +49,7 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
   const handleSendClick = async () => {
     setSignature(undefined);
     setResult(undefined);
-    
+
     try {
       if (!api || !account || !toAddress) {
         return;

diff --git a/packages/dapp/src/apis/send.ts b/packages/dapp/src/apis/send.ts
@@ -2,7 +2,7 @@ import type { AccountId } from '@polkadot/types/interfaces';
 import type { HexString } from '@polkadot/util/types';
 import { SignerPayloadJSON } from '@polkadot/types/types';
 
-import { ApiPromise } from '@polkadot/api';
+import type { ApiPromise } from '@polkadot/api';
 import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { ISubmittableResult } from '@polkadot/types/types';
 
@@ -54,7 +54,6 @@ export async function send(from: string | AccountId, api: ApiPromise, ptx: Submi
         }
 
         if (result.status.isFinalized || result.status.isInBlock) {
-          console.info('Tx. Status: ', result.status);
           const hash = result.status.isFinalized
             ? result.status.asFinalized
             : result.status.asInBlock;
@@ -65,8 +64,6 @@ export async function send(from: string | AccountId, api: ApiPromise, ptx: Submi
 
           const fee = undefined;
 
-          console.log(`Transaction success:${success}`);
-
           resolve({
             block: Number(blockNumber),
             failureText,
@@ -77,7 +74,6 @@ export async function send(from: string | AccountId, api: ApiPromise, ptx: Submi
         }
       })
       .catch((e) => {
-        console.info('catch error', e);
         resolve({
           block: 0,
           failureText: String(e),

diff --git a/packages/dapp/src/index.tsx → packages/dapp/src/main.tsx b/packages/dapp/src/index.tsx → packages/dapp/src/main.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import App from './App.js';
+import reportWebVitals from './reportWebVitals.js';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

diff --git a/packages/dapp/src/util/buildPayload.ts b/packages/dapp/src/util/buildPayload.ts
@@ -1,4 +1,4 @@
-import { ApiPromise } from '@polkadot/api';
+import type { ApiPromise } from '@polkadot/api';
 import { SignerPayloadJSON } from '@polkadot/types/types';
 
 export const buildPayload = async (
@@ -44,7 +44,7 @@ export const buildPayload = async (
         'CheckMetadataHash'
       ],
       runtimeVersion: api.runtimeVersion,
-      tip:0,
+      tip: 0,
       version: tx.version,
     };
 

diff --git a/packages/dapp/src/util/getChain.ts b/packages/dapp/src/util/getChain.ts
@@ -30,7 +30,6 @@ export const getChain = (genesisOrChainName: string): Network => {
   );
 
   if (chain) {
-    // console.info(`The chain for ${genesisOrChainName} is: `,chain )
     return chain;
   }
   throw new Error(`Chain '${genesisOrChainName}' is not recognized.`);

diff --git a/packages/dapp/src/util/getFormatted.ts b/packages/dapp/src/util/getFormatted.ts
@@ -3,13 +3,12 @@ import { getChain } from './getChain';
 
 /**
  * To get the formatted address of an address
- *
  * @param genesisHash - the genesisHash of the chain will be used to find an endpoint to use
  * @param address - the substrate format of an address
  * @returns - the formatted address
  */
 export function getFormatted(genesisHash: string, address: string): string {
-  const { prefix } = getChain(genesisHash as string);
+  const { prefix } = getChain(genesisHash);
   const publicKey = decodeAddress(address);
   return encodeAddress(publicKey, prefix);
 }
diff --git a/packages/dapp/src/util/getLatestPackageVersion.ts b/packages/dapp/src/util/getLatestPackageVersion.ts
@@ -9,7 +9,6 @@ export async function getLatestPackageVersion(packageName: string): Promise<stri
     const latestVersion = responseData['dist-tags'].latest;
     return latestVersion;
   } catch (error:any) {
-    console.error('Error fetching package information:', error.message);
     throw error;
   }
 }
diff --git a/packages/dapp/src/util/hasFlask.ts b/packages/dapp/src/util/hasFlask.ts
@@ -13,13 +13,9 @@ export async function hasFlask() {
   )?.includes('flask');
 
   if (provider && isFlask) {
-    console.log('MetaMask Flask successfully detected!');
-
     // Now you can use Snaps!
     return true;
   } else {
-    console.error('Please install MetaMask Flask!');
-
     return false;
   }
 }