Move account modals to root (#3506)

* Move modals to root

* Adjust locations

* Fix toggle order

* Update packages/page-accounts/src/modals/Transfer.tsx

* Status positioning

packages/apps-routing/src/transfer.ts

@@ -4,7 +4,7 @@
 
 import { Route } from './types';
 
-import Modal from '@polkadot/app-accounts/Accounts/modals/Transfer';
+import Modal from '@polkadot/app-accounts/modals/Transfer';
 
 export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
   return {

packages/page-accounts/src/Accounts/Account.tsx

@@ -22,18 +22,18 @@ import { BN_ZERO, formatBalance, formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import { createMenuGroup } from '../util';
-import Backup from './modals/Backup';
-import ChangePass from './modals/ChangePass';
-import DelegateModal from './modals/Delegate';
-import Derive from './modals/Derive';
-import IdentityMain from './modals/IdentityMain';
-import IdentitySub from './modals/IdentitySub';
-import ProxyOverview from './modals/ProxyOverview';
-import MultisigApprove from './modals/MultisigApprove';
-import RecoverAccount from './modals/RecoverAccount';
-import RecoverSetup from './modals/RecoverSetup';
-import Transfer from './modals/Transfer';
-import UndelegateModal from './modals/Undelegate';
+import Backup from '../modals/Backup';
+import ChangePass from '../modals/ChangePass';
+import DelegateModal from '../modals/Delegate';
+import Derive from '../modals/Derive';
+import IdentityMain from '../modals/IdentityMain';
+import IdentitySub from '../modals/IdentitySub';
+import ProxyOverview from '../modals/ProxyOverview';
+import MultisigApprove from '../modals/MultisigApprove';
+import RecoverAccount from '../modals/RecoverAccount';
+import RecoverSetup from '../modals/RecoverSetup';
+import Transfer from '../modals/Transfer';
+import UndelegateModal from '../modals/Undelegate';
 import useMultisigApprovals from './useMultisigApprovals';
 import useProxies from './useProxies';
 

packages/page-accounts/src/Accounts/index.tsx

@@ -17,11 +17,11 @@ import { Button, Input, Table } from '@polkadot/react-components';
 import { BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
-import CreateModal from './modals/Create';
-import ImportModal from './modals/Import';
-import Multisig from './modals/MultisigCreate';
-import Proxy from './modals/ProxiedAdd';
-import Qr from './modals/Qr';
+import CreateModal from '../modals/Create';
+import ImportModal from '../modals/Import';
+import Multisig from '../modals/MultisigCreate';
+import Proxy from '../modals/ProxiedAdd';
+import Qr from '../modals/Qr';
 import Account from './Account';
 import BannerClaims from './BannerClaims';
 import BannerDOT from './BannerDOT';

packages/page-accounts/src/Sidebar/Sidebar.tsx

@@ -8,7 +8,7 @@ import { useAccountInfo, useToggle } from '@polkadot/react-hooks';
 import { colorLink } from '@polkadot/react-components/styles/theme';
 import { AccountName, Button, Icon, IdentityIcon, Input, LinkExternal, Sidebar, Tags } from '@polkadot/react-components';
 
-import Transfer from '../Accounts/modals/Transfer';
+import Transfer from '../modals/Transfer';
 import { useTranslation } from '../translate';
 import Balances from './Balances';
 import Flags from './Flags';

packages/page-accounts/src/Vanity/index.tsx

@@ -15,7 +15,7 @@ import generator from '@polkadot/vanitygen/generator';
 import matchRegex from '@polkadot/vanitygen/regex';
 import generatorSort from '@polkadot/vanitygen/sort';
 
-import CreateModal from '../Accounts/modals/Create';
+import CreateModal from '../modals/Create';
 import { useTranslation } from '../translate';
 import Match from './Match';
 

packages/page-accounts/src/modals/Backup.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useState } from 'react';
 import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   onClose: () => void;

packages/page-accounts/src/modals/ChangePass.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useState } from 'react';
 import { AddressRow, Button, Modal, Password, PasswordStrength } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;

packages/page-accounts/src/modals/Create.tsx

@@ -5,7 +5,7 @@
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { CreateResult } from '@polkadot/ui-keyring/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
-import { ModalProps } from '../../types';
+import { ModalProps } from '../types';
 
 import FileSaver from 'file-saver';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -19,8 +19,8 @@ import { isHex, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from '@polkadot/util-crypto';
 import { getEnvironment } from '@polkadot/react-api/util';
 
-import { useTranslation } from '../../translate';
-import PasswordInput from '../PasswordInput';
+import { useTranslation } from '../translate';
+import PasswordInput from '../Accounts/PasswordInput';
 import CreateConfirmation from './CreateConfirmation';
 
 interface Props extends ModalProps {

packages/page-accounts/src/modals/CreateConfirmation.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { AddressRow, Button, Modal } from '@polkadot/react-components';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/Delegate.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AmountValidateState } from '../types';
+import { AmountValidateState } from '../Accounts/types';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
@@ -11,7 +11,7 @@ import { BalanceFree } from '@polkadot/react-query';
 import { Conviction } from '@polkadot/types/interfaces';
 import { BN_ZERO } from '@polkadot/util';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 import ValidateAmount from './InputValidateAmount';
 
 interface Props {

packages/page-accounts/src/modals/Derive.tsx

@@ -12,7 +12,7 @@ import { useApi, useDebounce, useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import { keyExtractPath } from '@polkadot/util-crypto';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 import { downloadAccount } from './Create';
 import CreateConfirmation from './CreateConfirmation';
 

packages/page-accounts/src/modals/IdentityMain.tsx

@@ -12,7 +12,7 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { Data, Option } from '@polkadot/types';
 import { u8aToString } from '@polkadot/util';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/IdentitySub.tsx

@@ -11,7 +11,7 @@ import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { Data, Option, Vec } from '@polkadot/types';
 import { u8aToString } from '@polkadot/util';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/Import.tsx

@@ -4,14 +4,14 @@
 
 import { KeyringPair$Json } from '@polkadot/keyring/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps } from '../../types';
+import { ModalProps } from '../types';
 
 import React, { useCallback, useState } from 'react';
 import { AddressRow, Button, InputAddress, InputFile, Modal, Password } from '@polkadot/react-components';
 import { isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props extends ModalProps {
   className?: string;

packages/page-accounts/src/modals/InputValidateAmount.tsx

@@ -3,14 +3,14 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveBalancesAll } from '@polkadot/api-derive/types';
-import { AmountValidateState } from '../types';
+import { AmountValidateState } from '../Accounts/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   amount?: BN | null;

packages/page-accounts/src/modals/MultisigApprove.tsx

@@ -12,7 +12,7 @@ import { Dropdown, InputAddress, Modal, Toggle, TxButton, Input } from '@polkado
 import { useAccounts, useApi, useWeight } from '@polkadot/react-hooks';
 import { assert, isHex } from '@polkadot/util';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/MultisigCreate.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps } from '../../types';
+import { ModalProps } from '../types';
 
 import BN from 'bn.js';
 import React, { useCallback, useState } from 'react';
@@ -12,8 +12,8 @@ import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import { BN_ONE } from '@polkadot/util';
 
-import { useTranslation } from '../../translate';
-import useKnownAddresses from '../useKnownAddresses';
+import { useTranslation } from '../translate';
+import useKnownAddresses from '../Accounts/useKnownAddresses';
 
 interface Props extends ModalProps {
   className?: string;

packages/page-accounts/src/modals/ProxiedAdd.tsx

@@ -3,15 +3,15 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps } from '../../types';
+import { ModalProps } from '../types';
 
 import React, { useCallback, useState } from 'react';
 import { Button, Input, InputAddressSimple, Modal } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../../translate';
-import useProxies from '../useProxies';
+import { useTranslation } from '../translate';
+import useProxies from '../Accounts/useProxies';
 
 interface Props extends ModalProps {
   className?: string;

packages/page-accounts/src/modals/ProxyOverview.tsx

@@ -12,7 +12,7 @@ import { registry } from '@polkadot/react-api';
 import { Button, InputAddress, Modal, TxButton, Dropdown } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 import styled from 'styled-components';
 
 type PrevProxy = [AccountId, ProxyType];

packages/page-accounts/src/modals/Qr.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps } from '../../types';
+import { ModalProps } from '../types';
 
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
@@ -11,8 +11,8 @@ import { AddressRow, Button, Input, InputAddress, Modal, QrScanAddress } from '@
 import { useApi, useIpfs } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
-import PasswordInput from '../PasswordInput';
-import { useTranslation } from '../../translate';
+import PasswordInput from '../Accounts/PasswordInput';
+import { useTranslation } from '../translate';
 
 interface Scanned {
   content: string;

packages/page-accounts/src/modals/RecoverAccount.tsx

@@ -5,7 +5,7 @@
 import React, { useState } from 'react';
 import { InputAddress, Modal, TxButton } from '@polkadot/react-components';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/RecoverSetup.tsx

@@ -7,8 +7,8 @@ import React, { useState } from 'react';
 import { InputAddressMulti, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
 import { sortAddresses } from '@polkadot/util-crypto';
 
-import { useTranslation } from '../../translate';
-import useKnownAddresses from '../useKnownAddresses';
+import { useTranslation } from '../translate';
+import useKnownAddresses from '../Accounts/useKnownAddresses';
 
 interface Props {
   address: string;

packages/page-accounts/src/modals/Transfer.tsx

@@ -5,12 +5,12 @@
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { InputAddress, InputBalance, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import { BN_ZERO } from '@polkadot/util';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
@@ -24,6 +24,7 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
   const { api } = useApi();
   const [amount, setAmount] = useState<BN | undefined>(BN_ZERO);
   const [hasAvailable] = useState(true);
+  const [isProtected, setIsProtected] = useState(true);
   const [maxBalance] = useState(BN_ZERO);
   const [recipientId, setRecipientId] = useState<string | null>(propRecipientId || null);
   const [senderId, setSenderId] = useState<string | null>(propSenderId || null);
@@ -98,9 +99,22 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
                 isDisabled
                 label={t<string>('existential deposit')}
               />
+              {api.tx.balances.transferKeepAlive && (
+                <Toggle
+                  className='aliveToggle'
+                  label={
+                    isProtected
+                      ? t<string>('Transfer with account keep-alive checks')
+                      : t<string>('Normal transfer without keep-alive checks')
+                  }
+                  onChange={setIsProtected}
+                  value={isProtected}
+                />
+              )}
             </Modal.Column>
             <Modal.Column>
               <p>{t<string>('If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.')}</p>
+              <p>{t('With the keep-alive option set, the account is protected against removal due to low balances.')}</p>
             </Modal.Column>
           </Modal.Columns>
         </div>
@@ -113,7 +127,11 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
           label={t<string>('Make Transfer')}
           onStart={onClose}
           params={[recipientId, amount]}
-          tx='balances.transfer'
+          tx={
+            isProtected && api.tx.balances.transferKeepAlive
+              ? 'balances.transferKeepAlive'
+              : 'balances.transfer'
+          }
         />
       </Modal.Actions>
     </Modal>
@@ -134,4 +152,8 @@ export default React.memo(styled(Transfer)`
   label.with-help {
     flex-basis: 10rem;
   }
+
+  .aliveToggle {
+    text-align: right;
+  }
 `);

packages/page-accounts/src/modals/Undelegate.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { InputAddress, Modal, TxButton } from '@polkadot/react-components';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface Props {
   accountDelegating: string | null;

packages/page-addresses/src/Contacts/Address.tsx

@@ -8,7 +8,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import Transfer from '@polkadot/app-accounts/Accounts/modals/Transfer';
+import Transfer from '@polkadot/app-accounts/modals/Transfer';
 import { AddressSmall, AddressInfo, Button, ChainLock, Icon, LinkExternal, Forget, Menu, Popup, Tags } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';

packages/page-addresses/src/Contacts/index.tsx

@@ -10,7 +10,7 @@ import { Button, Input, Table } from '@polkadot/react-components';
 import { useAddresses, useFavorites, useLoadingDelay, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
-import CreateModal from './modals/Create';
+import CreateModal from '../modals/Create';
 import Address from './Address';
 
 type SortedAddress = { address: string; isFavorite: boolean };

packages/page-addresses/src/modals/Create.tsx

@@ -4,14 +4,14 @@
 
 import { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { ModalProps as Props } from '../../types';
+import { ModalProps as Props } from '../types';
 
 import React, { useCallback, useState } from 'react';
 import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../../translate';
+import { useTranslation } from '../translate';
 
 interface AddrState {
   address: string;

packages/react-components/src/Status/index.tsx

@@ -206,7 +206,7 @@ function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
 export default React.memo(styled(Status)`
   display: inline-block;
   position: fixed;
-  right: 0.375rem;
+  right: 0.75rem;
   top: 0.75rem;
   width: 23rem;
   z-index: 1001;