From 954a3ad6c0d48c83fe90472bc5181910572a24cb Mon Sep 17 00:00:00 2001 From: Josh Leonard <30185185+josheleonard@users.noreply.github.com> Date: Tue, 28 Nov 2023 18:52:26 +0000 Subject: [PATCH] perf: reduce function declaration in wallet panel (#21130) --- .../allow-add-change-network-panel/index.tsx | 89 +++++++++--- .../connect-hardware-wallet-panel/index.tsx | 20 ++- .../extension/encryption-key-panel/index.tsx | 67 +++++++-- .../components/extension/sign-panel/index.tsx | 16 ++- .../sign-panel/sign-panel.stories.tsx | 1 - .../extension/welcome-panel/index.tsx | 15 ++- .../brave_wallet_ui/panel/container.tsx | 127 +----------------- .../stories/wallet-extension-panels.tsx | 65 +-------- 8 files changed, 170 insertions(+), 230 deletions(-) diff --git a/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/index.tsx b/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/index.tsx index 7103f7227bc8..1a2cdae9668b 100644 --- a/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/index.tsx +++ b/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/index.tsx @@ -3,8 +3,18 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this file, // you can obtain one at https://mozilla.org/MPL/2.0/. import * as React from 'react' +import { useDispatch } from 'react-redux' + +// types import { BraveWallet } from '../../../constants/types' + +// utils import { getLocale } from '../../../../common/locale' +import { PanelActions } from '../../../panel/actions' +import { + useUnsafePanelSelector // +} from '../../../common/hooks/use-safe-selector' +import { PanelSelectors } from '../../../panel/selectors' // Components import { NavButton } from '../buttons/nav-button' @@ -37,20 +47,24 @@ export interface Props { originInfo: BraveWallet.OriginInfo networkPayload: BraveWallet.NetworkInfo panelType: 'add' | 'change' - onCancel: () => void - onApproveAddNetwork: () => void - onApproveChangeNetwork: () => void +} + +const onLearnMore = () => { + chrome.tabs + .create({ + url: + 'https://support.brave.com' + + '/hc/en-us/articles/4415497656461-Brave-Wallet-FAQ' + }) + .catch((e) => { + console.error(e) + }) } export function AllowAddChangeNetworkPanel(props: Props) { - const { - originInfo, - networkPayload, - panelType, - onCancel, - onApproveAddNetwork, - onApproveChangeNetwork - } = props + const { originInfo, networkPayload, panelType } = props + + // computed from props const rpcUrl = networkPayload.rpcEndpoints[networkPayload.activeRpcEndpointIndex]?.url || '' @@ -58,21 +72,58 @@ export function AllowAddChangeNetworkPanel(props: Props) { ? networkPayload.blockExplorerUrls[0] : '' + // redux + const dispatch = useDispatch() + const addChainRequest = useUnsafePanelSelector(PanelSelectors.addChainRequest) + const switchChainRequest = useUnsafePanelSelector( + PanelSelectors.switchChainRequest + ) + + // state const [selectedTab, setSelectedTab] = React.useState('network') + + // methods const onSelectTab = (tab: tabs) => () => { setSelectedTab(tab) } - const onLearnMore = () => { - chrome.tabs - .create({ - url: 'https://support.brave.com/hc/en-us/articles/4415497656461-Brave-Wallet-FAQ' + const onApproveAddNetwork = () => { + dispatch( + PanelActions.addEthereumChainRequestCompleted({ + chainId: addChainRequest.networkInfo.chainId, + approved: true }) - .catch((e) => { - console.error(e) + ) + } + + const onApproveChangeNetwork = () => { + dispatch( + PanelActions.switchEthereumChainProcessed({ + requestId: switchChainRequest.requestId, + approved: true }) + ) } + const onCancelAddNetwork = () => { + dispatch( + PanelActions.addEthereumChainRequestCompleted({ + chainId: addChainRequest.networkInfo.chainId, + approved: false + }) + ) + } + + const onCancelChangeNetwork = () => { + dispatch( + PanelActions.switchEthereumChainProcessed({ + requestId: switchChainRequest.requestId, + approved: false + }) + ) + } + + // render return ( @@ -155,7 +206,9 @@ export function AllowAddChangeNetworkPanel(props: Props) { void account: BraveWallet.AccountInfo hardwareWalletCode: HardwareWalletResponseCodeType | undefined - onClickInstructions: () => void +} + +const onClickInstructions = () => { + const url = 'https://support.brave.com/hc/en-us/articles/4409309138701' + + chrome.tabs.create({ url }, () => { + if (chrome.runtime.lastError) { + console.error('tabs.create failed: ' + chrome.runtime.lastError.message) + } + }) } function getAppName(coinType: BraveWallet.CoinType): string { @@ -65,10 +73,8 @@ function getAppName(coinType: BraveWallet.CoinType): string { } export const ConnectHardwareWalletPanel = ({ - onCancel, account, - hardwareWalletCode, - onClickInstructions + hardwareWalletCode }: Props) => { // redux const dispatch = useDispatch>() @@ -128,8 +134,8 @@ export const ConnectHardwareWalletPanel = ({ // methods const onCancelConnect = React.useCallback(() => { - onCancel(account) - }, [onCancel, account]) + dispatch(PanelActions.cancelConnectHardwareWallet(account)) + }, [account]) const onSignData = React.useCallback(() => { if (!messageAccount || !request) { diff --git a/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx b/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx index d63f5eed1676..db7e06b39194 100644 --- a/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx +++ b/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx @@ -4,6 +4,7 @@ // you can obtain one at https://mozilla.org/MPL/2.0/. import * as React from 'react' +import { useDispatch } from 'react-redux' // Types import { BraveWallet } from '../../../constants/types' @@ -11,6 +12,7 @@ import { BraveWallet } from '../../../constants/types' // Utils import { reduceAccountDisplayName } from '../../../utils/reduce-account-name' import { getLocale, splitStringForTag } from '../../../../common/locale' +import { PanelActions } from '../../../panel/actions' // Components import { NavButton } from '../buttons/nav-button/index' @@ -37,12 +39,13 @@ import { useAccountQuery } from '../../../common/slices/api.slice.extra' export interface ProvidePubKeyPanelProps { payload: BraveWallet.GetEncryptionPublicKeyRequest - onProvide: (requestId: string) => void - onCancel: (requestId: string) => void } -export function ProvidePubKeyPanel(props: ProvidePubKeyPanelProps) { - const { payload, onProvide: onProvideOrAllow, onCancel } = props +export function ProvidePubKeyPanel({ payload }: ProvidePubKeyPanelProps) { + // redux + const dispatch = useDispatch() + + // queries const { account } = useAccountQuery(payload.accountId) const orb = useAccountOrb(account) @@ -52,6 +55,26 @@ export function ProvidePubKeyPanel(props: ProvidePubKeyPanelProps) { ).replace('$url', payload.originInfo.originSpec) const { duringTag, afterTag } = splitStringForTag(descriptionString) + // methods + const onProvideOrAllow = () => { + dispatch( + PanelActions.getEncryptionPublicKeyProcessed({ + requestId: payload.requestId, + approved: true + }) + ) + } + + const onCancel = (requestId: string) => { + dispatch( + PanelActions.getEncryptionPublicKeyProcessed({ + requestId, + approved: false + }) + ) + } + + // render return ( @@ -85,7 +108,7 @@ export function ProvidePubKeyPanel(props: ProvidePubKeyPanelProps) { onProvideOrAllow(payload.requestId)} + onSubmit={onProvideOrAllow} /> @@ -94,18 +117,40 @@ export function ProvidePubKeyPanel(props: ProvidePubKeyPanelProps) { interface DecryptRequestPanelProps { payload: BraveWallet.DecryptRequest - onAllow: (requestId: string) => void - onCancel: (requestId: string) => void } -export function DecryptRequestPanel(props: DecryptRequestPanelProps) { - const { payload, onAllow, onCancel } = props +export function DecryptRequestPanel({ payload }: DecryptRequestPanelProps) { + // redux + const dispatch = useDispatch() + + // state const [isDecrypted, setIsDecrypted] = React.useState(false) + // queries const { account } = useAccountQuery(payload.accountId) + // custom hooks const orb = useAccountOrb(account) + // methods + const onAllow = () => { + dispatch( + PanelActions.decryptProcessed({ + requestId: payload.requestId, + approved: true + }) + ) + } + + const onCancel = () => { + dispatch( + PanelActions.decryptProcessed({ + requestId: payload.requestId, + approved: false + }) + ) + } + const onDecryptMessage = () => { setIsDecrypted(true) } @@ -144,12 +189,12 @@ export function DecryptRequestPanel(props: DecryptRequestPanelProps) { onCancel(payload.requestId)} + onSubmit={onCancel} /> onAllow(payload.requestId)} + onSubmit={onAllow} /> diff --git a/components/brave_wallet_ui/components/extension/sign-panel/index.tsx b/components/brave_wallet_ui/components/extension/sign-panel/index.tsx index 8172f7b0e475..5b7875b06133 100644 --- a/components/brave_wallet_ui/components/extension/sign-panel/index.tsx +++ b/components/brave_wallet_ui/components/extension/sign-panel/index.tsx @@ -64,7 +64,6 @@ import { interface Props { signMessageData: BraveWallet.SignMessageRequest[] - onCancel: () => void showWarning: boolean } @@ -82,7 +81,7 @@ const onClickLearnMore = () => { } export const SignPanel = (props: Props) => { - const { signMessageData, onCancel, showWarning } = props + const { signMessageData, showWarning } = props // redux const dispatch = useDispatch() @@ -111,9 +110,20 @@ export const SignPanel = (props: Props) => { const ethSIWETypedData = selectedQueueData.signData.ethSiweData const solanaSignTypedData = selectedQueueData.signData.solanaSignData - // memos + // methods + const onCancel = () => { + dispatch( + PanelActions.signMessageProcessed({ + approved: false, + id: signMessageData[0].id + }) + ) + } + + // custom hooks const orb = useAccountOrb(account) + // memos const signMessageQueueInfo = React.useMemo(() => { return { queueLength: signMessageData.length, diff --git a/components/brave_wallet_ui/components/extension/sign-panel/sign-panel.stories.tsx b/components/brave_wallet_ui/components/extension/sign-panel/sign-panel.stories.tsx index 5514d3bf1fc8..cc8821f95336 100644 --- a/components/brave_wallet_ui/components/extension/sign-panel/sign-panel.stories.tsx +++ b/components/brave_wallet_ui/components/extension/sign-panel/sign-panel.stories.tsx @@ -65,7 +65,6 @@ export const _SignPanel = () => { return ( alert('canceled')} showWarning={true} signMessageData={[evilUnicodeSignMessageData, signMessageData]} /> diff --git a/components/brave_wallet_ui/components/extension/welcome-panel/index.tsx b/components/brave_wallet_ui/components/extension/welcome-panel/index.tsx index f76087ac53ed..8ed198ce7aba 100644 --- a/components/brave_wallet_ui/components/extension/welcome-panel/index.tsx +++ b/components/brave_wallet_ui/components/extension/welcome-panel/index.tsx @@ -4,9 +4,11 @@ // you can obtain one at https://mozilla.org/MPL/2.0/. import * as React from 'react' +import { useDispatch } from 'react-redux' // utils import { getLocale } from '../../../../common/locale' +import { PanelActions } from '../../../panel/actions' // components import { NavButton } from '../buttons/nav-button/index' @@ -15,11 +17,16 @@ import { NavButton } from '../buttons/nav-button/index' import { VerticalSpace, WalletWelcomeGraphic } from '../../shared/style' import { StyledWrapper, Title, Description } from './style' -interface Props { - onSetup: () => void -} +export const WelcomePanel = () => { + // redux + const dispatch = useDispatch() + + // methods + const onSetup = () => { + dispatch(PanelActions.setupWallet()) + } -export const WelcomePanel = ({ onSetup }: Props) => { + // render return ( diff --git a/components/brave_wallet_ui/panel/container.tsx b/components/brave_wallet_ui/panel/container.tsx index dac571b51618..73e8c30ba9ef 100644 --- a/components/brave_wallet_ui/panel/container.tsx +++ b/components/brave_wallet_ui/panel/container.tsx @@ -39,7 +39,6 @@ import { } from '../stories/style' import { PanelWrapper, WelcomePanelWrapper } from './style' -import * as WalletPanelActions from './actions/wallet_panel_actions' import { BraveWallet, WalletRoutes } from '../constants/types' import { @@ -53,7 +52,6 @@ import { ConfirmSolanaTransactionPanel } from '../components/extension/confirm-t import { ConfirmBitcoinTransactionPanel } from '../components/extension/confirm-transaction-panel/confirm-bitcoin-transaction-panel' import { ConfirmZCashTransactionPanel } from '../components/extension/confirm-transaction-panel/confirm_zcash_transaction_panel' import { SignTransactionPanel } from '../components/extension/sign-panel/sign-transaction-panel' -import { useDispatch } from 'react-redux' import { ConfirmSwapTransaction } from '../components/extension/confirm-transaction-panel/swap' import { TransactionStatus } from '../components/extension/post-confirmation' import { @@ -92,9 +90,6 @@ function Container() { // routing const history = useHistory() - // redux - const dispatch = useDispatch() - // wallet selectors (safe) const hasInitialized = useSafeWalletSelector(WalletSelectors.hasInitialized) const isWalletCreated = useSafeWalletSelector(WalletSelectors.isWalletCreated) @@ -152,105 +147,6 @@ function Container() { // bundle and display that loading indicator ASAP. const { selectedPendingTransaction } = usePendingTransactions() - const onSetup = () => { - dispatch(WalletPanelActions.setupWallet()) - } - - const onCancelSigning = () => { - dispatch( - WalletPanelActions.signMessageProcessed({ - approved: false, - id: signMessageData[0].id - }) - ) - } - - const onApproveAddNetwork = () => { - dispatch( - WalletPanelActions.addEthereumChainRequestCompleted({ - chainId: addChainRequest.networkInfo.chainId, - approved: true - }) - ) - } - - const onCancelAddNetwork = () => { - dispatch( - WalletPanelActions.addEthereumChainRequestCompleted({ - chainId: addChainRequest.networkInfo.chainId, - approved: false - }) - ) - } - - const onApproveChangeNetwork = () => { - dispatch( - WalletPanelActions.switchEthereumChainProcessed({ - requestId: switchChainRequest.requestId, - approved: true - }) - ) - } - - const onCancelChangeNetwork = () => { - dispatch( - WalletPanelActions.switchEthereumChainProcessed({ - requestId: switchChainRequest.requestId, - approved: false - }) - ) - } - - const onCancelConnectHardwareWallet = (account: BraveWallet.AccountInfo) => { - dispatch(WalletPanelActions.cancelConnectHardwareWallet(account)) - } - - const onClickInstructions = () => { - const url = 'https://support.brave.com/hc/en-us/articles/4409309138701' - - chrome.tabs.create({ url }, () => { - if (chrome.runtime.lastError) { - console.error('tabs.create failed: ' + chrome.runtime.lastError.message) - } - }) - } - - const onProvideEncryptionKey = (requestId: string) => { - dispatch( - WalletPanelActions.getEncryptionPublicKeyProcessed({ - requestId, - approved: true - }) - ) - } - - const onCancelProvideEncryptionKey = (requestId: string) => { - dispatch( - WalletPanelActions.getEncryptionPublicKeyProcessed({ - requestId, - approved: false - }) - ) - } - - const onAllowReadingEncryptedMessage = (requestId: string) => { - dispatch( - WalletPanelActions.decryptProcessed({ - requestId, - approved: true - }) - ) - } - - const onCancelAllowReadingEncryptedMessage = (requestId: string) => { - dispatch( - WalletPanelActions.decryptProcessed({ - requestId, - approved: false - }) - ) - } - const canInitializePageRouter = !isWalletLocked && !hasInitializedRouter && @@ -273,7 +169,7 @@ function Container() { return ( - + ) @@ -309,10 +205,8 @@ function Container() { @@ -374,9 +268,6 @@ function Container() { @@ -391,9 +282,6 @@ function Container() { @@ -416,7 +304,6 @@ function Container() { @@ -449,11 +336,7 @@ function Container() { return ( - + ) @@ -463,11 +346,7 @@ function Container() { return ( - + ) diff --git a/components/brave_wallet_ui/stories/wallet-extension-panels.tsx b/components/brave_wallet_ui/stories/wallet-extension-panels.tsx index 29848ae081a5..16857f5135eb 100644 --- a/components/brave_wallet_ui/stories/wallet-extension-panels.tsx +++ b/components/brave_wallet_ui/stories/wallet-extension-panels.tsx @@ -469,22 +469,11 @@ _ConfirmErcApproveTransaction.story = { } export const _AllowAddChangeNetwork = () => { - const onApprove = () => { - alert('Will Approve adding or chainging networks') - } - - const onCancel = () => { - alert('Canceled Adding Network') - } - return ( @@ -496,10 +485,6 @@ _AllowAddChangeNetwork.story = { } export const _SignData = () => { - const onCancel = () => { - alert('Canceled Signing Data') - } - const signMessageDataPayload: BraveWallet.SignMessageRequest[] = [ { id: 0, @@ -527,7 +512,6 @@ export const _SignData = () => { @@ -539,21 +523,9 @@ _SignData.story = { } export const _ProvideEncryptionKey = () => { - const onProvide = () => { - alert('Will Provide Encryption Key') - } - - const onCancel = () => { - alert('Will Cancel Providing Encryption Key') - } - return ( - + ) } @@ -563,21 +535,9 @@ _ProvideEncryptionKey.story = { } export const _ReadEncryptedMessage = () => { - const onAllow = () => { - alert('Will Allow Reading Encrypted Message') - } - - const onCancel = () => { - alert('Will Not Allow Reading Encrypted Message') - } - return ( - + ) } @@ -604,13 +564,9 @@ _ConnectWithSite.story = { } export const _SetupWallet = () => { - const onSetup = () => { - alert('Will navigate to full wallet onboarding page') - } - return ( - + ) } @@ -620,25 +576,10 @@ _SetupWallet.story = { } export const _ConnectHardwareWallet = () => { - const onCancel = (account: BraveWallet.AccountInfo) => { - // Doesn't do anything in storybook - } - - const onClickInstructions = () => { - // Open support link in new tab - window.open( - 'https://support.brave.com/hc/en-us/articles/4409309138701', - '_blank', - 'noreferrer' - ) - } - return (