Skip to content

F
frontend
Commit 1506dac0 authored by POA's avatar POA
Browse files
Options

Fix linter errors

parent 696853b6
Show whitespace changes
Inline Side-by-side
Showing with 58 additions and 44 deletions
.eslintignore
View file @ 1506dac0
...@@ -2,3 +2,5 @@ node_modules ...@@ -2,3 +2,5 @@ node_modules
node_modules_linux node_modules_linux
playwright/envs.js playwright/envs.js
public/static/js/jquery.mCustomScrollbar.concat.min.js
public/static/js/jquery.min.js
pages/_document.tsx
View file @ 1506dac0
...@@ -21,7 +21,7 @@ class MyDocument extends Document { ...@@ -21,7 +21,7 @@ class MyDocument extends Document {
<link rel="icon" sizes="16x16" type="image/png"href="/static/favicon-16x16.png"/> <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="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="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5"/>
<link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.min.css" /> <link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.min.css"/>
</Head> </Head>
<body> <body>
<ColorModeScript initialColorMode={ theme.config.initialColorMode }/> <ColorModeScript initialColorMode={ theme.config.initialColorMode }/>
......
types/api/txAction.ts 0 → 100644
View file @ 1506dac0
export type TokenTransferPagination = {
protocol: string;
type: string;
data: object;
isLast: boolean;
}
ui/pages/Transaction.tsx
View file @ 1506dac0
import { Flex, Link, Icon, Tag } from '@chakra-ui/react'; import { Flex, Link, Icon, Tag } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Script from 'next/script' import Script from 'next/script';
import React from 'react'; import React from 'react';
import type { Transaction } from 'types/api/transaction'; import type { Transaction } from 'types/api/transaction';
...@@ -86,7 +86,7 @@ const TransactionPageContent = () => { ...@@ -86,7 +86,7 @@ const TransactionPageContent = () => {
</Flex> </Flex>
<RoutedTabs tabs={ TABS }/> <RoutedTabs tabs={ TABS }/>
<AdBanner mt={ 6 } justifyContent={{ base: 'center', lg: 'start' }}/> <AdBanner mt={ 6 } justifyContent={{ base: 'center', lg: 'start' }}/>
<Script src="/static/js/jquery.min.js" strategy="beforeInteractive" /> <Script src="/static/js/jquery.min.js" strategy="beforeInteractive"/>
</Page> </Page>
); );
}; };
......
ui/tx/TxDetails.tsx
View file @ 1506dac0
...@@ -24,8 +24,8 @@ import RawInputData from 'ui/shared/RawInputData'; ...@@ -24,8 +24,8 @@ import RawInputData from 'ui/shared/RawInputData';
import TextSeparator from 'ui/shared/TextSeparator'; import TextSeparator from 'ui/shared/TextSeparator';
import TxStatus from 'ui/shared/TxStatus'; import TxStatus from 'ui/shared/TxStatus';
import Utilization from 'ui/shared/Utilization/Utilization'; import Utilization from 'ui/shared/Utilization/Utilization';
import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
import TxDetailsActions from 'ui/tx/details/TxDetailsActions'; import TxDetailsActions from 'ui/tx/details/TxDetailsActions';
import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers'; import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
import TxRevertReason from 'ui/tx/details/TxRevertReason'; import TxRevertReason from 'ui/tx/details/TxRevertReason';
import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData'; import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
...@@ -128,9 +128,9 @@ const TxDetails = () => { ...@@ -128,9 +128,9 @@ const TxDetails = () => {
<Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text> <Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
</DetailsInfoItem> </DetailsInfoItem>
) } ) }
{ actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 3 }}><Divider /></GridItem>) } { actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 3 }}><Divider/></GridItem>) }
{ actionsExist && (<TxDetailsActions actions={ data.actions }/>) } { actionsExist && (<TxDetailsActions actions={ data.actions }/>) }
{ actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mb={{ base: 0, lg: 3 }}><Divider /></GridItem>) } { actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mb={{ base: 0, lg: 3 }}><Divider/></GridItem>) }
{ !actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>) } { !actionsExist && (<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>) }
<DetailsInfoItem <DetailsInfoItem
title="From" title="From"
......
ui/tx/details/TxDetailsAction.tsx
View file @ 1506dac0
import { Flex, Image, Link, Text } from '@chakra-ui/react'; import { Flex, Image, Link, Text } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react'; import React from 'react';
import link from 'lib/link/link'; import type { TxAction as TTxAction } from 'types/api/txAction';
import { space } from 'lib/html-entities'; import { space } from 'lib/html-entities';
import link from 'lib/link/link';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
import StringShorten from 'ui/shared/StringShorten'; import StringShorten from 'ui/shared/StringShorten';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
import BigNumber from 'bignumber.js';
const uniswapIconUrl = 'https://raw.githubusercontent.com/trustwallet/assets/master/dapps/app.uniswap.org.png'; const uniswapIconUrl = 'https://raw.githubusercontent.com/trustwallet/assets/master/dapps/app.uniswap.org.png';
const TxDetailsAction = ({ protocol, type, data, isLast }) => { type Props = TTxAction;
const TxDetailsAction = ({ protocol, type, data, isLast }: Props) => {
if (protocol === 'uniswap_v3') { if (protocol === 'uniswap_v3') {
if (['mint', 'burn', 'collect', 'swap'].includes(type)) { if ([ 'mint', 'burn', 'collect', 'swap' ].includes(type)) {
const amount0 = BigNumber(data.amount0).toFormat(); const amount0 = BigNumber(data.amount0).toFormat();
const amount1 = BigNumber(data.amount1).toFormat(); const amount1 = BigNumber(data.amount1).toFormat();
const actionName = { const actionName = {
'mint': ['Add', 'Liquidity To'], mint: [ 'Add', 'Liquidity To' ],
'burn': ['Remove', 'Liquidity From'], burn: [ 'Remove', 'Liquidity From' ],
'collect': ['Collect', 'From'], collect: [ 'Collect', 'From' ],
'swap': ['Swap', 'On'] swap: [ 'Swap', 'On' ],
} };
return ( return (
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } className={ isLast ? "lastItem" : "" } marginBottom={ isLast ? 5 : 0 }> <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } className={ isLast ? 'lastItem' : '' } marginBottom={ isLast ? 5 : 0 }>
<Text color="gray.500" as="span"> <Text color="gray.500" as="span">
{ actionName[type][0] } { actionName[type][0] }
</Text> </Text>
...@@ -49,7 +52,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => { ...@@ -49,7 +52,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
</Text> </Text>
<Flex columnGap={ 1 }> <Flex columnGap={ 1 }>
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" "/> <Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" " alt=""/>
<Text color="gray.500" as="span"> <Text color="gray.500" as="span">
Uniswap V3 Uniswap V3
</Text> </Text>
...@@ -59,12 +62,12 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => { ...@@ -59,12 +62,12 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
} else if (type === 'mint_nft') { } else if (type === 'mint_nft') {
const tokenUrl = link('token_index', { hash: data.address }); const tokenUrl = link('token_index', { hash: data.address });
return ( return (
<Flex rowGap={ 2 } flexDirection="column" className={ isLast ? "lastItem" : "" } marginBottom={ isLast ? 5 : 0 }> <Flex rowGap={ 2 } flexDirection="column" className={ isLast ? 'lastItem' : '' } marginBottom={ isLast ? 5 : 0 }>
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }> <Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 }>
<Flex columnGap={ 1 }> <Flex columnGap={ 1 }>
<Text as="span">Mint of</Text> <Text as="span">Mint of</Text>
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" "/> <Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" " alt=""/>
<Link href={ tokenUrl } target={ '_blank' } overflow="hidden" whiteSpace="nowrap"> <Link href={ tokenUrl } target="_blank" overflow="hidden" whiteSpace="nowrap">
<StringShorten title={ data.name } maxLength="12"/> <StringShorten title={ data.name } maxLength="12"/>
{ space } { space }
(<StringShorten title={ data.symbol } maxLength="6"/>) (<StringShorten title={ data.symbol } maxLength="6"/>)
...@@ -80,7 +83,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => { ...@@ -80,7 +83,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
data.ids.map((id) => { data.ids.map((id) => {
const url = link('token_instance_item', { hash: data.address, id }); const url = link('token_instance_item', { hash: data.address, id });
return ( return (
<Flex> <Flex key={ id }>
<Flex columnGap={ 1 }> <Flex columnGap={ 1 }>
<Text>1 of</Text> <Text>1 of</Text>
<Text color="gray.500">Token ID [</Text> <Text color="gray.500">Token ID [</Text>
......
ui/tx/details/TxDetailsActions.tsx
View file @ 1506dac0
import { Box, Flex, Text } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import Script from 'next/script';
import React from 'react'; import React from 'react';
import Script from 'next/script'
import DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import TxDetailsAction from './TxDetailsAction'; import TxDetailsAction from './TxDetailsAction';
const TxDetailsActions = ({ actions }) => { const TxDetailsActions = ({ actions }: array) => {
function onScrollbarLoad() {
$('.mCustomScrollbar').mCustomScrollbar({ callbacks: {
onOverflowY: () => {
$('#txActionsTitle .note').css('display', 'block');
$('.mCustomScrollbar').removeClass('mCS_no_scrollbar_y');
},
onOverflowYNone: () => {
$('#txActionsTitle .note').css('display', 'none');
$('.mCustomScrollbar').addClass('mCS_no_scrollbar_y');
},
},
theme: 'dark',
autoHideScrollbar: true,
scrollButtons: { enable: false },
scrollbarPosition: 'outside' });
}
return ( return (
<DetailsInfoItem <DetailsInfoItem
title="Transaction Action" title="Transaction Action"
...@@ -24,25 +41,11 @@ const TxDetailsActions = ({ actions }) => { ...@@ -24,25 +41,11 @@ const TxDetailsActions = ({ actions }) => {
w="100%" w="100%"
fontWeight={ 500 } fontWeight={ 500 }
> >
{ actions.map((action, index) => <TxDetailsAction key={ index } { ...action } isLast={ index === actions.length-1 }/>) } { actions.map((action, index) => <TxDetailsAction key={ index } { ...action } isLast={ index === actions.length - 1 }/>) }
</Flex> </Flex>
</Box> </Box>
<Script src="/static/js/jquery.mCustomScrollbar.concat.min.js" strategy="afterInteractive" onLoad={() => { { /* eslint-disable-next-line react/jsx-no-bind */ }
$(".mCustomScrollbar").mCustomScrollbar({callbacks:{ <Script src="/static/js/jquery.mCustomScrollbar.concat.min.js" strategy="afterInteractive" onLoad={ onScrollbarLoad }/>
onOverflowY: () => {
$("#txActionsTitle .note").css("display", "block");
$(".mCustomScrollbar").removeClass("mCS_no_scrollbar_y");
},
onOverflowYNone: () => {
$("#txActionsTitle .note").css("display", "none");
$(".mCustomScrollbar").addClass("mCS_no_scrollbar_y");
}
},
theme: "dark",
autoHideScrollbar: true,
scrollButtons: {enable: false},
scrollbarPosition: "outside"});
}} />
</DetailsInfoItem> </DetailsInfoItem>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment