From 0696c7e360ddad150b864f0660d1f6fd04db517d Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Mon, 28 Oct 2024 08:51:42 +0100 Subject: [PATCH 01/14] replace preact package with react, remove StateUpdater and change imports --- README.md | 3 - config/babel.jest.cjs | 3 + index.html | 4 +- jest.config.js | 5 +- package.json | 11 +- src/GlobalStateProvider/index.tsx | 5 +- src/NodeInfoProvider.tsx | 3 +- src/SharedProvider.tsx | 3 +- src/TermsAndConditions.tsx | 2 +- src/assets/AmplitudeLogo.tsx | 2 +- src/assets/ChainLogo.tsx | 2 +- src/assets/CloseIcon.tsx | 2 +- src/assets/collators-rewards-icon.tsx | 2 +- src/assets/collators-staked-icon.tsx | 2 +- src/assets/dashboard.tsx | 2 +- src/assets/governance.tsx | 2 +- src/assets/nabla.tsx | 2 +- src/assets/onramp.tsx | 2 +- src/assets/spacewalk.tsx | 2 +- src/assets/spinner.tsx | 2 +- src/assets/staking.tsx | 2 +- src/assets/swap.tsx | 2 +- src/components/Asset/Price/index.tsx | 2 +- src/components/Box/index.test.tsx | 17 - src/components/Box/index.tsx | 22 - src/components/Box/styles.css | 20 - src/components/Dialog/index.tsx | 2 +- src/components/Form/From/Badges/index.tsx | 2 +- .../From/NumericInput/NumericInput.test.tsx | 3 +- src/components/Form/From/index.tsx | 4 +- .../Form/From/variants/StandardFrom.test.tsx | 2 +- src/components/LabelledInputField/index.tsx | 2 +- src/components/LabelledSelector/index.tsx | 2 +- src/components/Layout/ComingSoonTag.tsx | 2 +- src/components/Layout/Nav/index.tsx | 2 +- .../Layout/NavCollapseButtonContent.tsx | 2 +- src/components/Layout/NetworkId.tsx | 2 +- src/components/Layout/Versions.tsx | 2 +- src/components/Layout/index.tsx | 2 +- src/components/Layout/links.tsx | 9 +- src/components/Pagination/index.test.tsx | 2 +- .../PublicKey/ClickablePublicKey/index.tsx | 2 +- src/components/PublicKey/index.tsx | 2 +- src/components/SearchInput/index.tsx | 7 +- .../Selector/AssetSelector/helpers.ts | 4 +- .../Selector/AssetSelector/index.tsx | 2 +- src/components/Selector/LabelledSelector.tsx | 2 +- src/components/Skeleton/index.tsx | 2 +- src/components/Suspense/index.tsx | 2 +- src/components/SwapAssetsButton/index.tsx | 2 +- src/components/Table/GlobalFilter/index.tsx | 2 +- src/components/Table/index.tsx | 2 +- src/components/Tabs/index.tsx | 2 +- src/components/TransferCountdown/index.tsx | 2 +- .../ConnectModal/ConnectModalDialog.tsx | 2 +- .../ConnectModalAccountsList/index.tsx | 2 +- .../Wallet/modals/ConnectModal/index.tsx | 2 +- .../Wallet/wallets/WalletConnect/index.tsx | 2 +- .../Pools/Backstop/AddLiquidity/index.tsx | 12 +- .../Backstop/AddLiquidity/useAddLiquidity.ts | 2 +- .../Pools/Backstop/BackstopPoolModals.tsx | 13 +- .../Backstop/WithdrawLiquidity/index.tsx | 20 +- .../WithdrawLiquidity/useBackstopDrain.ts | 2 +- .../WithdrawLiquidity/useBackstopWithdraw.ts | 2 +- .../WithdrawLiquidity/useWithdrawLiquidity.ts | 2 +- .../Swap/AddLiquidity/useAddLiquidity.ts | 2 +- .../nabla/Pools/Swap/Redeem/useRedeem.ts | 2 +- .../nabla/Pools/Swap/SwapPoolModals.tsx | 5 +- .../WithdrawLiquidity/useWithdrawLiquidity.ts | 2 +- src/components/nabla/Swap/To.tsx | 2 +- src/components/nabla/Swap/useSwapComponent.ts | 2 +- .../nabla/common/AmountSelector.tsx | 4 +- .../nabla/common/PoolSelectorModal.tsx | 2 +- src/components/nabla/common/SwapProgress.tsx | 1 - src/components/nabla/common/TokenApproval.tsx | 2 +- .../nabla/common/TransactionProgress.tsx | 17 +- src/hooks/nabla/useContractRead.ts | 2 +- src/hooks/nabla/useContractWrite.ts | 2 +- src/hooks/nabla/useErc20TokenApproval.ts | 2 +- src/hooks/nabla/useQuote.ts | 2 +- src/hooks/nabla/useTokenOutAmount.ts | 2 +- .../useCalculateGriefingCollateral.test.ts | 4 +- src/hooks/spacewalk/useBridgeSettings.ts | 10 +- .../useCalculateGriefingCollateral.ts | 2 +- src/hooks/spacewalk/useFeePallet.tsx | 2 +- src/hooks/spacewalk/useIssuePallet.tsx | 2 +- src/hooks/spacewalk/useRedeemPallet.tsx | 2 +- src/hooks/spacewalk/useSecurityPallet.tsx | 2 +- src/hooks/spacewalk/useVaultRegistryPallet.ts | 2 +- src/hooks/staking/useStakingPallet.tsx | 2 +- src/hooks/useAssetRegistryMetadata.ts | 2 +- src/hooks/useBalances.ts | 2 +- src/hooks/useBoolean.ts | 2 +- src/hooks/useBuyout/index.ts | 10 +- src/hooks/useClipboard.ts | 2 +- src/hooks/useDebouncedValue.ts | 2 +- src/hooks/useIdentityPallet.ts | 2 +- src/hooks/useLocalStorage.ts | 2 +- src/hooks/usePriceFetcher.ts | 2 +- src/hooks/useSwitchChain.ts | 2 +- .../useConnectWallet/index.tsx | 2 +- .../useWalletConnection/useMetamask/index.tsx | 2 +- .../useWalletConnection/useNova/index.ts | 2 +- src/main.tsx | 56 +- src/pages/dashboard/Portfolio.tsx | 2 +- src/pages/gas/GasForm.tsx | 6 +- src/pages/gas/GasSuccessDialog.tsx | 2 +- src/pages/gas/index.tsx | 2 +- src/pages/nabla/swap/index.tsx | 2 +- src/pages/spacewalk/bridge/FeeBox.tsx | 2 +- .../bridge/Issue/ConfirmationDialog.tsx | 2 +- .../spacewalk/bridge/Issue/Disclaimer.tsx | 2 +- .../spacewalk/bridge/Issue/SettingsDialog.tsx | 4 +- .../bridge/Issue/StellarURIScheme.tsx | 2 +- src/pages/spacewalk/bridge/Issue/index.tsx | 2 +- .../bridge/Redeem/ConfirmationDialog.tsx | 2 +- src/pages/spacewalk/bridge/Redeem/index.tsx | 4 +- .../bridge/TransferDialog/TransferDialog.tsx | 21 +- src/pages/spacewalk/bridge/index.tsx | 12 +- .../transactions/TransactionDialog.tsx | 49 +- .../TransferDialog/PendingTransferDialog.tsx | 2 +- .../TransferDialog/TransferDialog.tsx | 11 +- src/pages/spacewalk/transactions/index.tsx | 2 +- src/pages/staking/CollatorColumns.tsx | 14 +- .../CollatorRewards/CollatorRewards.tsx | 28 +- .../StakingContent/StakingContent.tsx | 2 +- .../StakingRewardsContent/ClaimButton.tsx | 2 +- .../StakingRewardsContent.tsx | 2 +- .../StakingRewardsContent/UpdateButton.tsx | 2 +- src/pages/staking/CollatorRewards/helpers.ts | 6 +- src/pages/staking/CollatorsTable.tsx | 2 +- .../staking/dialogs/ClaimRewardsDialog.tsx | 2 +- .../staking/dialogs/ConfirmDelegateDialog.tsx | 2 +- .../dialogs/DelegateToCollatorDialog.tsx | 2 +- .../dialogs/ExecuteDelegationDialogs.tsx | 2 +- src/pages/staking/dialogs/helpers.ts | 6 +- .../staking/dialogs/steps/SuccessStep.tsx | 2 +- .../dialogs/unlock/UnlockConfirmStep.tsx | 2 +- .../staking/dialogs/unlock/UnlockDialog.tsx | 4 +- src/preact.d.ts | 16 - src/services/modal/index.tsx | 6 +- src/shared/Provider.tsx | 5 +- src/shared/useAccountBalance.ts | 2 +- tsconfig.json | 6 +- vite.config.ts | 9 +- yarn.lock | 523 ++++++++++-------- 146 files changed, 606 insertions(+), 601 deletions(-) delete mode 100644 src/components/Box/index.test.tsx delete mode 100644 src/components/Box/index.tsx delete mode 100644 src/components/Box/styles.css delete mode 100644 src/preact.d.ts diff --git a/README.md b/README.md index 1e800895..bd75152d 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,12 @@ [![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)   ![TypeScript](https://img.shields.io/badge/-TypeSript-05122A?style=flat&logo=typescript)  -![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)  ![Polkadot](https://img.shields.io/badge/-Polkadot-05122A?style=flat&logo=polkadot)  --- -Web application for Pendulum. This project was bootstrapped with [vite](https://vite.new/preact-ts) - ## Run In the project directory, you can run: diff --git a/config/babel.jest.cjs b/config/babel.jest.cjs index 1ff9b3ca..b4610e5b 100644 --- a/config/babel.jest.cjs +++ b/config/babel.jest.cjs @@ -1,4 +1,7 @@ +//@todo: remove + const babelJestMd = require('babel-jest'); + const babelJest = babelJestMd.__esModule ? babelJestMd.default : babelJestMd; module.exports = babelJest.createTransformer({ diff --git a/index.html b/index.html index 633e71a1..7abf5e84 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@ /> - -
+ +
diff --git a/jest.config.js b/jest.config.js index 22d43d37..e05cf421 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,4 @@ +//@todo: remove export default { roots: ['/src'], maxWorkers: 1, @@ -8,10 +9,6 @@ export default { testEnvironment: 'jsdom', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], moduleNameMapper: { - '^react$': 'preact/compat', - '^react-dom/test-utils$': 'preact/test-utils', - '^react-dom$': 'preact/compat', - '^react/jsx-runtime$': 'preact/jsx-runtime', '\\.(css|less|sass|scss)$': '/config/styleMock.js', '\\.(gif|ttf|eot|svg)$': '/config/fileMock.js', }, diff --git a/package.json b/package.json index 230ceb66..4b0224d2 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "dependencies": { "@chainsafe/metamask-polkadot-adapter": "^0.8.1", "@chainsafe/metamask-polkadot-types": "^0.9.1", - "@heroicons/react": "^2.1.1", + "@heroicons/react": "^2.1.5", "@hookform/resolvers": "^2.9.11", "@netlify/functions": "^2.8.2", "@pendulum-chain/api": "^1.1.1", @@ -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", @@ -56,10 +59,11 @@ "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", @@ -79,11 +83,8 @@ "@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", diff --git a/src/GlobalStateProvider/index.tsx b/src/GlobalStateProvider/index.tsx index 1f0e648b..b1507854 100644 --- 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(undefined); -const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => { +const GlobalStateProvider = ({ children }: { children: JSX.Element }) => { const tenantRef = useRef(); const [walletAccount, setWallet] = useState(undefined); const { pathname } = useLocation(); diff --git a/src/NodeInfoProvider.tsx b/src/NodeInfoProvider.tsx index f5755984..d30ea599 100644 --- a/src/NodeInfoProvider.tsx +++ b/src/NodeInfoProvider.tsx @@ -1,8 +1,7 @@ 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 { createContext, useContext, useEffect, useState } from 'react'; import { ToastMessage, showToast } from './shared/showToast'; async function createApiPromise(provider: WsProvider) { diff --git a/src/SharedProvider.tsx b/src/SharedProvider.tsx index 4e4a7aa4..2ead9117 100644 --- 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 index e7208c7e..feeef5dc 100644 --- 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 index 960d8f22..a81bc7db 100644 --- 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 { className?: string; diff --git a/src/assets/ChainLogo.tsx b/src/assets/ChainLogo.tsx index fef09ad4..5b1282ec 100644 --- a/src/assets/ChainLogo.tsx +++ b/src/assets/ChainLogo.tsx @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'preact/compat'; +import { HTMLAttributes } from 'react'; import { useGlobalState } from '../GlobalStateProvider'; import { TenantName } from '../models/Tenant'; import AmplitudeLogo from './AmplitudeLogo'; diff --git a/src/assets/CloseIcon.tsx b/src/assets/CloseIcon.tsx index e1e640f8..f0c0d55d 100644 --- 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/collators-rewards-icon.tsx b/src/assets/collators-rewards-icon.tsx index 3be3d2fa..c479336b 100644 --- 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) => ( diff --git a/src/assets/collators-staked-icon.tsx b/src/assets/collators-staked-icon.tsx index 2013442d..533aa70e 100644 --- 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) => ( diff --git a/src/assets/dashboard.tsx b/src/assets/dashboard.tsx index 148c0d38..bb813a05 100644 --- 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) => ( diff --git a/src/assets/governance.tsx b/src/assets/governance.tsx index fe8125c1..8cdef2d1 100644 --- 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) => ( diff --git a/src/assets/nabla.tsx b/src/assets/nabla.tsx index ad355cce..b5367b36 100644 --- a/src/assets/nabla.tsx +++ b/src/assets/nabla.tsx @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'preact/compat'; +import { HTMLAttributes } from 'react'; const NablaIcon = (props: HTMLAttributes) => ( ) => ( diff --git a/src/assets/spacewalk.tsx b/src/assets/spacewalk.tsx index c4c9b848..14559daa 100644 --- a/src/assets/spacewalk.tsx +++ b/src/assets/spacewalk.tsx @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'preact/compat'; +import { HTMLAttributes } from 'react'; const SpacewalkIcon = (props: HTMLAttributes) => ( diff --git a/src/assets/spinner.tsx b/src/assets/spinner.tsx index e5c6b968..14b6555d 100644 --- a/src/assets/spinner.tsx +++ b/src/assets/spinner.tsx @@ -1,4 +1,4 @@ -import type { HTMLAttributes } from 'preact/compat'; +import type { HTMLAttributes } from 'react'; export type SpinnerProps = { size?: number; diff --git a/src/assets/staking.tsx b/src/assets/staking.tsx index 3e690929..df1d3850 100644 --- a/src/assets/staking.tsx +++ b/src/assets/staking.tsx @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'preact/compat'; +import { HTMLAttributes } from 'react'; const StakingIcon = (props: HTMLAttributes) => ( diff --git a/src/assets/swap.tsx b/src/assets/swap.tsx index 315415f1..7f180ed6 100644 --- a/src/assets/swap.tsx +++ b/src/assets/swap.tsx @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'preact/compat'; +import { HTMLAttributes } from 'react'; const SwapIcon = (props: HTMLAttributes) => ( diff --git a/src/components/Asset/Price/index.tsx b/src/components/Asset/Price/index.tsx index ee4c03b4..135f4d4b 100644 --- a/src/components/Asset/Price/index.tsx +++ b/src/components/Asset/Price/index.tsx @@ -1,6 +1,6 @@ import { UseQueryOptions } from '@tanstack/react-query'; import { SpacewalkPrimitivesCurrencyId } from '@polkadot/types/lookup'; -import { memo, useEffect, useState } from 'preact/compat'; +import { memo, useEffect, useState } from 'react'; import { usePriceFetcher } from '../../../hooks/usePriceFetcher'; import { NumberLoader } from '../../Loader'; diff --git a/src/components/Box/index.test.tsx b/src/components/Box/index.test.tsx deleted file mode 100644 index 3039ac44..00000000 --- a/src/components/Box/index.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render, screen } from '@testing-library/preact'; -import { Fragment } from 'preact'; -import Box from '.'; - -describe('Box', () => { - test('should display initial count', () => { - const title = 'Test title'; - const children = 'Test children'; - render( - - {children} - , - ); - expect(screen.getByText(title)).toBeInTheDocument(); - expect(screen.getByText(children)).toBeInTheDocument(); - }); -}); diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx deleted file mode 100644 index f9c1dcf1..00000000 --- a/src/components/Box/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentChildren } from 'preact'; -import './styles.css'; - -type Props = { - title?: string; - subTitle?: string; - children?: ComponentChildren; -}; - -const Box = ({ title, subTitle, children }: Props) => { - return ( -
-
- {title &&

{title}

} - {subTitle &&

{subTitle}

} - {children} -
-
- ); -}; - -export default Box; diff --git a/src/components/Box/styles.css b/src/components/Box/styles.css deleted file mode 100644 index 21ccf9e6..00000000 --- a/src/components/Box/styles.css +++ /dev/null @@ -1,20 +0,0 @@ -.box { - width: 100%; - border-radius: 30px; - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); - background-color: var(--clear); - position: relative; - min-height: auto; -} - -.box h2 { - font-size: 30px; - font-weight: 700; - padding: 20px; -} - -.box h1 { - font-weight: 500; - font-size: 18px; - padding: 20px; -} diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index b4a57271..7ec9760d 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,5 +1,5 @@ import { Modal } from 'react-daisyui'; -import { createPortal, useCallback, useEffect, useRef, useState } from 'preact/compat'; +import { createPortal, useCallback, useEffect, useRef, useState } from 'react'; import { CloseButton } from '../CloseButton'; interface DialogProps { diff --git a/src/components/Form/From/Badges/index.tsx b/src/components/Form/From/Badges/index.tsx index 6b3dae59..f181bbb1 100644 --- a/src/components/Form/From/Badges/index.tsx +++ b/src/components/Form/From/Badges/index.tsx @@ -1,4 +1,4 @@ -import { FC } from 'preact/compat'; +import { FC } from 'react'; import useSwitchChain from '../../../../hooks/useSwitchChain'; import { TenantName } from '../../../../models/Tenant'; diff --git a/src/components/Form/From/NumericInput/NumericInput.test.tsx b/src/components/Form/From/NumericInput/NumericInput.test.tsx index 1c0944c2..fb0bb884 100644 --- a/src/components/Form/From/NumericInput/NumericInput.test.tsx +++ b/src/components/Form/From/NumericInput/NumericInput.test.tsx @@ -1,6 +1,5 @@ -import { h } from 'preact'; import { UseFormRegisterReturn } from 'react-hook-form'; -import { render } from '@testing-library/preact'; +import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { NumericInput } from '.'; import { handleOnPasteNumericInput } from './helpers'; diff --git a/src/components/Form/From/index.tsx b/src/components/Form/From/index.tsx index 4b82dcfd..53a66d2d 100644 --- a/src/components/Form/From/index.tsx +++ b/src/components/Form/From/index.tsx @@ -1,5 +1,5 @@ import { UseFormRegisterReturn } from 'react-hook-form'; -import { StateUpdater, Dispatch } from 'preact/hooks'; +import { Dispatch } from 'react'; import { Asset } from '@stellar/stellar-sdk'; import { BlockchainAsset } from '../../Selector/AssetSelector/helpers'; @@ -23,7 +23,7 @@ export interface FromProps { asset: { assets?: BlockchainAsset[]; selectedAsset?: BlockchainAsset; - setSelectedAsset?: Dispatch> | Dispatch>; + setSelectedAsset?: Dispatch | Dispatch; assetSuffix?: string; }; description: { diff --git a/src/components/Form/From/variants/StandardFrom.test.tsx b/src/components/Form/From/variants/StandardFrom.test.tsx index 5aac21e9..35aad7ff 100644 --- a/src/components/Form/From/variants/StandardFrom.test.tsx +++ b/src/components/Form/From/variants/StandardFrom.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom'; import Big from 'big.js'; import userEvent from '@testing-library/user-event'; -import { render } from '@testing-library/preact'; +import { render } from '@testing-library/react'; import { SpacewalkPrimitivesCurrencyId } from '@polkadot/types/lookup'; import { useForm } from 'react-hook-form'; diff --git a/src/components/LabelledInputField/index.tsx b/src/components/LabelledInputField/index.tsx index 470ea624..74b5b80f 100644 --- a/src/components/LabelledInputField/index.tsx +++ b/src/components/LabelledInputField/index.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, ChangeEvent, TargetedEvent, forwardRef } from 'preact/compat'; +import { CSSProperties, ChangeEvent, TargetedEvent, forwardRef } from 'react'; import { Input, InputProps } from 'react-daisyui'; import { UseFormRegisterReturn } from 'react-hook-form'; import './styles.css'; diff --git a/src/components/LabelledSelector/index.tsx b/src/components/LabelledSelector/index.tsx index c403406c..9c10564f 100644 --- a/src/components/LabelledSelector/index.tsx +++ b/src/components/LabelledSelector/index.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, CSSProperties } from 'preact/compat'; +import { ChangeEvent, CSSProperties } from 'react'; import { Select } from 'react-daisyui'; import { ofSelect } from '../../helpers/general'; diff --git a/src/components/Layout/ComingSoonTag.tsx b/src/components/Layout/ComingSoonTag.tsx index 9fef727c..50866726 100644 --- a/src/components/Layout/ComingSoonTag.tsx +++ b/src/components/Layout/ComingSoonTag.tsx @@ -1,4 +1,4 @@ -import { FC } from 'preact/compat'; +import { FC } from 'react'; const ComingSoonTag: FC = () => { return
Coming soon!
; diff --git a/src/components/Layout/Nav/index.tsx b/src/components/Layout/Nav/index.tsx index a22cdb65..191df350 100644 --- a/src/components/Layout/Nav/index.tsx +++ b/src/components/Layout/Nav/index.tsx @@ -1,4 +1,4 @@ -import { memo, useEffect, useMemo, useState } from 'preact/compat'; +import { memo, useEffect, useMemo, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { useGlobalState } from '../../../GlobalStateProvider'; import { NavCollapseButtonContent } from '../NavCollapseButtonContent'; diff --git a/src/components/Layout/NavCollapseButtonContent.tsx b/src/components/Layout/NavCollapseButtonContent.tsx index 3ff32161..4b9863ae 100644 --- a/src/components/Layout/NavCollapseButtonContent.tsx +++ b/src/components/Layout/NavCollapseButtonContent.tsx @@ -1,4 +1,4 @@ -import { FC } from 'preact/compat'; +import { FC } from 'react'; import Lottie from 'react-lottie'; import { LinkItem, isLottieOptions } from './links'; diff --git a/src/components/Layout/NetworkId.tsx b/src/components/Layout/NetworkId.tsx index e405e400..de9e69e1 100644 --- a/src/components/Layout/NetworkId.tsx +++ b/src/components/Layout/NetworkId.tsx @@ -1,4 +1,4 @@ -import { FC, memo } from 'preact/compat'; +import { FC, memo } from 'react'; import { useGlobalState } from '../../GlobalStateProvider'; import { useNodeInfoState } from '../../NodeInfoProvider'; diff --git a/src/components/Layout/Versions.tsx b/src/components/Layout/Versions.tsx index d58a08cd..6ccfa613 100644 --- a/src/components/Layout/Versions.tsx +++ b/src/components/Layout/Versions.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import { FC, memo } from 'preact/compat'; +import { FC, memo } from 'react'; import { useNodeInfoState } from '../../NodeInfoProvider'; import { TenantName } from '../../models/Tenant'; diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index d59ad7ea..ac16ded7 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -1,5 +1,5 @@ import { Bars3Icon } from '@heroicons/react/20/solid'; -import { memo, useState } from 'preact/compat'; +import { memo, useState } from 'react'; import { Outlet } from 'react-router-dom'; import { isMobile } from 'react-device-detect'; import { useGlobalState } from '../../GlobalStateProvider'; diff --git a/src/components/Layout/links.tsx b/src/components/Layout/links.tsx index 36e5b9ff..9b67a28d 100644 --- a/src/components/Layout/links.tsx +++ b/src/components/Layout/links.tsx @@ -1,4 +1,3 @@ -import { ComponentChildren } from 'preact'; import { NavLinkProps } from 'react-router-dom'; import { Options } from 'react-lottie'; @@ -34,8 +33,8 @@ export function isLottieOptions(obj: unknown): obj is LottieOptions { return false; } -export type TitleOptions = LottieOptions | ComponentChildren; -export type PrefixOptions = LottieOptions | ComponentChildren; +export type TitleOptions = LottieOptions | React.ReactNode; +export type PrefixOptions = LottieOptions | React.ReactNode; export type BaseLinkItem = { link: string; @@ -44,7 +43,7 @@ export type BaseLinkItem = { className?: (params?: LinkParameter) => string; }; prefix?: PrefixOptions; - suffix?: ComponentChildren; + suffix?: React.ReactNode; hidden?: boolean; disabled?: boolean; }; @@ -146,7 +145,7 @@ export function createLinks(tenantName: TenantName): [LinkItem[], Promise, suffix: ( - + ), diff --git a/src/components/Pagination/index.test.tsx b/src/components/Pagination/index.test.tsx index 1c08a79d..d2661796 100644 --- a/src/components/Pagination/index.test.tsx +++ b/src/components/Pagination/index.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/preact'; +import { render, screen } from '@testing-library/react'; import Pagination from '.'; describe('Pagination', () => { diff --git a/src/components/PublicKey/ClickablePublicKey/index.tsx b/src/components/PublicKey/ClickablePublicKey/index.tsx index 257bbda1..2503d471 100644 --- a/src/components/PublicKey/ClickablePublicKey/index.tsx +++ b/src/components/PublicKey/ClickablePublicKey/index.tsx @@ -1,4 +1,4 @@ -import { CSSProperties } from 'preact/compat'; +import { CSSProperties } from 'react'; import { Button } from 'react-daisyui'; import { FormatPublicKeyVariant, PublicKey } from '..'; diff --git a/src/components/PublicKey/index.tsx b/src/components/PublicKey/index.tsx index 0da0f83b..033bf6e4 100644 --- a/src/components/PublicKey/index.tsx +++ b/src/components/PublicKey/index.tsx @@ -1,4 +1,4 @@ -import { CSSProperties } from 'preact/compat'; +import { CSSProperties } from 'react'; export type FormatPublicKeyVariant = 'full' | 'short' | 'shorter' | 'hexa'; diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx index fd601c5e..5dd9c0ba 100644 --- a/src/components/SearchInput/index.tsx +++ b/src/components/SearchInput/index.tsx @@ -1,12 +1,13 @@ import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'; -import { StateUpdater } from 'preact/hooks'; +import { Dispatch } from 'react'; interface SearchInputProps { - set: Dispatch>; + //@todo: check + set: Dispatch; } export const SearchInput = ({ set, ...p }: SearchInputProps) => ( -
-
+

Deposit {data.token.symbol}

{walletAccount && ( -
+

Deposited:

@@ -73,7 +73,7 @@ const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element | null showAvailableActions={true} /> -
+
Total LP tokens
@@ -113,7 +113,7 @@ const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element | null Withdraw from
{walletAccount && ( -
+

Deposited:

@@ -104,7 +104,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
-
+
You will withdraw
{walletAccount && ( -
+
Your current balance
@@ -135,7 +135,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
-
+
Total backstop pool LP tokens
@@ -164,7 +164,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps): ) : ( )} -
diff --git a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopDrain.ts b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopDrain.ts index 2f2bd65d..9dc3e38f 100644 --- a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopDrain.ts +++ b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopDrain.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'preact/hooks'; +import { useCallback } from 'react'; import { config } from '../../../../../config'; import { backstopPoolAbi } from '../../../../../contracts/nabla/BackstopPool'; diff --git a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopWithdraw.ts b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopWithdraw.ts index a265b346..81893562 100644 --- a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopWithdraw.ts +++ b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useBackstopWithdraw.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'preact/hooks'; +import { useCallback } from 'react'; import { config } from '../../../../../config'; import { backstopPoolAbi } from '../../../../../contracts/nabla/BackstopPool'; diff --git a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useWithdrawLiquidity.ts b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useWithdrawLiquidity.ts index 5ad2ec08..40785483 100644 --- a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useWithdrawLiquidity.ts +++ b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/useWithdrawLiquidity.ts @@ -1,6 +1,6 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { useQueryClient } from '@tanstack/react-query'; -import { useCallback, useMemo } from 'preact/compat'; +import { useCallback, useMemo } from 'react'; import { useForm, useWatch } from 'react-hook-form'; import * as Yup from 'yup'; diff --git a/src/components/nabla/Pools/Swap/AddLiquidity/useAddLiquidity.ts b/src/components/nabla/Pools/Swap/AddLiquidity/useAddLiquidity.ts index 92fcc7cf..f6f4e7a1 100644 --- a/src/components/nabla/Pools/Swap/AddLiquidity/useAddLiquidity.ts +++ b/src/components/nabla/Pools/Swap/AddLiquidity/useAddLiquidity.ts @@ -1,7 +1,7 @@ import { yupResolver } from '@hookform/resolvers/yup'; import * as Yup from 'yup'; import { useForm, useWatch } from 'react-hook-form'; -import { useCallback, useMemo } from 'preact/hooks'; +import { useCallback, useMemo } from 'react'; import Big from 'big.js'; import { useQueryClient } from '@tanstack/react-query'; diff --git a/src/components/nabla/Pools/Swap/Redeem/useRedeem.ts b/src/components/nabla/Pools/Swap/Redeem/useRedeem.ts index 82866c2e..19681942 100644 --- a/src/components/nabla/Pools/Swap/Redeem/useRedeem.ts +++ b/src/components/nabla/Pools/Swap/Redeem/useRedeem.ts @@ -1,5 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { useCallback } from 'preact/compat'; +import { useCallback } from 'react'; import { useForm, useWatch } from 'react-hook-form'; import * as Yup from 'yup'; diff --git a/src/components/nabla/Pools/Swap/SwapPoolModals.tsx b/src/components/nabla/Pools/Swap/SwapPoolModals.tsx index 03a96e56..b239ee16 100644 --- a/src/components/nabla/Pools/Swap/SwapPoolModals.tsx +++ b/src/components/nabla/Pools/Swap/SwapPoolModals.tsx @@ -1,17 +1,18 @@ -import { FunctionalComponent } from 'preact'; import { ModalTypes, useModal } from '../../../../services/modal'; import { Dialog } from '../../../Dialog'; import { SwapPoolColumn } from './columns'; import AddLiquidity from './AddLiquidity'; import Redeem from './Redeem'; import WithdrawLiquidity from './WithdrawLiquidity'; +import { FC } from 'react'; export type LiquidityModalProps = { data: SwapPoolColumn; }; +// @todo: remove any // eslint-disable-next-line @typescript-eslint/no-explicit-any -const modalsUi: Partial>> = { +const modalsUi: Partial>> = { AddLiquidity, WithdrawLiquidity, Redeem, diff --git a/src/components/nabla/Pools/Swap/WithdrawLiquidity/useWithdrawLiquidity.ts b/src/components/nabla/Pools/Swap/WithdrawLiquidity/useWithdrawLiquidity.ts index 6a81f557..ebffc887 100644 --- a/src/components/nabla/Pools/Swap/WithdrawLiquidity/useWithdrawLiquidity.ts +++ b/src/components/nabla/Pools/Swap/WithdrawLiquidity/useWithdrawLiquidity.ts @@ -1,6 +1,6 @@ import { yupResolver } from '@hookform/resolvers/yup'; import * as Yup from 'yup'; -import { useCallback } from 'preact/compat'; +import { useCallback } from 'react'; import { useForm, useWatch } from 'react-hook-form'; import { swapPoolAbi } from '../../../../../contracts/nabla/SwapPool'; diff --git a/src/components/nabla/Swap/To.tsx b/src/components/nabla/Swap/To.tsx index b4d5caa2..903dc4c6 100644 --- a/src/components/nabla/Swap/To.tsx +++ b/src/components/nabla/Swap/To.tsx @@ -1,5 +1,5 @@ import { ArrowPathRoundedSquareIcon, ChevronDownIcon } from '@heroicons/react/20/solid'; -import { useEffect } from 'preact/compat'; +import { useEffect } from 'react'; import { Button } from 'react-daisyui'; import { useFormContext } from 'react-hook-form'; import Big from 'big.js'; diff --git a/src/components/nabla/Swap/useSwapComponent.ts b/src/components/nabla/Swap/useSwapComponent.ts index 809c51f7..13b4a370 100644 --- a/src/components/nabla/Swap/useSwapComponent.ts +++ b/src/components/nabla/Swap/useSwapComponent.ts @@ -1,5 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/compat'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Resolver, useForm, useWatch } from 'react-hook-form'; import Big from 'big.js'; diff --git a/src/components/nabla/common/AmountSelector.tsx b/src/components/nabla/common/AmountSelector.tsx index b662217a..3d35281f 100644 --- a/src/components/nabla/common/AmountSelector.tsx +++ b/src/components/nabla/common/AmountSelector.tsx @@ -1,9 +1,9 @@ import { Range } from 'react-daisyui'; import { FieldPath, FieldValues, PathValue, UseFormReturn, useWatch } from 'react-hook-form'; -import { useEffect, useMemo } from 'preact/hooks'; +import { useEffect, useMemo } from 'react'; import Big from 'big.js'; -import { ChangeEvent, ReactNode } from 'preact/compat'; +import { ChangeEvent, ReactNode } from 'react'; import { fractionOfValue } from '../../../shared/parseNumbers/metric'; import { ContractBalance } from '../../../helpers/contracts'; import { calcSharePercentageNumber } from '../../../helpers/calc'; diff --git a/src/components/nabla/common/PoolSelectorModal.tsx b/src/components/nabla/common/PoolSelectorModal.tsx index 3b647b7c..f625ac9e 100644 --- a/src/components/nabla/common/PoolSelectorModal.tsx +++ b/src/components/nabla/common/PoolSelectorModal.tsx @@ -1,6 +1,6 @@ import { CheckIcon } from '@heroicons/react/20/solid'; import { matchSorter } from 'match-sorter'; -import { ChangeEvent, useMemo, useState } from 'preact/compat'; +import { ChangeEvent, useMemo, useState } from 'react'; import { Avatar, AvatarProps, Button, Input } from 'react-daisyui'; import { repeat } from '../../../helpers/general'; diff --git a/src/components/nabla/common/SwapProgress.tsx b/src/components/nabla/common/SwapProgress.tsx index 83330328..706f9a67 100644 --- a/src/components/nabla/common/SwapProgress.tsx +++ b/src/components/nabla/common/SwapProgress.tsx @@ -1,4 +1,3 @@ -import { JSX } from 'preact'; import { TransactionProgress, TransactionProgressProps } from '../common/TransactionProgress'; import { Dialog } from '../../Dialog'; diff --git a/src/components/nabla/common/TokenApproval.tsx b/src/components/nabla/common/TokenApproval.tsx index 6a621d7b..b67b0b0f 100644 --- a/src/components/nabla/common/TokenApproval.tsx +++ b/src/components/nabla/common/TokenApproval.tsx @@ -1,5 +1,5 @@ import { Button, ButtonProps } from 'react-daisyui'; -import { useCallback } from 'preact/hooks'; +import { useCallback } from 'react'; import { Big } from 'big.js'; import { ApprovalState, useErc20TokenApproval } from '../../../hooks/nabla/useErc20TokenApproval'; diff --git a/src/components/nabla/common/TransactionProgress.tsx b/src/components/nabla/common/TransactionProgress.tsx index 285f9906..f7467ebd 100644 --- a/src/components/nabla/common/TransactionProgress.tsx +++ b/src/components/nabla/common/TransactionProgress.tsx @@ -1,5 +1,4 @@ import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline'; -import { ComponentChildren } from 'preact'; import { Button } from 'react-daisyui'; import { ExecuteMessageResult } from '@pendulum-chain/api-solang'; @@ -10,7 +9,7 @@ import { useGlobalState } from '../../../GlobalStateProvider'; export interface TransactionProgressProps { mutation: UseContractWriteResponse; - children?: ComponentChildren; + children?: JSX.Element; onClose: () => void; } @@ -43,10 +42,10 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction if (mutation.isIdle) return null; if (mutation.isLoading) { - const isPending = false; // TODO: currently there is not status for this (waiting confirmation in wallet) + const isPending = false; // @todo: currently there is not status for this (waiting confirmation in wallet) return ( <> -
+

{isPending ? 'Waiting for confirmation' : 'Executing transaction'} @@ -62,11 +61,11 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction return ( <> -
+
{mutation.isSuccess ? ( - + ) : ( - + )}
@@ -77,12 +76,12 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction {!mutation.isSuccess && !!errorMsg &&

{errorMsg}

}
{explorerUrl && ( - + View on Explorer )} {!!onClose && ( - )} diff --git a/src/hooks/nabla/useContractRead.ts b/src/hooks/nabla/useContractRead.ts index 63ae99c4..738dad55 100644 --- a/src/hooks/nabla/useContractRead.ts +++ b/src/hooks/nabla/useContractRead.ts @@ -2,7 +2,7 @@ import { Abi } from '@polkadot/api-contract'; import { QueryKey, useQuery, UseQueryResult } from '@tanstack/react-query'; -import { useMemo } from 'preact/compat'; +import { useMemo } from 'react'; import { defaultReadLimits, emptyCacheKey, QueryOptions } from '../../shared/helpers'; import { useSharedState } from '../../shared/Provider'; diff --git a/src/hooks/nabla/useContractWrite.ts b/src/hooks/nabla/useContractWrite.ts index ac497c99..9524f8ce 100644 --- a/src/hooks/nabla/useContractWrite.ts +++ b/src/hooks/nabla/useContractWrite.ts @@ -2,7 +2,7 @@ import { executeMessage, ExecuteMessageResult } from '@pendulum-chain/api-solang'; import { Abi } from '@polkadot/api-contract'; import { MutationOptions, useMutation, UseMutationResult } from '@tanstack/react-query'; -import { useCallback, useMemo } from 'preact/compat'; +import { useCallback, useMemo } from 'react'; import { defaultWriteLimits } from '../../shared/helpers'; import { useSharedState } from '../../shared/Provider'; diff --git a/src/hooks/nabla/useErc20TokenApproval.ts b/src/hooks/nabla/useErc20TokenApproval.ts index c5ffa869..4f57fdaf 100644 --- a/src/hooks/nabla/useErc20TokenApproval.ts +++ b/src/hooks/nabla/useErc20TokenApproval.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useMemo, useState } from 'preact/compat'; +import { useMemo, useState } from 'react'; import { Big } from 'big.js'; import { erc20WrapperAbi } from '../../contracts/nabla/ERC20Wrapper'; diff --git a/src/hooks/nabla/useQuote.ts b/src/hooks/nabla/useQuote.ts index 78b792b1..108c497b 100644 --- a/src/hooks/nabla/useQuote.ts +++ b/src/hooks/nabla/useQuote.ts @@ -1,5 +1,5 @@ import { Big } from 'big.js'; -import { useCallback, useEffect, useMemo } from 'preact/hooks'; +import { useCallback, useEffect, useMemo } from 'react'; import { FieldValues, UseFormReturn } from 'react-hook-form'; import { activeOptions } from '../../constants/cache'; diff --git a/src/hooks/nabla/useTokenOutAmount.ts b/src/hooks/nabla/useTokenOutAmount.ts index 6ca6b158..9425424b 100644 --- a/src/hooks/nabla/useTokenOutAmount.ts +++ b/src/hooks/nabla/useTokenOutAmount.ts @@ -9,7 +9,7 @@ import { useGetAppDataByTenant } from '../useGetAppDataByTenant'; import { useContractRead } from './useContractRead'; import { NablaInstanceToken } from './useNablaInstance'; import { useDebouncedValue } from '../useDebouncedValue'; -import { useEffect } from 'preact/hooks'; +import { useEffect } from 'react'; import { UseQueryResult } from '@tanstack/react-query'; import { subtractBigDecimalPercentage } from '../../helpers/calc'; diff --git a/src/hooks/spacewalk/__tests__/useCalculateGriefingCollateral.test.ts b/src/hooks/spacewalk/__tests__/useCalculateGriefingCollateral.test.ts index 5a6de1e9..fdb2aceb 100644 --- a/src/hooks/spacewalk/__tests__/useCalculateGriefingCollateral.test.ts +++ b/src/hooks/spacewalk/__tests__/useCalculateGriefingCollateral.test.ts @@ -1,5 +1,5 @@ -import { renderHook } from '@testing-library/preact-hooks'; -import { waitFor } from '@testing-library/preact'; +import { renderHook } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import { Asset } from '@stellar/stellar-sdk'; import Big from 'big.js'; import { useFeePallet } from '../useFeePallet'; diff --git a/src/hooks/spacewalk/useBridgeSettings.ts b/src/hooks/spacewalk/useBridgeSettings.ts index e7a357e7..52cc8aa9 100644 --- a/src/hooks/spacewalk/useBridgeSettings.ts +++ b/src/hooks/spacewalk/useBridgeSettings.ts @@ -1,6 +1,6 @@ import Big from 'big.js'; -import { useEffect, useMemo } from 'preact/compat'; -import { StateUpdater, Dispatch } from 'preact/hooks'; +import { useEffect, useMemo } from 'react'; +import { Dispatch } from 'react'; import { Asset } from '@stellar/stellar-sdk'; import { uniqBy } from 'lodash'; import { useGlobalState } from '../../GlobalStateProvider'; @@ -17,9 +17,9 @@ export interface BridgeSettings { vaultsForCurrency?: ExtendedRegistryVault[]; wrappedAssets?: Asset[]; selectedAsset?: Asset; - setSelectedAsset: Dispatch>; - setSelectedVault: Dispatch>; - setManualVaultSelection: Dispatch>; + setSelectedAsset: Dispatch; + setSelectedVault: Dispatch; + setManualVaultSelection: Dispatch; bridgeDirection: BridgeDirection; } diff --git a/src/hooks/spacewalk/useCalculateGriefingCollateral.ts b/src/hooks/spacewalk/useCalculateGriefingCollateral.ts index 3d91214a..ae63a619 100644 --- a/src/hooks/spacewalk/useCalculateGriefingCollateral.ts +++ b/src/hooks/spacewalk/useCalculateGriefingCollateral.ts @@ -1,6 +1,6 @@ import { Asset } from '@stellar/stellar-sdk'; import Big from 'big.js'; -import { useEffect, useState, useMemo } from 'preact/compat'; +import { useEffect, useState, useMemo } from 'react'; import { nativeStellarToDecimal } from '../../shared/parseNumbers/metric'; import { convertStellarAssetToCurrency } from '../../helpers/spacewalk'; import { useNodeInfoState } from '../../NodeInfoProvider'; diff --git a/src/hooks/spacewalk/useFeePallet.tsx b/src/hooks/spacewalk/useFeePallet.tsx index 0b4a6b21..11a8b016 100644 --- a/src/hooks/spacewalk/useFeePallet.tsx +++ b/src/hooks/spacewalk/useFeePallet.tsx @@ -1,7 +1,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types'; import { SpacewalkPrimitivesCurrencyId } from '@polkadot/types/lookup'; import Big from 'big.js'; -import { useEffect, useMemo, useState } from 'preact/hooks'; +import { useEffect, useMemo, useState } from 'react'; import { useNodeInfoState } from '../../NodeInfoProvider'; import { fixedPointToDecimal } from '../../shared/parseNumbers/metric'; diff --git a/src/hooks/spacewalk/useIssuePallet.tsx b/src/hooks/spacewalk/useIssuePallet.tsx index 835e7f1d..3336b2d0 100644 --- a/src/hooks/spacewalk/useIssuePallet.tsx +++ b/src/hooks/spacewalk/useIssuePallet.tsx @@ -1,6 +1,6 @@ import { H256 } from '@polkadot/types/interfaces'; import type { SpacewalkPrimitivesIssueIssueRequest, SpacewalkPrimitivesVaultId } from '@polkadot/types/lookup'; -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { useNodeInfoState } from '../../NodeInfoProvider'; import { Compact, u128 } from '@polkadot/types-codec'; import Big from 'big.js'; diff --git a/src/hooks/spacewalk/useRedeemPallet.tsx b/src/hooks/spacewalk/useRedeemPallet.tsx index a9848ef4..c90b0daa 100644 --- a/src/hooks/spacewalk/useRedeemPallet.tsx +++ b/src/hooks/spacewalk/useRedeemPallet.tsx @@ -1,6 +1,6 @@ import { H256 } from '@polkadot/types/interfaces'; import type { SpacewalkPrimitivesRedeemRedeemRequest, SpacewalkPrimitivesVaultId } from '@polkadot/types/lookup'; -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { useNodeInfoState } from '../../NodeInfoProvider'; import { convertPublicKeyToRaw } from '../../helpers/stellar'; diff --git a/src/hooks/spacewalk/useSecurityPallet.tsx b/src/hooks/spacewalk/useSecurityPallet.tsx index 0cac6a91..b6f5ec86 100644 --- a/src/hooks/spacewalk/useSecurityPallet.tsx +++ b/src/hooks/spacewalk/useSecurityPallet.tsx @@ -1,5 +1,5 @@ import { UnsubscribePromise } from '@polkadot/api-base/types'; -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { useNodeInfoState } from '../../NodeInfoProvider'; export function useSecurityPallet() { diff --git a/src/hooks/spacewalk/useVaultRegistryPallet.ts b/src/hooks/spacewalk/useVaultRegistryPallet.ts index 56cc7ff1..63e095e7 100644 --- a/src/hooks/spacewalk/useVaultRegistryPallet.ts +++ b/src/hooks/spacewalk/useVaultRegistryPallet.ts @@ -1,7 +1,7 @@ import { AccountId32 } from '@polkadot/types/interfaces'; import type { VaultRegistryVault } from '@polkadot/types/lookup'; import Big from 'big.js'; -import { useEffect, useMemo, useState } from 'preact/hooks'; +import { useEffect, useMemo, useState } from 'react'; import { useNodeInfoState } from '../../NodeInfoProvider'; import { convertRawHexKeyToPublicKey } from '../../helpers/stellar'; import { isEmpty } from 'lodash'; diff --git a/src/hooks/staking/useStakingPallet.tsx b/src/hooks/staking/useStakingPallet.tsx index c284a95a..49d47b05 100644 --- a/src/hooks/staking/useStakingPallet.tsx +++ b/src/hooks/staking/useStakingPallet.tsx @@ -1,7 +1,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types'; import { Option } from '@polkadot/types-codec'; import Big from 'big.js'; -import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { useGlobalState } from '../../GlobalStateProvider'; import { useNodeInfoState } from '../../NodeInfoProvider'; import { getAddressForFormat } from '../../helpers/addressFormatter'; diff --git a/src/hooks/useAssetRegistryMetadata.ts b/src/hooks/useAssetRegistryMetadata.ts index 9fb75a1e..d57d01b7 100644 --- a/src/hooks/useAssetRegistryMetadata.ts +++ b/src/hooks/useAssetRegistryMetadata.ts @@ -1,4 +1,4 @@ -import { useEffect, useCallback } from 'preact/hooks'; +import { useEffect, useCallback } from 'react'; import { SpacewalkPrimitivesCurrencyId } from '@polkadot/types/lookup'; import { Codec } from '@polkadot/types-codec/types'; import { StorageKey } from '@polkadot/types'; diff --git a/src/hooks/useBalances.ts b/src/hooks/useBalances.ts index b262566a..aed8cb6c 100644 --- a/src/hooks/useBalances.ts +++ b/src/hooks/useBalances.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'preact/compat'; +import { useCallback, useEffect, useState } from 'react'; import { useGlobalState } from '../GlobalStateProvider'; import { getAddressForFormat } from '../helpers/addressFormatter'; import { useNodeInfoState } from '../NodeInfoProvider'; diff --git a/src/hooks/useBoolean.ts b/src/hooks/useBoolean.ts index e92e7a6d..98ea285b 100644 --- a/src/hooks/useBoolean.ts +++ b/src/hooks/useBoolean.ts @@ -1,4 +1,4 @@ -import { useCallback, useMemo, useState } from 'preact/compat'; +import { useCallback, useMemo, useState } from 'react'; export type UseBooleanActions = { setValue: (val: boolean) => void; diff --git a/src/hooks/useBuyout/index.ts b/src/hooks/useBuyout/index.ts index 14c3c59d..fab0ea38 100644 --- a/src/hooks/useBuyout/index.ts +++ b/src/hooks/useBuyout/index.ts @@ -1,5 +1,5 @@ import BigNumber from 'big.js'; -import { StateUpdater, Dispatch, useEffect, useState } from 'preact/hooks'; +import { Dispatch, useEffect, useState } from 'react'; import { isEmpty, find } from 'lodash'; import { Option } from '@polkadot/types-codec'; import { Codec } from '@polkadot/types-codec/types'; @@ -27,8 +27,8 @@ export interface BuyoutSettings { handleBuyout: ( currency: OrmlTraitsAssetRegistryAssetMetadata, amount: string, - setSubmissionPending: Dispatch>, - setConfirmationDialogVisible: Dispatch>, + setSubmissionPending: Dispatch, + setConfirmationDialogVisible: Dispatch, ) => void; } @@ -126,8 +126,8 @@ export const useBuyout = (): BuyoutSettings => { async function handleBuyout( currency: OrmlTraitsAssetRegistryAssetMetadata, amount: string, - setSubmissionPending: Dispatch>, - setConfirmationDialogVisible: Dispatch>, + setSubmissionPending: Dispatch, + setConfirmationDialogVisible: Dispatch, ) { if (!api || !walletAccount) { return; diff --git a/src/hooks/useClipboard.ts b/src/hooks/useClipboard.ts index 91f3c8e1..c41c4d6d 100644 --- a/src/hooks/useClipboard.ts +++ b/src/hooks/useClipboard.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { ToastMessage, showToast } from '../shared/showToast'; export function useClipboard() { diff --git a/src/hooks/useDebouncedValue.ts b/src/hooks/useDebouncedValue.ts index 2f60795d..34aa3aad 100644 --- a/src/hooks/useDebouncedValue.ts +++ b/src/hooks/useDebouncedValue.ts @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'preact/compat'; +import { useEffect, useMemo, useState } from 'react'; import { debounce } from '../helpers/function'; export const useDebouncedValue = (value: T, delay = 1000) => { diff --git a/src/hooks/useIdentityPallet.ts b/src/hooks/useIdentityPallet.ts index f011fb24..7c6f0eb8 100644 --- a/src/hooks/useIdentityPallet.ts +++ b/src/hooks/useIdentityPallet.ts @@ -1,5 +1,5 @@ import { PalletIdentityRegistration } from '@polkadot/types/lookup'; -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { useNodeInfoState } from '../NodeInfoProvider'; export interface PalletIdentityInfo { diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts index d3d43d7d..dbfa853d 100644 --- a/src/hooks/useLocalStorage.ts +++ b/src/hooks/useLocalStorage.ts @@ -1,5 +1,5 @@ import { DateTime } from 'luxon'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/compat'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { debounce } from '../helpers/function'; import { storageService } from '../services/storage/local'; import { Storage } from '../services/storage/types'; diff --git a/src/hooks/usePriceFetcher.ts b/src/hooks/usePriceFetcher.ts index 783e4c36..35bd60fa 100644 --- a/src/hooks/usePriceFetcher.ts +++ b/src/hooks/usePriceFetcher.ts @@ -1,5 +1,5 @@ import { SpacewalkPrimitivesCurrencyId } from '@polkadot/types/lookup'; -import { useCallback } from 'preact/compat'; +import { useCallback } from 'react'; import { useQuery } from '@tanstack/react-query'; import { isEqual } from 'lodash'; import { TenantName } from '../models/Tenant'; diff --git a/src/hooks/useSwitchChain.ts b/src/hooks/useSwitchChain.ts index a9935e9b..f702f917 100644 --- a/src/hooks/useSwitchChain.ts +++ b/src/hooks/useSwitchChain.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'preact/compat'; +import { useCallback } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { useGlobalState } from '../GlobalStateProvider'; import { buildTenantPath } from '../helpers/url'; diff --git a/src/hooks/useWalletConnection/useConnectWallet/index.tsx b/src/hooks/useWalletConnection/useConnectWallet/index.tsx index b775998c..a5e0532b 100644 --- a/src/hooks/useWalletConnection/useConnectWallet/index.tsx +++ b/src/hooks/useWalletConnection/useConnectWallet/index.tsx @@ -1,4 +1,4 @@ -import { useState } from 'preact/hooks'; +import { useState } from 'react'; import { Wallet, WalletAccount, getWallets } from '@talismn/connect-wallets'; import { useMutation } from '@tanstack/react-query'; import { useGlobalState } from '../../../GlobalStateProvider'; diff --git a/src/hooks/useWalletConnection/useMetamask/index.tsx b/src/hooks/useWalletConnection/useMetamask/index.tsx index 400d516e..d187ad6b 100644 --- a/src/hooks/useWalletConnection/useMetamask/index.tsx +++ b/src/hooks/useWalletConnection/useMetamask/index.tsx @@ -1,6 +1,6 @@ import { useGlobalState } from '../../../GlobalStateProvider'; import { Wallet } from '@talismn/connect-wallets'; -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { METAMASK_EXTENSION_NAME, initiateMetamaskInjectedAccount } from '../../../services/metamask'; import logo from '../../../assets/metamask-wallet.png'; diff --git a/src/hooks/useWalletConnection/useNova/index.ts b/src/hooks/useWalletConnection/useNova/index.ts index 61a1c8f2..27769d50 100644 --- a/src/hooks/useWalletConnection/useNova/index.ts +++ b/src/hooks/useWalletConnection/useNova/index.ts @@ -1,6 +1,6 @@ import { web3Accounts, web3Enable, web3FromAddress } from '@polkadot/extension-dapp'; import { Wallet, WalletAccount } from '@talismn/connect-wallets'; -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import logo from '../../../assets/nova-wallet.png'; declare global { diff --git a/src/main.tsx b/src/main.tsx index 673104e4..93db534a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,5 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import { render } from 'preact'; import { Theme } from 'react-daisyui'; import { BrowserRouter } from 'react-router-dom'; import { App } from './app'; @@ -11,35 +10,44 @@ import { tenantTheme, ThemeName } from './models/Theme'; import { NodeInfoProvider } from './NodeInfoProvider'; import SharedProvider from './SharedProvider'; +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + const queryClient = new QueryClient(); +//@todo: remove /* const localStoragePersister = createSyncStoragePersister({ storage: window.localStorage }); persistQueryClient({ queryClient, persister: localStoragePersister, }); */ -render( - - - - - {(globalState) => { - const { tenantRPC, getThemeName = emptyFn } = globalState as GlobalState; - return ( - - - - - - - - ); - }} - - - - - , - document.getElementById('app') as HTMLElement, +createRoot(document.getElementById('root')!).render( + + + + + + {(globalState) => { + const { tenantRPC, getThemeName = emptyFn } = globalState as GlobalState; + return ( + + + + + + + + ); + }} + + + + + + , + , ); diff --git a/src/pages/dashboard/Portfolio.tsx b/src/pages/dashboard/Portfolio.tsx index 49066b51..3d22c46c 100644 --- a/src/pages/dashboard/Portfolio.tsx +++ b/src/pages/dashboard/Portfolio.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'preact/compat'; +import { useMemo } from 'react'; import { useGlobalState } from '../../GlobalStateProvider'; import Table, { SortingOrder } from '../../components/Table'; import useBalances from '../../hooks/useBalances'; diff --git a/src/pages/gas/GasForm.tsx b/src/pages/gas/GasForm.tsx index 700139b7..08b534df 100644 --- a/src/pages/gas/GasForm.tsx +++ b/src/pages/gas/GasForm.tsx @@ -1,5 +1,5 @@ -import { StateUpdater, Dispatch, useMemo } from 'preact/hooks'; -import { ChangeEvent, FC } from 'preact/compat'; +import { Dispatch, useMemo } from 'react'; +import { ChangeEvent, FC } from 'react'; import { useForm } from 'react-hook-form'; import { OrmlTraitsAssetRegistryAssetMetadata } from '../../hooks/useBuyout/types'; @@ -20,7 +20,7 @@ export type IssueFormValues = { interface GasFormProps { onSubmit: (data: IssueFormValues) => void; currencies: OrmlTraitsAssetRegistryAssetMetadata[]; - setSelectedFromToken: Dispatch>; + setSelectedFromToken: Dispatch; selectedFromToken?: BlockchainAsset; nativeCurrency: OrmlTraitsAssetRegistryAssetMetadata; calcMin: () => { amount: string; native: number }; diff --git a/src/pages/gas/GasSuccessDialog.tsx b/src/pages/gas/GasSuccessDialog.tsx index 4264f123..3dd41b99 100644 --- a/src/pages/gas/GasSuccessDialog.tsx +++ b/src/pages/gas/GasSuccessDialog.tsx @@ -1,4 +1,4 @@ -import { FC } from 'preact/compat'; +import { FC } from 'react'; import { Button } from 'react-daisyui'; import SuccessDialogIcon from '../../assets/dialog-status-success'; import { Dialog } from '../../components/Dialog'; diff --git a/src/pages/gas/index.tsx b/src/pages/gas/index.tsx index 76ef05c1..f36eeffa 100644 --- a/src/pages/gas/index.tsx +++ b/src/pages/gas/index.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'preact/hooks'; +import { useState, useEffect } from 'react'; import { Card } from 'react-daisyui'; import { usePriceFetcher } from '../../hooks/usePriceFetcher'; diff --git a/src/pages/nabla/swap/index.tsx b/src/pages/nabla/swap/index.tsx index 483b2a26..ff6f314b 100644 --- a/src/pages/nabla/swap/index.tsx +++ b/src/pages/nabla/swap/index.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'preact/compat'; +import { useCallback } from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; import Swap from '../../../components/nabla/Swap'; diff --git a/src/pages/spacewalk/bridge/FeeBox.tsx b/src/pages/spacewalk/bridge/FeeBox.tsx index 4b21e19b..f102254d 100644 --- a/src/pages/spacewalk/bridge/FeeBox.tsx +++ b/src/pages/spacewalk/bridge/FeeBox.tsx @@ -1,6 +1,6 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types'; import Big from 'big.js'; -import { useCallback, useEffect, useMemo, useState } from 'preact/compat'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { Asset } from '@stellar/stellar-sdk'; import { useFeePallet } from '../../../hooks/spacewalk/useFeePallet'; import { ChainDecimals, nativeStellarToDecimal, nativeToDecimal } from '../../../shared/parseNumbers/metric'; diff --git a/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx b/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx index e6b0b04f..ca0b1e63 100644 --- a/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx +++ b/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { Button, Divider } from 'react-daisyui'; import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey'; diff --git a/src/pages/spacewalk/bridge/Issue/Disclaimer.tsx b/src/pages/spacewalk/bridge/Issue/Disclaimer.tsx index 23be3195..022ddeba 100644 --- a/src/pages/spacewalk/bridge/Issue/Disclaimer.tsx +++ b/src/pages/spacewalk/bridge/Issue/Disclaimer.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'preact/compat'; +import { useCallback, useState } from 'react'; import BellIcon from '../../../../assets/bell'; import { TenantName } from '../../../../models/Tenant'; import { PENDULUM_SUPPORT_CHAT_URL } from '../../../../shared/constants'; diff --git a/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx b/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx index 03a895a4..8a6dd8e7 100644 --- a/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx +++ b/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx @@ -1,6 +1,6 @@ import { Button, Checkbox } from 'react-daisyui'; -import { useMemo } from 'preact/hooks'; -import { ChangeEvent } from 'preact/compat'; +import { useMemo } from 'react'; +import { ChangeEvent } from 'react'; import VaultSelector from '../../../../components/Selector/VaultSelector'; import useBridgeSettings from '../../../../hooks/spacewalk/useBridgeSettings'; import { Dialog } from '../../../../components/Dialog'; diff --git a/src/pages/spacewalk/bridge/Issue/StellarURIScheme.tsx b/src/pages/spacewalk/bridge/Issue/StellarURIScheme.tsx index dc7f3392..a58f52a8 100644 --- a/src/pages/spacewalk/bridge/Issue/StellarURIScheme.tsx +++ b/src/pages/spacewalk/bridge/Issue/StellarURIScheme.tsx @@ -1,4 +1,4 @@ -import { FC } from 'preact/compat'; +import { FC } from 'react'; import { QRCodeSVG } from 'qrcode.react'; export const StellarUriScheme: FC<{ transactionURIScheme: string | null }> = ({ transactionURIScheme }) => { diff --git a/src/pages/spacewalk/bridge/Issue/index.tsx b/src/pages/spacewalk/bridge/Issue/index.tsx index 1a127c39..33410320 100644 --- a/src/pages/spacewalk/bridge/Issue/index.tsx +++ b/src/pages/spacewalk/bridge/Issue/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useCallback, useMemo, useState } from 'preact/compat'; +import { useEffect, useCallback, useMemo, useState } from 'react'; import { yupResolver } from '@hookform/resolvers/yup'; import { Signer } from '@polkadot/types/types'; import Big from 'big.js'; diff --git a/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx b/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx index f3065863..05c83a18 100644 --- a/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx +++ b/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx @@ -1,6 +1,6 @@ import { Button } from 'react-daisyui'; import { useNavigate } from 'react-router-dom'; -import { useMemo } from 'preact/hooks'; +import { useMemo } from 'react'; import { useGlobalState } from '../../../../GlobalStateProvider'; import { PublicKey } from '../../../../components/PublicKey'; import { convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk'; diff --git a/src/pages/spacewalk/bridge/Redeem/index.tsx b/src/pages/spacewalk/bridge/Redeem/index.tsx index 4c8a08fa..c1632c6b 100644 --- a/src/pages/spacewalk/bridge/Redeem/index.tsx +++ b/src/pages/spacewalk/bridge/Redeem/index.tsx @@ -1,8 +1,8 @@ import Big from 'big.js'; import { yupResolver } from '@hookform/resolvers/yup'; import { isEmpty } from 'lodash'; -import { useEffect } from 'preact/compat'; -import { useCallback, useMemo, useState } from 'preact/hooks'; +import { useEffect } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { Button } from 'react-daisyui'; import { useForm } from 'react-hook-form'; import { Signer } from '@polkadot/types/types'; diff --git a/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx b/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx index 9cd9bd3a..b4e48f61 100644 --- a/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx +++ b/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx @@ -1,6 +1,5 @@ import { hexToU8a } from '@polkadot/util'; -import { useCallback, useEffect, useMemo, useState } from 'preact/compat'; -import { JSXInternal } from 'preact/src/jsx'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { Divider } from 'react-daisyui'; import { useGlobalState } from '../../../../GlobalStateProvider'; @@ -19,10 +18,10 @@ export interface BaseTransferDialogProps { showMemo?: boolean; transfer: TTransfer; title?: string; - content: JSXInternal.Element; - footer?: JSXInternal.Element; - statusIcon: JSXInternal.Element; - actions?: (onConfirm: (() => void) | undefined) => JSXInternal.Element; + content: JSX.Element; + footer?: JSX.Element; + statusIcon: JSX.Element; + actions?: (onConfirm: (() => void) | undefined) => JSX.Element; onClose?: () => void; onConfirm?: () => void; } @@ -74,25 +73,25 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
{statusIcon}
-

{title}

+

{title}

{content} - +
-
+
Bridge fee
{nativeToDecimal(transfer.original.fee.toNumber()).toString()}
-
+
Destination Address (Stellar)
diff --git a/src/pages/spacewalk/bridge/index.tsx b/src/pages/spacewalk/bridge/index.tsx index 2950a248..eff88cd2 100644 --- a/src/pages/spacewalk/bridge/index.tsx +++ b/src/pages/spacewalk/bridge/index.tsx @@ -1,5 +1,5 @@ -import { createContext } from 'preact/compat'; -import { StateUpdater, Dispatch, useMemo, useState, useContext } from 'preact/hooks'; +import { createContext } from 'react'; +import { Dispatch, useMemo, useState, useContext } from 'react'; import { Button, Card, Tabs } from 'react-daisyui'; import { Asset } from '@stellar/stellar-sdk'; import AmplitudeLogo from '../../../assets/AmplitudeLogo'; @@ -27,14 +27,14 @@ export enum BridgeDirection { interface BridgeContextValue { selectedAsset?: Asset; - setSelectedAsset: Dispatch>; + setSelectedAsset: Dispatch; selectedVault?: ExtendedRegistryVault; - setSelectedVault: Dispatch>; + setSelectedVault: Dispatch; manualVaultSelection: boolean; - setManualVaultSelection: Dispatch>; + setManualVaultSelection: Dispatch; bridgeDirection: BridgeDirection; extendedVaults: ExtendedRegistryVault[]; - setExtendedVaults: Dispatch>; + setExtendedVaults: Dispatch; } const BridgeContext = createContext({ diff --git a/src/pages/spacewalk/transactions/TransactionDialog.tsx b/src/pages/spacewalk/transactions/TransactionDialog.tsx index 3a756a3d..afd081e2 100644 --- a/src/pages/spacewalk/transactions/TransactionDialog.tsx +++ b/src/pages/spacewalk/transactions/TransactionDialog.tsx @@ -1,7 +1,6 @@ import { hexToU8a } from '@polkadot/util'; import { DateTime } from 'luxon'; -import { useCallback, useEffect, useMemo, useState } from 'preact/compat'; -import { JSXInternal } from 'preact/src/jsx'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { Divider, Link, Collapse } from 'react-daisyui'; import { useGlobalState } from '../../../GlobalStateProvider'; import CancelledDialogIcon from '../../../assets/dialog-status-cancelled'; @@ -31,10 +30,10 @@ interface BaseTransactionDialogProps { showMemo?: boolean; transfer: TTransfer; title?: string; - content: JSXInternal.Element; - footer?: JSXInternal.Element; - statusIcon: JSXInternal.Element; - actions?: (onConfirm: (() => void) | undefined) => JSXInternal.Element; + content: JSX.Element; + footer?: JSX.Element; + statusIcon: JSX.Element; + actions?: (onConfirm: (() => void) | undefined) => JSX.Element; onClose?: () => void; onConfirm?: () => void; } @@ -86,9 +85,9 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
{statusIcon}
-

{title}

+

{title}

{content} - + Destination Address (Stellar)
@@ -177,13 +176,13 @@ export function CompletedTransactionDialog(props: TransactionDialogProps) { } const content = ( <> -
{`You have received ${transfer.amount} ${stellarAsset}`}
-

{walletAccount && ( -
+

Deposited:

@@ -104,7 +104,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
-
+
You will withdraw
{walletAccount && ( -
+
Your current balance
@@ -135,7 +135,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
-
+
Total backstop pool LP tokens
@@ -164,7 +164,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps): ) : ( )} -
diff --git a/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx b/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx index c984e277..96eb8129 100644 --- a/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx +++ b/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx @@ -6,7 +6,7 @@ import Big from 'big.js'; import { PoolProgress } from '../..'; import { calcSharePercentage } from '../../../../../helpers/calc'; import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric'; -import Validation from '../../../../Form/Validation'; +import { Validation } from '../../../../Form/Validation'; import { NumberLoader } from '../../../../Loader'; import { SwapPoolColumn } from '../columns'; import { useAddLiquidity } from './useAddLiquidity'; diff --git a/src/components/nabla/Pools/Swap/Redeem/index.tsx b/src/components/nabla/Pools/Swap/Redeem/index.tsx index 66fd104d..ca2988c2 100644 --- a/src/components/nabla/Pools/Swap/Redeem/index.tsx +++ b/src/components/nabla/Pools/Swap/Redeem/index.tsx @@ -3,7 +3,7 @@ import { Button } from 'react-daisyui'; import { PoolProgress } from '../..'; import { calcSharePercentage } from '../../../../../helpers/calc'; import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric'; -import Validation from '../../../../Form/Validation'; +import { Validation } from '../../../../Form/Validation'; import { NumberLoader } from '../../../../Loader'; import { SwapPoolColumn } from '../columns'; import { useRedeem } from './useRedeem'; diff --git a/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx b/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx index cf91528d..40522957 100644 --- a/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx +++ b/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx @@ -4,7 +4,7 @@ import { Button } from 'react-daisyui'; import { PoolProgress } from '../..'; import { calcSharePercentage } from '../../../../../helpers/calc'; import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric'; -import Validation from '../../../../Form/Validation'; +import { Validation } from '../../../../Form/Validation'; import { NumberLoader } from '../../../../Loader'; import { SwapPoolColumn } from '../columns'; import { useSwapPoolWithdrawLiquidity } from './useWithdrawLiquidity'; diff --git a/src/components/nabla/Swap/index.tsx b/src/components/nabla/Swap/index.tsx index a15fb935..b9473da8 100644 --- a/src/components/nabla/Swap/index.tsx +++ b/src/components/nabla/Swap/index.tsx @@ -6,7 +6,7 @@ import { From } from './From'; import { To } from './To'; import { useSwapComponent, UseSwapComponentProps } from './useSwapComponent'; import { PoolSelectorModal } from '../common/PoolSelectorModal'; -import Validation from '../../Form/Validation'; +import { Validation } from '../../Form/Validation'; import { TransactionSettingsDropdown } from '../common/TransactionSettingsDropdown'; import { SwapProgress } from '../common/SwapProgress'; import { NablaFootnote } from '../common/NablaFootnote'; From 576b913641943b70119d1245a95eb0ecbb3f8225 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Tue, 29 Oct 2024 15:38:25 +0100 Subject: [PATCH 13/14] simplify code structure --- src/components/LabelledInputField/index.tsx | 25 ++++++------------- src/components/SearchInput/index.tsx | 3 +-- .../Pools/Backstop/BackstopPoolModals.tsx | 9 +++---- .../nabla/Pools/Swap/SwapPoolModals.tsx | 11 +++++--- .../nabla/common/TransactionProgress.tsx | 12 ++++----- src/pages/spacewalk/bridge/Redeem/index.tsx | 5 ++-- src/services/modal/index.tsx | 2 +- 7 files changed, 27 insertions(+), 40 deletions(-) diff --git a/src/components/LabelledInputField/index.tsx b/src/components/LabelledInputField/index.tsx index 4a9326a8..496d413c 100644 --- a/src/components/LabelledInputField/index.tsx +++ b/src/components/LabelledInputField/index.tsx @@ -17,7 +17,7 @@ interface Props { register?: UseFormRegisterReturn; } -const LabelledInputField = forwardRef((props: Props & InputProps) => { +export const LabelledInputField = forwardRef((props: Props & InputProps) => { const { register, color, error, label, secondaryLabel, onChange, extraBtnAction, extraBtnText, style, ...rest } = props; @@ -25,8 +25,8 @@ const LabelledInputField = forwardRef((props: Props & InputProps) => { return ( <> -
-
+
+
- + ); }); - -export default LabelledInputField; diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx index 5dd9c0ba..a679eb51 100644 --- a/src/components/SearchInput/index.tsx +++ b/src/components/SearchInput/index.tsx @@ -2,12 +2,11 @@ import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'; import { Dispatch } from 'react'; interface SearchInputProps { - //@todo: check set: Dispatch; } export const SearchInput = ({ set, ...p }: SearchInputProps) => ( -