Chore/update packages (Ready) (#597)

* update eslint plugin

* update vite

* update stellar

* update gitignore

* remove sass

* update yarn warning

* update typescript

* update react-hook-form

* update metamask adapter package

* update packages

* remove semantic-release

* remove @tanstack/react-query-persist-client (unused)

* remove unused package

* update packages

* remove globalThis esbuild config, stellar fixed it

* remove whitespace

* remove bn.js

* apply lint fixes

.gitignore

@@ -38,3 +38,4 @@ vite.config.ts.timestamp-*
 coverage/
 # Local Netlify folder
 .netlify
+.eslintcache

README.md

@@ -5,7 +5,6 @@
 ![Preact](https://img.shields.io/badge/-Preact-05122A?style=flat&logo=preact) 
 ![Vite](https://img.shields.io/badge/-Vite-05122A?style=flat&logo=vite) 
 ![Tailwind CSS](https://img.shields.io/badge/-Tailwind-05122A?style=flat&logo=tailwindcss) 
-![SASS](https://img.shields.io/badge/-Sass-05122A?style=flat&logo=sass) 
 ![Polkadot](https://img.shields.io/badge/-Polkadot-05122A?style=flat&logo=polkadot) 
 
 ---

jest.config.cjs → jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   roots: ['<rootDir>/src'],
   maxWorkers: 1,
   transform: {

package.json

@@ -16,13 +16,12 @@
     "test:coverage": "jest --coverage",
     "codegen": "graphql-codegen --config codegen.ts",
     "format": "prettier . --write",
-    "release": "semantic-release",
     "verify": "yarn lint && yarn lint:ts && yarn test",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@chainsafe/metamask-polkadot-adapter": "^0.6.0",
-    "@chainsafe/metamask-polkadot-types": "^0.6.0",
+    "@chainsafe/metamask-polkadot-adapter": "^0.8.1",
+    "@chainsafe/metamask-polkadot-types": "^0.9.1",
     "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^2.9.11",
     "@netlify/functions": "^2.8.2",
@@ -32,43 +31,41 @@
     "@polkadot/api-base": "^13.2.1",
     "@polkadot/api-contract": "^13.2.1",
     "@polkadot/api-derive": "^13.2.1",
-    "@polkadot/extension-dapp": "^0.46.5",
+    "@polkadot/extension-dapp": "^0.54.1",
     "@polkadot/keyring": "^13.1.1",
     "@polkadot/rpc-augment": "^13.2.1",
     "@polkadot/rpc-core": "^13.2.1",
     "@polkadot/rpc-provider": "^13.2.1",
     "@polkadot/types": "^13.2.1",
-    "@polkadot/util": "^12.6.2",
+    "@polkadot/util": "^13.1.1",
+    "@polkadot/util-crypto": "^13.1.1",
+    "@stellar/stellar-sdk": "^12.3.0",
     "@talismn/connect-components": "^1.1.7",
     "@talismn/connect-ui": "^1.1.2",
     "@talismn/connect-wallets": "^1.2.3",
     "@tanstack/query-sync-storage-persister": "~4.32.6",
     "@tanstack/react-query": "~4.32.6",
     "@tanstack/react-query-devtools": "~4.32.6",
-    "@tanstack/react-query-persist-client": "~4.32.6",
     "@tanstack/react-table": "^8.11.2",
     "@walletconnect/modal": "^2.6.2",
     "@walletconnect/universal-provider": "^2.11.1",
     "big.js": "^6.2.1",
-    "bn.js": "^5.2.1",
     "bs58": "^5.0.0",
     "graphql": "~16.9.0",
     "graphql-request": "~6.1.0",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
+    "luxon": "^3.5.0",
     "match-sorter": "^6.3.1",
     "preact": "^10.21.0",
     "qrcode.react": "^3.1.0",
-    "react-daisyui": "^5.0.0",
+    "react-daisyui": "^5.0.5",
     "react-device-detect": "^2.2.3",
-    "react-hook-form": "^7.43.2",
+    "react-hook-form": "^7.53.0",
     "react-lottie": "^1.2.4",
     "react-router-dom": "^6.8.1",
-    "react-table": "^7.8.0",
     "react-toastify": "^9.1.3",
-    "stellar-sdk": "^10.4.1",
     "ts-node": "^10.9.2",
-    "yup": "^1.3.3"
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
@@ -83,59 +80,47 @@
     "@polkadot/types-create": "^13.2.1",
     "@polkadot/types-known": "^13.2.1",
     "@preact/preset-vite": "^2.5.0",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^11.1.0",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.2.6",
-    "@semantic-release/npm": "^11.0.1",
-    "@semantic-release/release-notes-generator": "^12.1.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/preact": "^3.2.3",
     "@testing-library/preact-hooks": "^1.1.0",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/big.js": "^6.2.2",
     "@types/jest": "^29.5.11",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.10",
     "@types/luxon": "^3.3.7",
     "@types/node": "^18.19.4",
     "@types/react": "^18.2.46",
     "@types/react-lottie": "^1",
-    "@types/react-table": "^7.7.18",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.20",
     "babel-jest": "^29.4.3",
-    "daisyui": "^4.11.1",
-    "esbuild-plugin-polyfill-node": "^0.3.0",
+    "daisyui": "^4.12.13",
     "eslint": "^8.56.0",
     "eslint-plugin-jest": "^27.6.1",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "husky": ">=6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": ">=10",
-    "postcss": "^8.4.21",
-    "postcss-import": "^15.1.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.6.4",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "react-error-overlay": "6.0.9",
-    "react-table": "^7.8.0",
-    "sass": "^1.58.3",
-    "semantic-release": "^22.0.12",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.5.4",
-    "vite": "^3.2.11"
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9"
   },
   "engines": {
     "npm": "please-use-yarn",
-    "yarn": ">=1.22.19"
+    "yarn": ">=4.0.0"
   },
   "resolutions": {
-    "@polkadot/api": "^13.2.1",
-    "@polkadot/extension-inject": "^0.46.9"
+    "@polkadot/api": "^13.2.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",

postcss.config.cjs → postcss.config.js

@@ -1,8 +1,9 @@
-module.exports = {
+export default {
   plugins: {
     'postcss-import': {},
     'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },
+
 };

src/assets/collators-rewards-icon.tsx

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'preact/compat';
 
 const RewardsIcon = (props: HTMLAttributes<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...props}>
-    <g clip-path="url(#clip0_3235_10203)">
+    <g clipPath="url(#clip0_3235_10203)">
       <path d="M10.4701 2.3125V7.68312L10.2832 8.13812C9.97445 8.86938 9.30008 9.42188 8.5282 9.57625L8.0407 9.67375L7.5532 9.57625C6.7732 9.42188 6.10695 8.86938 5.7982 8.13812L5.61133 7.68312V2.3125H10.4863M12.1113 0.6875H3.98633V2.3125H2.36133C1.46758 2.3125 0.736328 3.04375 0.736328 3.9375V4.75C0.736328 6.82188 2.29633 8.51188 4.3032 8.76375C4.81508 9.9825 5.91195 10.9006 7.23633 11.1687V13.6875H3.98633V15.3125H12.1113V13.6875H8.86133V11.1687C10.1857 10.9006 11.2826 9.9825 11.7945 8.76375C13.8013 8.51188 15.3613 6.82188 15.3613 4.75V3.9375C15.3613 3.04375 14.6301 2.3125 13.7363 2.3125H12.1113V0.6875ZM12.1113 7.04125V3.9375H13.7363V4.75C13.7363 5.80625 13.0538 6.7 12.1113 7.04125ZM3.98633 7.04125C3.04383 6.7 2.36133 5.80625 2.36133 4.75V3.9375H3.98633V7.04125Z" />
     </g>
     <defs>

src/components/Dialog/index.tsx

@@ -1,5 +1,5 @@
 import { Modal } from 'react-daisyui';
-import { FC, createPortal, useCallback, useEffect, useRef, useState } from 'preact/compat';
+import { createPortal, useCallback, useEffect, useRef, useState } from 'preact/compat';
 import { CloseButton } from '../CloseButton';
 
 interface DialogProps {
@@ -9,13 +9,13 @@ interface DialogProps {
   content: JSX.Element;
   actions?: JSX.Element;
   form?: {
-    onSubmit: (event?: Event) => void | Promise<void>;
+    onSubmit: (event?: Event) => void;
     className?: string;
   };
   id?: string;
 }
 
-export const Dialog: FC<DialogProps> = ({ visible, onClose, headerText, content, actions, id, form }) => {
+export function Dialog({ visible, onClose, headerText, content, actions, id, form }: DialogProps) {
   const ref = useRef<HTMLDialogElement>(null);
 
   // If it was the form submission we want to only close the dialog without calling onClose
@@ -92,4 +92,4 @@ export const Dialog: FC<DialogProps> = ({ visible, onClose, headerText, content,
     </Modal>,
     container,
   );
-};
+}

src/components/Form/From/index.tsx

@@ -1,6 +1,6 @@
 import { UseFormRegisterReturn } from 'react-hook-form';
 import { StateUpdater, Dispatch } from 'preact/hooks';
-import { Asset } from 'stellar-sdk';
+import { Asset } from '@stellar/stellar-sdk';
 
 import { BlockchainAsset } from '../../Selector/AssetSelector/helpers';
 

src/components/Layout/index.tsx

@@ -1,6 +1,7 @@
 import { Bars3Icon } from '@heroicons/react/20/solid';
 import { memo, useState } from 'preact/compat';
 import { Outlet } from 'react-router-dom';
+import { isMobile } from 'react-device-detect';
 import { useGlobalState } from '../../GlobalStateProvider';
 import AmplitudeLogo from '../../assets/amplitude-logo.svg';
 import PendulumLogo from '../../assets/pendulum-logo.png';
@@ -11,8 +12,7 @@ import { GetToken } from '../GetToken';
 import Nav from './Nav';
 import NetworkId from './NetworkId';
 import SocialAndTermLinks from './SocialAndTermLinks';
-import './styles.sass';
-import { isMobile } from 'react-device-detect';
+import './styles.css';
 
 export default function Layout(): JSX.Element | null {
   const [visible, setVisible] = useState(false);