diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index ebc6414f1367..fc61d663a94d 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -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", diff --git a/components/brave_wallet_ui/components/extension/post-confirmation/common/transaction_intent.tsx b/components/brave_wallet_ui/components/extension/post-confirmation/common/transaction_intent.tsx index 961f70108a12..7bcb6610fc66 100644 --- a/components/brave_wallet_ui/components/extension/post-confirmation/common/transaction_intent.tsx +++ b/components/brave_wallet_ui/components/extension/post-confirmation/common/transaction_intent.tsx @@ -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) @@ -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 } @@ -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 } @@ -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' } @@ -249,7 +279,8 @@ export const TransactionIntent = (props: Props) => { transactionConfirmed, isBridge, isSwap, - isERC20Approval + isERC20Approval, + isSOLSwapOrBridge ]) const descriptionString = getLocale(descriptionLocale) diff --git a/components/brave_wallet_ui/components/extension/post-confirmation/complete/complete.stories.tsx b/components/brave_wallet_ui/components/extension/post-confirmation/complete/complete.stories.tsx index 68cad02df89e..73d3e35c43d7 100644 --- a/components/brave_wallet_ui/components/extension/post-confirmation/complete/complete.stories.tsx +++ b/components/brave_wallet_ui/components/extension/post-confirmation/complete/complete.stories.tsx @@ -7,6 +7,7 @@ import * as React from 'react' // Types import { BraveWallet, + StorybookCoinTypeOptions, StorybookTransactionArgs, StorybookTransactionOptions } from '../../../../constants/types' @@ -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 ( @@ -62,6 +64,10 @@ export default { transactionType: { options: StorybookTransactionOptions, control: { type: 'select' } + }, + coinType: { + options: StorybookCoinTypeOptions, + control: { type: 'select' } } } } diff --git a/components/brave_wallet_ui/components/extension/post-confirmation/failed_or_canceled/failed_or_canceled.stories.tsx b/components/brave_wallet_ui/components/extension/post-confirmation/failed_or_canceled/failed_or_canceled.stories.tsx index 10e030e052e9..0be1d3cf515a 100644 --- a/components/brave_wallet_ui/components/extension/post-confirmation/failed_or_canceled/failed_or_canceled.stories.tsx +++ b/components/brave_wallet_ui/components/extension/post-confirmation/failed_or_canceled/failed_or_canceled.stories.tsx @@ -7,6 +7,7 @@ import * as React from 'react' // Types import { BraveWallet, + StorybookCoinTypeOptions, StorybookTransactionArgs, StorybookTransactionOptions } from '../../../../constants/types' @@ -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 ( @@ -61,6 +63,10 @@ export default { transactionType: { options: StorybookTransactionOptions, control: { type: 'select' } + }, + coinType: { + options: StorybookCoinTypeOptions, + control: { type: 'select' } } } } diff --git a/components/brave_wallet_ui/components/extension/post-confirmation/submitted_or_signed/submitted_or_signed.stories.tsx b/components/brave_wallet_ui/components/extension/post-confirmation/submitted_or_signed/submitted_or_signed.stories.tsx index 3b4826a6a4db..9b9db7f86d0d 100644 --- a/components/brave_wallet_ui/components/extension/post-confirmation/submitted_or_signed/submitted_or_signed.stories.tsx +++ b/components/brave_wallet_ui/components/extension/post-confirmation/submitted_or_signed/submitted_or_signed.stories.tsx @@ -7,6 +7,7 @@ import * as React from 'react' // Types import { BraveWallet, + StorybookCoinTypeOptions, StorybookTransactionArgs, StorybookTransactionOptions } from '../../../../constants/types' @@ -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 ( @@ -65,6 +67,10 @@ export default { transactionType: { options: StorybookTransactionOptions, control: { type: 'select' } + }, + coinType: { + options: StorybookCoinTypeOptions, + control: { type: 'select' } } } } diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts index a833fd07604d..b739e7f28dca 100644 --- a/components/brave_wallet_ui/constants/types.ts +++ b/components/brave_wallet_ui/constants/types.ts @@ -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 } diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index ae15f77b0bb3..d8f130010405 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -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', diff --git a/components/brave_wallet_ui/stories/mock-data/mock-transaction-info.ts b/components/brave_wallet_ui/stories/mock-data/mock-transaction-info.ts index efab049bceb9..7e8d46deedc1 100644 --- a/components/brave_wallet_ui/stories/mock-data/mock-transaction-info.ts +++ b/components/brave_wallet_ui/stories/mock-data/mock-transaction-info.ts @@ -7,6 +7,7 @@ import { BraveWallet, SerializableTransactionInfo, + StorybookCoinTypes, StorybookTransactionTypes } from '../../constants/types' import { deserializeTransaction } from '../../utils/model-serialization-utils' @@ -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 @@ -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, diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp index b9149c96314d..ebc2df907784 100644 --- a/components/resources/wallet_strings.grdp +++ b/components/resources/wallet_strings.grdp @@ -700,6 +700,10 @@ There was an error attempting to Bridge$7 $120 ETH$5$2 to $3Polygon Mainnet$6$4 Approving $120 ETH$5$2 to $3Li.Fi Excahnge$6$4 A new transaction will be created to cancel your existing transaction. + Swapping + Bridging + $1Swapping$5$2 on $3Solana Mainnet Beta$6$4 + There was an error attempting to $1swap$5$2 on $3Solana Mainnet Beta$6$4 {PENDING_TRANSACTIONS, plural, =1 {{PENDING_TRANSACTIONS} more transaction pending.}