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
node_modules_linux
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 {
<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" />
<link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.min.css"/>
</Head>
<body>
<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 { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import Script from 'next/script'
import Script from 'next/script';
import React from 'react';
import type { Transaction } from 'types/api/transaction';
......@@ -86,7 +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" />
<Script src="/static/js/jquery.min.js" strategy="beforeInteractive"/>
</Page>
);
};
......
ui/tx/TxDetails.tsx
View file @ 1506dac0
......@@ -24,8 +24,8 @@ import RawInputData from 'ui/shared/RawInputData';
import TextSeparator from 'ui/shared/TextSeparator';
import TxStatus from 'ui/shared/TxStatus';
import Utilization from 'ui/shared/Utilization/Utilization';
import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
import TxDetailsActions from 'ui/tx/details/TxDetailsActions';
import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
import TxRevertReason from 'ui/tx/details/TxRevertReason';
import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
......@@ -128,9 +128,9 @@ const TxDetails = () => {
<Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
</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 && (<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 }}/>) }
<DetailsInfoItem
title="From"
......
ui/tx/details/TxDetailsAction.tsx
View file @ 1506dac0
import { Flex, Image, Link, Text } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
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 link from 'lib/link/link';
import AddressLink from 'ui/shared/address/AddressLink';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
import StringShorten from 'ui/shared/StringShorten';
import BigNumber from 'bignumber.js';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
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 (['mint', 'burn', 'collect', 'swap'].includes(type)) {
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']
}
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 }>
<Flex flexWrap="wrap" columnGap={ 1 } rowGap={ 2 } className={ isLast ? 'lastItem' : '' } marginBottom={ isLast ? 5 : 0 }>
<Text color="gray.500" as="span">
{ actionName[type][0] }
</Text>
......@@ -49,7 +52,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
</Text>
<Flex columnGap={ 1 }>
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" "/>
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" " alt=""/>
<Text color="gray.500" as="span">
Uniswap V3
</Text>
......@@ -59,12 +62,12 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
} else if (type === 'mint_nft') {
const tokenUrl = link('token_index', { hash: data.address });
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 columnGap={ 1 }>
<Text as="span">Mint of</Text>
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" "/>
<Link href={ tokenUrl } target={ '_blank' } overflow="hidden" whiteSpace="nowrap">
<Image src={ uniswapIconUrl } boxSize={ 5 } fallback=" " alt=""/>
<Link href={ tokenUrl } target="_blank" overflow="hidden" whiteSpace="nowrap">
<StringShorten title={ data.name } maxLength="12"/>
{ space }
(<StringShorten title={ data.symbol } maxLength="6"/>)
......@@ -80,7 +83,7 @@ const TxDetailsAction = ({ protocol, type, data, isLast }) => {
data.ids.map((id) => {
const url = link('token_instance_item', { hash: data.address, id });
return (
<Flex>
<Flex key={ id }>
<Flex columnGap={ 1 }>
<Text>1 of</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 Script from 'next/script'
import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
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 (
<DetailsInfoItem
title="Transaction Action"
......@@ -24,25 +41,11 @@ const TxDetailsActions = ({ actions }) => {
w="100%"
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>
</Box>
<Script src="/static/js/jquery.mCustomScrollbar.concat.min.js" strategy="afterInteractive" onLoad={() => {
$(".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"});
}} />
{ /* eslint-disable-next-line react/jsx-no-bind */ }
<Script src="/static/js/jquery.mCustomScrollbar.concat.min.js" strategy="afterInteractive" onLoad={ onScrollbarLoad }/>
</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