Skip to content

Commit

Permalink
perf: reduce function declaration in wallet panel (#21130)
Browse files Browse the repository at this point in the history
  • Loading branch information
josheleonard authored Nov 28, 2023
1 parent 3a923c5 commit 954a3ad
Show file tree
Hide file tree
Showing 8 changed files with 170 additions and 230 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -37,42 +47,83 @@ 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 ||
''
const blockUrl = networkPayload.blockExplorerUrls.length
? networkPayload.blockExplorerUrls[0]
: ''

// redux
const dispatch = useDispatch()
const addChainRequest = useUnsafePanelSelector(PanelSelectors.addChainRequest)
const switchChainRequest = useUnsafePanelSelector(
PanelSelectors.switchChainRequest
)

// state
const [selectedTab, setSelectedTab] = React.useState<tabs>('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 (
<StyledWrapper>
<CenterColumn>
Expand Down Expand Up @@ -155,7 +206,9 @@ export function AllowAddChangeNetworkPanel(props: Props) {
<NavButton
buttonType='secondary'
text={getLocale('braveWalletButtonCancel')}
onSubmit={onCancel}
onSubmit={
panelType === 'add' ? onCancelAddNetwork : onCancelChangeNetwork
}
/>
<NavButton
buttonType='confirm'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,18 @@ import {
} from './style'

export interface Props {
onCancel: (account: BraveWallet.AccountInfo) => 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 {
Expand All @@ -65,10 +73,8 @@ function getAppName(coinType: BraveWallet.CoinType): string {
}

export const ConnectHardwareWalletPanel = ({
onCancel,
account,
hardwareWalletCode,
onClickInstructions
hardwareWalletCode
}: Props) => {
// redux
const dispatch = useDispatch<ThunkDispatch<any, any, any>>()
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
// 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 { 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'
Expand All @@ -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)
Expand All @@ -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 (
<StyledWrapper>
<AccountCircle orb={orb} />
Expand Down Expand Up @@ -85,7 +108,7 @@ export function ProvidePubKeyPanel(props: ProvidePubKeyPanelProps) {
<NavButton
buttonType='primary'
text={getLocale('braveWalletProvideEncryptionKeyButton')}
onSubmit={() => onProvideOrAllow(payload.requestId)}
onSubmit={onProvideOrAllow}
/>
</ButtonRow>
</StyledWrapper>
Expand All @@ -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<boolean>(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)
}
Expand Down Expand Up @@ -144,12 +189,12 @@ export function DecryptRequestPanel(props: DecryptRequestPanelProps) {
<NavButton
buttonType='secondary'
text={getLocale('braveWalletButtonCancel')}
onSubmit={() => onCancel(payload.requestId)}
onSubmit={onCancel}
/>
<NavButton
buttonType='primary'
text={getLocale('braveWalletReadEncryptedMessageButton')}
onSubmit={() => onAllow(payload.requestId)}
onSubmit={onAllow}
/>
</ButtonRow>
</StyledWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ import {

interface Props {
signMessageData: BraveWallet.SignMessageRequest[]
onCancel: () => void
showWarning: boolean
}

Expand All @@ -82,7 +81,7 @@ const onClickLearnMore = () => {
}

export const SignPanel = (props: Props) => {
const { signMessageData, onCancel, showWarning } = props
const { signMessageData, showWarning } = props

// redux
const dispatch = useDispatch()
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export const _SignPanel = () => {
return (
<WalletPageStory>
<SignPanel
onCancel={() => alert('canceled')}
showWarning={true}
signMessageData={[evilUnicodeSignMessageData, signMessageData]}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 (
<StyledWrapper>
<WalletWelcomeGraphic scale={0.9} />
Expand Down
Loading

0 comments on commit 954a3ad

Please sign in to comment.