Partially fix lint:tsc errors

package.json

@@ -65,6 +65,7 @@
     "@testing-library/react": "^13.4.0",
     "@types/d3": "^7.4.0",
     "@types/jest": "^29.2.0",
+    "@types/jquery": "^3.5.14",
     "@types/node": "17.0.36",
     "@types/phoenix": "^1.5.4",
     "@types/qrcode": "^1.5.0",

ui/shared/StringShorten.tsx

@@ -14,7 +14,9 @@ const StringShorten = ({ title, maxLength }: Props) => {
       </Tooltip>
     );
   } else {
-    return title;
+    return (
+      <span>{ title }</span>
+    );
   }
 };
 

ui/tx/details/TxDetailsAction.tsx

@@ -14,23 +14,26 @@ const uniswapIconUrl = 'https://raw.githubusercontent.com/trustwallet/assets/mas
 
 type Props = TTxAction;
 
+function actionName(actionType: string) {
+  switch (actionType) {
+    case 'mint': return [ 'Add', 'Liquidity To' ];
+    case 'burn': return [ 'Remove', 'Liquidity From' ];
+    case 'collect': return [ 'Collect', 'From' ];
+    case 'swap': return [ 'Swap', 'On' ];
+    default: return [ '', '' ];
+  }
+}
+
 const TxDetailsAction = ({ protocol, type, data, isLast }: Props) => {
   if (protocol === 'uniswap_v3') {
     if ([ 'mint', 'burn', 'collect', 'swap' ].includes(type)) {
       const amount0 = BigNumber(data.amount0).toFormat();
       const amount1 = BigNumber(data.amount1).toFormat();
 
-      const actionName = {
-        mint: [ 'Add', 'Liquidity To' ],
-        burn: [ 'Remove', 'Liquidity From' ],
-        collect: [ 'Collect', 'From' ],
-        swap: [ 'Swap', 'On' ],
-      };
-
       return (
         <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } className={ isLast ? 'lastItem' : '' } marginBottom={ isLast ? 5 : 0 }>
           <Text color="gray.500" as="span">
-            { actionName[type][0] }
+            { actionName(type)[0] }
           </Text>
 
           <Flex columnGap={ 1 }>
@@ -48,11 +51,11 @@ const TxDetailsAction = ({ protocol, type, data, isLast }: Props) => {
           </Flex>
 
           <Text color="gray.500" as="span">
-            { actionName[type][1] }
+            { actionName(type)[1] }
           </Text>
 
           <Flex columnGap={ 1 }>
-            <Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" " alt=""/>
+            <Image src={ uniswapIconUrl } boxSize={ 5 } fallback={ <Text as="span"/> } alt=""/>
             <Text color="gray.500" as="span">
               Uniswap V3
             </Text>
@@ -66,7 +69,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }: Props) => {
           <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }>
             <Flex columnGap={ 1 }>
               <Text as="span">Mint of</Text>
-              <Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" " alt=""/>
+              <Image src={ uniswapIconUrl } boxSize={ 5 } fallback={ <Text as="span"/> } alt=""/>
               <Link href={ tokenUrl } target="_blank" overflow="hidden" whiteSpace="nowrap">
                 <StringShorten title={ data.name } maxLength={ 12 }/>
                 { space }

ui/tx/details/TxDetailsActions.tsx

@@ -10,16 +10,23 @@ interface Props {
   actions: array;
 }
 
+declare global {
+  interface JQuery {
+    mCustomScrollbar(options: object): void;
+  }
+}
+
 const TxDetailsActions = ({ actions }: Props) => {
   function onScrollbarLoad() {
-    $('.mCustomScrollbar').mCustomScrollbar({ callbacks: {
+    const customScrollBar = $('.mCustomScrollbar');
+    customScrollBar.mCustomScrollbar({ callbacks: {
       onOverflowY: () => {
         $('#txActionsTitle .note').css('display', 'block');
-        $('.mCustomScrollbar').removeClass('mCS_no_scrollbar_y');
+        customScrollBar.removeClass('mCS_no_scrollbar_y');
       },
       onOverflowYNone: () => {
         $('#txActionsTitle .note').css('display', 'none');
-        $('.mCustomScrollbar').addClass('mCS_no_scrollbar_y');
+        customScrollBar.addClass('mCS_no_scrollbar_y');
       },
     },
     theme: 'dark',