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

mobile/src/screens/__tests__/__snapshots__/DashboardScreen.test.tsx.snap

@@ -942,18 +942,28 @@ exports[`DashboardScreen should match snapshot 1`] = `
             ]
           }
         >
-          <Text
+          <View
             style={
               {
-                "color": "#000000",
+                "alignItems": "center",
-                "fontSize": 16,
+                "flexDirection": "row",
-                "fontWeight": "800",
+                "gap": 10,
-                "letterSpacing": 0.5,
               }
             }
           >
-            FINANCE 💰
+            <Text
-          </Text>
+              style={
+                {
+                  "color": "#000000",
+                  "fontSize": 16,
+                  "fontWeight": "800",
+                  "letterSpacing": 0.5,
+                }
+              }
+            >
+              FINANCE 💰
+            </Text>
+          </View>
           <View
             accessibilityState={
               {

mobile/src/screens/__tests__/__snapshots__/SwapScreen.test.tsx.snap

@@ -25,75 +25,12 @@ exports[`SwapScreen should match snapshot 1`] = `
       <View
         style={
           {
-            "alignItems": "center",
             "flexDirection": "row",
-            "justifyContent": "space-between",
+            "justifyContent": "flex-end",
-            "marginBottom": 20,
+            "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={
             {

pezkuwi-sdk-ui/package.json

@@ -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"
   }
 }

pezkuwi-sdk-ui/packages/page-accounts/package.json

@@ -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"
   },

pezkuwi-sdk-ui/packages/page-claims/src/index.tsx

@@ -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}

pezkuwi-sdk-ui/packages/page-referenda/src/Referenda/Submit/TrackDropdown.tsx

@@ -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);

pezkuwi-sdk-ui/packages/react-api/package.json

@@ -21,9 +21,9 @@
   },
   "dependencies": {
     "@pezkuwi/api": "^16.5.6",
-    "@pezkuwi/extension-compat-metamask": "^0.62.14",
+    "@pezkuwi/extension-compat-metamask": "^0.62.19",
-    "@pezkuwi/extension-dapp": "^0.62.14",
+    "@pezkuwi/extension-dapp": "^0.62.19",
-    "@pezkuwi/extension-inject": "^0.62.14",
+    "@pezkuwi/extension-inject": "^0.62.19",
     "@pezkuwi/rpc-provider": "^16.5.6",
     "fflate": "^0.8.1",
     "rxjs": "^7.8.1"

pezkuwi-sdk-ui/packages/react-components/src/AccountSidebar/AddressSection.tsx

@@ -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>

pezkuwi-sdk-ui/packages/react-components/src/AccountSidebar/SidebarEditableSection.tsx

@@ -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> {

pezkuwi-sdk-ui/packages/react-components/src/CopyButton.tsx

@@ -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}

pezkuwi-sdk-ui/packages/react-components/src/Modal/index.tsx

@@ -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) => {

pezkuwi-sdk-ui/packages/react-components/src/Popup/PopupWindow.tsx

@@ -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)`,

pezkuwi-sdk-ui/packages/react-components/src/Popup/types.ts

@@ -17,8 +17,8 @@ export type VerticalPosition = 'top' | 'bottom'
 export interface PopupWindowProps {
   className?: string;
   children?: React.ReactNode;
-  windowRef: React.RefObject<HTMLDivElement>;
+  windowRef: React.RefObject<HTMLDivElement | null>;
-  triggerRef: React.RefObject<HTMLDivElement>;
+  triggerRef: React.RefObject<HTMLDivElement | null>;
   position: HorizontalPosition;
 }
 

pezkuwi-sdk-ui/packages/react-components/src/Sidebar.tsx

@@ -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}

pezkuwi-sdk-ui/packages/react-components/src/Tooltip.tsx

@@ -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

pezkuwi-sdk-ui/packages/react-hooks/src/useOutsideClick.ts

@@ -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)) {

pezkuwi-sdk-ui/packages/react-hooks/src/usePopupWindow.ts

@@ -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);