feat: update copy and hide button if active account is implicit

near · Jan 21, 2022 · 406f6d7 · 406f6d7
1 parent ec71d77
commit 406f6d7
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 15 deletions.
diff --git a/packages/frontend/src/components/accounts/CreateAccount.js b/packages/frontend/src/components/accounts/CreateAccount.js
@@ -15,7 +15,7 @@ import {
     refreshAccount
 } from '../../redux/actions/account';
 import { clearLocalAlert } from '../../redux/actions/status';
-import { selectAccountSlice } from '../../redux/slices/account';
+import { selectAccountSlice, selectActiveAccountIdIsImplicitAccount } from '../../redux/slices/account';
 import { selectStatusLocalAlert, selectStatusMainLoader } from '../../redux/slices/status';
 import { selectNearTokenFiatValueUSD } from '../../redux/slices/tokenFiatValues';
 import isMobile from '../../utils/isMobile';
@@ -183,7 +183,8 @@ class CreateAccount extends Component {
             fundingContract,
             fundingKey,
             nearTokenFiatValueUSD,
-            locationSearch
+            locationSearch,
+            activeAccountIdIsImplicit
         } = this.props;
 
         const isLinkDrop = fundingContract && fundingKey;
@@ -243,7 +244,15 @@ class CreateAccount extends Component {
             return (
                 <StyledContainer className='small-centered border'>
                     <form onSubmit={e => { this.handleCreateAccount(); e.preventDefault(); }} autoComplete='off'>
-                        <h1><Translate id='createAccount.pageTitle' /></h1>
+                        <h1>
+                            <Translate
+                                id={
+                                    activeAccountIdIsImplicit
+                                        ? "createAccount.addACustomAddress"
+                                        : "createAccount.pageTitle"
+                                }
+                            />
+                        </h1>
                         <h2><Translate id='createAccount.pageText' /></h2>
                         <h4 className='small'><Translate id='createAccount.accountIdInput.title' /></h4>
                         <AccountFormAccountId
@@ -310,7 +319,8 @@ const mapStateToProps = (state, { match }) => ({
     fundingKey: match.params.fundingKey,
     fundingAccountId: match.params.fundingAccountId,
     nearTokenFiatValueUSD: selectNearTokenFiatValueUSD(state),
-    locationSearch: getSearch(state)
+    locationSearch: getSearch(state),
+    activeAccountIdIsImplicit: selectActiveAccountIdIsImplicitAccount(state)
 });
 
 export const CreateAccountWithRouter = connect(

diff --git a/packages/frontend/src/components/accounts/create/existing_account/SelectAccount.js b/packages/frontend/src/components/accounts/create/existing_account/SelectAccount.js
@@ -2,9 +2,11 @@ import BN from 'bn.js';
 import { formatNearAmount } from 'near-api-js/lib/utils/format';
 import React from 'react';
 import { Translate } from 'react-localize-redux';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { MIN_BALANCE_TO_CREATE } from '../../../../config';
+import { selectActiveAccountIdIsImplicitAccount } from '../../../../redux/slices/account';
 import FormButton from '../../../common/FormButton';
 import FormButtonGroup from '../../../common/FormButtonGroup';
 import Container from '../../../common/styled/Container.css';
@@ -28,6 +30,8 @@ export default ({
     onClickCancel,
     hasAllRequiredParams
 }) => {
+    const activeAccountIdIsImplicit = useSelector(selectActiveAccountIdIsImplicitAccount);
+
     return (
         <StyledContainer className='small-centered border'>
             <h1><Translate id='existingAccount.selectAccount.title' /></h1>
@@ -43,12 +47,11 @@ export default ({
                 showBalanceInUSD={false}
             />
             <FormButtonGroup>
-                <FormButton
-                    onClick={onClickCancel}
-                    color='gray-blue'
-                >
-                    <Translate id='button.cancel' />
-                </FormButton>
+                {!activeAccountIdIsImplicit ? (
+                    <FormButton onClick={onClickCancel} color="gray-blue">
+                        <Translate id="button.cancel" />
+                    </FormButton>
+                ) : null}
                 <FormButton
                     onClick={onClickNext}
                     disabled={!hasAllRequiredParams || !new BN(signedInAccountAvailableBalance).gte(new BN(MIN_BALANCE_TO_CREATE))}

diff --git a/packages/frontend/src/components/common/FormButtonGroup.js b/packages/frontend/src/components/common/FormButtonGroup.js
@@ -9,7 +9,7 @@ const StyledContainer = styled.div`
         > button {
             flex: 1;
 
-            :last-of-type {
+            :last-of-type:not(:first-of-type) {
                 margin-left: 20px;
             }
         }

diff --git a/packages/frontend/src/redux/actions/account.js b/packages/frontend/src/redux/actions/account.js
@@ -8,7 +8,6 @@ import { compose } from 'redux';
 import { createActions, createAction } from 'redux-actions';
 
 import { DISABLE_CREATE_ACCOUNT } from '../../config';
-import { isImplicitAccount } from '../../utils/account';
 import { 
     showAlert,
     dispatchWithAlert
@@ -45,7 +44,8 @@ import {
     selectAccountUrlRedirectUrl,
     selectAccountUrlSuccessUrl,
     selectAccountUrlTitle,
-    selectAccountUrlTransactions
+    selectAccountUrlTransactions,
+    selectActiveAccountIdIsImplicitAccount
 } from '../slices/account';
 import { selectAccountHasLockup } from '../slices/account';
 import { selectAllAccountsHasLockup } from '../slices/allAccounts';
@@ -473,7 +473,7 @@ const handleFundCreateAccountRedirect = ({
     implicitAccountId,
     recoveryMethod
 }) => (dispatch, getState) => {
-    const hasActiveImplicitAccount = compose(isImplicitAccount, selectAccountId, getState);
+    const hasActiveImplicitAccount = compose(selectActiveAccountIdIsImplicitAccount, getState);
 
     if (ENABLE_IDENTITY_VERIFIED_ACCOUNT) {
         const route = hasActiveImplicitAccount() ? '/fund-with-existing-account' : '/verify-account';

diff --git a/packages/frontend/src/redux/slices/account/index.js b/packages/frontend/src/redux/slices/account/index.js
@@ -1,5 +1,7 @@
 import { createSelector } from "reselect";
 
+import { isImplicitAccount } from "../../../utils/account";
+
 const SLICE_NAME = 'account';
 
 // Top level selectors
@@ -8,6 +10,8 @@ export const selectAccountSlice = (state) => state[SLICE_NAME];
 // Second level selectors 
 export const selectAccountId = createSelector(selectAccountSlice, (account) => account.accountId);
 
+export const selectActiveAccountIdIsImplicitAccount = createSelector(selectAccountSlice, (account) => isImplicitAccount(account.accountId));
+
 export const selectAccountHas2fa = createSelector(selectAccountSlice, (account) => account.has2fa);
 
 export const selectAccountHasLockup = createSelector(selectAccountSlice, (account) => account.hasLockup);

diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json
@@ -308,6 +308,7 @@
             "placeholder": "yourname.${data}",
             "title": "Account ID"
         },
+        "addACustomAddress": "Add a Custom Address",
         "alreadyHaveAnAccount": "Already have an account?",
         "invalidLinkDrop": {
             "one": "This NEAR Drop has been claimed.",

diff --git a/packages/frontend/src/utils/account.js b/packages/frontend/src/utils/account.js
@@ -6,4 +6,4 @@ export const validateEmail = (email) => {
 };
 
 export const isImplicitAccount = (accountId) =>
-    accountId && accountId.length === 64 && !accountId.includes(".") || true;
+    accountId && accountId.length === 64 && !accountId.includes(".");