Fix TypeScript errors and update dependencies

- Fix ReactPortal return types in PopupWindow, Tooltip, Modal
- Fix RefObject type compatibility for React 18
- Update extension-dapp dependency to 0.62.19
- Update vanitygen dependency to 1.0.1
- Add eslint-scope resolution for webpack
- Remove unused @ts-expect-error directives
- Update mobile test snapshots
This commit is contained in:
2026-01-17 23:13:47 +03:00
parent 667509c5dc
commit a6f51d0822
17 changed files with 44 additions and 95 deletions
@@ -942,18 +942,28 @@ exports[`DashboardScreen should match snapshot 1`] = `
]
}
>
<Text
<View
style={
{
"color": "#000000",
"fontSize": 16,
"fontWeight": "800",
"letterSpacing": 0.5,
"alignItems": "center",
"flexDirection": "row",
"gap": 10,
}
}
>
FINANCE 💰
</Text>
<Text
style={
{
"color": "#000000",
"fontSize": 16,
"fontWeight": "800",
"letterSpacing": 0.5,
}
}
>
FINANCE 💰
</Text>
</View>
<View
accessibilityState={
{
@@ -25,75 +25,12 @@ exports[`SwapScreen should match snapshot 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
"marginBottom": 20,
"justifyContent": "flex-end",
"marginBottom": 12,
}
}
>
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"alignItems": "center",
"backgroundColor": "#F5F5F5",
"borderRadius": 20,
"height": 40,
"justifyContent": "center",
"opacity": 1,
"width": 40,
}
}
>
<Text
style={
{
"color": "#333",
"fontSize": 24,
}
}
>
</Text>
</View>
<Text
style={
{
"color": "#333",
"fontSize": 20,
"fontWeight": "bold",
}
}
>
Swap Tokens
</Text>
<View
accessibilityState={
{
+4 -1
View File
@@ -67,6 +67,7 @@
"test:skipped": "echo 'tests skipped'"
},
"dependencies": {
"@pezkuwi/extension-dapp": "0.62.19",
"@pezkuwi/ui-shared": "^3.17.2"
},
"devDependencies": {
@@ -99,6 +100,7 @@
"@pezkuwi/api-base": "^16.5.6",
"@pezkuwi/api-contract": "^16.5.6",
"@pezkuwi/api-derive": "^16.5.6",
"@pezkuwi/extension-dapp": "0.62.19",
"@pezkuwi/extension-inject": "^0.62.18",
"@pezkuwi/hw-ledger": "^14.0.7",
"@pezkuwi/keyring": "^14.0.7",
@@ -125,6 +127,7 @@
"@pezkuwi/x-textencoder": "^14.0.7",
"@pezkuwi/x-ws": "^14.0.7",
"@zondax/ledger-substrate": "1.1.1",
"typescript": "^5.5.4"
"typescript": "^5.5.4",
"webpack/eslint-scope": "5.1.1"
}
}
@@ -21,7 +21,7 @@
"@pezkuwi/react-components": "^0.168.2-0-x",
"@pezkuwi/react-hooks": "^0.168.2-0-x",
"@pezkuwi/util": "^14.0.5",
"@pezkuwi/vanitygen": "^1.0.0",
"@pezkuwi/vanitygen": "^1.0.1",
"detect-browser": "^5.3.0",
"file-saver": "^2.0.5"
},
@@ -259,7 +259,6 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
/>
)}
<div>{t('Copy the following string and sign it with the Ethereum account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below:')}</div>
{/* @ts-expect-error React 18 type compatibility */}
<CopyToClipboard
onCopy={onCopy}
text={payload}
@@ -35,7 +35,7 @@ function TrackDropdown ({ className, exclude, include, onChange, palletReferenda
);
}
export default React.memo(styled(TrackDropdown)`
const StyledTrackDropdown: React.FC<Props> = styled(TrackDropdown)`
.trackOption {
.faded {
font-size: var(--font-size-small);
@@ -44,4 +44,6 @@ export default React.memo(styled(TrackDropdown)`
opacity: 0.6;
}
}
`);
`;
export default React.memo(StyledTrackDropdown);
@@ -21,9 +21,9 @@
},
"dependencies": {
"@pezkuwi/api": "^16.5.6",
"@pezkuwi/extension-compat-metamask": "^0.62.14",
"@pezkuwi/extension-dapp": "^0.62.14",
"@pezkuwi/extension-inject": "^0.62.14",
"@pezkuwi/extension-compat-metamask": "^0.62.19",
"@pezkuwi/extension-dapp": "^0.62.19",
"@pezkuwi/extension-inject": "^0.62.19",
"@pezkuwi/rpc-provider": "^16.5.6",
"fflate": "^0.8.1",
"rxjs": "^7.8.1"
@@ -65,8 +65,7 @@ function AddressSection ({ accountIndex, defaultValue, editingName, flags, onCha
</div>
<div className='ui--AddressSection__CopyColumn'>
<div className='ui--AddressMenu-copyaddr'>
{/* @ts-expect-error React 18 type compatibility */}
<CopyToClipboard
<CopyToClipboard
text={value}
>
<span>
@@ -16,7 +16,7 @@ interface Props {
address: string;
isBeingEdited: (arg: boolean) => void;
onUpdateName?: (() => void) | null;
sidebarRef: React.RefObject<HTMLDivElement>;
sidebarRef: React.RefObject<HTMLDivElement | null>;
}
function SidebarEditableSection ({ accountIndex, address, isBeingEdited, onUpdateName, sidebarRef }: Props): React.ReactElement<Props> {
@@ -46,7 +46,6 @@ function CopyButton ({ children, className = '', icon = 'copy', label, type, val
return (
<StyledDiv className={`${className} ui--CopyButton`}>
{/* @ts-expect-error React 18 type compatibility */}
<CopyToClipboard
onCopy={_onCopy}
text={value as string}
@@ -24,7 +24,7 @@ interface Props {
testId?: string;
}
function ModalBase ({ children, className = '', header, onClose, size = 'medium', testId = 'modal' }: Props): React.ReactElement<Props> {
function ModalBase ({ children, className = '', header, onClose, size = 'medium', testId = 'modal' }: Props): React.ReactPortal {
const { themeClassName } = useTheme();
const listenKeyboard = useCallback((event: KeyboardEvent) => {
@@ -10,14 +10,14 @@ import { usePopupWindow } from '@pezkuwi/react-hooks/usePopupWindow';
import { styled } from '../styled.js';
function PopupWindow ({ children, className = '', position, triggerRef, windowRef }: Props): React.ReactElement<Props> {
function PopupWindow ({ children, className = '', position, triggerRef, windowRef }: Props): React.ReactPortal {
const { pointerStyle, renderCoords: { x, y } } = usePopupWindow(windowRef, triggerRef, position);
return createPortal(
<StyledDiv
className={`${className} ${pointerStyle}Pointer ${position}Position`}
data-testid='popup-window'
ref={windowRef}
ref={windowRef as React.RefObject<HTMLDivElement>}
style={
(x && y && {
transform: `translate3d(${x}px, ${y}px, 0)`,
@@ -17,8 +17,8 @@ export type VerticalPosition = 'top' | 'bottom'
export interface PopupWindowProps {
className?: string;
children?: React.ReactNode;
windowRef: React.RefObject<HTMLDivElement>;
triggerRef: React.RefObject<HTMLDivElement>;
windowRef: React.RefObject<HTMLDivElement | null>;
triggerRef: React.RefObject<HTMLDivElement | null>;
position: HorizontalPosition;
}
@@ -14,7 +14,7 @@ interface Props {
offset?: number | string;
onClose?: () => void;
position: 'left' | 'right';
sidebarRef: React.RefObject<HTMLDivElement>;
sidebarRef: React.RefObject<HTMLDivElement | null>;
}
function Sidebar ({ buttons, children, className = '', dataTestId = '', onClose, position, sidebarRef }: Props): React.ReactElement<Props> {
@@ -22,7 +22,7 @@ function Sidebar ({ buttons, children, className = '', dataTestId = '', onClose,
<StyledDiv
className={`${className} ui--Sidebar ${position}Position`}
data-testid={dataTestId}
ref={sidebarRef}
ref={sidebarRef as React.RefObject<HTMLDivElement>}
>
<Button.Group className='ui--Sidebar-buttons'>
{buttons}
@@ -22,7 +22,7 @@ interface Props {
trigger: string;
}
function Tooltip ({ children, className = '', isClickable = false, place, text, trigger }: Props): React.ReactElement<Props> | null {
function Tooltip ({ children, className = '', isClickable = false, place, text, trigger }: Props): React.ReactPortal {
const [tooltipContainer] = useState(
typeof document === 'undefined'
? {} as HTMLElement // This hack is required for server side rendering
@@ -7,14 +7,14 @@ import { useCallback, useEffect } from 'react';
import { createNamedHook } from './createNamedHook.js';
function isRefClicked (refs: React.RefObject<HTMLDivElement>[], e: MouseEvent): boolean {
function isRefClicked (refs: React.RefObject<HTMLDivElement | null>[], e: MouseEvent): boolean {
return refs.some((r) =>
r.current &&
r.current.contains(e.target as HTMLElement)
);
}
function useOutsideClickImpl (refs: React.RefObject<HTMLDivElement>[], callback: () => void): void {
function useOutsideClickImpl (refs: React.RefObject<HTMLDivElement | null>[], callback: () => void): void {
const handleClick = useCallback(
(e: MouseEvent): void => {
if (refs.length && !isRefClicked(refs, e)) {
@@ -25,7 +25,7 @@ interface Result {
const COORD_0: Coord = { x: 0, y: 0 };
function usePopupWindowImpl (windowRef: React.RefObject<HTMLDivElement>, triggerRef: React.RefObject<HTMLDivElement>, position: HorizontalPosition): Result {
function usePopupWindowImpl (windowRef: React.RefObject<HTMLDivElement | null>, triggerRef: React.RefObject<HTMLDivElement | null>, position: HorizontalPosition): Result {
const [renderCoords, setRenderCoords] = useState<Coord>(COORD_0);
const [pointerStyle, setPointerStyle] = useState<VerticalPosition>('top');
const windowCoords = useElementPosition(windowRef);