Skip to content

Commit

Permalink
Merge branch 'main' into feat/stake-804-build-pooled-staking-empty-st…
Browse files Browse the repository at this point in the history
…ate-component
  • Loading branch information
Matt561 authored Sep 26, 2024
2 parents fba4c8c + e68b2a5 commit a89d1d2
Show file tree
Hide file tree
Showing 30 changed files with 1,462 additions and 23 deletions.
19 changes: 7 additions & 12 deletions app/components/Nav/Main/MainNavigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ import NftDetails from '../../Views/NftDetails';
import NftDetailsFullImage from '../../Views/NftDetails/NFtDetailsFullImage';
import AccountPermissions from '../../../components/Views/AccountPermissions';
import { AccountPermissionsScreens } from '../../../components/Views/AccountPermissions/AccountPermissions.types';
import StakeInputView from '../../UI/Stake/Views/InputView/StakeInputView';
import { StakeModalStack, StakeScreenStack } from '../../UI/Stake/routes';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
Expand Down Expand Up @@ -694,16 +694,6 @@ const Swaps = () => (
</Stack.Navigator>
);

const Stake = () => (
<Stack.Navigator>
<Stack.Screen
name="Stake"
component={StakeInputView}
options={StakeInputView.navigationOptions}
/>
</Stack.Navigator>
);

const SetPasswordFlow = () => (
<Stack.Navigator>
<Stack.Screen
Expand Down Expand Up @@ -808,7 +798,12 @@ const MainNavigator = () => (
{() => <RampRoutes rampType={RampType.SELL} />}
</Stack.Screen>
<Stack.Screen name="Swaps" component={Swaps} />
<Stack.Screen name="Stake" component={Stake} />
<Stack.Screen name="StakeScreens" component={StakeScreenStack} />
<Stack.Screen
name="StakeModals"
component={StakeModalStack}
options={clearStackNavigatorOptions}
/>
<Stack.Screen
name="SetPasswordFlow"
component={SetPasswordFlow}
Expand Down
2 changes: 2 additions & 0 deletions app/components/Nav/Main/RootRPCMethodsUI.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import { getDeviceId } from '../../../core/Ledger/Ledger';
import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
import { createLedgerTransactionModalNavDetails } from '../../UI/LedgerModals/LedgerTransactionModal';
import ExtendedKeyringTypes from '../../../constants/keyringTypes';
import Confirm from '../../../components/Views/confirmations/Confirm';
import { useMetrics } from '../../../components/hooks/useMetrics';
import { selectShouldUseSmartTransaction } from '../../../selectors/smartTransactionsController';
import { STX_NO_HASH_ERROR } from '../../../util/smart-transactions/smart-publish-hook';
Expand Down Expand Up @@ -472,6 +473,7 @@ const RootRPCMethodsUI = (props) => {

return (
<React.Fragment>
<Confirm />
<SignatureApproval />
<WalletConnectApproval />
<TransactionApproval
Expand Down
19 changes: 19 additions & 0 deletions app/components/UI/BottomModal/BottomModal.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { Text, View } from 'react-native';

import renderWithProvider from '../../../util/test/renderWithProvider';
import BottomModal from '.';

describe('BottomModal', () => {
it('should match snapshot', async () => {
const container = renderWithProvider(
<BottomModal>
<View>
<Text>DUMMY</Text>
</View>
</BottomModal>,
{ state: {} },
);
expect(container).toMatchSnapshot();
});
});
42 changes: 42 additions & 0 deletions app/components/UI/BottomModal/BottomModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { ReactChild } from 'react';
import Modal from 'react-native-modal';
import { StyleSheet } from 'react-native';

import { useTheme } from '../../../util/theme';

interface BottomModalProps {
children: ReactChild;
onClose?: () => void;
}

const styles = StyleSheet.create({
bottomModal: {
justifyContent: 'flex-end',
margin: 0,
},
});

const BottomModal = ({ children, onClose }: BottomModalProps) => {
const { colors } = useTheme();

return (
<Modal
isVisible
animationIn="slideInUp"
animationOut="slideOutDown"
style={styles.bottomModal}
backdropColor={colors.overlay.default}
backdropOpacity={1}
animationInTiming={600}
animationOutTiming={600}
onBackButtonPress={onClose}
onSwipeComplete={onClose}
swipeDirection={'down'}
propagateSwipe
>
{children}
</Modal>
);
};

export default BottomModal;
124 changes: 124 additions & 0 deletions app/components/UI/BottomModal/__snapshots__/BottomModal.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BottomModal should match snapshot 1`] = `
<Modal
animationType="none"
deviceHeight={null}
deviceWidth={null}
hardwareAccelerated={false}
hideModalContentWhileAnimating={false}
onBackdropPress={[Function]}
onModalHide={[Function]}
onModalWillHide={[Function]}
onModalWillShow={[Function]}
onRequestClose={[Function]}
panResponderThreshold={4}
scrollHorizontal={false}
scrollOffset={0}
scrollOffsetMax={0}
scrollTo={null}
statusBarTranslucent={false}
supportedOrientations={
[
"portrait",
"landscape",
]
}
swipeDirection="down"
swipeThreshold={100}
transparent={true}
visible={true}
>
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"backgroundColor": "#00000099",
"bottom": 0,
"height": 1334,
"left": 0,
"opacity": 0,
"position": "absolute",
"right": 0,
"top": 0,
"width": 750,
}
}
/>
<View
collapsable={false}
deviceHeight={null}
deviceWidth={null}
hideModalContentWhileAnimating={false}
onBackdropPress={[Function]}
onModalHide={[Function]}
onModalWillHide={[Function]}
onModalWillShow={[Function]}
onMoveShouldSetResponder={[Function]}
onMoveShouldSetResponderCapture={[Function]}
onResponderEnd={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderReject={[Function]}
onResponderRelease={[Function]}
onResponderStart={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onStartShouldSetResponderCapture={[Function]}
panResponderThreshold={4}
pointerEvents="box-none"
scrollHorizontal={false}
scrollOffset={0}
scrollOffsetMax={0}
scrollTo={null}
statusBarTranslucent={false}
style={
{
"flex": 1,
"justifyContent": "flex-end",
"left": 0,
"margin": 0,
"top": 0,
"transform": [
{
"translateY": 1334,
},
],
}
}
supportedOrientations={
[
"portrait",
"landscape",
]
}
swipeDirection="down"
swipeThreshold={100}
>
<View>
<Text>
DUMMY
</Text>
</View>
</View>
</Modal>
`;
1 change: 1 addition & 0 deletions app/components/UI/BottomModal/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './BottomModal';
10 changes: 9 additions & 1 deletion app/components/UI/Stake/Views/InputView/StakeInputView.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function render(Component: React.ComponentType) {
return renderScreen(
Component,
{
name: Routes.STAKE.STAKE,
name: Routes.STAKING.STAKE,
},
{
state: {
Expand Down Expand Up @@ -127,5 +127,13 @@ describe('StakeInputView', () => {
fireEvent.press(screen.getByText('4'));
expect(screen.queryAllByText('Not enough ETH')).toHaveLength(2);
});

it('navigates to Learn more modal when learn icon is pressed', () => {
render(StakeInputView);
fireEvent.press(screen.getByLabelText('Learn More'));
expect(mockNavigate).toHaveBeenCalledWith('StakeModals', {
screen: Routes.STAKING.MODALS.LEARN_MORE,
});
});
});
});
11 changes: 8 additions & 3 deletions app/components/UI/Stake/Views/InputView/StakeInputView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import QuickAmounts from '../../components/QuickAmounts';
import useBalance from '../../hooks/useBalance';
import styleSheet from './StakeInputView.styles';
import EstimatedAnnualRewardsCard from '../../components/EstimatedAnnualRewardsCard';
import Routes from '../../../../../constants/navigation/Routes';

const StakeInputView = () => {
const navigation = useNavigation();
Expand All @@ -56,6 +57,12 @@ const StakeInputView = () => {
const currentCurrency = useSelector(selectCurrentCurrency);
const conversionRate = useSelector(selectConversionRate) || 1;

const navigateToLearnMoreModal = () => {
navigation.navigate('StakeModals', {
screen: Routes.STAKING.MODALS.LEARN_MORE,
});
};

const balanceText = isEth
? `${balance} ETH`
: `${balanceFiatNumber?.toString()} ${currentCurrency.toUpperCase()}`;
Expand Down Expand Up @@ -219,9 +226,7 @@ const StakeInputView = () => {
<View style={styles.rewardsRateContainer}>
<EstimatedAnnualRewardsCard
estimatedAnnualRewards={estimatedAnnualRewards}
onIconPress={() => {
// TODO: Add tooltip modal
}}
onIconPress={navigateToLearnMoreModal}
/>
</View>
<QuickAmounts
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,7 @@ exports[`StakeInputView render matches snapshot 1`] = `
MetaMask Pool
</Text>
<TouchableOpacity
accessibilityLabel="Learn More"
onPress={[Function]}
>
<SvgMock
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,10 @@ const EstimatedAnnualRewardsCard = ({
<Text variant={TextVariant.BodyMDMedium}>
{strings('stake.metamask_pool')}
</Text>
<TouchableOpacity onPress={onIconPress}>
<TouchableOpacity
onPress={onIconPress}
accessibilityLabel="Learn More"
>
<Icon name={IconName.Question} color={IconColor.Alternative} />
</TouchableOpacity>
</View>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { StyleSheet } from 'react-native';

const createLearnMoreModalStyles = () =>
StyleSheet.create({
container: {
paddingHorizontal: 24,
paddingTop: 24,
},
imageContainer: {
alignItems: 'center',
paddingBottom: 16,
},
bannerImage: {
width: '100%',
height: 200,
borderRadius: 12,
},
textContainer: {
paddingVertical: 8,
},
buttonContainer: {
flexDirection: 'row',
gap: 16,
paddingHorizontal: 16,
paddingTop: 16,
},
button: {
flex: 1,
},
italicText: {
fontStyle: 'italic',
},
});

export default createLearnMoreModalStyles;
Loading

0 comments on commit a89d1d2

Please sign in to comment.