Merge pull request #21377 from brave/feat-wallet-update-swap-settings…

…-modal feat(wallet): Update Swap Setting Modal
brave · Dec 15, 2023 · c5e3ab9 · c5e3ab9
2 parents c7728d3 + de6fbf0
commit c5e3ab9
Show file tree

Hide file tree

Showing 18 changed files with 381 additions and 696 deletions.
diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h
@@ -209,8 +209,12 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletChooseAsset", IDS_BRAVE_WALLET_CHOOSE_ASSET},
     {"braveWalletSlippageToleranceWarning",
      IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_WARNING},
+    {"braveWalletSlippageToleranceExplanation",
+     IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_EXPLANATION},
     {"braveWalletSlippageToleranceTitle",
      IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_TITLE},
+    {"braveWalletSlippageToleranceDescription",
+     IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_DESCRIPTION},
     {"braveWalletExpiresInTitle", IDS_BRAVE_WALLET_EXPIRES_IN_TITLE},
     {"braveWalletSendPlaceholder", IDS_BRAVE_WALLET_SEND_PLACEHOLDER},
     {"braveWalletSendNoURLPlaceholder",
@@ -1230,7 +1234,6 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveSwapAverage", IDS_BRAVE_SWAP_AVERAGE},
     {"braveSwapFast", IDS_BRAVE_SWAP_FAST},
     {"braveSwapGwei", IDS_BRAVE_SWAP_GWEI},
-    {"braveSwapSettings", IDS_BRAVE_SWAP_SETTINGS},
     {"braveSwapSlippageTolerance", IDS_BRAVE_SWAP_SLIPPAGE_TOLERANCE},
     {"braveSwapExchanges", IDS_BRAVE_SWAP_EXCHANGES},
     {"braveSwapDirectRouteTitle", IDS_BRAVE_SWAP_DIRECT_ROUTE_TITLE},

diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
@@ -1039,7 +1039,6 @@ export const ZCashNetworkLocaleMapping = {
 export type GasFeeOption = {
   id: string
   name: string
-  icon: string
 }
 
 export type GasEstimate = {

diff --git a/components/brave_wallet_ui/options/gas-fee-options.ts b/components/brave_wallet_ui/options/gas-fee-options.ts
@@ -9,17 +9,14 @@ import { GasFeeOption } from '../constants/types'
 export const gasFeeOptions: GasFeeOption[] = [
   {
     id: 'slow',
-    name: 'braveSwapSlow',
-    icon: 'send'
+    name: 'braveSwapSlow'
   },
   {
     id: 'average',
-    name: 'braveSwapAverage',
-    icon: 'network-speed-average'
+    name: 'braveSwapAverage'
   },
   {
     id: 'fast',
-    name: 'braveSwapFast',
-    icon: 'rocket'
+    name: 'braveSwapFast'
   }
 ]
diff --git a/...age/screens/composer_ui/advanced_settings_modal.style.ts/advanced_settings_modal.style.ts b/...age/screens/composer_ui/advanced_settings_modal.style.ts/advanced_settings_modal.style.ts
@@ -0,0 +1,109 @@
+// Copyright (c) 2023 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 styled from 'styled-components'
+import * as leo from '@brave/leo/tokens/css'
+import Button from '@brave/leo/react/button'
+import Radio from '@brave/leo/react/radioButton'
+import Icon from '@brave/leo/react/icon'
+
+// Shared Styles
+import { Column, Row, Text } from '../../../../components/shared/style'
+import {
+  layoutSmallWidth //
+} from '../../../../components/desktop/wallet-page-wrapper/wallet-page-wrapper.style'
+
+export const SlippageButton = styled(Button)<{
+  isSelected: boolean
+}>`
+  --leo-button-color: ${(p) =>
+    p.isSelected ? leo.color.button.background : leo.color.text.secondary};
+  margin-right: 18px;
+`
+
+export const SectionWrapper = styled(Column)`
+  padding: 24px 40px;
+  @media screen and (max-width: ${layoutSmallWidth}px) {
+    padding: 16px;
+  }
+`
+
+export const InputWrapper = styled(Row)`
+  display: flex;
+  background-color: ${leo.color.container.highlight};
+  border: 1px solid ${leo.color.container.highlight};
+  border-radius: 8px;
+  flex-direction: row;
+  padding: 10px 12px;
+  justify-content: space-between;
+  box-sizing: border-box;
+`
+
+export const CustomSlippageInput = styled.input`
+  height: 100%;
+  width: 100%;
+  border: none;
+  background: none;
+  background-color: none;
+  color: ${leo.color.text.primary};
+  text-align: right;
+  font-family: 'Poppins';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+  ::placeholder {
+    color: ${leo.color.text.tertiary};
+  }
+  :focus {
+    outline: none;
+  }
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  ::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`
+
+export const PercentText = styled(Text)`
+  color: ${leo.color.text.tertiary};
+  line-height: 22px;
+`
+
+export const RadioButton = styled(Radio)`
+  width: 100%;
+  margin-bottom: 16px;
+`
+
+export const DarkText = styled(Text)`
+  line-height: 22px;
+  color: ${leo.color.text.primary};
+`
+
+export const LightText = styled(DarkText)`
+  color: ${leo.color.text.tertiary};
+`
+
+export const ButtonRow = styled(Row)`
+  padding: 0px 40px 24px 40px;
+  @media screen and (max-width: ${layoutSmallWidth}px) {
+    padding: 0px 16px 16px 16px;
+  }
+`
+
+export const InfoIcon = styled(Icon).attrs({
+  name: 'info-outline'
+})`
+  --leo-icon-size: 20px;
+  color: ${leo.color.icon.default};
+`
+
+export const TooltipContent = styled.div`
+  max-width: 280px;
+`