Skip to content

Commit

Permalink
Merge pull request #330 from AelfScanProject/release/v1.9.6
Browse files Browse the repository at this point in the history 
duplicate code optimization
  • Loading branch information
@simon-bai
simon-bai authored Oct 18, 2024
2 parents 6bf3b92 + 83a6cdd commit fabf9a3
Show file tree
Hide file tree
Showing 52 changed files with 2,828 additions and 5,954 deletions.
13 changes: 12 additions & 1 deletion src/_components/AddressDetail/components/Contract/CodeViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-csharp';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/ext-searchbox';
import './code.css';
import clsx from 'clsx';

Expand All @@ -24,14 +25,24 @@ const languageDetector = [
function getLanguage(name) {
return languageDetector.filter((v) => v.test.test(name))[0].language;
}
const CodeViewer = ({ data, name, auto, path }) => {
const CodeViewer = ({ data, name, auto, path, resetSearch }) => {
const [language, setLanguage] = useState('csharp');
useEffect(() => {
const lang = getLanguage(name);
setLanguage(lang);
}, [data, name]);
const onload = (ace) => {
ace.moveCursorTo(0, 0);
ace.commands.addCommand({
name: 'showSearch',
bindKey: { win: 'Ctrl-F', mac: 'Command-F' },
exec: function (editor) {
editor.execCommand('find');
},
});
if (resetSearch) {
resetSearch(ace);
}
};
return (
<div className="code-viewer-container">
Expand Down
45 changes: 44 additions & 1 deletion src/_components/AddressDetail/components/Contract/sourceCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,19 @@ import CodeViewer from './CodeViewer';
import { handelCopy } from '@_utils/copy';
import Download from '@_components/Download';
import copy from 'copy-to-clipboard';
import { useMemo, useState } from 'react';
import { Ace } from 'ace-builds';
import { useMemo, useRef, useState } from 'react';
import clsx from 'clsx';
import { useMobileAll } from '@_hooks/useResponsive';
import FileTree from '../FileTree';
import { useParams } from 'next/navigation';
import { getAddress } from '@_utils/formatter';
import './code.css';

interface CustomEditor extends Ace.Editor {
searchBox?: any;
}

export interface IContractSourceCode {
contractName: string;
contractVersion: string;
Expand Down Expand Up @@ -81,13 +86,50 @@ export default function SourceCode({ contractInfo }: { contractInfo: IContractSo
handelCopy(window.atob(viewerConfig.content));
};

const editorRef = useRef<CustomEditor | null>(null);

const resetSearch = (editor) => {
editorRef.current = editor;
};

const onFileChange = (names) => {
const selectedFile = getDefaultFile(files, names);
if (Object.keys(selectedFile).length > 0) {
setViewerConfig({
...selectedFile,
});
}

if (editorRef.current && editorRef.current?.searchBox?.active) {
const searchKeyword = editorRef.current.searchBox.searchInput.value;

editorRef.current.setValue(window.atob(selectedFile?.content), -1);

editorRef.current.execCommand('find', {
needle: searchKeyword,
backwards: false,
wrap: true,
caseSensitive: false,
wholeWord: false,
regExp: false,
preventScroll: true,
});
setTimeout(() => {
const totalMatches = editorRef.current?.findAll(searchKeyword, {
caseSensitive: false,
wholeWord: false,
regExp: false,
preventScroll: true,
backwards: false,
wrap: true,
});

if (editorRef.current?.searchBox && totalMatches && totalMatches > 0) {
const searchBox = editorRef.current.searchBox;
searchBox.searchCounter.innerText = `1 of ${totalMatches}`;
}
}, 100);
}
};

const copyLink = () => {
Expand Down Expand Up @@ -143,6 +185,7 @@ export default function SourceCode({ contractInfo }: { contractInfo: IContractSo
data={window.atob(viewerConfig?.content || '')}
name={viewerConfig?.name}
path={viewerConfig?.path || ''}
resetSearch={resetSearch}
/>
</div>
</div>
Expand Down
254 changes: 96 additions & 158 deletions src/_components/AddressDetail/components/Tokens/List/columnConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,87 @@ import EPTooltip from '@_components/EPToolTip';
import ChainTags from '@_components/ChainTags';
import { TokenTypeEnum } from '@app/[chain]/token/[tokenSymbol]/type';

export default function getColumns(sortedInfo, chain, showELF, multi): ColumnsType<TokensListItemType> {
const renderTokenLink = (record, chain) => (
<Link
href={
record.type === TokenTypeEnum.nft
? `/nftItem?chainId=${record.chainIds ? record.chainIds[0] : chain}&itemSymbol=${record.token.symbol}`
: `/${record.chainIds ? record.chainIds[0] : chain}/token/${record.token.symbol}`
}>
<TokenTableCell showSymbol={false} token={record.token}>
<TokenImage token={record.token} />
</TokenTableCell>
</Link>
);

const renderSymbol = (text, record) => (
<span className="inline-block max-w-[181px] truncate leading-5 text-base-100">{record.token?.symbol}</span>
);

const renderQuantity = (text) => (
<EPTooltip mode="dark" title={thousandsNumber(text)}>
<span className="inline-block max-w-[124px] truncate leading-5 text-base-100">{thousandsNumber(text)}</span>
</EPTooltip>
);

const renderPrice = (text, record, showELF) =>
showELF ? <span>{numberFormatter(record.priceOfElf)}</span> : <span>${thousandsNumber(text)}</span>;

const renderValue = (text, record, showELF) =>
showELF ? <span>{numberFormatter(record.valueOfElf)}</span> : <span>${thousandsNumber(text)}</span>;

const renderChange24h = (text) => (
<span className={clsx(text >= 0 ? 'text-positive' : 'text-rise-red')}>
<IconFont className={clsx(text >= 0 && 'rotate-180', 'mr-1 text-xs')} type="down-aa9i0lma" />
{text}%
</span>
);

const getColumns = (sortedInfo, chain, showELF, multi): ColumnsType<TokensListItemType> => {
const commonColumns = [
{
dataIndex: 'token',
key: 'token',
render: (text, record) => renderTokenLink(record, chain),
},
{
title: 'Symbol',
dataIndex: 'symbol',
key: 'Symbol',
sorter: true,
sortIcon: ({ sortOrder }) => <EPSortIcon sortOrder={sortOrder} />,
sortOrder: sortedInfo?.columnKey === 'Symbol' ? sortedInfo.order : null,
render: renderSymbol,
},
{
title: 'Quantity',
dataIndex: 'quantity',
key: 'FormatAmount',
sorter: true,
sortIcon: ({ sortOrder }) => <EPSortIcon sortOrder={sortOrder} />,
sortOrder: sortedInfo?.columnKey === 'FormatAmount' ? sortedInfo.order : null,
render: renderQuantity,
},
{
title: 'Price',
dataIndex: 'priceOfUsd',
key: 'priceOfUsd',
render: (text, record) => renderPrice(text, record, showELF),
},
{
title: 'Change(24H)',
dataIndex: 'priceOfUsdPercentChange24h',
key: 'priceOfUsdPercentChange24h',
render: renderChange24h,
},
{
title: 'Value',
dataIndex: 'valueOfUsd',
key: 'valueOfUsd',
render: (text, record) => renderValue(text, record, showELF),
},
];

return multi
? [
{
Expand All @@ -21,163 +101,21 @@ export default function getColumns(sortedInfo, chain, showELF, multi): ColumnsTy
key: 'chainIds',
render: (chainIds) => <ChainTags chainIds={chainIds || []} />,
},
{
dataIndex: 'token',
width: 240,
key: 'token',
title: 'Token Name',
render: (token, record) => {
return (
<Link
href={
record.type === TokenTypeEnum.nft
? `/nftItem?chainId=${record.chainIds ? record.chainIds[0] : chain}&itemSymbol=${record.token.symbol}`
: `/${record.chainIds ? record.chainIds[0] : chain}/token/${token.symbol}`
}>
<TokenTableCell showSymbol={false} token={token}>
<TokenImage token={token} />
</TokenTableCell>
</Link>
);
},
},
{
title: 'Symbol',
width: 176,
dataIndex: 'symbol',
key: 'Symbol',
sorter: true,
sortIcon: ({ sortOrder }) => <EPSortIcon sortOrder={sortOrder} />,
sortOrder: sortedInfo?.columnKey === 'Symbol' ? sortedInfo.order : null,
render: (text, record) => (
<span className="inline-block max-w-[181px] truncate leading-5 text-base-100">{record.token?.symbol}</span>
),
},
{
title: 'Quantity',
width: 208,
dataIndex: 'quantity',
key: 'FormatAmount',
sorter: true,
sortIcon: ({ sortOrder }) => <EPSortIcon sortOrder={sortOrder} />,
sortOrder: sortedInfo?.columnKey === 'FormatAmount' ? sortedInfo.order : null,
render: (text) => (
<EPTooltip mode="dark" title={thousandsNumber(text)}>
<span className="inline-block max-w-[124px] truncate leading-5 text-base-100">
{thousandsNumber(text)}
</span>
</EPTooltip>
),
},
{
title: 'Price',
width: 240,
dataIndex: 'priceOfUsd',
key: 'priceOfUsd',
render: (text, record) => (
<>{showELF ? <span>{numberFormatter(record.priceOfElf)}</span> : <span>${thousandsNumber(text)}</span>}</>
),
},
{
title: 'Change(24H)',
width: 108,
dataIndex: 'priceOfUsdPercentChange24h',
key: 'priceOfUsdPercentChange24h',
render: (text) => (
<span className={clsx(text >= 0 ? 'text-positive' : 'text-rise-red')}>
<IconFont className={clsx(text >= 0 && 'rotate-180', 'mr-1 text-xs')} type="down-aa9i0lma" />
{text}%
</span>
),
},
{
title: 'Value',
width: 196,
dataIndex: 'valueOfUsd',
key: 'valueOfUsd',
render: (text, record) => (
<>{showELF ? <span>{numberFormatter(record.valueOfElf)}</span> : <span>${thousandsNumber(text)}</span>}</>
),
},
{ ...commonColumns[0], width: 240, title: 'Token Name' },
{ ...commonColumns[1], width: 176 },
{ ...commonColumns[2], width: 208 },
{ ...commonColumns[3], width: 240 },
{ ...commonColumns[4], width: 108 },
{ ...commonColumns[5], width: 196 },
]
: [
{
dataIndex: 'token',
width: 369,
key: 'token',
title: 'Token Name',
render: (token, record) => {
return (
<Link
href={
record.type === TokenTypeEnum.nft
? `/nftItem?chainId=${record.chainIds ? record.chainIds[0] : chain}&itemSymbol=${record.token.symbol}`
: `/${record.chainIds ? record.chainIds[0] : chain}/token/${token.symbol}`
}>
<TokenTableCell showSymbol={false} token={token}>
<TokenImage token={token} />
</TokenTableCell>
</Link>
);
},
},
{
title: 'Symbol',
width: 218,
dataIndex: 'symbol',
key: 'Symbol',
sorter: true,
sortIcon: ({ sortOrder }) => <EPSortIcon sortOrder={sortOrder} />,
sortOrder: sortedInfo?.columnKey === 'Symbol' ? sortedInfo.order : null,
render: (text, record) => (
<span className="inline-block max-w-[181px] truncate leading-5 text-base-100">{record.token?.symbol}</span>
),
},
{
title: 'Quantity',
width: 219,
dataIndex: 'quantity',
key: 'FormatAmount',
sorter: true,
sortIcon: ({ sortOrder }) => <EPSortIcon sortOrder={sortOrder} />,
sortOrder: sortedInfo?.columnKey === 'FormatAmount' ? sortedInfo.order : null,
render: (text) => (
<EPTooltip mode="dark" title={thousandsNumber(text)}>
<span className="inline-block max-w-[124px] truncate leading-5 text-base-100">
{thousandsNumber(text)}
</span>
</EPTooltip>
),
},
{
title: 'Price',
width: 174,
dataIndex: 'priceOfUsd',
key: 'priceOfUsd',
render: (text, record) => (
<>{showELF ? <span>{numberFormatter(record.priceOfElf)}</span> : <span>${thousandsNumber(text)}</span>}</>
),
},
{
title: 'Change(24H)',
width: 108,
dataIndex: 'priceOfUsdPercentChange24h',
key: 'priceOfUsdPercentChange24h',
render: (text) => (
<span className={clsx(text >= 0 ? 'text-positive' : 'text-rise-red')}>
<IconFont className={clsx(text >= 0 && 'rotate-180', 'mr-1 text-xs')} type="down-aa9i0lma" />
{text}%
</span>
),
},
{
title: 'Value',
width: 224,
dataIndex: 'valueOfUsd',
key: 'valueOfUsd',
render: (text, record) => (
<>{showELF ? <span>{numberFormatter(record.valueOfElf)}</span> : <span>${thousandsNumber(text)}</span>}</>
),
},
{ ...commonColumns[0], width: 369, title: 'Token Name' },
{ ...commonColumns[1], width: 218 },
{ ...commonColumns[2], width: 219 },
{ ...commonColumns[3], width: 174 },
{ ...commonColumns[4], width: 108 },
{ ...commonColumns[5], width: 224 },
];
}
};

export default getColumns;
Loading

0 comments on commit fabf9a3

Please sign in to comment.