Fixed Wallet UI bugs due to Translated Strings (uplift to 1.33.x)

components/brave_wallet_ui/components/desktop/lock-screen/style.ts

@@ -20,6 +20,7 @@ export const Title = styled.span`
   color: ${(p) => p.theme.color.text01};
   letter-spacing: 0.02em;
   margin-bottom: 10px;
+  text-align: center;
 `
 
 export const PageIcon = styled.div`

components/brave_wallet_ui/components/extension/buttons/nav-button/index.tsx

@@ -22,13 +22,19 @@ export interface Props {
   text: string | undefined
   onSubmit: () => void
   disabled?: boolean
+  needsTopMargin?: boolean
 }
 
 export default class NavButton extends React.PureComponent<Props, {}> {
   render () {
-    const { onSubmit, text, buttonType, disabled } = this.props
+    const { onSubmit, text, buttonType, disabled, needsTopMargin } = this.props
     return (
-      <StyledButton disabled={disabled} buttonType={buttonType} onClick={onSubmit}>
+      <StyledButton
+        disabled={disabled}
+        buttonType={buttonType}
+        onClick={onSubmit}
+        addTopMargin={needsTopMargin && text ? text.length > 20 : false}
+      >
         {buttonType === 'reject' &&
           <RejectIcon />
         }

components/brave_wallet_ui/components/extension/buttons/nav-button/style.ts

@@ -7,16 +7,18 @@ import { WalletButton } from '../../../shared/style'
 interface StyleProps {
   buttonType: PanelButtonTypes
   disabled?: boolean
+  addTopMargin?: boolean
 }
 
-export const StyledButton = styled(WalletButton) <StyleProps>`
+export const StyledButton = styled(WalletButton) <Partial<StyleProps>>`
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: ${(p) => p.disabled ? 'default' : 'pointer'};
   border-radius: 40px;
   padding: 10px 22px;
   outline: none;
+  margin-top: ${(p) => p.addTopMargin ? '8px' : '0px'};
   background-color: ${(p) =>
     p.disabled ? p.theme.color.disabled
       : p.buttonType === 'primary' ||

components/brave_wallet_ui/components/extension/confirm-transaction-panel/index.tsx

@@ -18,6 +18,7 @@ import { reduceAddress } from '../../../utils/reduce-address'
 import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 import { reduceAccountDisplayName } from '../../../utils/reduce-account-name'
 import { formatBalance, toWeiHex } from '../../../utils/format-balances'
+import { formatWithCommasAndDecimals } from '../../../utils/format-prices'
 import { getLocale } from '../../../../common/locale'
 import { usePricing, useTransactionParser } from '../../../common/hooks'
 import { withPlaceholderIcon } from '../../shared'
@@ -56,7 +57,9 @@ import {
   QueueStepButton,
   TopColumn,
   AssetIcon,
-  ErrorText
+  ErrorText,
+  SectionColumn,
+  SingleRow
 } from './style'
 
 import {
@@ -300,12 +303,12 @@ function ConfirmTransactionPanel (props: Props) {
             {transactionInfo.txType === TransactionType.ERC721TransferFrom ||
               transactionInfo.txType === TransactionType.ERC721SafeTransferFrom
               ? transactionDetails.erc721ERCToken?.name + ' ' + transactionDetails.erc721TokenId
-              : transactionDetails.value + ' ' + transactionDetails.symbol
+              : formatWithCommasAndDecimals(transactionDetails.value) + ' ' + transactionDetails.symbol
             }
           </TransactionAmmountBig>
           {transactionInfo.txType !== TransactionType.ERC721TransferFrom &&
             transactionInfo.txType !== TransactionType.ERC721SafeTransferFrom &&
-            <TransactionFiatAmountBig>${transactionDetails.fiatValue}</TransactionFiatAmountBig>
+            <TransactionFiatAmountBig>${formatWithCommasAndDecimals(transactionDetails.fiatValue)}</TransactionFiatAmountBig>
           }
         </>
       )}
@@ -330,13 +333,13 @@ function ConfirmTransactionPanel (props: Props) {
                   <EditButton onClick={onToggleEditGas}>{getLocale('braveWalletAllowSpendEditButton')}</EditButton>
                   <SectionRow>
                     <TransactionTitle>{getLocale('braveWalletAllowSpendTransactionFee')}</TransactionTitle>
-                    <TransactionTypeText>{transactionDetails.gasFee} {selectedNetwork.symbol}</TransactionTypeText>
+                    <TransactionTypeText>{formatWithCommasAndDecimals(transactionDetails.gasFee)} {selectedNetwork.symbol}</TransactionTypeText>
                   </SectionRow>
                   <TransactionText
                     hasError={transactionDetails.insufficientFundsError}
                   >
                     {transactionDetails.insufficientFundsError ? `${getLocale('braveWalletSwapInsufficientBalance')} ` : ''}
-                    ${transactionDetails.gasFeeFiat}
+                    ${formatWithCommasAndDecimals(transactionDetails.gasFeeFiat)}
                   </TransactionText>
                 </TopColumn>
                 <Divider />
@@ -363,24 +366,32 @@ function ConfirmTransactionPanel (props: Props) {
                   <TransactionTitle>{getLocale('braveWalletConfirmTransactionGasFee')}</TransactionTitle>
                   <SectionRightColumn>
                     <EditButton onClick={onToggleEditGas}>{getLocale('braveWalletAllowSpendEditButton')}</EditButton>
-                    <TransactionTypeText>{transactionDetails.gasFee} {selectedNetwork.symbol}</TransactionTypeText>
-                    <TransactionText>${transactionDetails.gasFeeFiat}</TransactionText>
+                    <TransactionTypeText>{formatWithCommasAndDecimals(transactionDetails.gasFee)} {selectedNetwork.symbol}</TransactionTypeText>
+                    <TransactionText>${formatWithCommasAndDecimals(transactionDetails.gasFeeFiat)}</TransactionText>
                   </SectionRightColumn>
                 </SectionRow>
                 <Divider />
-                <SectionRow>
-                  <TransactionTitle>{getLocale('braveWalletConfirmTransactionTotal')}</TransactionTitle>
-                  <SectionRightColumn>
-                    <TransactionText>{getLocale('braveWalletConfirmTransactionAmountGas')}</TransactionText>
-                    <GrandTotalText>{transactionDetails.value} {transactionDetails.symbol} + {transactionDetails.gasFee} {selectedNetwork.symbol}</GrandTotalText>
-                    <TransactionText
-                      hasError={transactionDetails.insufficientFundsError}
-                    >
-                      {transactionDetails.insufficientFundsError ? `${getLocale('braveWalletSwapInsufficientBalance')} ` : ''}
-                      ${transactionDetails.fiatTotal}
-                    </TransactionText>
-                  </SectionRightColumn>
-                </SectionRow>
+                <SectionColumn>
+                  <TransactionText>{getLocale('braveWalletConfirmTransactionAmountGas')}</TransactionText>
+                  <SingleRow>
+                    <TransactionTitle>{getLocale('braveWalletConfirmTransactionTotal')}</TransactionTitle>
+                    <GrandTotalText>
+                      {(transactionInfo.txType !== TransactionType.ERC721SafeTransferFrom &&
+                        transactionInfo.txType !== TransactionType.ERC721TransferFrom)
+                        ? formatWithCommasAndDecimals(transactionDetails.value)
+                        : transactionDetails.value
+                      } {transactionDetails.symbol} + {transactionDetails.gasFee} {selectedNetwork.symbol}</GrandTotalText>
+                  </SingleRow>
+                  <TransactionText
+                    hasError={transactionDetails.insufficientFundsError}
+                  >
+                    {transactionDetails.insufficientFundsError
+                      ? `${getLocale('braveWalletSwapInsufficientBalance')} `
+                      : ''}
+                    ${formatWithCommasAndDecimals(transactionDetails.fiatTotal)}
+                  </TransactionText>
+
+                </SectionColumn>
               </>
             }
           </>

components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts

@@ -172,6 +172,23 @@ export const SectionRow = styled.div`
   height: inherit;
 `
 
+export const SectionColumn = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: inherit;
+`
+
+export const SingleRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+`
+
 export const SectionRightColumn = styled.div`
   display: flex;
   align-items: flex-end;

components/brave_wallet_ui/components/extension/edit-gas/index.tsx

@@ -287,6 +287,7 @@ const EditGas = (props: Props) => {
         <ButtonRow>
           <NavButton
             buttonType='secondary'
+            needsTopMargin={true}
             text={!isEIP1559Transaction ? getLocale('braveWalletBackupButtonCancel')
               : maxPriorityPanel === MaxPriorityPanels.setCustom ? getLocale('braveWalletEditGasSetSuggested')
                 : getLocale('braveWalletEditGasSetCustom')

components/brave_wallet_ui/components/extension/edit-gas/style.ts

@@ -72,6 +72,7 @@ export const ButtonRow = styled.div`
   justify-content: center;
   flex-direction: row;
   width: 100%;
+  flex-wrap: wrap-reverse;
 `
 
 export const Description = styled.span`

components/brave_wallet_ui/components/extension/lock-panel/style.ts

@@ -21,6 +21,7 @@ export const Title = styled.span`
   color: ${(p) => p.theme.color.text01};
   letter-spacing: 0.04em;
   margin-bottom: 12px;
+  text-align: center;
 `
 
 export const PanelIcon = styled.div`

components/brave_wallet_ui/panel/style.ts

@@ -9,7 +9,7 @@ export const PanelWrapper = styled.div<StyleProps>`
   align-items: center;
   justify-content: center;
   width: 320px;
-  height: ${(p) => p.isLonger ? '500px' : '400px'};
+  height: ${(p) => p.isLonger ? '540px' : '400px'};
 `
 
 export const SendWrapper = styled.div`

components/brave_wallet_ui/utils/format-prices.ts

@@ -23,6 +23,6 @@ export const formatWithCommasAndDecimals = (value: string) => {
   }
 
   const calculatedDecimalPlace = -Math.floor(Math.log(valueToNumber) / Math.log(10) + 1)
-  const added = Number(calculatedDecimalPlace) + 4
+  const added = Number(calculatedDecimalPlace) + 3
   return addCommas(valueToNumber.toFixed(added))
 }