feat(send flow): implemented UI changes on flow added a feature flag and some initial work with real sending amount

config/mocks/wallet-options-v4.json

@@ -63,6 +63,7 @@
         "isStakingEnabled": true,
         "mergeAndUpgrade": false,
         "nftExplorer": true,
+        "newSendFlow": true,
         "recurringBuys": true,
         "rewardsFlowUnderSwapEnabled": true,
         "rewardsPromoBanner": true,

packages/blockchain-wallet-v4-frontend/src/components/Form/CoinAccountOption/index.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import styled, { css, DefaultTheme } from 'styled-components'
+
+import { FiatType } from '@core/types'
+import { CoinAccountIcon, Text } from 'blockchain-info-components'
+import CoinDisplay from 'components/Display/CoinDisplay'
+import FiatDisplay from 'components/Display/FiatDisplay'
+import { SwapAccountType } from 'data/types'
+
+const Option = styled.div<{ displayOnly?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: ${(props) => `1px solid ${props.theme.grey000}`};
+  padding: 16px 40px;
+  &:first-child {
+    border-top: 0;
+  }
+
+  ${(props) =>
+    !props.displayOnly &&
+    css`
+      cursor: pointer;
+      &:hover {
+        background-color: ${(props) => props.theme.blue000};
+      }
+    `}
+`
+
+const OptionTitle = styled(Text)`
+  color: ${(props) => props.theme.grey800};
+  font-weight: 600;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+const OptionValue = styled(Text)<{
+  color?: keyof DefaultTheme
+  weight?: number
+}>`
+  color: ${(props) => props.color || props.theme.grey600};
+  margin-top: 4px;
+  font-weight: ${(props) => (props.weight ? props.weight : 600)};
+  font-size: 14px;
+`
+const BalanceRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`
+const FlexStartRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`
+
+const CoinAccountOption: React.FC<Props> = (props) => {
+  const { account, coin, displayOnly, walletCurrency } = props
+
+  return (
+    <Option
+      className='coin-account-option'
+      data-e2e='changeAcct'
+      displayOnly={displayOnly}
+      onClick={props.onClick}
+      role='button'
+    >
+      <FlexStartRow>
+        <CoinAccountIcon accountType={account.type} coin={coin} style={{ marginRight: '12px' }} />
+        <div>
+          <OptionTitle data-e2e={account.label}>{account.label}</OptionTitle>
+          <OptionValue>{coin}</OptionValue>
+        </div>
+      </FlexStartRow>
+      <FlexStartRow>
+        <BalanceRow>
+          <CoinDisplay
+            size='16px'
+            color='grey900'
+            coin={account.coin}
+            weight={600}
+            loadingHeight='24px'
+            style={{
+              cursor: !displayOnly ? 'pointer' : 'auto',
+              lineHeight: 1.25
+            }}
+          >
+            {account.balance}
+          </CoinDisplay>
+
+          <FiatDisplay
+            size='14px'
+            color='grey600'
+            coin={account.coin}
+            currency={walletCurrency}
+            style={{
+              cursor: !displayOnly ? 'pointer' : 'auto',
+              lineHeight: 1.25
+            }}
+            weight={500}
+          >
+            {account.balance}
+          </FiatDisplay>
+        </BalanceRow>
+      </FlexStartRow>
+    </Option>
+  )
+}
+
+type Props = {
+  account: SwapAccountType
+  coin: string
+  displayOnly?: boolean
+  onClick?: () => void
+  walletCurrency: FiatType
+}
+
+export default CoinAccountOption

packages/blockchain-wallet-v4-frontend/src/data/coins/model/send.ts

@@ -2,7 +2,7 @@ import { CoinAccountSelectorType } from 'data/coins/types'
 
 // used in the coin/account selector in send flyout (modals/SendCrypto)
 export const SEND_ACCOUNTS_SELECTOR: CoinAccountSelectorType = {
-  importedAddresses: false,
-  nonCustodialAccounts: false,
+  importedAddresses: true,
+  nonCustodialAccounts: true,
   tradingAccounts: true
 }

packages/blockchain-wallet-v4-frontend/src/data/components/sagaRegister.ts

@@ -66,7 +66,7 @@ export default ({ api, coreSagas, networks }) =>
     yield fork(recurringBuy({ api }))
     yield fork(resetWallet2fa({ api }))
     yield fork(send({ api, coreSagas, networks }))
-    yield fork(sendCrypto({ api }))
+    yield fork(sendCrypto({ api, coreSagas, networks }))
     yield fork(sendBch({ api, coreSagas, networks }))
     yield fork(sendBtc({ api, coreSagas, networks }))
     yield fork(sendEth({ api, coreSagas, networks }))

packages/blockchain-wallet-v4-frontend/src/data/components/sagas.ts

@@ -64,7 +64,7 @@ export default ({ api, coreSagas, networks }) => ({
   send: send({ api, coreSagas, networks }),
   sendBch: sendBch({ api, coreSagas, networks }),
   sendBtc: sendBtc({ api, coreSagas, networks }),
-  sendCrypto: sendCrypto({ api }),
+  sendCrypto: sendCrypto({ api, coreSagas, networks }),
   sendEth: sendEth({ api, coreSagas, networks }),
   sendXlm: sendXlm({ api, coreSagas, networks }),
   settings: settings({ api, coreSagas }),

packages/blockchain-wallet-v4-frontend/src/data/components/sendCrypto/sagaRegister.ts

@@ -5,8 +5,8 @@ import { actionTypes } from 'data/form/actionTypes'
 import sagas from './sagas'
 import { actions as A } from './slice'
 
-export default ({ api }) => {
-  const sendCryptoSagas = sagas({ api })
+export default ({ api, coreSagas, networks }) => {
+  const sendCryptoSagas = sagas({ api, coreSagas, networks })
 
   return function* brokerageSaga() {
     yield takeLatest(A.buildTx.type, sendCryptoSagas.buildTx)