From 88859a313ad5457c251125467adfa40199f4bcbd 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, 8 Jul 2024 09:33:38 +0800 Subject: [PATCH 1/2] fix: Move the i18n subscribe to the entry of the page. (#3201) --- .../src/components/MultisigAddress/index.tsx | 4 +--- .../neuron-ui/src/components/Settings/index.tsx | 6 ++---- .../src/components/SignAndVerify/index.tsx | 16 +++------------- .../src/containers/LockWindow/index.tsx | 5 +++-- packages/neuron-ui/src/containers/Main/index.tsx | 5 ++--- .../neuron-ui/src/containers/Navbar/index.tsx | 3 +-- 6 files changed, 12 insertions(+), 27 deletions(-) diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx index 4f7dc2eb1a..afdfb15b8b 100644 --- a/packages/neuron-ui/src/components/MultisigAddress/index.tsx +++ b/packages/neuron-ui/src/components/MultisigAddress/index.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { - useOnLocaleChange, isMainnet as isMainnetUtil, shannonToCKBFormatter, useExitOnWalletChange, @@ -84,8 +83,7 @@ const LearnMore = React.memo(({ t }: { t: TFunction }) => ( )) const MultisigAddress = () => { - const [t, i18n] = useTranslation() - useOnLocaleChange(i18n) + const [t] = useTranslation() useExitOnWalletChange() const { wallet: { id: walletId, addresses }, diff --git a/packages/neuron-ui/src/components/Settings/index.tsx b/packages/neuron-ui/src/components/Settings/index.tsx index a77d252f0e..4f2dc6276f 100644 --- a/packages/neuron-ui/src/components/Settings/index.tsx +++ b/packages/neuron-ui/src/components/Settings/index.tsx @@ -9,7 +9,7 @@ import { Navigation as NavigationSubject, Command as CommandSubject, } from 'services/subjects' -import { useOnLocalStorageChange, useOnLocaleChange } from 'utils' +import { useOnLocalStorageChange } from 'utils' import PageContainer from 'components/PageContainer' import WalletSetting from 'components/WalletSetting' import GeneralSetting from 'components/GeneralSetting' @@ -28,9 +28,7 @@ const Settings = () => { const dispatch = useDispatch() const globalState = useGlobalState() const navigate = useNavigate() - const [t, i18n] = useTranslation() - - useOnLocaleChange(i18n) + const [t] = useTranslation() useEffect(() => { const onNavigate = (url: string) => navigate(url) diff --git a/packages/neuron-ui/src/components/SignAndVerify/index.tsx b/packages/neuron-ui/src/components/SignAndVerify/index.tsx index d8cd73ea1d..b7fda6304b 100644 --- a/packages/neuron-ui/src/components/SignAndVerify/index.tsx +++ b/packages/neuron-ui/src/components/SignAndVerify/index.tsx @@ -3,14 +3,7 @@ import { TFunction } from 'i18next' import { useTranslation } from 'react-i18next' import { showErrorMessage, signMessage, verifyMessage } from 'services/remote' import { ControllerResponse } from 'services/remote/remoteApiWrapper' -import { - ErrorCode, - isSuccessResponse, - shannonToCKBFormatter, - useExitOnWalletChange, - useGoBack, - useOnLocaleChange, -} from 'utils' +import { ErrorCode, isSuccessResponse, shannonToCKBFormatter, useExitOnWalletChange, useGoBack } from 'utils' import { useState as useGlobalState } from 'states' import Button from 'widgets/Button' import Balance from 'widgets/Balance' @@ -33,15 +26,13 @@ interface PasswordDialogProps { } const PasswordDialog = ({ show, walletName, onCancel, onSubmit }: PasswordDialogProps) => { - const [t, i18n] = useTranslation() + const [t] = useTranslation() const [password, setPassword] = useState('') const [error, setError] = useState('') const [loading, setLoading] = useState(false) const disabled = !password || loading - useOnLocaleChange(i18n) - useEffect(() => { if (!show) { setPassword('') @@ -131,7 +122,7 @@ const Notifications = ({ notification, onDismiss, t, failReason }: Notifications ) : null const SignAndVerify = () => { - const [t, i18n] = useTranslation() + const [t] = useTranslation() const [notification, setNotification] = useState(null) const [failReason, setFailReason] = useState('') const [showDialog, setShowDialog] = useState(true) @@ -141,7 +132,6 @@ const SignAndVerify = () => { const [address, setAddress] = useState('') const { wallet } = useGlobalState() const [isDropdownOpen, setIsDropdownOpen] = useState(false) - useOnLocaleChange(i18n) useExitOnWalletChange() const handlePasswordDialogOpen = useCallback(() => { diff --git a/packages/neuron-ui/src/containers/LockWindow/index.tsx b/packages/neuron-ui/src/containers/LockWindow/index.tsx index cc39bf31db..aac821145a 100644 --- a/packages/neuron-ui/src/containers/LockWindow/index.tsx +++ b/packages/neuron-ui/src/containers/LockWindow/index.tsx @@ -7,7 +7,7 @@ import DarkUnLockMp4 from 'widgets/Icons/dark-unlock.mp4' import UnLockMp4 from 'widgets/Icons/unlock.mp4' import SplitPasswordInput from 'widgets/SplitPasswordInput' import { useTranslation } from 'react-i18next' -import { clsx, isSuccessResponse } from 'utils' +import { clsx, isSuccessResponse, useOnLocaleChange } from 'utils' import { isDark, signMessage, unlockWindow } from 'services/remote' import { retryUnlockWindow } from 'services/localCache' import { MILLISECS_PER_HOUR, MILLISECS_PER_MIN, MILLISECS_PER_SEC } from 'utils/getSyncLeftTime' @@ -34,7 +34,8 @@ const getWaitMillisecs = (retryTimes: number) => { const LockWindow = ({ children }: { children: React.ReactNode }) => { const dispatch = useDispatch() - const [t] = useTranslation() + const [t, i18n] = useTranslation() + useOnLocaleChange(i18n) useEffect(() => { getLockWindowInfo(dispatch) }, []) diff --git a/packages/neuron-ui/src/containers/Main/index.tsx b/packages/neuron-ui/src/containers/Main/index.tsx index 8fd8c30dc5..93e64e0a6d 100644 --- a/packages/neuron-ui/src/containers/Main/index.tsx +++ b/packages/neuron-ui/src/containers/Main/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useEffect, useState } from 'react' import { useNavigate, useLocation, Outlet } from 'react-router-dom' import { Trans, useTranslation } from 'react-i18next' import { useState as useGlobalState, useDispatch, dismissGlobalAlertDialog } from 'states' -import { useMigrate, useOnDefaultContextMenu, useOnLocaleChange, wakeScreen } from 'utils' +import { useMigrate, useOnDefaultContextMenu, wakeScreen } from 'utils' import AlertDialog from 'widgets/AlertDialog' import Dialog from 'widgets/Dialog' import Button from 'widgets/Button' @@ -28,7 +28,7 @@ const MainContent = () => { } = useGlobalState() const dispatch = useDispatch() const { networkID } = chain - const [t, i18n] = useTranslation() + const [t] = useTranslation() const network = useMemo(() => networks.find(n => n.id === networkID), [networks, networkID]) @@ -74,7 +74,6 @@ const MainContent = () => { navigate, dispatch, }) - useOnLocaleChange(i18n) const onContextMenu = useOnDefaultContextMenu(t) const onCancelGlobalDialog = useCallback(() => { dismissGlobalAlertDialog()(dispatch) diff --git a/packages/neuron-ui/src/containers/Navbar/index.tsx b/packages/neuron-ui/src/containers/Navbar/index.tsx index e7d2a9d14c..1e08d34c19 100644 --- a/packages/neuron-ui/src/containers/Navbar/index.tsx +++ b/packages/neuron-ui/src/containers/Navbar/index.tsx @@ -14,7 +14,7 @@ import { AppUpdater as AppUpdaterSubject } from 'services/subjects' import Badge from 'widgets/Badge' import Logo from 'widgets/Icons/Logo.png' import { Overview, History, NervosDAO, Settings, Experimental, MenuExpand, ArrowNext } from 'widgets/Icons/icon' -import { RoutePath, clsx, isSuccessResponse, useOnLocaleChange } from 'utils' +import { RoutePath, clsx, isSuccessResponse } from 'utils' import Tooltip from 'widgets/Tooltip' import styles from './navbar.module.scss' @@ -74,7 +74,6 @@ const Navbar = () => { updater: { version, isUpdated }, } = neuronWallet const [t, i18n] = useTranslation() - useOnLocaleChange(i18n) const [isClickedSetting, setIsClickedSetting] = useState(false) const selectedKey = menuItems.find(item => item.key === pathname || item.children?.some(v => v.key === pathname))?.key From 79df3c00f23cfb325c9d1d396252e2948823ab64 Mon Sep 17 00:00:00 2001 From: devchenyan Date: Tue, 9 Jul 2024 10:19:03 +0800 Subject: [PATCH 2/2] feat: Make Mulsig Addresses's More button more intuitive (#3203) --- .../src/components/MultisigAddress/index.tsx | 7 ++++- .../multisigAddress.module.scss | 28 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx index afdfb15b8b..03be73c04e 100644 --- a/packages/neuron-ui/src/components/MultisigAddress/index.tsx +++ b/packages/neuron-ui/src/components/MultisigAddress/index.tsx @@ -29,6 +29,7 @@ import { Edit, Confirming, Question, + LineDownArrow, } from 'widgets/Icons/icon' import AttentionCloseDialog from 'widgets/Icons/Attention.png' import { HIDE_BALANCE, NetworkType } from 'utils/const' @@ -400,6 +401,7 @@ const MultisigAddress = () => {
{(!multisigBanlances[item.fullPayload] || multisigBanlances[item.fullPayload] === '0' @@ -422,7 +424,10 @@ const MultisigAddress = () => { trigger="click" showTriangle > -
{t('multisig-address.table.more')}
+
+ {t('multisig-address.table.more')} + +
) diff --git a/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss b/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss index f93d2bea0d..ad6cb1e83b 100644 --- a/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss +++ b/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss @@ -144,8 +144,36 @@ padding-right: 30px; &:hover { color: var(--primary-color); + .expand { + path { + stroke: var(--primary-color); + } + } + } + } + + .expand { + margin-left: 2px; + width: 12px; + path { + stroke: var(--secondary-text-color); } } + + .tipContent { + &[data-tip-show='true'] { + .hoverBtn { + color: var(--primary-color); + } + .expand { + transform: rotate(180deg); + path { + stroke: var(--primary-color); + } + } + } + } + .action { padding-right: 20px; .tip {