Skip to content

Commit

Permalink
chore: swap refactor (#3731)
Browse files Browse the repository at this point in the history 
Co-authored-by: Juliano Lazzarotto <[email protected]>
  • Loading branch information
@jorbuedo @stackchain
jorbuedo and stackchain authored Jan 27, 2025
1 parent 1e13d28 commit 197b35c
Show file tree
Hide file tree
Showing 207 changed files with 4,582 additions and 22,043 deletions.
28 changes: 0 additions & 28 deletions apps/wallet-mobile/.storybook/storybook.requires.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

232 changes: 100 additions & 132 deletions apps/wallet-mobile/src/WalletNavigator.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
import {BottomTabBar, BottomTabBarProps, createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {useFocusEffect} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import {
milkTokenId,
supportedProviders,
swapApiMaker,
swapManagerMaker,
SwapProvider,
swapStorageMaker,
} from '@yoroi/swap'
import {useTheme} from '@yoroi/theme'
import {Swap} from '@yoroi/types'
import React from 'react'
import {defineMessages, useIntl} from 'react-intl'
import {Keyboard, Platform, StyleSheet, View} from 'react-native'
Expand All @@ -30,10 +21,9 @@ import {SettingsScreenNavigator} from './features/Settings/SettingsScreenNavigat
import {NetworkTag} from './features/Settings/useCases/changeAppSettings/ChangeNetwork/NetworkTag'
import {SetupWalletNavigator} from './features/SetupWallet/SetupWalletNavigator'
import {GovernanceNavigator} from './features/Staking/Governance/GovernanceNavigator'
import {SwapFormProvider} from './features/Swap/common/SwapFormProvider'
import {SwapProvider} from './features/Swap/common/SwapProvider'
import {ToggleAnalyticsSettingsNavigator} from './features/ToggleAnalyticsSettings'
import {TxHistoryNavigator} from './features/Transactions/TxHistoryNavigator'
import {useSelectedWallet} from './features/WalletManager/common/hooks/useSelectedWallet'
import {SelectWalletFromList} from './features/WalletManager/useCases/SelectWalletFromListScreen/SelectWalletFromListScreen'
import {useMetrics} from './kernel/metrics/metricsManager'
import {
Expand All @@ -43,7 +33,6 @@ import {
WalletTabRoutes,
} from './kernel/navigation'
import {DashboardNavigator} from './legacy/Dashboard/DashboardNavigator'
import {useFrontendFees, useStakingKey} from './yoroi-wallets/hooks'

const Tab = createBottomTabNavigator<WalletTabRoutes>()

Expand All @@ -52,8 +41,6 @@ const TabBarWithHiddenContent = (props: BottomTabBarProps) => {
return shouldShow ? <BottomTabBar {...props} /> : null
}

const aggregator: Swap.Aggregator = 'muesliswap'

const WalletTabNavigator = () => {
const strings = useStrings()
const {colors, styles} = useStyles()
Expand Down Expand Up @@ -83,127 +70,108 @@ const WalletTabNavigator = () => {
}, [track]),
)

// swap
const {wallet} = useSelectedWallet()
const {frontendFees} = useFrontendFees(wallet)
const stakingKey = useStakingKey(wallet)
const swapManager = React.useMemo(() => {
const aggregatorTokenId = wallet.isMainnet ? milkTokenId.mainnet : milkTokenId.preprod
const swapStorage = swapStorageMaker()
const swapApi = swapApiMaker({
isMainnet: wallet.isMainnet,
stakingKey,
primaryTokenInfo: wallet.portfolioPrimaryTokenInfo,
supportedProviders,
})
const frontendFeeTiers = frontendFees?.[aggregator] ?? ([] as const)
return swapManagerMaker({swapStorage, swapApi, frontendFeeTiers, aggregator, aggregatorTokenId})
}, [wallet.isMainnet, wallet.portfolioPrimaryTokenInfo, stakingKey, frontendFees])

return (
<SwapProvider swapManager={swapManager}>
<SwapFormProvider>
<OfflineBanner />

<Tab.Navigator
sceneContainerStyle={{backgroundColor: colors.background}}
screenOptions={{
headerShown: false,
tabBarLabelStyle: styles.labelStyle,
tabBarActiveTintColor: colors.active,
tabBarInactiveTintColor: colors.inactive,
tabBarBackground: () => (
<View style={{...StyleSheet.absoluteFillObject, backgroundColor: colors.background}} />
),
tabBarStyle: {
borderTopColor: colors.divider,
borderTopWidth: 2 * StyleSheet.hairlineWidth,

// keyboardWillShow keyboardWillHiden dont work on android
display: isKeyboardOpen ? 'none' : undefined,
},
tabBarHideOnKeyboard: true,
<SwapProvider>
<OfflineBanner />

<Tab.Navigator
sceneContainerStyle={{backgroundColor: colors.background}}
screenOptions={{
headerShown: false,
tabBarLabelStyle: styles.labelStyle,
tabBarActiveTintColor: colors.active,
tabBarInactiveTintColor: colors.inactive,
tabBarBackground: () => (
<View style={{...StyleSheet.absoluteFillObject, backgroundColor: colors.background}} />
),
tabBarStyle: {
borderTopColor: colors.divider,
borderTopWidth: 2 * StyleSheet.hairlineWidth,

// keyboardWillShow keyboardWillHiden dont work on android
display: isKeyboardOpen ? 'none' : undefined,
},
tabBarHideOnKeyboard: true,
}}
tabBar={(props) => <TabBarWithHiddenContent {...props} />}
backBehavior="initialRoute"
>
<Tab.Screen
name="history"
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabWalletActive size={24} color={colors.active} />
) : (
<Icon.TabWallet size={24} color={colors.inactive} />
),
tabBarLabel: strings.walletTabBarLabel,
tabBarTestID: 'walletTabBarButton',
}}
tabBar={(props) => <TabBarWithHiddenContent {...props} />}
backBehavior="initialRoute"
>
<Tab.Screen
name="history"
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabWalletActive size={24} color={colors.active} />
) : (
<Icon.TabWallet size={24} color={colors.inactive} />
),
tabBarLabel: strings.walletTabBarLabel,
tabBarTestID: 'walletTabBarButton',
}}
>
{() => (
<SearchProvider>
<TxHistoryNavigator />
</SearchProvider>
)}
</Tab.Screen>

<Tab.Screen
name="portfolio"
initialParams={{screen: 'dashboard-portfolio'}}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabPortfolioActive size={24} color={colors.active} />
) : (
<Icon.TabPortfolio size={24} color={colors.inactive} />
),
tabBarLabel: strings.portfolioButton,
tabBarTestID: 'portfolioTabBarButton',
}}
>
{() => (
<SearchProvider>
<PortfolioNavigator />
</SearchProvider>
)}
</Tab.Screen>

<Tab.Screen
name="discover"
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabDiscoverActive size={28} color={colors.active} />
) : (
<Icon.TabDiscover size={28} color={colors.inactive} />
),
tabBarLabel: strings.discoverTabBarLabel,
tabBarTestID: 'discoverTabBarButton',
}}
>
{() => (
<SearchProvider>
<DiscoverNavigator />
</SearchProvider>
)}
</Tab.Screen>

<Tab.Screen
name="menu"
component={MenuNavigator}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabMenuActive size={28} color={colors.active} />
) : (
<Icon.TabMenu size={28} color={colors.inactive} />
),
tabBarLabel: strings.menuTabBarLabel,
tabBarTestID: 'menuTabBarButton',
}}
/>
</Tab.Navigator>
</SwapFormProvider>
{() => (
<SearchProvider>
<TxHistoryNavigator />
</SearchProvider>
)}
</Tab.Screen>

<Tab.Screen
name="portfolio"
initialParams={{screen: 'dashboard-portfolio'}}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabPortfolioActive size={24} color={colors.active} />
) : (
<Icon.TabPortfolio size={24} color={colors.inactive} />
),
tabBarLabel: strings.portfolioButton,
tabBarTestID: 'portfolioTabBarButton',
}}
>
{() => (
<SearchProvider>
<PortfolioNavigator />
</SearchProvider>
)}
</Tab.Screen>

<Tab.Screen
name="discover"
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabDiscoverActive size={28} color={colors.active} />
) : (
<Icon.TabDiscover size={28} color={colors.inactive} />
),
tabBarLabel: strings.discoverTabBarLabel,
tabBarTestID: 'discoverTabBarButton',
}}
>
{() => (
<SearchProvider>
<DiscoverNavigator />
</SearchProvider>
)}
</Tab.Screen>

<Tab.Screen
name="menu"
component={MenuNavigator}
options={{
tabBarIcon: ({focused}) =>
focused ? (
<Icon.TabMenuActive size={28} color={colors.active} />
) : (
<Icon.TabMenu size={28} color={colors.inactive} />
),
tabBarLabel: strings.menuTabBarLabel,
tabBarTestID: 'menuTabBarButton',
}}
/>
</Tab.Navigator>
</SwapProvider>
)
}
Expand Down
7 changes: 4 additions & 3 deletions apps/wallet-mobile/src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@ const useStyles = ({
case ButtonType.Link:
shape =
size === 'M'
? {...atoms.p_md, ...atoms.gap_xs, ...atoms.rounded_sm}
: {...atoms.p_sm, ...atoms.gap_2xs, ...atoms.rounded_sm}
? {maxHeight: 40, ...atoms.py_sm, ...atoms.px_md, ...atoms.gap_xs, ...atoms.rounded_sm}
: {maxHeight: 32, ...atoms.p_xs, ...atoms.px_sm, ...atoms.gap_2xs, ...atoms.rounded_sm}
break
case ButtonType.Circle:
shape = {width: 56, height: 56, ...atoms.align_center, ...atoms.rounded_full}
Expand Down Expand Up @@ -182,7 +182,8 @@ const useStyles = ({
})

const iconProps: IconProps = {
size: size === 'M' ? 28 : 24,
size:
type === ButtonType.Text || type === ButtonType.SecondaryText ? (size === 'M' ? 24 : 20) : size === 'M' ? 28 : 24,
color: foregroundColor,
}

Expand Down
Loading

0 comments on commit 197b35c

Please sign in to comment.