Merge pull request #22973 from brave/fix-wallet-make-send-and-swap-ac…

…tion-views-in-panel

fix(wallet): Make Send and Swap Action Views in Panel

components/brave_wallet_ui/components/desktop/card-headers/panel-action-header.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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 { useHistory } from 'react-router-dom'
+
+// Types
+import { WalletRoutes } from '../../../constants/types'
+
+// Utils
+import { openWalletRouteTab } from '../../../utils/routes-utils'
+
+// Styled Components
+import {
+  Button,
+  ButtonIcon,
+  LeftRightContainer
+} from './shared-panel-headers.style'
+import { Row } from '../../shared/style'
+import { HeaderTitle } from './shared-card-headers.style'
+
+interface Props {
+  title: string
+  expandRoute: WalletRoutes
+}
+
+export const PanelActionHeader = (props: Props) => {
+  const { title, expandRoute } = props
+
+  // Routing
+  const history = useHistory()
+
+  // Methods
+  const onClose = () => {
+    if (history.length > 1) {
+      history.goBack()
+      return
+    }
+    history.push(WalletRoutes.PortfolioAssets)
+  }
+
+  return (
+    <Row
+      padding='18px 16px'
+      justifyContent='space-between'
+    >
+      <LeftRightContainer
+        width='unset'
+        justifyContent='flex-start'
+      >
+        <Button onClick={() => openWalletRouteTab(expandRoute)}>
+          <ButtonIcon name='expand' />
+        </Button>
+      </LeftRightContainer>
+      <HeaderTitle isPanel={true}>{title}</HeaderTitle>
+      <LeftRightContainer
+        width='unset'
+        justifyContent='flex-end'
+      >
+        <Button onClick={onClose}>
+          <ButtonIcon name='close' />
+        </Button>
+      </LeftRightContainer>
+    </Row>
+  )
+}

components/brave_wallet_ui/page/screens/send/send_screen/send_screen.tsx

@@ -79,8 +79,8 @@ import {
 import { ComposerControls } from '../../composer_ui/composer_controls/composer_controls'
 import { FromAsset } from '../../composer_ui/from_asset/from_asset'
 import {
-  DefaultPanelHeader //
-} from '../../../../components/desktop/card-headers/default-panel-header'
+  PanelActionHeader //
+} from '../../../../components/desktop/card-headers/panel-action-header'
 import {
   OrdinalsWarningMessage //
 } from '../components/ordinals-warning-message/ordinals-warning-message'
@@ -468,13 +468,13 @@ export const SendScreen = React.memo((props: Props) => {
       <WalletPageWrapper
         wrapContentInBox={true}
         noCardPadding={true}
-        hideNav={isAndroid}
+        hideNav={isAndroid || isPanel}
         hideHeader={isAndroid}
         noMinCardHeight={true}
         hideDivider={true}
         cardHeader={
           isPanel ? (
-            <DefaultPanelHeader
+            <PanelActionHeader
               title={getLocale('braveWalletSend')}
               expandRoute={WalletRoutes.Send}
             />

components/brave_wallet_ui/page/screens/swap/swap.tsx

@@ -30,7 +30,7 @@ import {
 import { PrivacyModal } from './components/swap/privacy-modal/privacy-modal'
 import { ComposerControls } from '../composer_ui/composer_controls/composer_controls'
 import WalletPageWrapper from '../../../components/desktop/wallet-page-wrapper/wallet-page-wrapper'
-import { DefaultPanelHeader } from '../../../components/desktop/card-headers/default-panel-header'
+import { PanelActionHeader } from '../../../components/desktop/card-headers/panel-action-header'
 
 // Styled Components
 import { LeoSquaredButton } from '../../../components/shared/style'
@@ -116,9 +116,10 @@ export const Swap = () => {
         noCardPadding={true}
         noMinCardHeight={true}
         hideDivider={true}
+        hideNav={isPanel}
         cardHeader={
           isPanel ? (
-            <DefaultPanelHeader
+            <PanelActionHeader
               title={getLocale('braveWalletSwap')}
               expandRoute={WalletRoutes.Swap}
             />