feat: flash message to add username

src/components/typography/index.tsx

@@ -131,3 +131,5 @@ export const Typography = ({
     </Text>
   )
 }
+
+export { styles as typographyStyles }

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 }) => {
           <CoreComponent />
         </SafeAreaProvider>
       </ErrorBoundary>
+      <FlashMessage />
     </GlobalErrorHandler>
   )
 }

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: {

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

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,13 +43,15 @@ export enum TestID {
 }
 
 export const ReceiveScreen = ({
+  navigation,
   route,
 }: HomeStackScreenProps<homeStackRouteNames.Receive>) => {
   const { t } = useTranslation()
   const methods = useForm()
   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 (
     <ScrollView style={styles.parent}>
       <FormProvider {...methods}>

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: () => (
+      <AppTouchable width={150} style={styles.textLink} onPress={executePress}>
+        <Typography style={styles.text} type={'h4'}>
+          {actionTitle}
+        </Typography>
+      </AppTouchable>
+    ),
+    duration: 6000,
+  }
+}
+
+const styles = StyleSheet.create({
+  textLink: castStyle.view({
+    marginTop: 6,
+    alignSelf: 'center',
+  }),
+  text: castStyle.text({ textDecorationLine: 'underline' }),
+})