feat: Enable 'Remove Wallet Account'

packages/frontend/src/components/common/FormButton.js

@@ -126,8 +126,8 @@ const CustomButton = styled.button`
         }
 
         &.red {
-            border-color: #ff585d;
-            background: #ff585d;
+            border-color: #E5484D;
+            background: #E5484D;
 
             :disabled {
                 background: #e6e6e6;
@@ -137,9 +137,9 @@ const CustomButton = styled.button`
             :active,
             :hover,
             :focus {
-                border-color: #ff585d;
+                border-color: #E5484D;
                 background: #fff;
-                color: #ff585d;
+                color: #E5484D;
             }
             &.dots {
                 color: #fff;

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

@@ -37,6 +37,7 @@ import LockupAvailTransfer from './balances/LockupAvailTransfer';
 import HardwareDevices from './hardware_devices/HardwareDevices';
 import MobileSharingWrapper from './mobile_sharing/MobileSharingWrapper';
 import RecoveryContainer from './Recovery/RecoveryContainer';
+import RemoveAccountWrapper from './remove_account/RemoveAccountWrapper';
 import TwoFactorAuth from './two_factor/TwoFactorAuth';
 
 const { fetchRecoveryMethods } = recoveryMethodsActions;
@@ -285,6 +286,7 @@ export function Profile({ match }) {
                                 )}
                             </>
                         }
+                        <RemoveAccountWrapper/>
                         {!IS_MAINNET && !account.ledgerKey && !isMobile() &&
                             <MobileSharingWrapper/>
                         }

packages/frontend/src/components/profile/remove_account/RemoveAccountModal.js

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { Translate } from 'react-localize-redux';
+import styled from 'styled-components';
+
+import Checkbox from '../../common/Checkbox';
+import FormButton from '../../common/FormButton';
+import Modal from '../../common/modal/Modal';
+import SafeTranslate from '../../SafeTranslate';
+
+const Container = styled.div`
+    &&&&& {
+        padding: 15px 0 10px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+
+        h3 {
+            margin: 15px 0;
+            font-size: 18px;
+            font-weight: 700;
+        }
+
+        p {
+            line-height: 1.5;
+        }
+
+        label {
+            text-align: left;
+            display: flex;
+            background-color: #F5FAFF;
+            margin: 25px -25px 0 -25px;
+            padding: 15px 25px;
+            line-height: 1.5;
+
+            > div {
+                > div {
+                    border-color: #0081F1;
+                }
+            }
+
+            > span {
+                margin-left: 10px;
+                word-break: break-word;
+                color: #006ADC;
+            }
+
+            b {
+                color: #272729;
+            }
+        }
+
+        > button {
+            margin-top: 25px;
+            width: 100%;
+        }
+    }
+`;
+
+export default ({
+    accountId,
+    isOpen,
+    onRemoveAccount,
+    onClose
+}) => {
+    const [removeAccountDisclaimerApproved, setRemoveAccountDisclaimerApproved] = useState(false);
+    return (
+        <Modal
+            id='remove-account-modal'
+            isOpen={isOpen}
+            onClose={onClose}
+            modalSize='sm'
+        >
+            <Container>
+                <h3><Translate id='removeAccount.title' /></h3>
+                <p><Translate id='removeAccount.desc' /></p>
+                <label>
+                    <Checkbox
+                        checked={removeAccountDisclaimerApproved}
+                        onChange={(e) => setRemoveAccountDisclaimerApproved(e.target.checked)}
+                    />
+                    <span>
+                        <SafeTranslate
+                            id='removeAccount.disclaimer'
+                            data={{ accountId: accountId }}
+                        />
+                    </span>
+                </label>
+                <FormButton
+                    disabled={!removeAccountDisclaimerApproved}
+                    onClick={onRemoveAccount}
+                >
+                    <Translate id='button.removeAccount' />
+                </FormButton>
+                <FormButton
+                    className='link'
+                    onClick={onClose}>
+                    <Translate id='button.cancel' />
+                </FormButton>
+            </Container>
+        </Modal>
+    );
+};

packages/frontend/src/components/profile/remove_account/RemoveAccountWrapper.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Translate } from 'react-localize-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import styled from 'styled-components';
+
+import { switchAccount } from '../../../redux/actions/account';
+import { selectAccountId } from '../../../redux/slices/account';
+import { wallet } from '../../../utils/wallet';
+import FormButton from '../../common/FormButton';
+import Container from '../../common/styled/Container.css';
+import RemoveAccountModal from './RemoveAccountModal';
+
+const StyledContainer = styled(Container)`
+    > button {
+        width: 100%;
+    }
+`;
+
+export default () => {
+    const dispatch = useDispatch();
+    const [showRemoveAccountModal, setShowRemoveAccountModal] = useState(false);
+    const accountId = useSelector(selectAccountId);
+    return (
+        <StyledContainer>
+            <FormButton 
+                color='red'
+                onClick={() => setShowRemoveAccountModal(true)}
+            >
+                <Translate id='removeAccount.button' />
+            </FormButton>
+            {showRemoveAccountModal &&
+                <RemoveAccountModal
+                    onClose={() => setShowRemoveAccountModal(false)}
+                    onRemoveAccount={() => {
+                        const walletAccounts = wallet.removeWalletAccount(accountId);
+                        if (Object.keys(walletAccounts).length === 0) {
+                            location.reload();
+                        } else {
+                            dispatch(switchAccount({ accountId: Object.keys(walletAccounts)[0] }));
+                        }
+                        setShowRemoveAccountModal(false);
+                    }}
+                    isOpen={showRemoveAccountModal}
+                    accountId={accountId}
+                />
+            }
+        </StyledContainer>
+    );
+};

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

@@ -250,6 +250,7 @@
         "reserveMyAccountId": "Reserve My Account ID",
         "resubmit": "Resubmit",
         "retry": "Retry",
+        "removeAccount": "Remove Account",
         "returnToApp": "Return to App",
         "saveChanges": "Save Changes",
         "secureMyAccount": "Secure My Account",
@@ -979,6 +980,12 @@
         "subTitle2": "Enhancements",
         "title": "Release Notes"
     },
+    "removeAccount": {
+        "button": "Remove Account from Wallet",
+        "desc": "You will need your recovery method to re-import this account in the future. Make sure you still have access to it.",
+        "disclaimer": "I have access to the recovery method for <b>${accountId}</b>",
+        "title": "Remove Account?"
+    },
     "reservedForFeesInfo": "Up to ${data} NEAR is reserved to cover the cost of transactions.",
     "selectAccountDropdown": {
         "account": "Account",

packages/frontend/src/utils/localStorage.js

@@ -30,3 +30,11 @@ export const getReleaseNotesClosed = (version) => {
 export const setLedgerHdPath = ({ accountId, path }) => {
     localStorage.setItem(`ledgerHdPath:${accountId}`, path);
 };
+
+export const setWalletAccounts = (walletAccountsKey, walletAccounts) => {
+    localStorage.setItem(walletAccountsKey, JSON.stringify(walletAccounts));
+};
+
+export const removeActiveAccount = (activeAccountKey) => {
+    localStorage.removeItem(activeAccountKey);
+};

packages/frontend/src/utils/wallet.js

@@ -15,7 +15,7 @@ import { actions as ledgerActions } from '../redux/slices/ledger';
 import sendJson from '../tmp_fetch_send_json';
 import { decorateWithLockup } from './account-with-lockup';
 import { getAccountIds } from './helper-api';
-import { setAccountConfirmed } from './localStorage';
+import { setAccountConfirmed, setWalletAccounts, removeActiveAccount, removeAccountConfirmed } from './localStorage';
 import { TwoFactor } from './twoFactor';
 import { WalletError } from './walletError';
 
@@ -142,8 +142,18 @@ class Wallet {
         this.accountId = localStorage.getItem(KEY_ACTIVE_ACCOUNT_ID) || '';
     }
 
+    removeWalletAccount(accountId) {
+        let walletAccounts = this.getAccountsLocalStorage();
+        delete walletAccounts[accountId];
+        setWalletAccounts(KEY_WALLET_ACCOUNTS, walletAccounts);
+        this.keyStore.removeKey(NETWORK_ID, accountId);
+        removeActiveAccount(KEY_ACTIVE_ACCOUNT_ID);
+        removeAccountConfirmed(accountId);
+        return walletAccounts;
+    }
+
     getAccountsLocalStorage() {
-        this.accounts = JSON.parse(
+        return this.accounts = JSON.parse(
             localStorage.getItem(KEY_WALLET_ACCOUNTS) || '{}'
         );
     }