From 67832d6abba780d6a8193960d166d216777edcc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E5=9B=BD=E5=AE=87?= <841185308@qq.com> Date: Mon, 3 Apr 2023 12:10:37 +0800 Subject: [PATCH] Feat: new UI overview page (#2620) * feat: Feat overview page. --- packages/neuron-ui/public/css/fonts.css | 8 +- .../public/fonts/D-DIN-PRO-500-Medium.otf | Bin 0 -> 23432 bytes .../public/fonts/D-DIN-PRO-500-Medium.ttf | Bin 0 -> 28576 bytes .../balanceSyncIcon.module.scss | 58 +-- .../components/BalanceSyncingIcon/index.tsx | 40 +- .../src/components/Overview/index.tsx | 449 ++++++++++-------- .../components/Overview/overview.module.scss | 279 +++++------ .../src/components/PageContainer/index.tsx | 2 +- .../PageContainer/pageContainer.module.scss | 14 +- packages/neuron-ui/src/styles/index.scss | 5 + packages/neuron-ui/src/styles/theme.scss | 2 +- packages/neuron-ui/src/utils/const.ts | 2 + .../src/widgets/CopyZone/copyZone.module.scss | 29 +- .../neuron-ui/src/widgets/CopyZone/index.tsx | 6 +- .../src/widgets/Icons/BalanceRight.svg | 19 + .../src/widgets/Icons/OverviewReceive.svg | 4 + .../src/widgets/Icons/OverviewSend.svg | 4 + .../src/widgets/Icons/SuccessNoBorder.svg | 3 + packages/neuron-ui/src/widgets/Icons/icon.tsx | 4 + 19 files changed, 466 insertions(+), 462 deletions(-) create mode 100755 packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.otf create mode 100755 packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.ttf create mode 100755 packages/neuron-ui/src/widgets/Icons/BalanceRight.svg create mode 100755 packages/neuron-ui/src/widgets/Icons/OverviewReceive.svg create mode 100755 packages/neuron-ui/src/widgets/Icons/OverviewSend.svg create mode 100755 packages/neuron-ui/src/widgets/Icons/SuccessNoBorder.svg diff --git a/packages/neuron-ui/public/css/fonts.css b/packages/neuron-ui/public/css/fonts.css index cac08b5ad6..f461d01884 100644 --- a/packages/neuron-ui/public/css/fonts.css +++ b/packages/neuron-ui/public/css/fonts.css @@ -18,4 +18,10 @@ font-family: 'ProximaNova-Semibold'; src: url('../fonts/ProximaNova-Semibold.otf') format('opentype'), url('../fonts/ProximaNova-Semibold.ttf') format('opentype'); -} \ No newline at end of file +} + +@font-face { + font-family: 'D-DIN-PRO'; + src: url('../fonts/D-DIN-PRO-500-Medium.otf') format('opentype'), + url('../fonts/D-DIN-PRO-500-Medium.ttf') format('opentype'); +} diff --git a/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.otf b/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.otf new file mode 100755 index 0000000000000000000000000000000000000000..d72d454eb9ee55e0ba1a2d478e0e9adb2e1e02af GIT binary patch literal 23432 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 literal 0 HcmV?d00001 diff --git a/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.ttf b/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.ttf new file mode 100755 index 0000000000000000000000000000000000000000..ca0abecb197835781219ac6f139cf21652fb3afc GIT binary patch literal 28576 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 F{|AvKPYwV8 literal 0 HcmV?d00001 diff --git a/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss b/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss index a1563ce800..b88f591b6c 100644 --- a/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss +++ b/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss @@ -1,55 +1,7 @@ -$arrow: 10px; +.confirm { + margin-left: 4px; -.container { - display: inline; - position: relative; - font-size: 0.75rem; - color: var(--nervos-green); - border-radius: 2px; - z-index: 1; - - svg { - width: 1rem; - height: 0.75rem; - pointer-events: none; - position: relative; - top: 1px; - } - - &::after { - display: none; - content: attr(data-content); - position: absolute; - top: calc(100% + 7px); - left: 50%; - transform: translateX(-50%); - background: #fff; - font-size: 0.75rem; - color: #000000; - padding: 10px 15px; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); - min-width: 150px; - pointer-events: none; - } - - &::before { - z-index: 1; - display: none; - content: ''; - top: 2px; - left: 50%; - transform: translateX(-50%); - position: absolute; - border: $arrow solid transparent; - border-bottom-color: #fff; - filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.12)); - pointer-events: none; - } - - &:hover { - &::after, - &::before { - display: block; - } + path { + fill: #FFFFFF; } -} +} \ No newline at end of file diff --git a/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx b/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx index be761394e2..ce4884e44a 100644 --- a/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx +++ b/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx @@ -1,8 +1,6 @@ import React from 'react' -import { useTranslation } from 'react-i18next' import { ConnectionStatus, SyncStatus } from 'utils' -import { ReactComponent as BalanceSyncing } from 'widgets/Icons/BalanceSyncing.svg' -import { ReactComponent as BalanceSyncFailed } from 'widgets/Icons/BalanceSyncFailed.svg' +import { Confirming } from 'widgets/Icons/icon' import styles from './balanceSyncIcon.module.scss' export interface BalanceSyncIconProps { @@ -11,40 +9,14 @@ export interface BalanceSyncIconProps { } const BalanceSyncIcon = ({ connectionStatus, syncStatus }: BalanceSyncIconProps) => { - const [t] = useTranslation() - if (ConnectionStatus.Connecting === connectionStatus) { - return ( -
- -
- ) + if (ConnectionStatus.Connecting === connectionStatus || ConnectionStatus.Offline === connectionStatus) { + return } - if (ConnectionStatus.Offline === connectionStatus) { - return ( -
- -
- ) - } - switch (syncStatus) { - case SyncStatus.SyncNotStart: { - return ( -
- -
- ) - } - case SyncStatus.Syncing: - case SyncStatus.SyncPending: { - return ( -
- -
- ) - } - default: { + case SyncStatus.SyncCompleted: return null + default: { + return } } } diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx index cb615e7eeb..d845f8fc6e 100644 --- a/packages/neuron-ui/src/components/Overview/index.tsx +++ b/packages/neuron-ui/src/components/Overview/index.tsx @@ -1,8 +1,6 @@ -import React, { useCallback, useMemo, useEffect } from 'react' -import { useNavigate } from 'react-router-dom' +import React, { useCallback, useMemo, useEffect, useState } from 'react' +import { Link } from 'react-router-dom' import { Trans, useTranslation } from 'react-i18next' -import Balance from 'components/Balance' -import PageContainer from 'components/PageContainer' import { showTransactionDetails } from 'services/remote' import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states' @@ -15,13 +13,20 @@ import { backToTop, CONSTANTS, RoutePath, - getCurrentUrl, - getSyncStatus, nftFormatter, useFirstLoadApp, } from 'utils' import { UANTokenName, UANTonkenSymbol } from 'components/UANDisplay' +import PageContainer from 'components/PageContainer' +import Table from 'widgets/Table' +import { ReactComponent as Send } from 'widgets/Icons/OverviewSend.svg' +import { ReactComponent as Receive } from 'widgets/Icons/OverviewReceive.svg' +import { ReactComponent as BalanceRight } from 'widgets/Icons/BalanceRight.svg' +import { ArrowOpenRight, Confirming, PasswordHide, PasswordShow } from 'widgets/Icons/icon' +import BalanceSyncIcon from 'components/BalanceSyncingIcon' +import CopyZone from 'widgets/CopyZone' +import { HIDE_BALANCE } from 'utils/const' import styles from './overview.module.scss' const { PAGE_SIZE, CONFIRMATION_THRESHOLD } = CONSTANTS @@ -55,30 +60,159 @@ const genTypeLabel = ( } } +const TransactionStatus = ({ + item, + cacheTipBlockNumber, + bestKnownBlockNumber, +}: { + item: Omit & { status: State.Transaction['status'] | 'confirming' } + cacheTipBlockNumber: number + bestKnownBlockNumber: number +}) => { + const [t] = useTranslation() + let confirmations = '' + let { status } = item + if (item.blockNumber !== undefined) { + const confirmationCount = + item.blockNumber === null || item.status === 'failed' + ? 0 + : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber + + if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) { + status = 'confirming' + + if (confirmationCount === 1) { + confirmations = t('overview.confirmation', { + confirmationCount: localNumberFormatter(confirmationCount), + }) + } else if (confirmationCount > 1) { + confirmations = `${t('overview.confirmations', { + confirmationCount: localNumberFormatter(confirmationCount), + })}` + } + } + } + return ( +
+ {status === 'confirming' ? : null} + {t(`overview.statusLabel.${status}`)} + {confirmations ? {confirmations} : null} +
+ ) +} + +const Amount = ({ item, show }: { item: State.Transaction; show: boolean }) => { + let amount = '--' + let sudtAmount = '' + let isReceive = false + + if (item.blockNumber !== undefined) { + if (item.nftInfo) { + // NFT + const { type, data } = item.nftInfo + amount = show ? `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}` : `${HIDE_BALANCE}mNFT` + isReceive = type === 'receive' + } else if (item.sudtInfo?.sUDT) { + if (item.sudtInfo.sUDT.decimal) { + sudtAmount = sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal)) + } + } else { + amount = show ? `${shannonToCKBFormatter(item.value, true)} CKB` : `${HIDE_BALANCE} CKB` + isReceive = !amount.includes('-') + } + } + return sudtAmount ? ( + <> + {show ? sudtAmount : HIDE_BALANCE}  + + + ) : ( + {amount} + ) +} + +const TracsactionType = ({ + item, + cacheTipBlockNumber, + bestKnownBlockNumber, +}: { + item: Omit & { status: State.Transaction['status'] | 'confirming' } + cacheTipBlockNumber: number + bestKnownBlockNumber: number +}) => { + const [t] = useTranslation() + let typeLabel: string = '--' + let { status } = item + let typeTransProps: { + i18nKey: string + components: JSX.Element[] + } = { + i18nKey: '', + components: [], + } + + if (item.blockNumber !== undefined) { + const confirmationCount = + item.blockNumber === null || item.status === 'failed' + ? 0 + : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber + + if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) { + status = 'confirming' + } + if (item.nftInfo) { + // NFT + const { type } = item.nftInfo + typeLabel = `${t(`overview.${genTypeLabel(type, status)}`)}` + } else if (item.sudtInfo?.sUDT) { + // Asset Account + if (['create', 'destroy'].includes(item.type)) { + // create/destroy an account + typeTransProps = { + i18nKey: `overview.${item.type}SUDT`, + components: [ + , + ], + } + } else { + // send/receive to/from an account + const type = +item.sudtInfo.amount <= 0 ? 'send' : 'receive' + typeLabel = `UDT ${t(`overview.${genTypeLabel(type, status)}`)}` + } + } else if (item.type === 'create' || item.type === 'destroy') { + // normal tx + if (item.assetAccountType === 'CKB') { + typeLabel = `${t(`overview.${item.type}`, { name: 'CKB' })}` + } else { + typeLabel = `${t(`overview.${item.type}`, { name: 'Unknown' })}` + } + } else { + typeLabel = item.nervosDao ? 'Nervos DAO' : t(`overview.${genTypeLabel(item.type, status)}`) + } + } + return typeTransProps.i18nKey ? : <>{typeLabel} +} + const Overview = () => { const { app: { pageNotice }, wallet: { id, balance = '' }, chain: { - syncState: { cacheTipBlockNumber, bestKnownBlockNumber, bestKnownBlockTimestamp }, + syncState: { cacheTipBlockNumber, bestKnownBlockNumber, syncStatus }, transactions: { items = [] }, connectionStatus, - networkID, }, - settings: { networks }, } = useGlobalState() const dispatch = useDispatch() const [t] = useTranslation() - const navigate = useNavigate() - useFirstLoadApp(dispatch) - - const syncStatus = getSyncStatus({ - bestKnownBlockNumber, - bestKnownBlockTimestamp, - cacheTipBlockNumber, - currentTimestamp: Date.now(), - url: getCurrentUrl(networkID, networks), - }) useEffect(() => { if (id) { @@ -94,14 +228,10 @@ const Overview = () => { walletID: id, })(dispatch) }, [id, dispatch]) - const onGoToHistory = useCallback(() => { - navigate(RoutePath.History) - }, [navigate]) - const onRecentActivityDoubleClick = useCallback((e: React.SyntheticEvent) => { - const cellElement = e.target as HTMLTableCellElement - if (cellElement?.parentElement?.dataset?.hash) { - showTransactionDetails(cellElement.parentElement.dataset.hash) + const onRecentActivityDoubleClick = useCallback((_, item: State.Transaction) => { + if (item?.hash) { + showTransactionDetails(item?.hash) } }, []) @@ -109,190 +239,103 @@ const Overview = () => { return items.slice(0, 10) }, [items]) - const RecentActivites = useMemo(() => { - const activities = recentItems.map(item => { - let confirmations = '' - let typeLabel: string = '--' - let amount = '--' - let amountValue = '' - let { status } = item - let typeTransProps: { - i18nKey: string - components: JSX.Element[] - } = { - i18nKey: '', - components: [], - } - - if (item.blockNumber !== undefined) { - const confirmationCount = - item.blockNumber === null || item.status === 'failed' - ? 0 - : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber - - if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) { - status = 'confirming' as any - - if (confirmationCount === 1) { - confirmations = t('overview.confirmation', { - confirmationCount: localNumberFormatter(confirmationCount), - }) - } else if (confirmationCount > 1) { - confirmations = `${t('overview.confirmations', { - confirmationCount: localNumberFormatter(confirmationCount), - })}` - } - } - - if (item.nftInfo) { - // NFT - const { type, data } = item.nftInfo - typeLabel = `${t(`overview.${genTypeLabel(type, status)}`)}` - amount = `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}` - } else if (item.sudtInfo?.sUDT) { - // Asset Account - if (['create', 'destroy'].includes(item.type)) { - // create/destroy an account - typeTransProps = { - i18nKey: `overview.${item.type}SUDT`, - components: [ - , - ], - } - } else { - // send/receive to/from an account - const type = +item.sudtInfo.amount <= 0 ? 'send' : 'receive' - typeLabel = `UDT ${t(`overview.${genTypeLabel(type, status)}`)}` - } - if (item.sudtInfo.sUDT.decimal) { - amount = `${sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal))} ${ - item.sudtInfo.sUDT.symbol - }` - amountValue = sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal)) - } - } else { - // normal tx - amount = `${shannonToCKBFormatter(item.value)} CKB` - if (item.type === 'create' || item.type === 'destroy') { - if (item.assetAccountType === 'CKB') { - typeLabel = `${t(`overview.${item.type}`, { name: 'CKB' })}` - } else { - typeLabel = `${t(`overview.${item.type}`, { name: 'Unknown' })}` - } - } else { - typeLabel = item.nervosDao ? 'Nervos DAO' : t(`overview.${genTypeLabel(item.type, status)}`) - } - } - } - - return { - ...item, - status, - statusLabel: t(`overview.statusLabel.${status}`), - amount, - confirmations, - typeLabel, - amountValue, - typeTransProps, - } - }) - return ( -
- - - - {['date', 'type', 'amount', 'status'].map(field => { - const title = t(`overview.${field}`) - return ( - - ) - })} - - - - {activities.map(item => { - const { - confirmations, - createdAt, - status, - hash, - statusLabel, - timestamp, - typeLabel, - amount, - typeTransProps, - amountValue, - sudtInfo, - } = item - const time = uniformTimeFormatter(timestamp || createdAt) + useFirstLoadApp(dispatch) - return ( - - - {typeTransProps.i18nKey ? ( - - ) : ( - - )} - {amountValue ? ( - - ) : ( - - )} - - - ) - })} - -
- {title} -
{time.split(' ')[0]} - - {typeLabel} - {amountValue}  - - {amount} -
- {statusLabel} - {confirmations ? {confirmations} : null} -
-
-
- ) - }, [recentItems, cacheTipBlockNumber, bestKnownBlockNumber, t, onRecentActivityDoubleClick]) + const [showBalance, setShowBalance] = useState(true) + const onChangeShowBalance = useCallback(() => { + setShowBalance(v => !v) + }, [setShowBalance]) return ( -
-

{t('navbar.overview')}

+
- + + {t('overview.balance')} + {showBalance && } + {!!showBalance || } + + + {showBalance ? shannonToCKBFormatter(balance) : HIDE_BALANCE} + + CKB + +
- -

{t('overview.recent-activities')}

- {items.length ? ( - <> - {RecentActivites} - {items.length > 10 ? ( -
- {}} tabIndex={0}> - {t('overview.more')} - -
- ) : null} - - ) : ( -
{t('overview.no-recent-activities')}
- )} + + +
{t('overview.send')}
+ + + +
{t('overview.receive')}
+
+ +

{t('overview.recent-activities')}

+ {items.length > 10 && ( + + {t('overview.more')} + + + )} + + } + columns={[ + { + title: t('overview.date'), + dataIndex: 'date', + align: 'left', + render: (_, __, item) => { + const time = uniformTimeFormatter(item.timestamp || item.createdAt) + return time.split(' ')[0] + }, + }, + { + title: t('overview.type'), + dataIndex: 'type', + align: 'left', + render(_, __, item) { + return ( + + ) + }, + }, + { + title: t('overview.amount'), + dataIndex: 'amount', + align: 'left', + isBalance: true, + render(_, __, item, show) { + return + }, + }, + { + title: t('overview.status'), + dataIndex: 'status', + align: 'left', + className: styles.txStatusTh, + render(_, __, item) { + return ( + + ) + }, + }, + ]} + dataSource={recentItems} + noDataContent={t('overview.no-recent-activities')} + onRowDoubleClick={onRecentActivityDoubleClick} + /> ) } diff --git a/packages/neuron-ui/src/components/Overview/overview.module.scss b/packages/neuron-ui/src/components/Overview/overview.module.scss index 140b41296b..13e95aee6a 100644 --- a/packages/neuron-ui/src/components/Overview/overview.module.scss +++ b/packages/neuron-ui/src/components/Overview/overview.module.scss @@ -1,182 +1,111 @@ @import '../../styles/mixin.scss'; +@import '../../styles/theme.scss'; -$success-color: #3cc68a; -$failed-color: #d50000; -$pending-color: #b3b3b3; -$confirming-color: #b3b3b3; - -.overview { +.mid { + height: 200px; display: grid; grid-template: - 'page-title page-title' auto - 'balance balance' auto - 'activities-title activities-title' auto - 'activities activities' auto - 'more-link more-link' auto/ - 1fr auto; -} - -.pageTitle, -.recentActivitiesTitle { - @include bold-text; - font-size: 1.375rem; - color: #000; - margin: 0; -} - -.pageTitle { - @include page-title; - grid-area: page-title; -} - -.recentActivitiesTitle { - grid-area: activities-title; - margin-top: 20px; - margin-bottom: 10px; - font-size: 1rem; - font-weight: 500; -} - -.balance { - grid-area: balance; - display: flex; - align-items: center; - font-size: 1.25rem; - font-weight: 600; -} - -.recentActivities { - grid-area: activities; - padding: 0px 11px 16px; - background-color: #fff; - - table { - border-collapse: collapse; - width: 100%; - table-layout: fixed; - } - - tr { - height: 46px; - border-bottom: 1px solid #b3b3b3; - padding: 0 15px; - } - - tbody { - tr:hover { - background-color: #eee; + 'balance send receive' 200px / + 2fr 1fr 1fr; + grid-column-gap: 16px; + margin-bottom: 16px; + .balance { + grid-area: balance; + border-radius: 16px; + background-color: #26C786; + position: relative; + padding: 24px 16px; + color: var(--primary-text-color); + + & > .backgroundImg { + position: absolute; + top: 0px; + right: 0px; } - } - th { - text-align: left; - font-size: 0.75rem; - font-weight: 600; - color: #000; - line-height: 1em; - padding: 16px 0; - - &[data-field='date'] { - width: 100px; + & > .copyBalance { + .balanceValue { + font-family: 'D-DIN-PRO'; + font-weight: 500; + font-size: 36px; + } } - &[data-field='status'] { - width: 130px; + + & > .balanceUnit { + font-size: 16px; + font-weight: 500; + margin-left: 8px; } - } - td { - font-size: 0.875rem; - line-height: 1em; - padding: 8px 2px; - color: #000; - white-space: nowrap; - } + & > .balanceTitle { + font-weight: 500; + font-size: 16px; + display: flex; + align-items: center; + margin-bottom: 36px; - .tokenName { - max-width: 50%; - display: inline-flex; - line-height: 24px; + & > svg { + margin-left: 8px; - &::after { - min-width: 300px; - } - & > span { - max-width: 100%; + path { + fill: var(--svg-fill-color); + } + } } } - - .symbol { - max-width: 90%; - display: inline-flex; - - &::after { - max-width: 400px; - } + .send { + grid-area: send; + } + .receive { + grid-area: receive; } - .txStatus { - & > div::after { - position: absolute; - display: block; - content: ''; - border-radius: 50%; - width: 8px; - height: 8px; - left: 0; - top: 50%; - transform: translateY(-50%); - } - - &[data-status='pending'] > div::after { - background-color: $pending-color; - filter: drop-shadow(0 0 1px $pending-color); - animation: blink 5s infinite; - } - - &[data-status='confirming'] > div::after { - background-color: $pending-color; - filter: drop-shadow(0 0 1px $pending-color); - animation: blink 5s infinite; - } - - &[data-status='success'] > div::after { - background-color: $success-color; - filter: drop-shadow(0 0 1px $success-color); - } - - &[data-status='failed'] > div::after { - background-color: $failed-color; - filter: drop-shadow(0 0 1px $failed-color); + & > a { + border: none; + background: var(--secondary-background-color); + border-radius: 16px; + font-size: 16px; + font-weight: 500; + color: var(--primary-color); + text-align: center; + padding-top: 48px; + + @media (prefers-color-scheme: dark) { + & > svg { + :first-child { + fill: var(--primary-color); + } + :not(:first-child) { + fill: #14221C; + } + } } + } +} - & > div { - display: flex; - flex-direction: column; - position: relative; - padding-left: 20px; +.txStatusTh { + padding-left: 34px !important; +} - & > span:first-child { - flex: 1; - } +.txStatus { + display: flex; + position: relative; + padding-left: 16px; + align-items: center; - & > span:nth-child(2) { - color: #626262; - font-size: 0.625rem; - line-height: 0.8125rem; - margin-top: 3px; - } - } + .confirmText { + color: #999; + font-size: 12px; + margin-left: 4px; } -} -.linkToHistory { - grid-area: more-link; - font-size: 0.75rem; - color: #000; - margin-top: 13px; + .confirm { + position: absolute; + left: -4px; + } - & > span:hover { - color: var(--nervos-green); + &[data-status="failed"] { + color: #FF1E1E; } } @@ -196,3 +125,39 @@ $confirming-color: #b3b3b3; opacity: 1; } } + +.transactionTablleHead { + display: flex; + padding: 18px 16px; + justify-content: space-between; + align-items: center; + + .recentActivitiesTitle { + font-weight: 500; + font-size: 16px; + color: var(--main-text-color); + margin: 0; + } + + .linkToHistory { + font-size: 14px; + color: #8DA394; + cursor: pointer; + + &:hover { + color: var(--activity-color); + + & > svg > path { + stroke: var(--activity-color); + } + } + + & > svg { + margin-left: 4px; + } + } +} + +.isReceive { + color: $main-color; +} diff --git a/packages/neuron-ui/src/components/PageContainer/index.tsx b/packages/neuron-ui/src/components/PageContainer/index.tsx index 6debba269d..af006c8c9e 100755 --- a/packages/neuron-ui/src/components/PageContainer/index.tsx +++ b/packages/neuron-ui/src/components/PageContainer/index.tsx @@ -139,7 +139,7 @@ const PageContainer: React.FC = props => { )} - {children} +
{children}
) } diff --git a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss index db6fd8deb1..9b85f459bf 100755 --- a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss +++ b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss @@ -1,11 +1,15 @@ .page { background: var(--main-background-color); color: var(--main-text-color); - padding: 0 24px 24px; + padding: 0 24px; position: relative; + display: flex; + flex-direction: column; + height: 100vh; .head { display: flex; + flex: 0 0 auto; align-items: center; height: 72px; margin: 0; @@ -76,6 +80,7 @@ } .syncNotification { + flex: 0 0 auto; background: var(--warn-background-color); border-radius: 16px; padding: 10px 0; @@ -99,4 +104,9 @@ transform: translateY(-50%); cursor: pointer; } -} \ No newline at end of file +} + +.body { + flex: 1 1 auto; + padding-bottom: 24px; +} diff --git a/packages/neuron-ui/src/styles/index.scss b/packages/neuron-ui/src/styles/index.scss index fbe0292a43..1e3be0d41f 100755 --- a/packages/neuron-ui/src/styles/index.scss +++ b/packages/neuron-ui/src/styles/index.scss @@ -14,6 +14,11 @@ [type='submit'], button { -webkit-appearance: none !important; + color: inherit; +} + +a { + text-decoration: none; } ul { diff --git a/packages/neuron-ui/src/styles/theme.scss b/packages/neuron-ui/src/styles/theme.scss index 1df408a883..7a3a44b39c 100644 --- a/packages/neuron-ui/src/styles/theme.scss +++ b/packages/neuron-ui/src/styles/theme.scss @@ -42,7 +42,7 @@ body { --secondary-text-color: #8DA394; --link-color: #{$main-color}; --third-background-color: #2D3534; - --notice-background-color: rgba(255, 140, 0, 0.2); + --notice-background-color: #093F29; --notice-text-color: #F78C2A; --border-color: #343E3C; --input-border-color: #343E3C; diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts index 419adb3478..31a715e29c 100644 --- a/packages/neuron-ui/src/utils/const.ts +++ b/packages/neuron-ui/src/utils/const.ts @@ -63,3 +63,5 @@ export const DEPRECATED_CODE_HASH: Record = { AcpOnLina: '0x0fb343953ee78c9986b091defb6252154e0bb51044fd2879fde5b27314506111', AcpOnAggron: '0x86a1c6987a4acbe1a887cca4c9dd2ac9fcb07405bbeda51b861b18bbf7492c4b', } + +export const HIDE_BALANCE = '******' diff --git a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss index d7ec95224d..50ea5e06de 100644 --- a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss +++ b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss @@ -1,9 +1,10 @@ +@import '../../styles/theme.scss'; + .container { position: relative; display: inline-block; - padding: 0 3px; - &::before { + .hoverShow { position: absolute; top: 0; left: 0; @@ -12,17 +13,27 @@ display: none; justify-content: center; align-items: center; - content: attr(data-prompt); - font-size: 0.875rem; - font-weight: 500; - color: #666; - background-color: rgba(224, 224, 224, 0.9); + font-weight: 400; + color: $main-color; + background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(1px); user-select: none; white-space: nowrap; + border-radius: 16px; + + & > svg { + margin-right: 4px; + } } - &:hover::before { - display: flex; + &:hover { + padding-right: 14px; + .hoverShow { + display: flex; + } + + .copyIcon { + visibility: visible; + } } } diff --git a/packages/neuron-ui/src/widgets/CopyZone/index.tsx b/packages/neuron-ui/src/widgets/CopyZone/index.tsx index 72852312e3..c5b275de96 100644 --- a/packages/neuron-ui/src/widgets/CopyZone/index.tsx +++ b/packages/neuron-ui/src/widgets/CopyZone/index.tsx @@ -1,5 +1,6 @@ import React, { useState, useCallback, useRef } from 'react' import { useTranslation } from 'react-i18next' +import { Copy, SuccessNoBorder } from 'widgets/Icons/icon' import styles from './copyZone.module.scss' type CopyZoneProps = React.PropsWithChildren<{ @@ -27,12 +28,15 @@ const CopyZone = ({ children, content, name, style, className = '' }: CopyZonePr
+
+ {copied ? : } + {prompt} +
{children}
) diff --git a/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg b/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg new file mode 100755 index 0000000000..dfd822b136 --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/neuron-ui/src/widgets/Icons/OverviewReceive.svg b/packages/neuron-ui/src/widgets/Icons/OverviewReceive.svg new file mode 100755 index 0000000000..550f4b59af --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/OverviewReceive.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/neuron-ui/src/widgets/Icons/OverviewSend.svg b/packages/neuron-ui/src/widgets/Icons/OverviewSend.svg new file mode 100755 index 0000000000..da9c312d81 --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/OverviewSend.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/neuron-ui/src/widgets/Icons/SuccessNoBorder.svg b/packages/neuron-ui/src/widgets/Icons/SuccessNoBorder.svg new file mode 100755 index 0000000000..f58789c7a1 --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/SuccessNoBorder.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx index e92c4be2ae..6937950aba 100644 --- a/packages/neuron-ui/src/widgets/Icons/icon.tsx +++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx @@ -27,6 +27,7 @@ import { ReactComponent as TooltipSvg } from './Tooltip.svg' import { ReactComponent as OpenFolderSvg } from './OpenFolder.svg' import { ReactComponent as SuccessInfoSvg } from './SuccessInfo.svg' import { ReactComponent as ErrorSvg } from './Error.svg' +import { ReactComponent as SuccessNoBorderSvg } from './SuccessNoBorder.svg' import { ReactComponent as LoadingSvg } from './Loading.svg' import { ReactComponent as AttentionSvg } from './ExperimentalAttention.svg' import { ReactComponent as AttentionOutlineSvg } from './AttentionOutline.svg' @@ -43,6 +44,7 @@ import { ReactComponent as MenuExpandSvg } from './MenuExpand.svg' import { ReactComponent as ArrowEndSvg } from './ArrowEnd.svg' import { ReactComponent as ArrowNextSvg } from './ArrowNext.svg' import { ReactComponent as ConfirmingSvg } from './Confirming.svg' +import { ReactComponent as CopySvg } from './Copy.svg' import styles from './icon.module.scss' @@ -100,3 +102,5 @@ export const MenuExpand = WrapSvg(MenuExpandSvg) export const ArrowEnd = WrapSvg(ArrowEndSvg) export const ArrowNext = WrapSvg(ArrowNextSvg) export const Confirming = WrapSvg(ConfirmingSvg) +export const SuccessNoBorder = WrapSvg(SuccessNoBorderSvg) +export const Copy = WrapSvg(CopySvg)