Add vertical scroller for tx actions area (without 'Scroll for more' text note yet)

24a85f07 · POA · 9916c31f · 24a85f07 · 24a85f07 · 24a85f07
Commit 24a85f07 authored Dec 02, 2022 by POA
7 changed files
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -21,6 +21,7 @@ class MyDocument extends Document {
          <link rel="icon" sizes="16x16" type="image/png"href="/static/favicon-16x16.png"/>
          <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
          <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5"/>
+          <link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.min.css" />
        </Head>
        <body>
          <ColorModeScript initialColorMode={ theme.config.initialColorMode }/>

--- a/public/static/css/jquery.mCustomScrollbar.min.css
+++ b/public/static/css/jquery.mCustomScrollbar.min.css
--- a/public/static/js/jquery.mCustomScrollbar.concat.min.js
+++ b/public/static/js/jquery.mCustomScrollbar.concat.min.js
--- a/public/static/js/jquery.min.js
+++ b/public/static/js/jquery.min.js
--- a/ui/pages/Transaction.tsx
+++ b/ui/pages/Transaction.tsx
 import { Flex, Link, Icon, Tag } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
+import Script from 'next/script'
 import React from 'react';

 import type { Transaction } from 'types/api/transaction';
@@ -85,6 +86,7 @@ const TransactionPageContent = () => {
      </Flex>
      <RoutedTabs tabs={ TABS }/>
      <AdBanner mt={ 6 } justifyContent={{ base: 'center', lg: 'start' }}/>
+      <Script src="/static/js/jquery.min.js" strategy="beforeInteractive" />
    </Page>
  );
 };

--- a/ui/tx/details/TxDetailsAction.tsx
+++ b/ui/tx/details/TxDetailsAction.tsx
@@ -11,7 +11,7 @@ import BigNumber from 'bignumber.js';

 const uniswapIconUrl = 'https://raw.githubusercontent.com/trustwallet/assets/master/dapps/app.uniswap.org.png';

-const TxDetailsAction = ({ protocol, type, data }) => {
+const TxDetailsAction = ({ protocol, type, data, isLast }) => {
  if (protocol === 'uniswap_v3') {
    if (['mint', 'burn', 'collect', 'swap'].includes(type)) {
      const amount0 = BigNumber(data.amount0).toFormat();
@@ -25,7 +25,7 @@ const TxDetailsAction = ({ protocol, type, data }) => {
      }

      return (
-        <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }>
+        <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } marginBottom={ isLast ? 5 : 0 }>
          <Text color="gray.500" as="span">
            { actionName[type][0] }
          </Text>

--- a/ui/tx/details/TxDetailsActions.tsx
+++ b/ui/tx/details/TxDetailsActions.tsx
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';

 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
@@ -12,15 +12,17 @@ const TxDetailsActions = ({ actions }) => {
      hint="Highlighted events of the transaction"
      position="relative"
    >
-      <Flex
-        flexDirection="column"
-        alignItems="flex-start"
-        rowGap={ 5 }
-        w="100%"
-        fontWeight={ 500 }
-      >
-        { actions.map((action, index) => <TxDetailsAction key={ index } { ...action }/>) }
-      </Flex>
+      <Box className="mCustomScrollbar" data-mcs-theme="minimal-dark" maxH={ 40 }>
+        <Flex
+          flexDirection="column"
+          alignItems="flex-start"
+          rowGap={ 5 }
+          w="100%"
+          fontWeight={ 500 }
+        >
+          { actions.map((action, index) => <TxDetailsAction key={ index } { ...action } isLast={ index === actions.length-1 }/>) }
+        </Flex>
+      </Box>
    </DetailsInfoItem>
  );
 };