chore(refactor): add btc wallet refactor (#6300)

packages/blockchain-wallet-v4-frontend/src/modals/Btc/AddBtcWallet/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { formValueSelector } from 'redux-form'
+
+import { Modal } from 'blockchain-info-components'
+import { newHDAccount } from 'data/modules/settings/actions'
+import modalEnhancer from 'providers/ModalEnhancer'
+
+import AddBtcWallet from './template'
+
+const AddBtcWalletModal = ({ close, position, total }) => {
+  const dispatch = useDispatch()
+
+  const handleClose = () => {
+    close()
+  }
+
+  const wallet = useSelector((state) => formValueSelector('addBtcWallet')(state, 'wallet'))
+  const handleSubmit = () => {
+    dispatch(newHDAccount(wallet))
+  }
+
+  return (
+    <Modal size='large' position={position} total={total}>
+      <AddBtcWallet handleSubmit={handleSubmit} handleClose={handleClose} />
+    </Modal>
+  )
+}
+
+export default modalEnhancer('ADD_BTC_WALLET_MODAL')(AddBtcWalletModal)

packages/blockchain-wallet-v4-frontend/src/modals/Btc/AddBtcWallet/template.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { Field, InjectedFormProps, reduxForm } from 'redux-form'
+import styled from 'styled-components'
+
+import { Button, ModalBody, ModalFooter, ModalHeader } from 'blockchain-info-components'
+import Form from 'components/Form/Form'
+import FormGroup from 'components/Form/FormGroup'
+import FormItem from 'components/Form/FormItem'
+import TextBox from 'components/Form/TextBox'
+import { required } from 'services/forms'
+
+const Wrapper = styled.div`
+  font-weight: 400;
+  color: ${(props) => props.theme.grey700};
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+`
+const Label = styled.label`
+  display: block;
+  font-size: 12px;
+  margin-bottom: 5px;
+`
+
+type Props = {
+  handleClose: () => void
+  handleSubmit: () => void
+  uniqueWalletName?: (e: string) => boolean
+}
+
+const AddBtcWallet = ({
+  handleClose,
+  handleSubmit,
+  invalid,
+  submitting,
+  uniqueWalletName
+}: InjectedFormProps<{}, Props> & Props) => {
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Wrapper>
+        <ModalHeader icon='arrow-up-circle' onClose={handleClose}>
+          <FormattedMessage
+            id='modals.addbitcoinwallet.title'
+            defaultMessage='Add New Bitcoin Wallet'
+          />
+        </ModalHeader>
+        <ModalBody>
+          <FormGroup>
+            <FormItem>
+              <Label htmlFor='wallet'>
+                <FormattedMessage
+                  id='modals.addbitcoinwallet.wallet'
+                  defaultMessage='Wallet Name'
+                />
+              </Label>
+              <Field
+                name='wallet'
+                autoFocus
+                validate={[required, uniqueWalletName]}
+                component={TextBox}
+                maxLength={30}
+                data-e2e='newWalletNameInput'
+              />
+            </FormItem>
+          </FormGroup>
+        </ModalBody>
+        <ModalFooter align='right'>
+          <Button
+            type='submit'
+            nature='primary'
+            capitalize
+            disabled={submitting || invalid}
+            data-e2e='createNewBitcoinWalletButton'
+          >
+            <FormattedMessage
+              id='modals.addbitcoinwallet.button'
+              defaultMessage='Create New Bitcoin Wallet'
+            />
+          </Button>
+        </ModalFooter>
+      </Wrapper>
+    </Form>
+  )
+}
+
+export default reduxForm<{}, Props>({ form: 'addBtcWallet' })(AddBtcWallet)