GUI: Add change username setting

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ## 4.31.0 (staging)
 
+- added: "Change Username" setting
 - added: Support for Zano alias name resolution.
 - changed: Don't allow multiple pending EVM transactions.
 

src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap

@@ -807,6 +807,153 @@ exports[`SettingsScene should render SettingsScene 1`] = `
                 ]
               }
             />
+            <View
+              accessibilityState={
+                {
+                  "disabled": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={false}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "alignItems": "center",
+                  "backgroundColor": "rgba(255, 255, 255, 0)",
+                  "flexDirection": "row",
+                  "marginBottom": 1,
+                  "minHeight": 67,
+                  "padding": 11,
+                }
+              }
+            >
+              <Text
+                style={
+                  {
+                    "color": "#888888",
+                    "flexGrow": 1,
+                    "flexShrink": 1,
+                    "fontFamily": "Quicksand-Regular",
+                    "fontSize": 22,
+                    "paddingHorizontal": 11,
+                    "textAlign": "left",
+                  }
+                }
+              >
+                Change Username
+              </Text>
+              <View>
+                <View
+                  pending={false}
+                  style={
+                    [
+                      {
+                        "aspectRatio": 1,
+                        "position": "absolute",
+                        "width": "100%",
+                        "zIndex": 1,
+                      },
+                      {
+                        "opacity": 0,
+                      },
+                    ]
+                  }
+                >
+                  <ActivityIndicator
+                    color="#00f1a2"
+                    style={
+                      {
+                        "height": 34,
+                        "marginHorizontal": 11,
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  pending={false}
+                  style={
+                    {
+                      "opacity": 1,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": undefined,
+                          "fontSize": 12,
+                        },
+                        {
+                          "color": "rgba(255, 255, 255, .75)",
+                          "fontSize": 22,
+                          "marginHorizontal": 11,
+                        },
+                        {
+                          "fontFamily": "FontAwesome5Free-Solid",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {
+                          "fontWeight": "900",
+                        },
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <BVLinearGradient
+              colors={
+                [
+                  452984831,
+                  452984831,
+                ]
+              }
+              endPoint={
+                {
+                  "x": 1,
+                  "y": 0.5,
+                }
+              }
+              locations={null}
+              startPoint={
+                {
+                  "x": 0,
+                  "y": 0.5,
+                }
+              }
+              style={
+                [
+                  {
+                    "borderBottomColor": "rgba(255, 255, 255, .1)",
+                    "borderBottomWidth": 1,
+                    "height": 1,
+                  },
+                  {
+                    "margin": 11,
+                  },
+                ]
+              }
+            />
             <View
               accessibilityState={
                 {

src/actions/AccountActions.tsx

@@ -33,7 +33,7 @@ interface ValidatePasswordOptions {
 
 export function validatePassword(
   opts: ValidatePasswordOptions = {}
-): ThunkAction<Promise<boolean>> {
+): ThunkAction<Promise<string | undefined>> {
   return async (dispatch, getState) => {
     const {
       message,
@@ -64,6 +64,6 @@ export function validatePassword(
       />
     ))
 
-    return password != null
+    return password
   }
 }

src/actions/SettingsActions.tsx

@@ -288,16 +288,18 @@ export async function showReEnableOtpModal(
   }
 }
 
-export function showUnlockSettingsModal(): ThunkAction<Promise<boolean>> {
+export function showUnlockSettingsModal(): ThunkAction<
+  Promise<string | undefined>
+> {
   return async (dispatch, getState) => {
-    const passwordValid = await dispatch(validatePassword())
-    if (passwordValid) {
+    const password = await dispatch(validatePassword())
+    if (password != null) {
       dispatch({
         type: 'UI/SETTINGS/SET_SETTINGS_LOCK',
         data: false
       })
     }
-    return passwordValid
+    return password
   }
 }
 

src/actions/WalletListMenuActions.tsx

@@ -277,13 +277,14 @@ export function walletListMenuAction(
         // Show the scam warning modal if needed
         await showScamWarningModal('firstPrivateKeyView')
 
-        const passwordValid = await dispatch(
-          validatePassword({
-            title: lstrings.fragment_wallets_get_seed_title,
-            submitLabel: lstrings.fragment_wallets_get_seed_wallet,
-            warningMessage: lstrings.fragment_wallets_get_seed_warning_message
-          })
-        )
+        const passwordValid =
+          (await dispatch(
+            validatePassword({
+              title: lstrings.fragment_wallets_get_seed_title,
+              submitLabel: lstrings.fragment_wallets_get_seed_wallet,
+              warningMessage: lstrings.fragment_wallets_get_seed_warning_message
+            })
+          )) != null
 
         if (passwordValid) {
           const { name, id, type } = wallet
@@ -322,14 +323,15 @@ export function walletListMenuAction(
 
     case 'getRawKeys': {
       return async (dispatch, getState) => {
-        const passwordValid = await dispatch(
-          validatePassword({
-            title: lstrings.fragment_wallets_get_raw_keys_title,
-            warningMessage:
-              lstrings.fragment_wallets_get_raw_keys_warning_message,
-            submitLabel: lstrings.string_get_raw_keys
-          })
-        )
+        const passwordValid =
+          (await dispatch(
+            validatePassword({
+              title: lstrings.fragment_wallets_get_raw_keys_title,
+              warningMessage:
+                lstrings.fragment_wallets_get_raw_keys_warning_message,
+              submitLabel: lstrings.string_get_raw_keys
+            })
+          )) != null
         if (passwordValid) {
           const state = getState()
           const { account } = state.core

src/components/Main.tsx

@@ -57,6 +57,7 @@ import { AssetSettingsScene as AssetSettingsSceneComponent } from './scenes/Asse
 import { ChangeMiningFeeScene as ChangeMiningFeeSceneComponent } from './scenes/ChangeMiningFeeScene'
 import { ChangePasswordScene as ChangePasswordSceneComponent } from './scenes/ChangePasswordScene'
 import { ChangePinScene as ChangePinSceneComponent } from './scenes/ChangePinScene'
+import { ChangeUsernameScene as ChangeUsernameSceneComponent } from './scenes/ChangeUsernameScene'
 import { CoinRankingDetailsScene as CoinRankingDetailsSceneComponent } from './scenes/CoinRankingDetailsScene'
 import { CoinRankingScene as CoinRankingSceneComponent } from './scenes/CoinRankingScene'
 import { ConfirmScene as ConfirmSceneComponent } from './scenes/ConfirmScene'
@@ -164,6 +165,7 @@ const BuyScene = ifLoggedIn(BuySceneComponent)
 const ChangeMiningFeeScene = ifLoggedIn(ChangeMiningFeeSceneComponent)
 const ChangePasswordScene = ifLoggedIn(ChangePasswordSceneComponent)
 const ChangePinScene = ifLoggedIn(ChangePinSceneComponent)
+const ChangeUsernameScene = ifLoggedIn(ChangeUsernameSceneComponent)
 const DuressPinScene = ifLoggedIn(DuressPinSceneComponent)
 const ChangeRecoveryScene = ifLoggedIn(ChangeRecoverySceneComponent)
 const CoinRankingDetailsScene = ifLoggedIn(CoinRankingDetailsSceneComponent)
@@ -625,6 +627,14 @@ const EdgeAppStack = () => {
           headerRight: () => null
         }}
       />
+      <AppStack.Screen
+        name="changeUsername"
+        component={ChangeUsernameScene}
+        options={{
+          title: lstrings.title_change_username,
+          headerRight: () => null
+        }}
+      />
       <AppStack.Screen
         name="duressPin"
         component={DuressPinScene}

src/components/scenes/ChangeUsernameScene.tsx

@@ -0,0 +1,39 @@
+import { ChangeUsernameScreen } from 'edge-login-ui-rn'
+import * as React from 'react'
+
+import { useHandler } from '../../hooks/useHandler'
+import { useDispatch, useSelector } from '../../types/reactRedux'
+import { EdgeAppSceneProps } from '../../types/routerTypes'
+import { logEvent } from '../../util/tracking'
+import { SceneWrapper } from '../common/SceneWrapper'
+
+interface Props extends EdgeAppSceneProps<'changeUsername'> {}
+
+export const ChangeUsernameScene = (props: Props) => {
+  const { navigation, route } = props
+  const { password } = route.params
+  const dispatch = useDispatch()
+
+  const account = useSelector(state => state.core.account)
+  const context = useSelector(state => state.core.context)
+
+  const handleComplete = useHandler(() => {
+    navigation.goBack()
+  })
+
+  const handleLogEvent = useHandler((event, values) => {
+    dispatch(logEvent(event, values))
+  })
+
+  return (
+    <SceneWrapper>
+      <ChangeUsernameScreen
+        account={account}
+        context={context}
+        password={password}
+        onComplete={handleComplete}
+        onLogEvent={handleLogEvent}
+      />
+    </SceneWrapper>
+  )
+}