From f5fff3cc499399dc8476d0321e1d593623851196 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 8 Nov 2023 11:54:07 +0100
Subject: [PATCH 1/5] Allow to remove account

---
 .changelog/1752.feature.md                    |  1 +
 .../Features/Account/ManageableAccount.tsx    | 14 +++++++----
 .../Account/ManageableAccountDetails.tsx      | 23 +++++++++++++------
 .../Features/AccountSelector/index.tsx        |  8 +++++--
 src/app/state/wallet/index.ts                 |  8 ++++++-
 src/locales/en/translation.json               |  3 +++
 6 files changed, 43 insertions(+), 14 deletions(-)
 create mode 100644 .changelog/1752.feature.md

diff --git a/.changelog/1752.feature.md b/.changelog/1752.feature.md
new file mode 100644
index 0000000000..d3b051164c
--- /dev/null
+++ b/.changelog/1752.feature.md
@@ -0,0 +1 @@
+Add remove account feature
diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx
index 604a3d18d2..238eaa6276 100644
--- a/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx
+++ b/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx
@@ -14,22 +14,28 @@ import { ManageableAccountDetails } from './ManageableAccountDetails'
 export const ManageableAccount = ({
   wallet,
   isActive,
-  onClick,
+  deleteWallet,
+  selectWallet,
 }: {
   wallet: Wallet
   isActive: boolean
-  onClick: (address: string) => void
+  deleteWallet: (address: string) => void
+  selectWallet: (address: string) => void
 }) => {
   const { t } = useTranslation()
   const [layerVisibility, setLayerVisibility] = useState(false)
   const isMobile = useContext(ResponsiveContext) === 'small'
+  const handleDelete = (address: string) => {
+    deleteWallet(address)
+    setLayerVisibility(false)
+  }
 
   return (
     <>
       <Account
         address={wallet.address}
         balance={wallet.balance}
-        onClick={onClick}
+        onClick={selectWallet}
         isActive={isActive}
         path={wallet.path}
         displayBalance={true}
@@ -47,7 +53,7 @@ export const ManageableAccount = ({
                 height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}
                 pad={{ vertical: 'medium' }}
               >
-                <ManageableAccountDetails wallet={wallet} />
+                <ManageableAccountDetails deleteAccount={handleDelete} wallet={wallet} />
                 <Box direction="row" justify="between" pad={{ top: 'large' }}>
                   <Button
                     secondary
diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
index 4805c37708..63994386e0 100644
--- a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
+++ b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
@@ -18,10 +18,11 @@ import { LayerContainer } from './../LayerContainer'
 import { uintToBase64, hex2uint } from '../../../../lib/helpers'
 
 interface ManageableAccountDetailsProps {
+  deleteAccount: (address: string) => void
   wallet: Wallet
 }
 
-export const ManageableAccountDetails = ({ wallet }: ManageableAccountDetailsProps) => {
+export const ManageableAccountDetails = ({ deleteAccount, wallet }: ManageableAccountDetailsProps) => {
   const { t } = useTranslation()
   const [layerVisibility, setLayerVisibility] = useState(false)
   const [acknowledge, setAcknowledge] = useState(false)
@@ -45,12 +46,20 @@ export const ManageableAccountDetails = ({ wallet }: ManageableAccountDetailsPro
         <Text size="small" margin={'small'}>
           <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
         </Text>
-        <Button
-          alignSelf="start"
-          label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
-          disabled={!wallet.privateKey}
-          onClick={() => setLayerVisibility(true)}
-        />
+        <Box justify="between" direction="row">
+          <Button
+            alignSelf="start"
+            label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
+            disabled={!wallet.privateKey}
+            onClick={() => setLayerVisibility(true)}
+          />
+          <Button
+            plain
+            color="status-error"
+            label={t('toolbar.settings.account.delete', 'Delete Account')}
+            onClick={() => deleteAccount(wallet.address)}
+          />
+        </Box>
       </Box>
       {layerVisibility && (
         <LayerContainer hideLayer={hideLayer}>
diff --git a/src/app/components/Toolbar/Features/AccountSelector/index.tsx b/src/app/components/Toolbar/Features/AccountSelector/index.tsx
index ffc9b07ecf..cfa2bec295 100644
--- a/src/app/components/Toolbar/Features/AccountSelector/index.tsx
+++ b/src/app/components/Toolbar/Features/AccountSelector/index.tsx
@@ -23,7 +23,7 @@ export const AccountSelector = memo((props: Props) => {
   const wallets = useSelector(selectWallets)
   const activeAddress = useSelector(selectAddress)
 
-  const switchAccount = (address: string) => {
+  const selectWallet = (address: string) => {
     dispatch(walletActions.selectWallet(address))
     props.closeHandler()
   }
@@ -32,7 +32,11 @@ export const AccountSelector = memo((props: Props) => {
     <ManageableAccount
       key={wallet.address}
       wallet={wallet}
-      onClick={switchAccount}
+      deleteWallet={(address: string) => {
+        dispatch(walletActions.deleteWallet(address))
+        wallet.address === activeAddress && dispatch(walletActions.selectFirstWallet())
+      }}
+      selectWallet={selectWallet}
       isActive={wallet.address === activeAddress}
     />
   ))
diff --git a/src/app/state/wallet/index.ts b/src/app/state/wallet/index.ts
index 9704059fed..0908c264bf 100644
--- a/src/app/state/wallet/index.ts
+++ b/src/app/state/wallet/index.ts
@@ -1,4 +1,4 @@
-import { PayloadAction } from '@reduxjs/toolkit'
+import { PayloadAction, current } from '@reduxjs/toolkit'
 import { createSlice } from 'utils/@reduxjs/toolkit'
 
 import {
@@ -21,6 +21,12 @@ const slice = createSlice({
     openWalletFromMnemonic(state, action: PayloadAction<OpenSelectedAccountsPayload>) {},
     openWalletFromPrivateKey(state, action: PayloadAction<OpenFromPrivateKeyPayload>) {},
     openWalletsFromLedger(state, action: PayloadAction<OpenSelectedAccountsPayload>) {},
+    deleteWallet(state, action: PayloadAction<string>) {
+      delete state.wallets[action.payload]
+    },
+    selectFirstWallet(state) {
+      state.selectedWallet = Object.values(current(state.wallets))[0].address
+    },
     selectWallet(state, action: PayloadAction<string | undefined>) {
       state.selectedWallet = action.payload
     },
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index bdb2ad74fd..3ef079b2dc 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -427,6 +427,9 @@
       }
     },
     "settings": {
+      "account": {
+        "delete": "Delete Account"
+      },
       "cancel": "Cancel",
       "contacts": "Contacts",
       "exportPrivateKey": {

From e34506ff1a6bb05f86f75d1bb516eb0c63011f81 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Fri, 10 Nov 2023 13:37:33 +0100
Subject: [PATCH 2/5] Extract form with delete input confirmation

---
 src/app/components/DeleteInputForm/index.tsx  | 40 +++++++++++++++++++
 .../Persist/DeleteProfileButton.tsx           | 32 ++-------------
 src/locales/en/translation.json               |  8 ++--
 3 files changed, 49 insertions(+), 31 deletions(-)
 create mode 100644 src/app/components/DeleteInputForm/index.tsx

diff --git a/src/app/components/DeleteInputForm/index.tsx b/src/app/components/DeleteInputForm/index.tsx
new file mode 100644
index 0000000000..e815ac786f
--- /dev/null
+++ b/src/app/components/DeleteInputForm/index.tsx
@@ -0,0 +1,40 @@
+import { ReactNode } from 'react'
+import { Box } from 'grommet/es6/components/Box'
+import { Button } from 'grommet/es6/components/Button'
+import { useTranslation } from 'react-i18next'
+import { TextInput } from 'grommet/es6/components/TextInput'
+import { Form } from 'grommet/es6/components/Form'
+import { FormField } from 'grommet/es6/components/FormField'
+
+interface DeleteInputFormProps {
+  children: ReactNode
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export function DeleteInputForm({ children, onCancel, onConfirm }: DeleteInputFormProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Form onSubmit={onConfirm}>
+      {children}
+      <FormField
+        name="type_delete"
+        validate={(value: string | undefined) =>
+          !value || value.toLowerCase() !== t('deleteForm.confirmationKeyword', 'delete').toLowerCase()
+            ? t('deleteForm.hint', `Type '{{confirmationKeyword}}'`, {
+                confirmationKeyword: t('deleteForm.confirmationKeyword', 'delete'),
+              })
+            : undefined
+        }
+      >
+        <TextInput id="type_delete" name="type_delete" />
+      </FormField>
+
+      <Box direction="row" justify="between" pad={{ top: 'large' }}>
+        <Button secondary label={t('common.cancel', 'Cancel')} onClick={onCancel} />
+        <Button type="submit" label={t('deleteForm.confirm', 'Yes, delete')} primary color="status-error" />
+      </Box>
+    </Form>
+  )
+}
diff --git a/src/app/components/Persist/DeleteProfileButton.tsx b/src/app/components/Persist/DeleteProfileButton.tsx
index f0c877129c..290a3b3e19 100644
--- a/src/app/components/Persist/DeleteProfileButton.tsx
+++ b/src/app/components/Persist/DeleteProfileButton.tsx
@@ -10,6 +10,7 @@ import { LoginModalLayout } from './LoginModalLayout'
 import { TextInput } from 'grommet/es6/components/TextInput'
 import { Form } from 'grommet/es6/components/Form'
 import { FormField } from 'grommet/es6/components/FormField'
+import { DeleteInputForm } from '../../components/DeleteInputForm'
 
 interface DeleteProfileButtonProps {
   prominent?: boolean
@@ -45,7 +46,7 @@ export function DeleteProfileButton({ prominent }: DeleteProfileButtonProps) {
           onClickOutside={onCancel}
           onEsc={onCancel}
         >
-          <Form onSubmit={onConfirm}>
+          <DeleteInputForm onCancel={onCancel} onConfirm={onConfirm}>
             <Paragraph>
               <label htmlFor="type_delete">
                 <Trans
@@ -53,37 +54,12 @@ export function DeleteProfileButton({ prominent }: DeleteProfileButtonProps) {
                   i18nKey="persist.loginToProfile.deleteProfile.description"
                   defaults="Are you sure you want to delete this profile? This action cannot be undone and will <strong>erase your private keys</strong>.<br/><br/>To continue please enter '{{confirmationKeyword}}' below."
                   values={{
-                    confirmationKeyword: t(
-                      'persist.loginToProfile.deleteProfile.confirmationKeyword',
-                      'delete',
-                    ),
+                    confirmationKeyword: t('deleteForm.confirmationKeyword', 'delete'),
                   }}
                 />
               </label>
             </Paragraph>
-            <FormField
-              name="type_delete"
-              validate={(value: string | undefined) =>
-                !value ||
-                value.toLowerCase() !==
-                  t('persist.loginToProfile.deleteProfile.confirmationKeyword', 'delete').toLowerCase()
-                  ? t('persist.loginToProfile.deleteProfile.confirmationKeywordInvalid', `Type 'delete'`)
-                  : undefined
-              }
-            >
-              <TextInput id="type_delete" name="type_delete" />
-            </FormField>
-
-            <Box direction="row" justify="between" pad={{ top: 'large' }}>
-              <Button secondary label={t('common.cancel', 'Cancel')} onClick={onCancel} />
-              <Button
-                type="submit"
-                label={t('persist.loginToProfile.deleteProfile.confirm', 'Yes, delete')}
-                primary
-                color="status-error"
-              />
-            </Box>
-          </Form>
+          </DeleteInputForm>
         </LoginModalLayout>
       )}
     </>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 3ef079b2dc..e24d9f44cc 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -134,6 +134,11 @@
     "loadingError": "Couldn't load delegations.",
     "reclaimedAmount": "Amount to reclaim"
   },
+  "deleteForm": {
+    "confirm": "Yes, delete",
+    "confirmationKeyword": "delete",
+    "hint": "Type '{{confirmationKeyword}}'"
+  },
   "errors": {
     "LedgerDerivedDifferentAccount": "This account does not belong to the currently connected Ledger.",
     "LedgerOasisAppIsNotOpen": "Oasis App on Ledger is closed.",
@@ -364,9 +369,6 @@
     "loginToProfile": {
       "deleteProfile": {
         "button": "Delete profile",
-        "confirm": "Yes, delete",
-        "confirmationKeyword": "delete",
-        "confirmationKeywordInvalid": "Type 'delete'",
         "description": "Are you sure you want to delete this profile? This action cannot be undone and will <strong>erase your private keys</strong>.<br/><br/>To continue please enter '{{confirmationKeyword}}' below.",
         "title": "Delete Profile"
       },

From d7a4ac091ab8cbb2eae7ef023a80fac4707e34e1 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 8 Nov 2023 14:58:38 +0100
Subject: [PATCH 3/5] Create account delete confirmation modal

---
 .../Persist/DeleteProfileButton.tsx           |  4 --
 .../Toolbar/Features/Account/Account.tsx      |  6 +-
 .../Features/Account/DeleteAccount.tsx        | 61 +++++++++++++++++++
 .../Account/ManageableAccountDetails.tsx      | 13 +++-
 src/locales/en/translation.json               |  8 ++-
 5 files changed, 79 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/Toolbar/Features/Account/DeleteAccount.tsx

diff --git a/src/app/components/Persist/DeleteProfileButton.tsx b/src/app/components/Persist/DeleteProfileButton.tsx
index 290a3b3e19..092c7b205d 100644
--- a/src/app/components/Persist/DeleteProfileButton.tsx
+++ b/src/app/components/Persist/DeleteProfileButton.tsx
@@ -1,4 +1,3 @@
-import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { persistActions } from 'app/state/persist'
 import { useState } from 'react'
@@ -7,9 +6,6 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { Paragraph } from 'grommet/es6/components/Paragraph'
 import { LoginModalLayout } from './LoginModalLayout'
-import { TextInput } from 'grommet/es6/components/TextInput'
-import { Form } from 'grommet/es6/components/Form'
-import { FormField } from 'grommet/es6/components/FormField'
 import { DeleteInputForm } from '../../components/DeleteInputForm'
 
 interface DeleteProfileButtonProps {
diff --git a/src/app/components/Toolbar/Features/Account/Account.tsx b/src/app/components/Toolbar/Features/Account/Account.tsx
index bbfa1af7ba..5f4cb1e68b 100644
--- a/src/app/components/Toolbar/Features/Account/Account.tsx
+++ b/src/app/components/Toolbar/Features/Account/Account.tsx
@@ -15,7 +15,7 @@ import { DerivationFormatter, DerivationFormatterProps } from './DerivationForma
 export interface AccountProps {
   address: string
   balance: BalanceDetails | undefined
-  onClick: (address: string) => void
+  onClick?: (address: string) => void
   path?: number[]
   isActive: boolean
   displayBalance: boolean
@@ -48,9 +48,7 @@ export const Account = memo((props: AccountProps) => {
       fill="horizontal"
       role="checkbox"
       aria-checked={props.isActive}
-      onClick={() => {
-        props.onClick(props.address)
-      }}
+      onClick={props.onClick ? () => props.onClick!(props.address) : undefined}
       hoverIndicator={{ background: 'brand' }}
       direction="row"
     >
diff --git a/src/app/components/Toolbar/Features/Account/DeleteAccount.tsx b/src/app/components/Toolbar/Features/Account/DeleteAccount.tsx
new file mode 100644
index 0000000000..edc77ee9ee
--- /dev/null
+++ b/src/app/components/Toolbar/Features/Account/DeleteAccount.tsx
@@ -0,0 +1,61 @@
+import { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Box } from 'grommet/es6/components/Box'
+import { Paragraph } from 'grommet/es6/components/Paragraph'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { Text } from 'grommet/es6/components/Text'
+import { ResponsiveLayer } from '../../../ResponsiveLayer'
+import { DeleteInputForm } from '../../../../components/DeleteInputForm'
+import { Account } from '../Account/Account'
+import { Wallet } from '../../../../state/wallet/types'
+
+interface DeleteAccountProps {
+  onDelete: () => void
+  onCancel: () => void
+  wallet: Wallet
+}
+
+export const DeleteAccount = ({ onCancel, onDelete, wallet }: DeleteAccountProps) => {
+  const { t } = useTranslation()
+  const isMobile = useContext(ResponsiveContext) === 'small'
+
+  return (
+    <ResponsiveLayer
+      onClickOutside={onCancel}
+      onEsc={onCancel}
+      animation="none"
+      background="background-front"
+      modal
+      margin={isMobile ? 'none' : 'xlarge'}
+    >
+      <Box margin="medium">
+        <Box flex="grow" justify="center">
+          <Text weight="bold" size="medium" textAlign="center" margin={{ bottom: 'large' }}>
+            {t('toolbar.settings.delete.title', 'Delete Account')}
+          </Text>
+          <Text size="medium" textAlign="center" margin={{ bottom: 'medium' }}>
+            {t(
+              'toolbar.settings.delete.description',
+              'Are you sure you want to delete the following account?',
+            )}
+          </Text>
+          <Account address={wallet.address} balance={undefined} displayBalance={false} isActive />
+
+          <DeleteInputForm onCancel={onCancel} onConfirm={onDelete}>
+            <label htmlFor="type_delete">
+              <Paragraph fill textAlign="center">
+                {t(
+                  'toolbar.settings.delete.inputHelp',
+                  `This action cannot be undone. To continue please enter '{{confirmationKeyword}}' below.`,
+                  {
+                    confirmationKeyword: t('deleteForm.confirmationKeyword', 'delete'),
+                  },
+                )}
+              </Paragraph>
+            </label>
+          </DeleteInputForm>
+        </Box>
+      </Box>
+    </ResponsiveLayer>
+  )
+}
diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
index 63994386e0..c21e210706 100644
--- a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
+++ b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
@@ -16,6 +16,7 @@ import { AddressBox } from '../../../AddressBox'
 import { layerOverlayMinHeight } from '../layer'
 import { LayerContainer } from './../LayerContainer'
 import { uintToBase64, hex2uint } from '../../../../lib/helpers'
+import { DeleteAccount } from './DeleteAccount'
 
 interface ManageableAccountDetailsProps {
   deleteAccount: (address: string) => void
@@ -25,6 +26,7 @@ interface ManageableAccountDetailsProps {
 export const ManageableAccountDetails = ({ deleteAccount, wallet }: ManageableAccountDetailsProps) => {
   const { t } = useTranslation()
   const [layerVisibility, setLayerVisibility] = useState(false)
+  const [deleteLayerVisibility, setDeleteLayerVisibility] = useState(false)
   const [acknowledge, setAcknowledge] = useState(false)
   const [notificationVisible, setNotificationVisible] = useState(false)
   const isMobile = useContext(ResponsiveContext) === 'small'
@@ -56,8 +58,8 @@ export const ManageableAccountDetails = ({ deleteAccount, wallet }: ManageableAc
           <Button
             plain
             color="status-error"
-            label={t('toolbar.settings.account.delete', 'Delete Account')}
-            onClick={() => deleteAccount(wallet.address)}
+            label={t('toolbar.settings.delete.title', 'Delete Account')}
+            onClick={() => setDeleteLayerVisibility(true)}
           />
         </Box>
       </Box>
@@ -116,6 +118,13 @@ export const ManageableAccountDetails = ({ deleteAccount, wallet }: ManageableAc
           </Tabs>
         </LayerContainer>
       )}
+      {deleteLayerVisibility && (
+        <DeleteAccount
+          onDelete={() => deleteAccount(wallet.address)}
+          onCancel={() => setDeleteLayerVisibility(false)}
+          wallet={wallet}
+        />
+      )}
       {notificationVisible && (
         <Notification
           toast
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index e24d9f44cc..f3202f5604 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -429,11 +429,13 @@
       }
     },
     "settings": {
-      "account": {
-        "delete": "Delete Account"
-      },
       "cancel": "Cancel",
       "contacts": "Contacts",
+      "delete": {
+        "description": "Are you sure you want to delete the following account?",
+        "inputHelp": "This action cannot be undone. To continue please enter '{{confirmationKeyword}}' below.",
+        "title": "Delete Account"
+      },
       "exportPrivateKey": {
         "confirm": "I understand, reveal my private key",
         "copied": "Private key copied.",

From da4b4bbd5a6743d8e5212e32f236d4e367dca97f Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 8 Nov 2023 15:15:15 +0100
Subject: [PATCH 4/5] Disable account remove action

---
 .../Features/Account/ManageableAccount.tsx    | 12 +++---
 .../Account/ManageableAccountDetails.tsx      | 41 +++++++++++++++----
 .../Features/AccountSelector/index.tsx        | 15 ++++---
 src/app/state/wallet/selectors.ts             |  4 ++
 src/locales/en/translation.json               |  3 +-
 5 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx
index 238eaa6276..6a99209bc8 100644
--- a/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx
+++ b/src/app/components/Toolbar/Features/Account/ManageableAccount.tsx
@@ -19,16 +19,18 @@ export const ManageableAccount = ({
 }: {
   wallet: Wallet
   isActive: boolean
-  deleteWallet: (address: string) => void
+  deleteWallet?: (address: string) => void
   selectWallet: (address: string) => void
 }) => {
   const { t } = useTranslation()
   const [layerVisibility, setLayerVisibility] = useState(false)
   const isMobile = useContext(ResponsiveContext) === 'small'
-  const handleDelete = (address: string) => {
-    deleteWallet(address)
-    setLayerVisibility(false)
-  }
+  const handleDelete = deleteWallet
+    ? (address: string) => {
+        deleteWallet(address)
+        setLayerVisibility(false)
+      }
+    : undefined
 
   return (
     <>
diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
index c21e210706..a83b5e4af4 100644
--- a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
+++ b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
@@ -7,7 +7,9 @@ import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Tab } from 'grommet/es6/components/Tab'
 import { Tabs } from 'grommet/es6/components/Tabs'
 import { Text } from 'grommet/es6/components/Text'
+import { Tip } from 'grommet/es6/components/Tip'
 import { Copy } from 'grommet-icons/es6/icons/Copy'
+import { CircleInformation } from 'grommet-icons/es6/icons/CircleInformation'
 import { useTranslation } from 'react-i18next'
 import { NoTranslate } from 'app/components/NoTranslate'
 import { Wallet } from '../../../../state/wallet/types'
@@ -19,7 +21,8 @@ import { uintToBase64, hex2uint } from '../../../../lib/helpers'
 import { DeleteAccount } from './DeleteAccount'
 
 interface ManageableAccountDetailsProps {
-  deleteAccount: (address: string) => void
+  /** If undefined: delete button is disabled */
+  deleteAccount: undefined | ((address: string) => void)
   wallet: Wallet
 }
 
@@ -55,12 +58,34 @@ export const ManageableAccountDetails = ({ deleteAccount, wallet }: ManageableAc
             disabled={!wallet.privateKey}
             onClick={() => setLayerVisibility(true)}
           />
-          <Button
-            plain
-            color="status-error"
-            label={t('toolbar.settings.delete.title', 'Delete Account')}
-            onClick={() => setDeleteLayerVisibility(true)}
-          />
+
+          {deleteAccount ? (
+            <Button
+              plain
+              color="status-error"
+              label={t('toolbar.settings.delete.title', 'Delete Account')}
+              onClick={() => setDeleteLayerVisibility(true)}
+            />
+          ) : (
+            <Tip
+              content={t(
+                'toolbar.settings.delete.tooltip',
+                'You must have at least one account at all times.',
+              )}
+              dropProps={{ align: { bottom: 'top' } }}
+            >
+              <Box>
+                <Button
+                  icon={<CircleInformation size="18px" color="status-error" />}
+                  disabled={true}
+                  plain
+                  color="status-error"
+                  label={t('toolbar.settings.delete.title', 'Delete Account')}
+                  onClick={() => setDeleteLayerVisibility(true)}
+                />
+              </Box>
+            </Tip>
+          )}
         </Box>
       </Box>
       {layerVisibility && (
@@ -118,7 +143,7 @@ export const ManageableAccountDetails = ({ deleteAccount, wallet }: ManageableAc
           </Tabs>
         </LayerContainer>
       )}
-      {deleteLayerVisibility && (
+      {deleteLayerVisibility && deleteAccount && (
         <DeleteAccount
           onDelete={() => deleteAccount(wallet.address)}
           onCancel={() => setDeleteLayerVisibility(false)}
diff --git a/src/app/components/Toolbar/Features/AccountSelector/index.tsx b/src/app/components/Toolbar/Features/AccountSelector/index.tsx
index cfa2bec295..4510a3c0b1 100644
--- a/src/app/components/Toolbar/Features/AccountSelector/index.tsx
+++ b/src/app/components/Toolbar/Features/AccountSelector/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 import { walletActions } from 'app/state/wallet'
-import { selectAddress, selectWallets } from 'app/state/wallet/selectors'
+import { selectAddress, selectWallets, selectHasOneAccount } from 'app/state/wallet/selectors'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { memo } from 'react'
@@ -22,6 +22,7 @@ export const AccountSelector = memo((props: Props) => {
   const dispatch = useDispatch()
   const wallets = useSelector(selectWallets)
   const activeAddress = useSelector(selectAddress)
+  const hasOneAccount = useSelector(selectHasOneAccount)
 
   const selectWallet = (address: string) => {
     dispatch(walletActions.selectWallet(address))
@@ -32,10 +33,14 @@ export const AccountSelector = memo((props: Props) => {
     <ManageableAccount
       key={wallet.address}
       wallet={wallet}
-      deleteWallet={(address: string) => {
-        dispatch(walletActions.deleteWallet(address))
-        wallet.address === activeAddress && dispatch(walletActions.selectFirstWallet())
-      }}
+      deleteWallet={
+        hasOneAccount
+          ? undefined
+          : (address: string) => {
+              dispatch(walletActions.deleteWallet(address))
+              wallet.address === activeAddress && dispatch(walletActions.selectFirstWallet())
+            }
+      }
       selectWallet={selectWallet}
       isActive={wallet.address === activeAddress}
     />
diff --git a/src/app/state/wallet/selectors.ts b/src/app/state/wallet/selectors.ts
index e04e049795..645a6171ea 100644
--- a/src/app/state/wallet/selectors.ts
+++ b/src/app/state/wallet/selectors.ts
@@ -21,3 +21,7 @@ export const selectPublicKey = createSelector([selectActiveWallet], wallet => wa
 export const selectBalance = createSelector([selectActiveWallet], wallet => wallet?.balance)
 export const selectType = createSelector([selectActiveWallet], wallet => wallet?.type)
 export const selectHasAccounts = createSelector([selectWallets], wallets => Object.keys(wallets).length > 0)
+export const selectHasOneAccount = createSelector(
+  [selectWallets],
+  wallets => Object.keys(wallets).length === 1,
+)
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index f3202f5604..5f879dc277 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -434,7 +434,8 @@
       "delete": {
         "description": "Are you sure you want to delete the following account?",
         "inputHelp": "This action cannot be undone. To continue please enter '{{confirmationKeyword}}' below.",
-        "title": "Delete Account"
+        "title": "Delete Account",
+        "tooltip": "You must have at least one account at all times."
       },
       "exportPrivateKey": {
         "confirm": "I understand, reveal my private key",

From e6be568183dfa29c71026f50017fcfcfad934f13 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 8 Nov 2023 16:15:46 +0100
Subject: [PATCH 5/5] Add playwright tests to account remove feature

---
 playwright/tests/toolbar.spec.ts | 49 ++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/playwright/tests/toolbar.spec.ts b/playwright/tests/toolbar.spec.ts
index 1fad82e1db..d8e574a571 100644
--- a/playwright/tests/toolbar.spec.ts
+++ b/playwright/tests/toolbar.spec.ts
@@ -1,5 +1,5 @@
-import { test, expect } from '@playwright/test'
-import { password, privateKey, privateKeyAddress } from '../utils/test-inputs'
+import { test, expect, Page } from '@playwright/test'
+import { mnemonic, mnemonicAddress0, password, privateKey, privateKeyAddress } from '../utils/test-inputs'
 import { fillPrivateKeyAndPassword } from '../utils/fillPrivateKey'
 import { warnSlowApi } from '../utils/warnSlowApi'
 import { mockApi } from '../utils/mockApi'
@@ -75,4 +75,49 @@ test.describe('My Accounts tab', () => {
     await page.getByText('I understand, reveal my private key').click()
     await expect(page.getByText(privateKey)).toBeVisible()
   })
+
+  test('should not be able to remove an account', async ({ page }) => {
+    await page.goto('/open-wallet/private-key')
+    await fillPrivateKeyAndPassword(page)
+    await page.getByTestId('account-selector').click()
+    await page.getByText('Manage').click()
+    await expect(page.getByText('Delete Account')).toBeDisabled()
+  })
+
+  async function openAccountSelectorWithMultipleItems(page: Page) {
+    await page.goto('/open-wallet/mnemonic')
+    await page.getByPlaceholder('Enter your keyphrase here').fill(mnemonic)
+    await page.getByRole('button', { name: /Import my wallet/ }).click()
+    const uncheckedAccounts = page.getByRole('checkbox', { name: /oasis1/, checked: false })
+    await expect(uncheckedAccounts).toHaveCount(3)
+    for (const account of await uncheckedAccounts.elementHandles()) await account.click()
+    await page.getByRole('button', { name: /Open/ }).click()
+    await page.getByTestId('account-selector').click()
+    await expect(page.getByTestId('account-choice')).toHaveCount(4)
+  }
+
+  test('should remove currently selected account and switch to the first one in account list', async ({
+    page,
+  }) => {
+    await openAccountSelectorWithMultipleItems(page)
+    await page.getByText('Manage').nth(0).click()
+    await page.getByText('Delete Account').click()
+    await page.getByRole('textbox').fill('foo')
+    await page.getByRole('button', { name: 'Yes, delete' }).click()
+    expect(page.getByText("Type 'delete'")).toBeVisible()
+    await page.getByRole('textbox').fill('delete')
+    await page.getByRole('button', { name: 'Yes, delete' }).click()
+    await expect(page).not.toHaveURL(new RegExp(`/account/${mnemonicAddress0}`))
+    await expect(page.getByTestId('account-choice')).toHaveCount(3)
+  })
+
+  test('should remove not currently selected account', async ({ page }) => {
+    await openAccountSelectorWithMultipleItems(page)
+    await page.getByText('Manage').nth(1).click()
+    await page.getByText('Delete Account').click()
+    await page.getByRole('textbox').fill('delete')
+    await page.getByRole('button', { name: 'Yes, delete' }).click()
+    await expect(page).toHaveURL(new RegExp(`/account/${mnemonicAddress0}`))
+    await expect(page.getByTestId('account-choice')).toHaveCount(3)
+  })
 })