feat: Make wallet usable when account is not verified on chain

packages/frontend/src/components/buy/BuyNear.js

@@ -12,7 +12,7 @@ import OkCoinLogo from '../../images/ok-coin-logo.svg';
 import OkexLogo from '../../images/okex-logo.svg';
 import RainbowBridgeLogo from '../../images/rainbow-bridge-logo.svg';
 import { Mixpanel } from '../../mixpanel';
-import { selectAccountId } from '../../redux/slices/account';
+import { selectAccountLocalStorageAccountId } from '../../redux/slices/account';
 import { isMoonpayAvailable, getSignedUrl } from '../../utils/moonpay';
 import FormButton from '../common/FormButton';
 import Container from '../common/styled/Container.css';
@@ -148,8 +148,8 @@ const StyledContainer = styled(Container)`
     }
 `;
 
-export function BuyNear({ match, location, history }) {
-    const accountId = useSelector(selectAccountId);
+export function BuyNear({ history }) {
+    const accountId = useSelector(selectAccountLocalStorageAccountId);
     const [moonPayAvailable, setMoonPayAvailable] = useState(null);
     const [signedMoonPayUrl, setSignedMoonPayUrl] = useState(null);
 

packages/frontend/src/components/profile/Profile.js

@@ -18,7 +18,14 @@ import {
     getBalance
 } from '../../redux/actions/account';
 import { selectProfileBalance } from '../../redux/reducers/selectors/balance';
-import { selectAccountAuthorizedApps, selectAccountHas2fa, selectAccountHasLockup, selectAccountId, selectAccountLedgerKey } from '../../redux/slices/account';
+import {
+    selectAccountAuthorizedApps,
+    selectAccountHas2fa,
+    selectAccountHasLockup,
+    selectAccountId,
+    selectAccountLedgerKey,
+    selectAccountLocalStorageAccountId
+} from '../../redux/slices/account';
 import { selectAllAccountsHasLockup } from '../../redux/slices/allAccounts';
 import { actions as recoveryMethodsActions, selectRecoveryMethodsByAccountId } from '../../redux/slices/recoveryMethods';
 import { selectNearTokenFiatValueUSD } from '../../redux/slices/tokenFiatValues';
@@ -135,11 +142,12 @@ export function Profile({ match }) {
     const has2fa = useSelector(selectAccountHas2fa);
     const authorizedApps = useSelector(selectAccountAuthorizedApps);
     const ledgerKey = useSelector(selectAccountLedgerKey);
+    const accountLocalStorageAccountId = useSelector(selectAccountLocalStorageAccountId);
     const loginAccountId = useSelector(selectAccountId);
     const nearTokenFiatValueUSD = useSelector(selectNearTokenFiatValueUSD);
     const accountIdFromUrl = match.params.accountId;
-    const accountId = accountIdFromUrl || loginAccountId;
-    const isOwner = accountId === loginAccountId;
+    const accountId = accountIdFromUrl || loginAccountId || accountLocalStorageAccountId;
+    const isOwner = accountId && accountId === loginAccountId;
     const account = useAccount(accountId);
     const dispatch = useDispatch();
     const profileBalance = selectProfileBalance(account);
@@ -225,6 +233,7 @@ export function Profile({ match }) {
                     <h2><UserIcon/><Translate id='profile.pageTitle.default'/></h2>
                     {profileBalance ? (
                         <BalanceContainer
+                            accountId={accountId}
                             account={account}
                             profileBalance={profileBalance}
                             hasLockup={hasLockup}

packages/frontend/src/components/profile/balances/BalanceContainer.js

@@ -132,50 +132,50 @@ const Container = styled.div`
     }
 `;
 
-const BalanceContainer = ({ account, profileBalance, hasLockup, MIN_BALANCE_FOR_GAS_FORMATTED }) => {
+const BalanceContainer = ({ accountId, profileBalance, hasLockup, MIN_BALANCE_FOR_GAS_FORMATTED }) => {
     return (
         <Container>
             {profileBalance && 
                 <>
                     <div className='border-box'>
                         <div className='title'>
                             <h4><Translate id='profile.account.walletId'/></h4>
-                            <ClickToCopy copy={account.accountId}>
-                                <AccountId id={account.accountId} data-test-id="ownerAccount.accountId"/>
+                            <ClickToCopy copy={accountId}>
+                                <AccountId id={accountId} data-test-id="ownerAccount.accountId"/>
                             </ClickToCopy>
                         </div>
                         <div className='total'>
                             <span><Translate id='profile.account.walletBalance'/></span>
-                            <Balance data-test-id="ownerAccount.total" amount={profileBalance.walletBalance.walletBalance}/>
+                            <Balance data-test-id="ownerAccount.total" amount={profileBalance.walletBalance?.walletBalance}/>
                         </div>
                         <div className='item first'>
                             <span><Translate id='profile.account.reservedForStorage'/><Tooltip translate='minimumBalance'/></span>
-                            <span><Balance data-test-id="ownerAccount.reservedForStorage" amount={profileBalance.walletBalance.reservedForStorage}/></span>
+                            <span><Balance data-test-id="ownerAccount.reservedForStorage" amount={profileBalance.walletBalance?.reservedForStorage}/></span>
                         </div>
                         <div className='item'>
                             <span><Translate id='profile.account.reservedForTransactions'/><Tooltip translate='reservedForFeesInfo' data={MIN_BALANCE_FOR_GAS_FORMATTED}/></span>
-                            <span><Balance data-test-id="ownerAccount.reservedForTransactions" amount={profileBalance.walletBalance.reservedForTransactions}/></span>
+                            <span><Balance data-test-id="ownerAccount.reservedForTransactions" amount={profileBalance.walletBalance?.reservedForTransactions}/></span>
                         </div>
                         <div className='item'>
                             <span><Translate id='profile.account.available'/><Tooltip translate='availableBalanceProfile'/></span>
-                            <span><Balance data-test-id="ownerAccount.available" amount={profileBalance.walletBalance.available}/></span>
+                            <span><Balance data-test-id="ownerAccount.available" amount={profileBalance.walletBalance?.available}/></span>
                         </div>
                         <div className='total button last' id='balance-1'>
                             <span><Translate id='profile.account.staking'/><ChevronIcon color='#0072ce'/></span>
-                            <Balance data-test-id="ownerAccount.staking.total" amount={profileBalance.walletBalance.inStakingPools.sum}/>
+                            <Balance data-test-id="ownerAccount.staking.total" amount={profileBalance.walletBalance?.inStakingPools.sum}/>
                         </div>
                         <Accordion trigger='balance-1'>
                             <div className='item detail'>
                                 <span><Translate id='profile.account.staked'/><Tooltip translate='staking.balanceBox.staked.info'/></span>
-                                <span><Balance data-test-id="ownerAccount.staking.staked" amount={profileBalance.walletBalance.inStakingPools.staked}/></span>
+                                <span><Balance data-test-id="ownerAccount.staking.staked" amount={profileBalance.walletBalance?.inStakingPools.staked}/></span>
                             </div>
                             <div className='item detail'>
                                 <span><Translate id='profile.account.pendingRelease'/><Tooltip translate='staking.balanceBox.pending.info'/></span>
-                                <span><Balance data-test-id="ownerAccount.staking.pendingRelease" amount={profileBalance.walletBalance.inStakingPools.pendingRelease}/></span>
+                                <span><Balance data-test-id="ownerAccount.staking.pendingRelease" amount={profileBalance.walletBalance?.inStakingPools.pendingRelease}/></span>
                             </div>
                             <div className='item detail'>
                                 <span><Translate id='profile.account.availableToWithdraw'/><Tooltip translate='staking.balanceBox.available.info'/></span>
-                                <span><Balance data-test-id="ownerAccount.staking.availableToWithdraw" amount={profileBalance.walletBalance.inStakingPools.availableForWithdraw}/></span>
+                                <span><Balance data-test-id="ownerAccount.staking.availableToWithdraw" amount={profileBalance.walletBalance?.inStakingPools.availableForWithdraw}/></span>
                             </div>
                         </Accordion>
                     </div>

packages/frontend/src/components/receive-money/ReceiveContainerWrapper.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectAccountId, selectBalance } from '../../redux/slices/account';
+import { selectAccountLocalStorageAccountId, selectAccountId, selectBalance } from '../../redux/slices/account';
 import ReceiveContainer from './ReceiveContainer';
 
 export function ReceiveContainerWrapper() {
     const accountId = useSelector(selectAccountId);
+    const accountLocalStorageAccountId = useSelector(selectAccountLocalStorageAccountId);
     const balance = useSelector(selectBalance);
 
-    const availableBalance = balance?.balanceAvailable;
+    const availableBalance = balance?.balanceAvailable || (!accountId && '0');
 
     //TODO: Add support for receiver in URL
 
     return (
         <ReceiveContainer
-            accountId={accountId}
+            accountId={accountLocalStorageAccountId}
             availableBalance={availableBalance}
         />
     );

packages/frontend/src/components/send/SendContainerV2.js

@@ -167,7 +167,7 @@ const SendContainerV2 = ({
                             setUserInputAmount(formattedTokenAmount.replace(/,/g, ''));
                         }
                     }}
-                    availableToSend={selectedToken.balance}
+                    availableToSend={selectedToken.balance || '0'}
                     continueAllowed={enterAmountIsComplete()}
                     onContinue={() => {
                         setActiveView(VIEWS.ENTER_RECEIVER);

packages/frontend/src/components/staking/StakingContainer.js

@@ -11,7 +11,7 @@ import {
     handleStakingAction,
     handleUpdateCurrent
 } from '../../redux/actions/staking';
-import { selectAccountHas2fa, selectAccountHasLockup, selectAccountId, selectBalance } from '../../redux/slices/account';
+import { selectAccountHas2fa, selectAccountHasLockup, selectAccountId, selectBalance, selectAccountLocalStorageAccountId } from '../../redux/slices/account';
 import { selectLedgerHasLedger } from '../../redux/slices/ledger';
 import { selectStakingSlice } from '../../redux/slices/staking';
 import { selectStatusSlice } from '../../redux/slices/status';
@@ -166,6 +166,7 @@ const StyledContainer = styled(Container)`
 
 export function StakingContainer({ history, match }) {
     const dispatch = useDispatch();
+    const accountLocalStorageAccountId = useSelector(selectAccountLocalStorageAccountId);
     const accountId = useSelector(selectAccountId);
     const has2fa = useSelector(selectAccountHas2fa);
     const balance = useSelector(selectBalance);
@@ -176,7 +177,9 @@ export function StakingContainer({ history, match }) {
     const hasLockup = useSelector(selectAccountHasLockup);
 
     const { currentAccount } = staking;
-    const stakingAccounts = staking.accounts;
+    const stakingAccounts = staking.accounts.length
+        ? staking.accounts
+        : [{ accountId: accountLocalStorageAccountId, totalUnstaked: '0', totalStaked: '0' }];
     const validators = staking.allValidators;
     const currentValidators = currentAccount.validators;
     const validatorId = history.location.pathname.split('/')[2];
@@ -232,7 +235,7 @@ export function StakingContainer({ history, match }) {
                                 currentValidators={currentValidators}
                                 onSwitchAccount={handleSwitchAccount}
                                 accounts={stakingAccounts}
-                                activeAccount={currentAccount}
+                                activeAccountId={currentAccount.accountId || accountLocalStorageAccountId}
                                 accountId={accountId}
                                 loading={status.mainLoader && !stakingAccounts.length}
                                 loadingDetails={(status.mainLoader && !stakingAccounts.length) || loadingBalance}

packages/frontend/src/components/staking/components/NoValidators.js

@@ -33,12 +33,13 @@ const Container = styled.div`
     }
 `;
 
-export default function NoValidators() {
+export default function NoValidators({ accountId }) {
     return (
         <Container className='no-validators'>
             <NearCircleIcon/>
             <div><Translate id='staking.noValidators.title' /></div>
-            <FormButton 
+            <FormButton
+                disabled={!accountId}
                 className='gray-blue dark' 
                 linkTo='/staking/validators'
                 trackingId="STAKE Click stake my tokens button : no validators"

packages/frontend/src/components/staking/components/Staking.js

@@ -21,13 +21,14 @@ export default function Staking({
     totalPending,
     onSwitchAccount,
     accounts,
-    activeAccount,
+    activeAccountId,
     loading,
     hasLockup,
     loadingDetails,
     stakeFromAccount,
     selectedValidator,
-    multipleAccounts
+    multipleAccounts,
+    accountId
 }) {
     const NEARAsTokenWithMetadata = useSelector(selectNEARAsTokenWithMetadata);
 
@@ -45,7 +46,7 @@ export default function Staking({
                 <SelectAccount
                     accounts={accounts}
                     onChange={(e) => onSwitchAccount(e.target.value)}
-                    selectedAccount={activeAccount.accountId}
+                    selectedAccount={activeAccountId}
                 />
             }
             <SkeletonLoading
@@ -55,7 +56,7 @@ export default function Staking({
                 className='account-loader'
             />
             <FormButton
-                disabled={loadingDetails}
+                disabled={loadingDetails || !accountId}
                 linkTo='/staking/validators'
                 trackingId="STAKE Click stake my tokens button"
                 data-test-id="stakeMyTokensButton"
@@ -118,7 +119,7 @@ export default function Staking({
                             />
                         )}
                     </ListWrapper>
-                    : <NoValidators />
+                    : <NoValidators accountId={accountId}/>
                 : <SkeletonLoading
                     height='200px'
                     show={true}

packages/frontend/src/components/wallet/ActivitiesWrapper.js

@@ -19,6 +19,11 @@ import ActivityDetailModal from './ActivityDetailModal';
 const StyledContainer = styled.div`
     width: 100%;
 
+    .no-activity {
+        color: #B4B4B4;
+        line-height: 150%;
+    }
+
     @media (min-width: 992px) {
         border: 2px solid #F0F0F0;
         border-radius: 8px;
@@ -93,8 +98,7 @@ const ActivitiesWrapper = () => {
     const dispatch = useDispatch();
 
     const [transactionHash, setTransactionHash] = useState();
-
-    const accountId = useSelector((state) => selectAccountId(state));
+    const accountId = useSelector(selectAccountId);
     const transactions = useSelector((state) => selectTransactionsByAccountId(state, { accountId }));
     const transaction = useSelector((state) => selectOneTransactionByIdentity(state, { accountId, hash: transactionHash }));
     const activityLoader = useSelector((state) => selectTransactionsLoading(state, { accountId }));
@@ -119,6 +123,9 @@ const ActivitiesWrapper = () => {
                     setTransactionHash={setTransactionHash}
                 />
             ))}
+            {transactions?.length === 0 && !activityLoader && (
+                <div className='no-activity'><Translate id='dashboard.noActivity' /></div>
+            )}
             {transactionHash && 
                 <ActivityDetailModal 
                     open={!!transactionHash}

packages/frontend/src/components/wallet/Wallet.js

@@ -3,7 +3,6 @@ import { Translate } from 'react-localize-redux';
 import { Textfit } from 'react-textfit';
 import styled from 'styled-components';
 
-import { CREATE_IMPLICIT_ACCOUNT } from '../../../../../features';
 import classNames from '../../utils/classNames';
 import { SHOW_NETWORK_BANNER } from '../../utils/wallet';
 import Balance from '../common/balance/Balance';
@@ -292,12 +291,13 @@ export function Wallet({
                             balance={balance}
                             tokensLoader={tokensLoader}
                             fungibleTokens={fungibleTokensList}
+                            accountId={accountId}
                         />
 
                     }
                 </div>
                 <div className='right'>
-                    {CREATE_IMPLICIT_ACCOUNT
+                    {accountId
                         ? <Sidebar availableAccounts={availableAccounts} />
                         : <ExploreApps />
                     }
@@ -328,19 +328,15 @@ export function Wallet({
     );
 }
 
-const FungibleTokens = ({ balance, tokensLoader, fungibleTokens }) => {
-    const availableBalanceIsZero = balance?.balanceAvailable === '0';
-    const hideFungibleTokenSection =
-        availableBalanceIsZero &&
-        fungibleTokens?.length === 1 &&
-        fungibleTokens[0]?.onChainFTMetadata?.symbol === 'NEAR';
+const FungibleTokens = ({ balance, tokensLoader, fungibleTokens, accountId }) => {
+    const zeroBalanceAccount = !accountId && !tokensLoader;
     return (
         <>
             <div className='total-balance'>
                 <Textfit mode='single' max={48}>
                     <Balance
                         showBalanceInNEAR={false}
-                        amount={balance?.balanceAvailable}
+                        amount={balance?.balanceAvailable || '0'}
                         showAlmostEqualSignUSD={false}
                         showSymbolUSD={false}
                         showSignUSD={true}
@@ -383,10 +379,10 @@ const FungibleTokens = ({ balance, tokensLoader, fungibleTokens }) => {
                     <Translate id='button.topUp' />
                 </FormButton>
             </div>
-            {availableBalanceIsZero &&
+            {zeroBalanceAccount &&
                 <DepositNearBanner />
             }
-            {!hideFungibleTokenSection &&
+            {!zeroBalanceAccount &&
                 <>
                     <div className='sub-title tokens'>
                         <span className={classNames({ dots: tokensLoader })}><Translate id='wallet.yourPortfolio' /></span>

packages/frontend/src/redux/actions/account.js

@@ -595,6 +595,8 @@ export const { makeAccountActive, refreshAccountExternal, refreshUrl, updateStak
         (accountId) => ({
             accountId,
             ...showAlert({ onlyError: true, data: { accountId } })
+            // TODO: Should we show an alert if the account is not found / has no record on chain?
+            // Show zero balance instead of error with an on-page disclaimer that the acccount either doesn't exist or has no record on chain, yet?
         })
     ],
     REFRESH_URL: null,

packages/frontend/src/redux/sharedThunks/refreshAccountOwner.js

@@ -26,7 +26,9 @@ export default createAsyncThunk(
                         break;
                     }
                 }
-                dispatch(makeAccountActive(nextAccountId));
+                if (nextAccountId) {
+                    dispatch(makeAccountActive(nextAccountId));
+                }
 
                 // TODO: Make sure "problem creating" only shows for actual creation
                 return {

packages/frontend/src/routes/WalletWrapper.js

@@ -28,7 +28,7 @@ export function WalletWrapper({
     const createFromImplicitSuccess = useSelector(selectCreateFromImplicitSuccess);
     const createCustomName = useSelector(selectCreateCustomName);
     const fungibleTokensList = useFungibleTokensIncludingNEAR();
-    const tokensLoader = useSelector((state) => selectTokensLoading(state, { accountId })) || !balance?.total;
+    const tokensLoader = useSelector((state) => selectTokensLoading(state, { accountId }));
     const availableAccounts = useSelector(selectAvailableAccounts);
     const sortedNFTs = useSelector((state) => selectTokensWithMetadataForAccountId(state, { accountId }));
 

packages/frontend/src/translations/en.global.json

@@ -370,7 +370,8 @@
         }
     },
     "dashboard": {
-        "activity": "Recent activity"
+        "activity": "Recent activity",
+        "noActivity": "No activity has been recorded for this account."
     },
     "dashboardActivity": {
         "message": {