Skip to content

Commit

Permalink
Uplift of #26820 (squashed) to beta
Browse files Browse the repository at this point in the history
  • Loading branch information
@brave-builds
brave-builds committed Dec 4, 2024
1 parent e104ce7 commit fe26de8
Show file tree
Hide file tree
Showing 9 changed files with 143 additions and 29 deletions.
6 changes: 6 additions & 0 deletions components/brave_wallet/browser/brave_wallet_constants.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1178,6 +1178,12 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
IDS_BRAVE_WALLET_APPROVING_AMOUNT_ON_EXCHANGE},
{"braveWalletCancelTransactionDescription",
IDS_BRAVE_WALLET_CANCEL_TRANSACTION_DESCRIPTION},
{"braveWalletSwapping", IDS_BRAVE_WALLET_SWAPPING},
{"braveWalletBridging", IDS_BRAVE_WALLET_BRIDGING},
{"braveWalletSwappingOrBridgingOnNetwork",
IDS_BRAVE_WALLET_SWAPPING_OR_BRIDGING_ON_NETWORK},
{"braveWalletErrorAttemptingToTransactOnNetwork",
IDS_BRAVE_WALLET_ERROR_ATTEMPTING_TO_TRANSACT_ON_NETWORK},
{"braveWalletTransactionSubmittedTitle",
IDS_BRAVE_WALLET_TRANSACTION_SUBMITTED_TITLE},
{"braveWalletTransactionSignedTitle",
Expand Down
57 changes: 44 additions & 13 deletions ...ents/brave_wallet_ui/components/extension/post-confirmation/common/transaction_intent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ export const TransactionIntent = (props: Props) => {
const txApprovalTarget = getTransactionApprovalTargetAddress(transaction)
const txCoinType = getCoinFromTxDataUnion(transaction.txDataUnion)
const txToAddress = getTransactionToAddress(transaction)
const isSOLSwapOrBridge =
txCoinType === BraveWallet.CoinType.SOL && isSwapOrBridge

// Queries
const { account: txAccount } = useAccountQuery(transaction.fromAccountId)
Expand Down Expand Up @@ -171,10 +173,33 @@ export const TransactionIntent = (props: Props) => {
}`
: formattedSendAmount

const sendSwapOrBridgeLocale = React.useMemo(() => {
if (isBridge) {
return getLocale('braveWalletBridge').toLocaleLowerCase()
}
if (isSwap) {
return getLocale('braveWalletSwap').toLocaleLowerCase()
}
return getLocale('braveWalletSend').toLocaleLowerCase()
}, [isBridge, isSwap])

const swappingOrBridgingLocale = React.useMemo(() => {
if (isBridge) {
return getLocale('braveWalletBridging')
}
return getLocale('braveWalletSwapping')
}, [isBridge])

const firstDuringValue = React.useMemo(() => {
if (isERC20Approval) {
return formattedApprovalAmount
}
if (isSOLSwapOrBridge && transactionFailed) {
return sendSwapOrBridgeLocale
}
if (isSOLSwapOrBridge) {
return swappingOrBridgingLocale
}
if (isSwapOrBridge && transactionConfirmed) {
return formattedBuyAmount
}
Expand All @@ -189,10 +214,17 @@ export const TransactionIntent = (props: Props) => {
transactionConfirmed,
formattedBuyAmount,
formattedSellAmount,
formattedSendAmount
formattedSendAmount,
isSOLSwapOrBridge,
sendSwapOrBridgeLocale,
transactionFailed,
swappingOrBridgingLocale
])

const secondDuringValue = React.useMemo(() => {
if (isSOLSwapOrBridge) {
return txNetwork?.chainName ?? ''
}
if (isSwapOrBridge && transactionConfirmed) {
return recipientLabel
}
Expand All @@ -210,23 +242,21 @@ export const TransactionIntent = (props: Props) => {
isBridge,
bridgeToNetwork,
isSwap,
formattedBuyAmount
formattedBuyAmount,
isSOLSwapOrBridge,
txNetwork
])

const sendSwapOrBridgeLocale = React.useMemo(() => {
if (isBridge) {
return getLocale('braveWalletBridge').toLocaleLowerCase()
}
if (isSwap) {
return getLocale('braveWalletSwap').toLocaleLowerCase()
}
return getLocale('braveWalletSend').toLocaleLowerCase()
}, [isBridge, isSwap])

const descriptionLocale = React.useMemo(() => {
if (transactionFailed && isSOLSwapOrBridge) {
return 'braveWalletErrorAttemptingToTransactOnNetwork'
}
if (transactionFailed) {
return 'braveWalletErrorAttemptingToTransact'
}
if (isSOLSwapOrBridge) {
return 'braveWalletSwappingOrBridgingOnNetwork'
}
if (isSwapOrBridge && transactionConfirmed) {
return 'braveWalletAmountAddedToAccount'
}
Expand All @@ -249,7 +279,8 @@ export const TransactionIntent = (props: Props) => {
transactionConfirmed,
isBridge,
isSwap,
isERC20Approval
isERC20Approval,
isSOLSwapOrBridge
])

const descriptionString = getLocale(descriptionLocale)
Expand Down
10 changes: 8 additions & 2 deletions ...ents/brave_wallet_ui/components/extension/post-confirmation/complete/complete.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import * as React from 'react'
// Types
import {
BraveWallet,
StorybookCoinTypeOptions,
StorybookTransactionArgs,
StorybookTransactionOptions
} from '../../../../constants/types'
Expand All @@ -29,12 +30,13 @@ import { PanelWrapper } from '../../../../panel/style'
export const _TransactionComplete = {
render: (args: StorybookTransactionArgs) => {
// Props
const { transactionType } = args
const { transactionType, coinType } = args

// Computed
const transaction = getPostConfirmationStatusMockTransaction(
transactionType,
BraveWallet.TransactionStatus.Confirmed
BraveWallet.TransactionStatus.Confirmed,
coinType
)

return (
Expand Down Expand Up @@ -62,6 +64,10 @@ export default {
transactionType: {
options: StorybookTransactionOptions,
control: { type: 'select' }
},
coinType: {
options: StorybookCoinTypeOptions,
control: { type: 'select' }
}
}
}
10 changes: 8 additions & 2 deletions .../components/extension/post-confirmation/failed_or_canceled/failed_or_canceled.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import * as React from 'react'
// Types
import {
BraveWallet,
StorybookCoinTypeOptions,
StorybookTransactionArgs,
StorybookTransactionOptions
} from '../../../../constants/types'
Expand All @@ -29,12 +30,13 @@ import { PanelWrapper } from '../../../../panel/style'
export const _TransactionFailedOrCanceled = {
render: (args: StorybookTransactionArgs) => {
// Props
const { transactionType } = args
const { transactionType, coinType } = args

// Computed
const transaction = getPostConfirmationStatusMockTransaction(
transactionType,
BraveWallet.TransactionStatus.Error
BraveWallet.TransactionStatus.Error,
coinType
)

return (
Expand All @@ -61,6 +63,10 @@ export default {
transactionType: {
options: StorybookTransactionOptions,
control: { type: 'select' }
},
coinType: {
options: StorybookCoinTypeOptions,
control: { type: 'select' }
}
}
}
10 changes: 8 additions & 2 deletions ...omponents/extension/post-confirmation/submitted_or_signed/submitted_or_signed.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import * as React from 'react'
// Types
import {
BraveWallet,
StorybookCoinTypeOptions,
StorybookTransactionArgs,
StorybookTransactionOptions
} from '../../../../constants/types'
Expand All @@ -29,12 +30,13 @@ import { PanelWrapper } from '../../../../panel/style'
export const _TransactionSubmittedOrSigned = {
render: (args: StorybookTransactionArgs) => {
// Props
const { transactionType } = args
const { transactionType, coinType } = args

// Computed
const transaction = getPostConfirmationStatusMockTransaction(
transactionType,
BraveWallet.TransactionStatus.Submitted
BraveWallet.TransactionStatus.Submitted,
coinType
)

return (
Expand Down Expand Up @@ -65,6 +67,10 @@ export default {
transactionType: {
options: StorybookTransactionOptions,
control: { type: 'select' }
},
coinType: {
options: StorybookCoinTypeOptions,
control: { type: 'select' }
}
}
}
11 changes: 11 additions & 0 deletions components/brave_wallet_ui/constants/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1100,6 +1100,17 @@ export const StorybookTransactionOptions: StorybookTransactionTypes[] = [
'Bridge',
'Approve'
]

export type StorybookCoinTypes = 'ETH' | 'SOL' | 'BTC' | 'ZEC' | 'FIL'
export const StorybookCoinTypeOptions: StorybookCoinTypes[] = [
'ETH',
'SOL',
'BTC',
'ZEC',
'FIL'
]

export type StorybookTransactionArgs = {
transactionType: StorybookTransactionTypes
coinType: StorybookCoinTypes
}
5 changes: 5 additions & 0 deletions components/brave_wallet_ui/stories/locale.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1235,6 +1235,11 @@ provideStrings({
braveWalletCancelTransactionDescription:
'A new transaction will be created to cancel your existing transaction.',
braveWalletPendingTransactions: '$1 more transactions pending.',
braveWalletSwapping: 'Swapping',
braveWalletBridging: 'Bridging',
braveWalletSwappingOrBridgingOnNetwork: '$1$5$2 on $3$6$4',
braveWalletErrorAttemptingToTransactOnNetwork:
'There was an error attempting to $1$5$2 on $3$6$4',
// Submitted
braveWalletTransactionSubmittedTitle: 'Transaction submitted',
braveWalletTransactionSignedTitle: 'Transaction signed',
Expand Down
59 changes: 49 additions & 10 deletions components/brave_wallet_ui/stories/mock-data/mock-transaction-info.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import {
BraveWallet,
SerializableTransactionInfo,
StorybookCoinTypes,
StorybookTransactionTypes
} from '../../constants/types'
import { deserializeTransaction } from '../../utils/model-serialization-utils'
Expand Down Expand Up @@ -478,26 +479,57 @@ export const createMockTransactionInfo = (arg: {

const getMockTransactionType = (
isSwapOrBridge: boolean,
transactionType: StorybookTransactionTypes
transactionType: StorybookTransactionTypes,
coinType: BraveWallet.CoinType
) => {
if (isSwapOrBridge && coinType === BraveWallet.CoinType.SOL) {
return BraveWallet.TransactionType.SolanaSwap
}
if (isSwapOrBridge) {
return BraveWallet.TransactionType.ETHSwap
}
if (transactionType === 'Approve') {
return BraveWallet.TransactionType.ERC20Approve
}
if (coinType === BraveWallet.CoinType.SOL) {
return BraveWallet.TransactionType.SolanaSystemTransfer
}
return BraveWallet.TransactionType.ETHSend
}

export const getPostConfirmationStatusMockTransaction = (
transactionType: StorybookTransactionTypes,
transactionStatus: BraveWallet.TransactionStatus
transactionStatus: BraveWallet.TransactionStatus,
transactionCoinType: StorybookCoinTypes
) => {
const isSwapOrBridge =
transactionType === 'Swap' || transactionType === 'Bridge'

const coin =
transactionCoinType === 'BTC'
? BraveWallet.CoinType.BTC
: transactionCoinType === 'FIL'
? BraveWallet.CoinType.FIL
: transactionCoinType === 'SOL'
? BraveWallet.CoinType.SOL
: transactionCoinType === 'ZEC'
? BraveWallet.CoinType.ZEC
: BraveWallet.CoinType.ETH

const chain =
transactionCoinType === 'BTC'
? BraveWallet.BITCOIN_MAINNET
: transactionCoinType === 'FIL'
? BraveWallet.FILECOIN_MAINNET
: transactionCoinType === 'SOL'
? BraveWallet.SOLANA_MAINNET
: transactionCoinType === 'ZEC'
? BraveWallet.Z_CASH_MAINNET
: BraveWallet.MAINNET_CHAIN_ID

return {
...mockTransactionInfo,
chainId: chain,
txArgs: [
BraveWallet.TransactionType.ERC20Approve
? LiFiExchangeProxy
Expand All @@ -506,16 +538,23 @@ export const getPostConfirmationStatusMockTransaction = (
],
txDataUnion: {
...mockTransactionInfo.txDataUnion,
ethTxData1559: {
...mockTransactionInfo.txDataUnion.ethTxData1559,
baseData: {
...mockTransactionInfo.txDataUnion.ethTxData1559?.baseData,
to: mockBasicAttentionToken.contractAddress
}
}
ethTxData1559:
coin === BraveWallet.CoinType.ETH
? {
...mockTransactionInfo.txDataUnion.ethTxData1559,
baseData: {
...mockTransactionInfo.txDataUnion.ethTxData1559?.baseData,
to: mockBasicAttentionToken.contractAddress
}
}
: undefined,
solanaTxData:
coin === BraveWallet.CoinType.SOL
? mockSolanaTransactionInfo.txDataUnion.solanaTxData
: undefined
},
txStatus: transactionStatus,
txType: getMockTransactionType(isSwapOrBridge, transactionType),
txType: getMockTransactionType(isSwapOrBridge, transactionType, coin),
swapInfo: isSwapOrBridge
? ({
fromCoin: BraveWallet.CoinType.ETH,
Expand Down
4 changes: 4 additions & 0 deletions components/resources/wallet_strings.grdp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -700,6 +700,10 @@
<message name="IDS_BRAVE_WALLET_ERROR_ATTEMPTING_TO_TRANSACT" desc="Transaction intent bridging amount to network label">There was an error attempting to <ph name="SEND_SWAP_OR_BRIDGE"><ex>Bridge</ex>$7</ph> <ph name="AMOUNT_BEFORE">$1</ph><ph name="AMOUNT"><ex>20 ETH</ex>$5</ph><ph name="AMOUNT_AFTER">$2</ph> to <ph name="VALUE_BEFORE">$3</ph><ph name="VALUE"><ex>Polygon Mainnet</ex>$6</ph><ph name="VALUE_AFTER">$4</ph></message>
<message name="IDS_BRAVE_WALLET_APPROVING_AMOUNT_ON_EXCHANGE" desc="Transaction intent bridging amount to network label">Approving <ph name="AMOUNT_BEFORE">$1</ph><ph name="AMOUNT"><ex>20 ETH</ex>$5</ph><ph name="AMOUNT_AFTER">$2</ph> to <ph name="EXCHANGE_BEFORE">$3</ph><ph name="EXCHANGE"><ex>Li.Fi Excahnge</ex>$6</ph><ph name="EXCHANGE_AFTER">$4</ph></message>
<message name="IDS_BRAVE_WALLET_CANCEL_TRANSACTION_DESCRIPTION" desc="Cancel transaction panel description">A new transaction will be created to cancel your existing transaction.</message>
<message name="IDS_BRAVE_WALLET_SWAPPING" desc="Transaction intent Swapping label">Swapping</message>
<message name="IDS_BRAVE_WALLET_BRIDGING" desc="Transaction intent Bridging label">Bridging</message>
<message name="IDS_BRAVE_WALLET_SWAPPING_OR_BRIDGING_ON_NETWORK" desc="Transaction intent Swapping or Bridging on network description"><ph name="SWAPPING_OR_BRIDGING_BEFORE">$1</ph><ph name="SWAPPING_OR_BRIDGING"><ex>Swapping</ex>$5</ph><ph name="SWAPPING_OR_BRIDGING_AFTER">$2</ph> on <ph name="NETWORK_BEFORE">$3</ph><ph name="NETWORK"><ex>Solana Mainnet Beta</ex>$6</ph><ph name="NETWORK_AFTER">$4</ph></message>
<message name="IDS_BRAVE_WALLET_ERROR_ATTEMPTING_TO_TRANSACT_ON_NETWORK" desc="Transaction intent error attempting to Swap or Bride on network description">There was an error attempting to <ph name="SWAP_OR_BRIDGE_BEFORE">$1</ph><ph name="SWAP_OR_BRIDGE"><ex>swap</ex>$5</ph><ph name="SWAP_OR_BRIDGE_AFTER">$2</ph> on <ph name="NETWORK_BEFORE">$3</ph><ph name="NETWORK"><ex>Solana Mainnet Beta</ex>$6</ph><ph name="NETWORK_AFTER">$4</ph></message>
<message name="IDS_BRAVE_WALLET_PENDING_TRANSACTIONS" desc="Transaction complete panel, amount of transactions still pending.">
{PENDING_TRANSACTIONS, plural,
=1 {{PENDING_TRANSACTIONS} more transaction pending.}
Expand Down

0 comments on commit fe26de8

Please sign in to comment.