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' }),
+})