feat(sell-p3): load swap accounts to sell

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx

@@ -123,15 +123,17 @@ const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
           )}
         </FlyoutWrapper>
         <Currencies>
-          {props.pairs.map((value, index) => (
-            <CryptoItem
-              key={index}
-              orderType={orderType}
-              fiat={getFiatFromPair(value.pair)}
-              coin={getCoinFromPair(value.pair)}
-              onClick={() => handleSubmit(value as SBPairType)}
-            />
-          ))}
+          {orderType === 'SELL'
+            ? JSON.stringify(props.accounts)
+            : props.pairs.map((value, index) => (
+                <CryptoItem
+                  key={index}
+                  orderType={orderType}
+                  fiat={getFiatFromPair(value.pair)}
+                  coin={getCoinFromPair(value.pair)}
+                  onClick={() => handleSubmit(value as SBPairType)}
+                />
+              ))}
         </Currencies>
       </Form>
       {orderType === 'SELL' && <SellBanner />}

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts

@@ -12,6 +12,9 @@ export const getData = state => {
   const pairsR = selectors.components.simpleBuy.getSBPairs(state)
   const userDataR = selectors.modules.profile.getUserData(state)
 
+  // for sell, get 'swap' accounts
+  const accounts = selectors.components.swap.getActiveAccounts(state)
+
   return lift(
     (
       eligibility: ExtractSuccess<typeof eligibilityR>,
@@ -20,6 +23,7 @@ export const getData = state => {
       userData: ExtractSuccess<typeof userDataR>
     ) => ({
       orderType: formValues ? formValues.orderType : 'BUY',
+      accounts,
       eligibility,
       invitations,
       pairs,

packages/blockchain-wallet-v4-frontend/src/modals/Swap/CoinSelection/CryptoAccountOption/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+
+import {
+  BalanceRow,
+  CircleBorder,
+  FlexStartRow,
+  Option,
+  OptionTitle,
+  OptionValue
+} from '../../components'
+import { FiatType, SupportedWalletCurrenciesType } from 'core/types'
+import { Icon } from 'blockchain-info-components'
+import { SuccessCartridge } from 'components/Cartridge'
+import { SwapAccountType } from 'data/types'
+import CoinBalance from '../../components/CoinBalance'
+
+const CryptoAccountOption: React.FC<Props> = props => {
+  const { account, coins, isAccountSelected, walletCurrency } = props
+  return (
+    <Option role='button' data-e2e='changeAcct' onClick={props.onClick}>
+      <FlexStartRow>
+        <Icon
+          name={coins[account.coin].icons.circleFilled}
+          color={coins[account.coin].colorCode}
+          size='32px'
+          style={{ marginRight: '16px' }}
+        />
+        <div>
+          <OptionTitle>{account.label}</OptionTitle>
+          <OptionValue>
+            <BalanceRow>
+              <CoinBalance account={account} walletCurrency={walletCurrency} />
+            </BalanceRow>
+          </OptionValue>
+        </div>
+      </FlexStartRow>
+      <FlexStartRow>
+        {account.type === 'CUSTODIAL' && (
+          <SuccessCartridge>Low Fees</SuccessCartridge>
+        )}
+        {isAccountSelected ? (
+          <Icon
+            name='checkmark-circle-filled'
+            color='green600'
+            size='24px'
+            style={{ padding: '0 2px', marginLeft: '24px' }}
+          />
+        ) : (
+          <CircleBorder />
+        )}
+      </FlexStartRow>
+    </Option>
+  )
+}
+
+type Props = {
+  account: SwapAccountType
+  coins: SupportedWalletCurrenciesType
+  isAccountSelected: boolean
+  onClick: () => void
+  walletCurrency: FiatType
+}
+
+export default CryptoAccountOption

packages/blockchain-wallet-v4-frontend/src/modals/Swap/CoinSelection/index.tsx

@@ -1,28 +1,20 @@
-import {
-  BalanceRow,
-  CircleBorder,
-  FlexStartRow,
-  Option,
-  OptionTitle,
-  OptionValue,
-  StickyTopFlyoutWrapper,
-  TopText
-} from '../components'
-import { Props as BaseProps, SuccessStateType } from '..'
-import { coinOrder, getData } from './selectors'
 import { connect, ConnectedProps } from 'react-redux'
 import { FormattedMessage } from 'react-intl'
+import React, { PureComponent } from 'react'
+
+import { Props as BaseProps, SuccessStateType } from '..'
+import { coinOrder, getData } from './selectors'
 import { Icon, Text } from 'blockchain-info-components'
 import {
   InitSwapFormValuesType,
   SwapSideType
 } from 'data/components/swap/types'
 import { RootState } from 'data/rootReducer'
 import { selectors } from 'data'
-import { SuccessCartridge } from 'components/Cartridge'
+import { StickyTopFlyoutWrapper, TopText } from '../components'
 import { SwapAccountType } from 'data/types'
-import CoinBalance from '../components/CoinBalance'
-import React, { PureComponent } from 'react'
+import CryptoAccountOption from './CryptoAccountOption'
+
 class CoinSelection extends PureComponent<Props> {
   state = {}
 
@@ -170,48 +162,15 @@ class CoinSelection extends PureComponent<Props> {
               !isBaseAccountZero &&
               !isCoinSelected &&
               !hideCustodialToAccount && (
-                <Option
-                  role='button'
-                  data-e2e='changeAcct'
+                <CryptoAccountOption
+                  account={account}
+                  coins={coins}
+                  isAccountSelected={isAccountSelected}
+                  walletCurrency={walletCurrency}
                   onClick={() =>
                     this.props.swapActions.changePair(this.props.side, account)
                   }
-                >
-                  <FlexStartRow>
-                    <Icon
-                      name={coins[account.coin].icons.circleFilled}
-                      color={coins[account.coin].colorCode}
-                      size='32px'
-                      style={{ marginRight: '16px' }}
-                    />
-                    <div>
-                      <OptionTitle>{account.label}</OptionTitle>
-                      <OptionValue>
-                        <BalanceRow>
-                          <CoinBalance
-                            account={account}
-                            walletCurrency={walletCurrency}
-                          />
-                        </BalanceRow>
-                      </OptionValue>
-                    </div>
-                  </FlexStartRow>
-                  <FlexStartRow>
-                    {account.type === 'CUSTODIAL' && (
-                      <SuccessCartridge>Low Fees</SuccessCartridge>
-                    )}
-                    {isAccountSelected ? (
-                      <Icon
-                        name='checkmark-circle-filled'
-                        color='green600'
-                        size='24px'
-                        style={{ padding: '0 2px', marginLeft: '24px' }}
-                      />
-                    ) : (
-                      <CircleBorder />
-                    )}
-                  </FlexStartRow>
-                </Option>
+                />
               )
             )
           })