diff --git a/src/components/typography/index.tsx b/src/components/typography/index.tsx index 47e49fab6..0da37341f 100644 --- a/src/components/typography/index.tsx +++ b/src/components/typography/index.tsx @@ -131,3 +131,5 @@ export const Typography = ({ ) } + +export { styles as typographyStyles } diff --git a/src/core/CoreGlobalErrorHandler.tsx b/src/core/CoreGlobalErrorHandler.tsx index 768c2b639..c674c4c23 100644 --- a/src/core/CoreGlobalErrorHandler.tsx +++ b/src/core/CoreGlobalErrorHandler.tsx @@ -1,4 +1,5 @@ import { SafeAreaProvider } from 'react-native-safe-area-context' +import FlashMessage from 'react-native-flash-message' import { GlobalErrorHandler } from '../components/GlobalErrorHandler' import ErrorBoundary from '../components/ErrorBoundary/ErrorBoundary' @@ -12,6 +13,7 @@ export const CoreGlobalErrorHandler = ({ CoreComponent = CoreWithStore }) => { + ) } diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts index e28deb258..c57825dc6 100644 --- a/src/lib/i18n.ts +++ b/src/lib/i18n.ts @@ -370,6 +370,9 @@ const resources = { dapps_uri_not_valid_title: 'Invalid URI', dapps_uri_not_valid_message: 'URI is not valid. Please try with a new URI.', + popup_message_rns: + 'Register your username to allow others to send you funds without worrying about mistyping or inputting wrong address', + popup_link_text: 'Get username here', }, }, es: { diff --git a/src/redux/slices/profileSlice/selector.ts b/src/redux/slices/profileSlice/selector.ts index af682ee24..edf1a4223 100644 --- a/src/redux/slices/profileSlice/selector.ts +++ b/src/redux/slices/profileSlice/selector.ts @@ -2,3 +2,4 @@ import { RootState } from 'src/redux' export const selectProfile = (state: RootState) => state.profile export const selectProfileStatus = ({ profile }: RootState) => profile.status +export const selectUsername = ({ profile }: RootState) => profile.alias diff --git a/src/screens/receive/ReceiveScreen.tsx b/src/screens/receive/ReceiveScreen.tsx index 5ba8254be..9f92d48ed 100644 --- a/src/screens/receive/ReceiveScreen.tsx +++ b/src/screens/receive/ReceiveScreen.tsx @@ -10,6 +10,7 @@ import { FormProvider, useForm } from 'react-hook-form' import Ionicons from 'react-native-vector-icons/Ionicons' import { useTranslation } from 'react-i18next' import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5' +import { showMessage } from 'react-native-flash-message' import { shortAddress } from 'lib/utils' @@ -27,9 +28,11 @@ import { } from 'navigation/homeNavigator/types' import { getTokenColor } from 'screens/home/tokenColor' import { castStyle } from 'shared/utils' -import { selectProfile } from 'store/slices/profileSlice' +import { selectProfile, selectUsername } from 'store/slices/profileSlice' import { getIconSource } from 'screens/home/TokenImage' import { ProfileStatus } from 'navigation/profileNavigator/types' +import { getPopupMessage } from 'src/shared/popupMessage' +import { rootTabsRouteNames } from 'src/navigation/rootNavigator' export enum TestID { QRCodeDisplay = 'Address.QRCode', @@ -40,6 +43,7 @@ export enum TestID { } export const ReceiveScreen = ({ + navigation, route, }: HomeStackScreenProps) => { const { t } = useTranslation() @@ -47,6 +51,7 @@ export const ReceiveScreen = ({ const bitcoinCore = useAppSelector(selectBitcoin) const tokenBalances = useAppSelector(selectBalances) + const username = useAppSelector(selectUsername) const { token, networkId } = route.params const [selectedAsset, setSelectedAsset] = useState< @@ -118,6 +123,16 @@ export const ReceiveScreen = ({ } }, [onGetAddress, selectedAsset]) + useEffect(() => { + if (!username) { + showMessage( + getPopupMessage(t('popup_message_rns'), t('popup_link_text'), () => + navigation.navigate(rootTabsRouteNames.Profile), + ), + ) + } + }, [username, t, navigation]) + return ( diff --git a/src/shared/popupMessage/index.tsx b/src/shared/popupMessage/index.tsx new file mode 100644 index 000000000..e3794e711 --- /dev/null +++ b/src/shared/popupMessage/index.tsx @@ -0,0 +1,49 @@ +import { StyleSheet } from 'react-native' +import { MessageOptions, hideMessage } from 'react-native-flash-message' + +import { AppTouchable, Typography, typographyStyles } from 'components/index' + +import { sharedColors } from '../constants' +import { castStyle } from '../utils' + +export const getPopupMessage = ( + message: string, + actionTitle: string, + onPress?: () => void, +): MessageOptions => { + const executePress = () => { + onPress?.() + hideMessage() + } + + return { + message, + style: { + justifyContent: 'center', + backgroundColor: sharedColors.primary, + paddingHorizontal: 24, + borderBottomLeftRadius: 12, + borderBottomRightRadius: 12, + }, + titleStyle: { + ...typographyStyles.body3, + textAlign: 'center', + }, + renderAfterContent: () => ( + + + {actionTitle} + + + ), + duration: 6000, + } +} + +const styles = StyleSheet.create({ + textLink: castStyle.view({ + marginTop: 6, + alignSelf: 'center', + }), + text: castStyle.text({ textDecorationLine: 'underline' }), +})