Migrate from preact to react (#608)

* replace preact package with react, remove StateUpdater and change imports * migrate Dialog events, update tsconfig * remove TargetedEvent * remove SetStateAction * add missing React import * migrate components from Preact to React * migrate components, tests from preact to react * resolve preact conflicts * update README after migration * remove unused version.cjs * remove unused code * update Validation component * simplify code structure * apply lint changes
pendulum-chain · Oct 31, 2024 · 934c19e · 934c19e
1 parent 9fb80d9
commit 934c19e
Show file tree

Hide file tree

Showing 172 changed files with 2,307 additions and 3,494 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,7 +2,6 @@ node_modules/
 coverage/
 dist/
 build/
-preact/
 internals/
 docs/
 gql/

diff --git a/README.md b/README.md
@@ -1,21 +1,30 @@
 # Pendulum Portal
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/aa69406a-f4a1-4693-aed0-8478f1d1fabd/deploy-status)](https://app.netlify.com/sites/pendulum-portal-alpha/deploys)
-&nbsp; ![TypeScript](https://img.shields.io/badge/-TypeSript-05122A?style=flat&logo=typescript)&nbsp;
-![Preact](https://img.shields.io/badge/-Preact-05122A?style=flat&logo=preact)&nbsp;
-![Vite](https://img.shields.io/badge/-Vite-05122A?style=flat&logo=vite)&nbsp;
-![Tailwind CSS](https://img.shields.io/badge/-Tailwind-05122A?style=flat&logo=tailwindcss)&nbsp;
+[![Netlify Status](https://api.netlify.com/api/v1/badges/aa69406a-f4a1-4693-aed0-8478f1d1fabd/deploy-status)](https://app.netlify.com/sites/pendulum-portal-alpha/deploys)&nbsp;
+
+![React](https://img.shields.io/badge/-React-05122A?style=flat&logo=react)
+![TypeScript](https://img.shields.io/badge/-TypeSript-05122A?style=flat&logo=typescript)
+![Vite](https://img.shields.io/badge/-Vite-05122A?style=flat&logo=vite)
 ![Polkadot](https://img.shields.io/badge/-Polkadot-05122A?style=flat&logo=polkadot)&nbsp;
 
+An open-source repository for the [Pendulum Portal](https://portal.pendulumchain.org/), a frontend platform for
+interacting with Pendulum Chain.
+
 ---
 
-Web application for Pendulum. This project was bootstrapped with [vite](https://vite.new/preact-ts)
+## Table of Contents
 
-## Run
+- [Run](#run)
+- [Build](#build)
+- [Troubleshooting](#troubleshooting)
+  - [Missing Price Information](#missing-price-information)
+  - [Fixing Type Issues](#fixing-type-issues)
+
+---
 
-In the project directory, you can run:
+### Run
 
-### Install yarn - corepack
+#### Install yarn with corepack
 
 Enable Corepack by executing the command `corepack enable`. Corepack is included by default in Node.js, it manages the
 Yarn version specified in the `packageManager` field.
@@ -26,37 +35,40 @@ via npm - use Corepack instead.
 **Note:** If you are using Volta to manage your Node.js versions, you need to follow the instructions
 [here](https://yarnpkg.com/corepack#volta).
 
-### `yarn install`
+##### `yarn install`
 
 Install dependencies
 
-### `yarn dev`
+##### `yarn dev`
 
-Runs the app in development mode.\
-Open [http://127.0.0.1:5173/](http://127.0.0.1:5173) to view it in the browser.
+Runs the app in development mode.
 
-## Build
+---
+
+### Build
 
 ### `yarn build`
 
 Builds the app for production to the `dist` folder.\
-It transpiles TypeScript, bundles Preact in production mode, splits and optimizes the builds for the best performance.
+It transpiles TypeScript, bundles React in production mode, splits and optimizes the builds for the best performance.
 
 The build is minified and the filenames include the hashes.\
 We call on `version.cjs` to show the commit version on the sidebar.\
 We also create a file, on the fly, a file named `_redirects` that will serve the index.html instead of giving a 404 no
 matter what URL the browser requests.
 
-## Troubleshooting
+---
+
+### Troubleshooting
 
-### Missing price information
+#### Missing price information
 
 If you are missing the price information about the assets on the dashboard page, you are probably experiencing a CORS
 problem with the batching server. If you want to fetch prices locally, you can use the proxy server available at
 [pendulum-tools](https://github.com/pendulum-chain/pendulum-tools). Change url in `src/hooks/usePriceFetcher.ts` file to
 `http://localhost:3000`
 
-### Fixing type issues
+#### Fixing type issues
 
 If you encounter issues with the IDE not detecting the type overwrites of the `@pendulum-chain/types` package properly,
 make sure that all the `@polkadot/xxx` packages match the same version used in the types package. It is also important

diff --git a/config/babel.jest.cjs b/config/babel.jest.cjs
diff --git a/config/styleMock.js b/config/styleMock.js
diff --git a/index.html b/index.html
@@ -13,8 +13,8 @@
     />
   </head>
 
-  <body style="background-color: #fff">
-    <div id="app"></div>
+  <body>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
diff --git a/jest.config.ts b/jest.config.ts
@@ -0,0 +1,20 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  roots: ['<rootDir>/src'],
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  clearMocks: true,
+  testMatch: ['**/?(*.)+(test).ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  setupFilesAfterEnv: ['<rootDir>/config/setupTests.ts'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/config/fileMock.ts',
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+};
+
+export default config;
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "packageManager": "[email protected]",
   "scripts": {
     "dev": "vite",
-    "build": "node version.cjs && tsc && vite build && echo '/* /index.html 200' | cat > dist/_redirects",
+    "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
@@ -47,6 +47,9 @@
     "@tanstack/react-query": "~4.32.6",
     "@tanstack/react-query-devtools": "~4.32.6",
     "@tanstack/react-table": "^8.11.2",
+    "@testing-library/react": "^16.0.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "@walletconnect/modal": "^2.6.2",
     "@walletconnect/universal-provider": "^2.11.1",
     "big.js": "^6.2.1",
@@ -57,34 +60,29 @@
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "match-sorter": "^6.3.1",
-    "preact": "^10.21.0",
     "qrcode.react": "^3.1.0",
+    "react": "^18.3.1",
     "react-daisyui": "^5.0.5",
     "react-device-detect": "^2.2.3",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-lottie": "^1.2.4",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.27.0",
     "react-toastify": "^9.1.3",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.23.7",
-    "@babel/preset-typescript": "^7.24.1",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.6",
     "@pendulum-chain/types": "^1.1.1",
     "@polkadot/types-augment": "^13.2.1",
     "@polkadot/types-codec": "^13.2.1",
     "@polkadot/types-create": "^13.2.1",
     "@polkadot/types-known": "^13.2.1",
-    "@preact/preset-vite": "^2.5.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/user-event": "^14.5.2",
     "@types/big.js": "^6.2.2",
     "@types/jest": "^29.5.11",
@@ -97,7 +95,6 @@
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "autoprefixer": "^10.4.20",
-    "babel-jest": "^29.4.3",
     "daisyui": "^4.12.13",
     "eslint": "^8.56.0",
     "eslint-plugin-jest": "^27.6.1",
@@ -121,7 +118,8 @@
     "yarn": ">=4.0.0"
   },
   "resolutions": {
-    "@polkadot/api": "^13.2.1"
+    "@polkadot/api": "^13.2.1",
+    "@polkadot/util": "^13.2.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",

diff --git a/postcss.config.js b/postcss.config.js
@@ -5,5 +5,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-
 };
diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx
@@ -1,5 +1,4 @@
-import { ComponentChildren, createContext } from 'preact';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'preact/compat';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { WalletAccount } from '@talismn/connect-wallets';
 import { config } from '../config';
@@ -26,7 +25,7 @@ export interface GlobalState {
 export const defaultTenant = TenantName.Pendulum;
 const GlobalStateContext = createContext<GlobalState | undefined>(undefined);
 
-const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => {
+const GlobalStateProvider = ({ children }: { children: JSX.Element }) => {
   const tenantRef = useRef<string>();
   const [walletAccount, setWallet] = useState<WalletAccount | undefined>(undefined);
   const { pathname } = useLocation();

diff --git a/src/NodeInfoProvider.tsx b/src/NodeInfoProvider.tsx
@@ -1,8 +1,7 @@
+import { createContext, Dispatch, useContext, useEffect, useState } from 'react';
 import { options } from '@pendulum-chain/api';
 import { rpc } from '@pendulum-chain/types';
 import { ApiPromise, WsProvider } from '@polkadot/api';
-import { createContext } from 'preact';
-import { useContext, useEffect, useState } from 'preact/hooks';
 import { ToastMessage, showToast } from './shared/showToast';
 
 async function createApiPromise(provider: WsProvider) {
@@ -29,10 +28,10 @@ export interface NodeInfoProviderInterface {
 
 const NodeInfoContext = createContext({
   state: {} as Partial<NodeInfoProviderInterface>,
-  setState: {} as Dispatch<SetStateAction<Partial<NodeInfoProviderInterface>>>,
+  setState: {} as Dispatch<Partial<NodeInfoProviderInterface>>,
 });
 
-const NodeInfoProvider = ({ children, tenantRPC }: { children: ReactNode; tenantRPC?: string }) => {
+const NodeInfoProvider = ({ children, tenantRPC }: { children: React.ReactNode; tenantRPC?: string }) => {
   const [state, setState] = useState({} as Partial<NodeInfoProviderInterface>);
   const [currentTenantRPC, setCurrentTenantRPC] = useState<string | undefined>(undefined);
   const [pendingInitiationPromise, setPendingInitiationPromise] = useState<Promise<unknown> | undefined>(undefined);

diff --git a/src/SharedProvider.tsx b/src/SharedProvider.tsx
@@ -1,9 +1,8 @@
-import { ComponentChildren } from 'preact';
 import { useGlobalState } from './GlobalStateProvider';
 import { useNodeInfoState } from './NodeInfoProvider';
 import { SharedStateProvider } from './shared/Provider';
 
-const SharedProvider = ({ children }: { children: ComponentChildren }) => {
+const SharedProvider = ({ children }: { children: JSX.Element }) => {
   const { api } = useNodeInfoState().state;
   const { signer, address } = useGlobalState().walletAccount || {};
 

diff --git a/src/TermsAndConditions.tsx b/src/TermsAndConditions.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from 'preact/compat';
+import { PropsWithChildren, useState } from 'react';
 import { Button, Checkbox, Link, Modal } from 'react-daisyui';
 import { useLocalStorage, LocalStorageKeys } from './hooks/useLocalStorage';
 

diff --git a/src/assets/AmplitudeLogo.tsx b/src/assets/AmplitudeLogo.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'preact/compat';
+import { HTMLAttributes } from 'react';
 
 interface Props extends HTMLAttributes<SVGSVGElement> {
   className?: string;

diff --git a/src/assets/ChainLogo.tsx b/src/assets/ChainLogo.tsx
@@ -1,11 +1,13 @@
-import { HTMLAttributes } from 'preact/compat';
+import { HTMLAttributes } from 'react';
 import { useGlobalState } from '../GlobalStateProvider';
 import { TenantName } from '../models/Tenant';
 import { AmplitudeLogo } from './AmplitudeLogo';
 import { PendulumLogo } from './PendulumLogo';
 
 interface Props extends HTMLAttributes<SVGSVGElement> {
   className?: string;
+  width?: string;
+  height?: string;
 }
 
 export const ChainLogo = (props: Props) => {

diff --git a/src/assets/CloseIcon.tsx b/src/assets/CloseIcon.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'preact/compat';
+import { FC } from 'react';
 
 interface Props {
   className?: string;

diff --git a/src/assets/ExternalIcon.tsx b/src/assets/ExternalIcon.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'preact/compat';
+import { FC } from 'react';
 
 interface Props {
   className?: string;

diff --git a/src/assets/PendulumLogo.tsx b/src/assets/PendulumLogo.tsx
@@ -3,9 +3,9 @@ interface Props {
   light?: boolean;
 }
 
-export const PendulumLogo = ({ className, light }: Props) =>
+export const PendulumLogo = ({ className, light, ...rest }: Props) =>
   light ? (
-    <svg width="18" height="25" viewBox="0 0 18 25" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <svg width="18" height="25" viewBox="0 0 18 25" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
       <path
         d="M8.80392 0.00131588C4.11964 -0.0830614 0.110976 3.90142 0.00287672 8.77656C-0.0781974 12.086 1.5613 15.0017 4.04757 16.633C4.16468 16.708 4.32683 16.6611 4.38989 16.5299L6.33567 12.4892C6.62393 11.8985 6.57889 11.186 6.22757 10.6329C5.93029 10.1547 5.75914 9.58283 5.76815 8.97344C5.78616 7.39839 6.98426 6.09523 8.48863 6.01086C10.2272 5.9171 11.6595 7.42652 11.5244 9.24532C11.4163 10.7079 10.2813 11.8798 8.885 12.0016C8.87599 12.0016 8.86698 12.0016 8.85797 12.0016C8.21839 12.0485 7.65087 12.4329 7.3626 13.0329L5.41683 17.0643C5.35377 17.1955 5.41683 17.3549 5.54294 17.4018C6.52484 17.7956 7.58781 18.0018 8.70483 18.0018C13.4342 17.9737 17.2987 13.9329 17.2987 9.01094C17.3077 4.08893 13.5152 0.0856932 8.80392 0.00131588Z"
         fill="#FFFFFF"

diff --git a/src/assets/SettingsIcon.tsx b/src/assets/SettingsIcon.tsx
@@ -3,7 +3,7 @@ const SettingsIcon = () => (
     <g clipPath="url(#clip0_2675_1559)">
       <mask
         id="mask0_2675_1559"
-        style="mask-type:luminance"
+        style={{ maskType: 'luminance' }}
         maskUnits="userSpaceOnUse"
         x="0"
         y="0"

diff --git a/src/assets/collators-rewards-icon.tsx b/src/assets/collators-rewards-icon.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'preact/compat';
+import { HTMLAttributes } from 'react';
 
 const RewardsIcon = (props: HTMLAttributes<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...props}>

diff --git a/src/assets/collators-staked-icon.tsx b/src/assets/collators-staked-icon.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'preact/compat';
+import { HTMLAttributes } from 'react';
 
 const StakedIcon = (props: HTMLAttributes<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="19" height="25" viewBox="0 0 19 25" {...props}>

diff --git a/src/assets/dashboard.tsx b/src/assets/dashboard.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'preact/compat';
+import { HTMLAttributes } from 'react';
 
 const DashboardIcon = (props: HTMLAttributes<SVGSVGElement>) => (
   <svg width="32" height="32" {...props} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

diff --git a/src/assets/governance.tsx b/src/assets/governance.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'preact/compat';
+import { HTMLAttributes } from 'react';
 
 const GovernanceIcon = (props: HTMLAttributes<SVGSVGElement>) => (
   <svg width="32" height="32" {...props} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">