Skip to content

Commit

Permalink
feat(wallet): Enable Bridging in UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Douglashdaniel
Douglashdaniel committed Jun 3, 2024
1 parent bcca447 commit 5412f4c
Show file tree
Hide file tree
Showing 33 changed files with 1,034 additions and 623 deletions.
14 changes: 11 additions & 3 deletions components/brave_wallet/browser/brave_wallet_constants.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,17 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
{"braveWalletOwned", IDS_BRAVE_WALLET_OWNED},
{"braveWalletNotOwned", IDS_BRAVE_WALLET_NOT_OWNED},
{"braveWalletAmount24H", IDS_BRAVE_WALLET_AMOUNT_24H},
{"braveWalletChooseAssetToBridge", IDS_BRAVE_WALLET_CHOOSE_ASSET_TO_BRIDGE},
{"braveWalletBridgingVia", IDS_BRAVE_WALLET_BRIDGING_VIA},
{"braveWalletSwappingVia", IDS_BRAVE_WALLET_SWAPPING_VIA},
{"braveWalletReviewSwap", IDS_BRAVE_WALLET_REVIEW_SWAP},
{"braveWalletEstFees", IDS_BRAVE_WALLET_EST_FEES},
{"braveWalletEstTime", IDS_BRAVE_WALLET_EST_TIME},
{"braveWalletExchangeRate", IDS_BRAVE_WALLET_EXCHANGE_RATE},
{"braveWalletExchangeFor", IDS_BRAVE_WALLET_EXCHANGE_FOR},
{"braveWalletProviderApi", IDS_BRAVE_WALLET_PROVIDER_API},
{"braveWalletRecipient", IDS_BRAVE_WALLET_RECIPIENT},
{"braveWalletReviewBridge", IDS_BRAVE_WALLET_REVIEW_BRIDGE},
{"braveWalletSlippageToleranceWarning",
IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_WARNING},
{"braveWalletSlippageToleranceExplanation",
Expand Down Expand Up @@ -1291,7 +1302,6 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {

// Brave Swap
{"braveSwap", IDS_BRAVE_SWAP},
{"braveSwapReviewOrder", IDS_BRAVE_SWAP_REVIEW_ORDER},
{"braveSwapApproveToken", IDS_BRAVE_SWAP_APPROVE_TOKEN},
{"braveSwapInsufficientBalance", IDS_BRAVE_SWAP_INSUFFICIENT_BALANCE},
{"braveSwapInsufficientLiquidity", IDS_BRAVE_SWAP_INSUFFICIENT_LIQUIDITY},
Expand All @@ -1311,14 +1321,12 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
IDS_BRAVE_SWAP_HIDE_TOKENS_WITH_ZERO_BALANCES},
{"braveSwapSearchToken", IDS_BRAVE_SWAP_SEARCH_TOKEN},
{"braveSwapOption", IDS_BRAVE_SWAP_OPTION},
{"braveSwapRate", IDS_BRAVE_SWAP_RATE},
{"braveSwapPriceImpact", IDS_BRAVE_SWAP_PRICE_IMPACT},
{"braveSwapMinimumReceivedAfterSlippage",
IDS_BRAVE_SWAP_MINIMUM_RECEIVED_AFTER_SLIPPAGE},
{"braveSwapNetworkFee", IDS_BRAVE_SWAP_NETWORK_FEE},
{"braveSwapBraveFee", IDS_BRAVE_SWAP_BRAVE_FEE},
{"braveSwapFree", IDS_BRAVE_SWAP_FREE},
{"braveSwapLiquidityProvider", IDS_BRAVE_SWAP_LIQUIDITY_PROVIDER},
{"braveSwapSwapAndSend", IDS_BRAVE_SWAP_SWAP_AND_SEND},
{"braveSwapNoExtraFees", IDS_BRAVE_SWAP_NO_EXTRA_FEES},
{"braveSwapConfirmAddress", IDS_BRAVE_SWAP_CONFIRM_ADDRESS},
Expand Down
10 changes: 8 additions & 2 deletions components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
makeDepositFundsRoute,
makeFundWalletRoute,
makeSendRoute,
makeSwapRoute
makeSwapOrBridgeRoute
} from '../../../utils/routes-utils'
import { getAssetIdKey } from '../../../utils/asset-utils'

Expand Down Expand Up @@ -115,7 +115,13 @@ export const AssetItemMenu = (props: Props) => {

const onClickSwap = React.useCallback(() => {
if (account) {
history.push(makeSwapRoute({ fromToken: asset, fromAccount: account }))
history.push(
makeSwapOrBridgeRoute({
fromToken: asset,
fromAccount: account,
routeType: 'swap'
})
)
}
}, [account, history, asset])

Expand Down
30 changes: 8 additions & 22 deletions components/brave_wallet_ui/options/nav-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ export const isValidPanelNavigationOption = (
)
}

const BridgeOption: NavOption = {
id: 'bridge',
name: 'braveWalletBridge',
icon: 'web3-bridge',
route: WalletRoutes.Bridge
}

export const BuySendSwapDepositOptions: NavOption[] = [
{
id: 'buy',
Expand All @@ -61,6 +68,7 @@ export const BuySendSwapDepositOptions: NavOption[] = [
icon: 'currency-exchange',
route: WalletRoutes.Swap
},
BridgeOption,
{
id: 'deposit',
name: 'braveWalletDepositCryptoButton',
Expand Down Expand Up @@ -212,25 +220,3 @@ export const AccountDetailsOptions: NavOption[] = [
route: AccountPageTabs.AccountTransactionsSub
}
]

export const SendSwapBridgeOptions: NavOption[] = [
{
id: 'send',
name: 'braveWalletSend',
icon: 'send',
route: WalletRoutes.Send
},
{
id: 'swap',
name: 'braveWalletSwap',
icon: 'currency-exchange',
route: WalletRoutes.Swap
}
// Bridge is not yet implemented
// {
// id: 'bridge',
// name: 'braveWalletBridge',
// icon: 'bridge',
// route: WalletRoutes.Bridge
// }
]
9 changes: 9 additions & 0 deletions components/brave_wallet_ui/page/container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,15 @@ export const Container = () => {
<Swap />
</ProtectedRoute>

<ProtectedRoute
path={WalletRoutes.Bridge}
requirement={!isWalletLocked && !walletNotYetCreated}
redirectRoute={defaultRedirect}
exact={true}
>
<Swap />
</ProtectedRoute>

<ProtectedRoute
path={WalletRoutes.Send}
requirement={!isWalletLocked && !walletNotYetCreated}
Expand Down
44 changes: 2 additions & 42 deletions ...nts/brave_wallet_ui/page/screens/composer_ui/composer_controls/composer_controls.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,40 +25,10 @@ export const Button = styled(WalletButton)`
cursor: pointer;
`

export const ComposerButtonMenu = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: ${leo.color.container.background};
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
position: absolute;
z-index: 10;
top: -23.5px;
`

export const ComposerButton = styled(Button)`
justify-content: flex-start;
font-family: Poppins;
font-size: 13px;
font-style: normal;
font-weight: 600;
line-height: 21px;
color: ${leo.color.text.interactive};
letter-spacing: 0.39px;
padding: 12px 16px;
box-shadow: none;
position: unset;
z-index: unset;
width: 100%;
`

export const FlipButton = styled(Button)`
padding: 10px;
border-radius: 100%;
left: 48px;
left: 24px;
:disabled {
cursor: not-allowed;
}
Expand All @@ -70,22 +40,12 @@ export const FlipButton = styled(Button)`
export const SettingsButton = styled(Button)`
padding: 10px;
border-radius: 100%;
right: 48px;
right: 24px;
@media screen and (max-width: ${layoutSmallWidth}px) {
right: 16px;
}
`

export const CaratIcon = styled(Icon).attrs({
name: 'carat-down'
})<{ isOpen: boolean }>`
--leo-icon-size: 20px;
color: ${leo.color.icon.interactive};
margin-left: 8px;
transition-duration: 0.3s;
transform: ${(p) => (p.isOpen ? 'rotate(180deg)' : 'unset')};
`

export const SettingsIcon = styled(Icon).attrs({
name: 'settings'
})`
Expand Down
57 changes: 1 addition & 56 deletions components/brave_wallet_ui/page/screens/composer_ui/composer_controls/composer_controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,16 @@
// You can obtain one at https://mozilla.org/MPL/2.0/.

import * as React from 'react'
import { useHistory, useLocation } from 'react-router-dom'

// Hooks
import { useOnClickOutside } from '../../../../common/hooks/useOnClickOutside'

// Utils
import { getLocale } from '../../../../../common/locale'

// Types
import { NavOption } from '../../../../constants/types'

// Options
import { SendSwapBridgeOptions } from '../../../../options/nav-options'

// Styled Components
import {
ComposerButton,
ComposerButtonMenu,
FlipButton,
FlipIcon,
SettingsButton,
SettingsIcon,
CaratIcon
SettingsIcon
} from './composer_controls.style'
import { Row } from '../../../../components/shared/style'

Expand All @@ -39,10 +26,6 @@ interface Props {
export const ComposerControls = (props: Props) => {
const { onFlipAssets, onOpenSettings, flipAssetsDisabled } = props

// Routing
const history = useHistory()
const { pathname: walletLocation } = useLocation()

// State
const [showComposerMenu, setShowComposerMenu] = React.useState<boolean>(false)

Expand All @@ -56,31 +39,6 @@ export const ComposerControls = (props: Props) => {
showComposerMenu
)

// Methods
const onChange = (option?: NavOption) => {
if (showComposerMenu && option) {
history.push(option.route)
}
setShowComposerMenu((prev) => !prev)
}

// Computed
const selectedOption = SendSwapBridgeOptions.find((option) =>
walletLocation.includes(option.route)
)

// Moves the selectedOption to the front of the list.
const buttonOptions = showComposerMenu
? [
SendSwapBridgeOptions.find(
(option) => option.id === selectedOption?.id
),
...SendSwapBridgeOptions.filter(
(option) => option.id !== selectedOption?.id
)
]
: [selectedOption]

return (
<Row>
{onFlipAssets && (
Expand All @@ -91,19 +49,6 @@ export const ComposerControls = (props: Props) => {
<FlipIcon />
</FlipButton>
)}
{buttonOptions ? (
<ComposerButtonMenu ref={buttonMenuRef}>
{buttonOptions.map((option, i) => (
<ComposerButton
key={option?.id}
onClick={() => onChange(option)}
>
{getLocale(option?.name ?? '')}
{i === 0 && <CaratIcon isOpen={showComposerMenu} />}
</ComposerButton>
))}
</ComposerButtonMenu>
) : null}
{onOpenSettings && (
<SettingsButton onClick={onOpenSettings}>
<SettingsIcon />
Expand Down
15 changes: 6 additions & 9 deletions components/brave_wallet_ui/page/screens/composer_ui/from_asset/from_asset.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,19 @@ import {
import { Column, Text, Row } from '../../../../components/shared/style'

export const Wrapper = styled(Column)`
padding: 32px 32px 0px 32px;
padding: 24px 24px 0px 24px;
@media screen and (max-width: ${layoutPanelWidth}px) {
padding: 16px 0px 0px 0px;
padding: 16px 16px 0px 16px;
}
`

export const FromText = styled(Text)`
line-height: 26px;
color: ${leo.color.text.tertiary};
export const BalanceText = styled(Text)`
line-height: 22px;
margin-right: 4px;
`

export const BalanceText = styled(Text)`
line-height: 26px;
color: ${leo.color.text.primary};
margin-right: 4px;
export const FromText = styled(BalanceText)`
color: ${leo.color.text.tertiary};
`

export const NetworkText = styled(Text)`
Expand Down

0 comments on commit 5412f4c

Please sign in to comment.