feat: add SignTransferAccountNotFound screen

packages/frontend/src/components/sign/SignTransferAccountNotFound.js

@@ -0,0 +1,127 @@
+import React from "react";
+import { Translate } from "react-localize-redux";
+import styled from "styled-components";
+
+import AccountNotFound from "../../images/icon-account-not-found.svg";
+import ArrowUpImage from "../../images/icon-arrow-up-green.svg";
+import FormButton from "../common/FormButton";
+import Container from "../common/styled/Container.css";
+import SafeTranslate from "../SafeTranslate";
+
+const CustomContainer = styled(Container)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #25282a;
+    text-align: center;
+
+    .title {
+        margin-top: 23px;
+
+        h2 {
+            font-weight: 900;
+            font-size: 22px;
+            color: #24272a;
+        }
+    }
+
+    && .text {
+        color: #72727a;
+        margin-top: 24px;
+    }
+
+    .buttons {
+        display: flex;
+        width: 100%;
+        margin-top: 40px;
+
+        button {
+            flex: 1;
+
+            &:last-of-type {
+                margin-left: 30px;
+
+                @media (min-width: 768px) {
+                    margin-left: 50px;
+                }
+            }
+        }
+    }
+
+    .fees {
+        width: 100%;
+        border: 1px solid #f0f0f1;
+        padding: 15px;
+        border-radius: 8px;
+        margin-top: 30px;
+        color: #72727a;
+
+        b {
+            color: #25282a;
+        }
+
+        .fees-line {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 12px;
+
+            .tgas {
+                color: #00c08b;
+                position: relative;
+
+                :after {
+                    content: "";
+                    position: absolute;
+                    background: url(${ArrowUpImage}) center top no-repeat;
+                    width: 16px;
+                    height: 17px;
+                    left: -22px;
+                    top: 1px;
+                }
+            }
+        }
+    }
+`;
+
+const SignTransferAccountNotFound = ({
+    handleCancel,
+    signCallbackUrl,
+    submittingTransaction,
+    signTransactionSignerId,
+}) => (
+    <CustomContainer className="small-centered">
+        <div className="icon">
+            <img src={AccountNotFound} alt="Retry" />
+        </div>
+        <div className="title">
+            <h2>
+                <Translate id="sign.accountNotFound.title" />
+            </h2>
+        </div>
+        <div className="text">
+            <SafeTranslate
+                id="sign.accountNotFound.body"
+                data={{ signCallbackUrl, signTransactionSignerId }}
+            />
+        </div>
+        <div className="buttons">
+            <FormButton
+                onClick={handleCancel}
+                disabled={submittingTransaction}
+                color="gray-blue"
+            >
+                <Translate id="button.cancel" />
+            </FormButton>
+            <FormButton
+                linkTo="/recover-account"
+                disabled={submittingTransaction}
+                sending={submittingTransaction}
+            >
+                <Translate id="button.importAccount" />
+            </FormButton>
+        </div>
+    </CustomContainer>
+);
+
+export default SignTransferAccountNotFound;

packages/frontend/src/components/sign/v2/SignTransaction.js

@@ -4,7 +4,6 @@ import { Translate } from 'react-localize-redux';
 import styled from 'styled-components';
 
 import Balance from '../../common/balance/Balance';
-import FormButton from '../../common/FormButton';
 import Tooltip from '../../common/Tooltip';
 
 const StyledContainer = styled.div`
@@ -90,8 +89,7 @@ export default ({
     transferAmount,
     sender,
     estimatedFees,
-    availableBalance,
-    onClickEditAccount
+    availableBalance
 }) => {
     const isTransferTransaction = new BN(transferAmount).gt(new BN(0));
     return (
@@ -104,16 +102,7 @@ export default ({
                 />
             }
             <div className={`account from ${!isTransferTransaction ? 'no-border' : ''}`}>
-                <div className='left'>
-                    <Translate id='transfer.from' />
-                    {' • '}
-                    <FormButton
-                        className="link"
-                        onClick={onClickEditAccount}
-                    >
-                        <Translate id="button.edit" />
-                    </FormButton>
-                </div>
+                <Translate id='transfer.from' />
                 <div className='right'>
                     <div className='account-id'>{sender}</div>
                     <Balance

packages/frontend/src/components/sign/v2/SignTransactionSummary.js

@@ -52,7 +52,6 @@ export default ({
     onClickCancel,
     onClickApprove,
     onClickMoreInformation,
-    onClickEditAccount,
     accountUrlReferrer,
     submittingTransaction
 }) => {
@@ -72,7 +71,6 @@ export default ({
                 sender={accountLocalStorageAccountId}
                 estimatedFees={estimatedFees}
                 availableBalance={availableBalance}
-                onClickEditAccount={onClickEditAccount}
             />
             <FormButton
                 className='link'

packages/frontend/src/components/sign/v2/SignTransactionSummaryWrapper.js

@@ -13,7 +13,6 @@ import SignTransactionSummary from './SignTransactionSummary';
 
 export default ({
     onClickMoreInformation,
-    onClickEditAccount,
     onClickCancel,
     onClickApprove,
     submittingTransaction,
@@ -34,7 +33,6 @@ export default ({
             onClickCancel={onClickCancel}
             onClickApprove={onClickApprove}
             onClickMoreInformation={onClickMoreInformation}
-            onClickEditAccount={onClickEditAccount}
             accountUrlReferrer={accountUrlReferrer}
             submittingTransaction={submittingTransaction}
         />

packages/frontend/src/redux/slices/availableAccounts/index.js

@@ -50,3 +50,8 @@ export const selectAvailableAccounts = createSelector(
     selectAvailableAccountsSlice,
     (availableAccounts) => availableAccounts.items || []
 );
+
+export const selectAvailableAccountsIsLoading = createSelector(
+    selectAvailableAccountsSlice,
+    (availableAccounts) => availableAccounts.status && availableAccounts.status.loading
+);

packages/frontend/src/redux/slices/sign/index.js

@@ -177,6 +177,14 @@ export const selectSignTransactions = createSelector(
     (sign) => sign.transactions || []
 );
 
+export const selectSignTransactionsBatchIsValid = createSelector(
+    [selectSignTransactions],
+    (transactions) => {
+        const firstSignerId = transactions.length && transactions[0].signerId;
+        return !transactions.length || transactions.every(({signerId}) => signerId === firstSignerId);
+    }
+);
+
 export const selectSignTransactionAmount = createSelector(
     [selectSignSlice],
     (sign) => sign.totalAmount

packages/frontend/src/routes/SignWrapper.js

@@ -2,15 +2,14 @@ import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import AccountSelector from '../components/accounts/account_selector/AccountSelector';
-import Container from '../components/common/styled/Container.css';
+import SignTransferAccountNotFound from '../components/sign/SignTransferAccountNotFound';
 import SignTransferRetry from '../components/sign/SignTransferRetry';
 import SignTransactionDetailsWrapper from '../components/sign/v2/SignTransactionDetailsWrapper';
 import SignTransactionSummaryWrapper from '../components/sign/v2/SignTransactionSummaryWrapper';
 import { Mixpanel } from '../mixpanel';
-import { getAccountBalance, redirectTo, switchAccount } from '../redux/actions/account';
-import { selectAccountAccountsBalances, selectAccountId, selectAccountLocalStorageAccountId } from '../redux/slices/account';
-import { selectAvailableAccounts } from '../redux/slices/availableAccounts';
+import { switchAccount } from '../redux/actions/account';
+import { selectAccountId } from '../redux/slices/account';
+import { selectAvailableAccounts, selectAvailableAccountsIsLoading } from '../redux/slices/availableAccounts';
 import {
     addQueryParams,
     handleSignTransactions,
@@ -20,7 +19,8 @@ import {
     selectSignCallbackUrl,
     selectSignMeta,
     selectSignTransactionHashes,
-    selectSignTransactions
+    selectSignTransactions,
+    selectSignTransactionsBatchIsValid
 } from '../redux/slices/sign';
 
 export function SignWrapper() {
@@ -30,41 +30,50 @@ export function SignWrapper() {
         TRANSACTION_SUMMARY: 0,
         TRANSACTION_DETAILS: 1,
         INSUFFICIENT_NETWORK_FEE: 2,
-        ACCOUNT_SELECTION: 3
+        ACCOUNT_NOT_FOUND: 3
     };
 
     const [currentDisplay, setCurrentDisplay] = useState(DISPLAY.TRANSACTION_SUMMARY);
-    const [ customAccount, setCustomAccount ] = useState(false);
 
     const signFeesGasLimitIncludingGasChanges = useSelector(selectSignFeesGasLimitIncludingGasChanges);
     const signStatus = useSelector(selectSignStatus);
     const signCallbackUrl = useSelector(selectSignCallbackUrl);
     const signMeta = useSelector(selectSignMeta);
     const transactionHashes = useSelector(selectSignTransactionHashes);
-    const accountLocalStorageAccountId = useSelector(selectAccountLocalStorageAccountId);
     const availableAccounts = useSelector(selectAvailableAccounts);
-    const accountAccountsBalances = useSelector(selectAccountAccountsBalances);
+    const availableAccountsIsLoading = useSelector(selectAvailableAccountsIsLoading);
     const transactions = useSelector(selectSignTransactions);
     const accountId = useSelector(selectAccountId);
+    const transactionBatchisValid = useSelector(selectSignTransactionsBatchIsValid);
 
+    const signerId = transactions.length && transactions[0].signerId;
     const signGasFee = new BN(signFeesGasLimitIncludingGasChanges).div(new BN('1000000000000')).toString();
     const submittingTransaction = signStatus === SIGN_STATUS.IN_PROGRESS;
 
+    useEffect(() => {
+        if(!transactionBatchisValid) {
+            // switch to invalid batch screen
+        } else if(signerId && !availableAccountsIsLoading && !availableAccounts.some(
+            (accountId) => accountId === signerId
+        )) {
+            setCurrentDisplay(DISPLAY.ACCOUNT_NOT_FOUND);
+        } else {
+            setCurrentDisplay(DISPLAY.TRANSACTION_SUMMARY);
+        }
+    },[signerId, transactionBatchisValid, availableAccounts, accountId, availableAccountsIsLoading]);
+
     useEffect(() => {
             if (
-                !customAccount &&
-                transactions.length &&
-                accountId &&
-                accountId !== transactions[0].signerId &&
+                accountId !== signerId &&
                 availableAccounts.some(
-                    (accountId) => accountId === transactions[0].signerId
+                    (accountId) => accountId === signerId
                 )
             ) {
                 dispatch(
-                    switchAccount({ accountId: transactions[0].signerId })
+                    switchAccount({ accountId: signerId })
                 );
             }
-    }, [transactions, customAccount, availableAccounts, accountId]);
+    }, [signerId, availableAccounts, accountId]);
 
     useEffect(() => {
         if (signStatus === SIGN_STATUS.RETRY_TRANSACTION) {
@@ -106,33 +115,24 @@ export function SignWrapper() {
         }
     };
 
-    if(currentDisplay === DISPLAY.ACCOUNT_SELECTION) {
+    if (currentDisplay === DISPLAY.INSUFFICIENT_NETWORK_FEE) {
         return (
-            <Container className='small-centered border'>
-                <AccountSelector
-                    signedInAccountId={accountLocalStorageAccountId}
-                    availableAccounts={availableAccounts}
-                    accountsBalances={accountAccountsBalances}
-                    onSelectAccount={(accountId) => {
-                        dispatch(switchAccount({ accountId })).then(() => setCustomAccount(true));
-                        setCurrentDisplay(DISPLAY.TRANSACTION_SUMMARY);
-                    }}
-                    getAccountBalance={(accountId) => dispatch(getAccountBalance(accountId))}
-                    onSignInToDifferentAccount={() => {
-                        Mixpanel.track("LOGIN Click recover different account button");
-                        dispatch(redirectTo('/recover-account'));
-                    }}
-                />
-            </Container>
+            <SignTransferRetry
+                handleRetry={handleApproveTransaction}
+                handleCancel={handleCancelTransaction}
+                gasLimit={signGasFee}
+                submittingTransaction={submittingTransaction}
+            />
         );
     }
 
-    if (currentDisplay === DISPLAY.INSUFFICIENT_NETWORK_FEE) {
+    if (currentDisplay === DISPLAY.ACCOUNT_NOT_FOUND) {
         return (
-            <SignTransferRetry
+            <SignTransferAccountNotFound
                 handleRetry={handleApproveTransaction}
                 handleCancel={handleCancelTransaction}
-                gasLimit={signGasFee}
+                signCallbackUrl={signCallbackUrl}
+                signTransactionSignerId={signerId}
                 submittingTransaction={submittingTransaction}
             />
         );

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

@@ -1126,6 +1126,10 @@
         "startOverText": "Didn't write it down?"
     },
     "sign": {
+        "accountNotFound": {
+            "body": "<a href=\"${signCallbackUrl}\">${signCallbackUrl}</a> is requesting authorization from a NEAR account that cannot be found: <b>${signTransactionSignerId}</b><br/><br/>To approve any transactions, you’ll first need to import the account.",
+            "title": "Account Not Found"
+        },
         "ActionWarrning": {
             "binaryData": "Arguments contain binary data",
             "deleteAccount": "You are about to delete your account! Your NEAR balance will be destroyed, and all of your account data deleted.",