Disable account remove action

oasisprotocol · Nov 8, 2023 · bd24524 · bd24524
1 parent aee7c15
commit bd24524
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 19 deletions.
diff --git 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
@@ -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,7 @@ import { uintToBase64, hex2uint } from '../../../../lib/helpers'
 import { DeleteAccount } from './DeleteAccount'
 
 interface ManageableAccountDetailsProps {
-  deleteWallet: (address: string) => void
+  deleteWallet?: (address: string) => void
   wallet: Wallet
 }
 
@@ -55,12 +57,34 @@ export const ManageableAccountDetails = ({ deleteWallet, wallet }: ManageableAcc
             disabled={!wallet.privateKey}
             onClick={() => setLayerVisibility(true)}
           />
-          <Button
-            plain
-            color="status-error"
-            label={t('toolbar.settings.delete.title', 'Delete Account')}
-            onClick={() => setDeleteLayerVisibility(true)}
-          />
+
+          {deleteWallet ? (
+            <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 +142,7 @@ export const ManageableAccountDetails = ({ deleteWallet, wallet }: ManageableAcc
           </Tabs>
         </LayerContainer>
       )}
-      {deleteLayerVisibility && (
+      {deleteLayerVisibility && deleteWallet && (
         <DeleteAccount
           onDelete={() => deleteWallet(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
@@ -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
@@ -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
@@ -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 ‘delete’ 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",