fix(brokerage): adding new enum for swap account types and fixing lin…

…ter issues
blockchain · Jun 2, 2021 · 73fc1b8 · 73fc1b8
1 parent d63013a
commit 73fc1b8
Show file tree

Hide file tree

Showing 17 changed files with 363 additions and 523 deletions.
diff --git a/packages/blockchain-info-components/index.d.ts b/packages/blockchain-info-components/index.d.ts
@@ -9,6 +9,7 @@ import { DefaultTheme } from 'styled-components'
 import { IcoMoonType } from './src/Icons/Icomoon'
 import { ImageType } from './src/Images/Images'
 import { CoinType, WalletCurrencyType } from 'core/types'
+import { SwapBaseCounterTypes } from 'data/types'
 
 type AllCoinsType = WalletCurrencyType | 'BSV' | 'STX'
 
@@ -18,47 +19,49 @@ export const BlockchainLoader: FunctionComponent<{
   width?: string
   height?: string
 }>
-export const Button: FunctionComponent<{
-  'data-e2e': string
-  nature?:
-    | 'copy'
-    | 'dark'
-    | 'dark-grey'
-    | 'empty-secondary'
-    | 'empty'
-    | 'empty-blue'
-    | 'grey400'
-    | 'green'
-    | 'grey800'
-    | 'light'
-    | 'light-red'
-    | 'primary'
-    | 'purple'
-    | 'received'
-    | 'secondary'
-    | 'sent'
-    | 'success'
-    | 'transferred'
-    | 'warning'
-    | 'white-blue'
-    | 'white-transparent'
-  bold?: boolean
-  capitalize?: boolean
-  className?: string
-  disabled?: boolean
-  fullwidth?: boolean
-  height?: string
-  jumbo?: boolean
-  margin?: string
-  onClick?: () => void
-  padding?: string
-  rounded?: boolean
-  size?: string
-  small?: boolean
-  style?: CSSProperties
-  uppercase?: boolean
-  width?: string
-} & ButtonHTMLAttributes<{}>>
+export const Button: FunctionComponent<
+  {
+    'data-e2e': string
+    nature?:
+      | 'copy'
+      | 'dark'
+      | 'dark-grey'
+      | 'empty-secondary'
+      | 'empty'
+      | 'empty-blue'
+      | 'grey400'
+      | 'green'
+      | 'grey800'
+      | 'light'
+      | 'light-red'
+      | 'primary'
+      | 'purple'
+      | 'received'
+      | 'secondary'
+      | 'sent'
+      | 'success'
+      | 'transferred'
+      | 'warning'
+      | 'white-blue'
+      | 'white-transparent'
+    bold?: boolean
+    capitalize?: boolean
+    className?: string
+    disabled?: boolean
+    fullwidth?: boolean
+    height?: string
+    jumbo?: boolean
+    margin?: string
+    onClick?: () => void
+    padding?: string
+    rounded?: boolean
+    size?: string
+    small?: boolean
+    style?: CSSProperties
+    uppercase?: boolean
+    width?: string
+  } & ButtonHTMLAttributes<{}>
+>
 export const Carousel: FunctionComponent<{
   height: number
   arrows: boolean
@@ -80,9 +83,7 @@ export const ComponentDropdown: ComponentClass<{
   width?: string
 }>
 
-export function Color(
-  color: keyof DefaultTheme
-): DefaultTheme[keyof DefaultTheme]
+export function Color(color: keyof DefaultTheme): DefaultTheme[keyof DefaultTheme]
 
 export const FontGlobalStyles: FunctionComponent<{}>
 export const FlatLoader: FunctionComponent<{
@@ -107,48 +108,50 @@ export const Icon: FunctionComponent<{
   role?: 'button'
 }>
 export const CoinAccountIcon: FunctionComponent<{
-  accountType: 'ACCOUNT' | 'CUSTODIAL' | 'EXCHANGE' | 'INTEREST'
+  accountType: SwapBaseCounterTypes | 'EXCHANGE' | 'INTEREST'
   coin: AllCoinsType
   style?: CSSProperties
 }>
-export const IconButton: FunctionComponent<{
-  'data-e2e': string
-  nature?:
-    | 'copy'
-    | 'dark'
-    | 'dark-grey'
-    | 'empty-secondary'
-    | 'empty'
-    | 'grey400'
-    | 'green'
-    | 'light'
-    | 'primary'
-    | 'purple'
-    | 'received'
-    | 'secondary'
-    | 'sent'
-    | 'success'
-    | 'transferred'
-    | 'warning'
-    | 'white-blue'
-    | 'white-transparent'
-  bold?: boolean
-  capitalize?: boolean
-  className?: string
-  disabled?: boolean
-  fullwidth?: boolean
-  height?: string
-  jumbo?: boolean
-  margin?: string
-  name: keyof IcoMoonType | AllCoinsType
-  onClick?: () => void
-  padding?: string
-  rounded?: boolean
-  small?: boolean
-  style?: CSSProperties
-  uppercase?: boolean
-  width?: string
-} & ButtonHTMLAttributes<{}>>
+export const IconButton: FunctionComponent<
+  {
+    'data-e2e': string
+    nature?:
+      | 'copy'
+      | 'dark'
+      | 'dark-grey'
+      | 'empty-secondary'
+      | 'empty'
+      | 'grey400'
+      | 'green'
+      | 'light'
+      | 'primary'
+      | 'purple'
+      | 'received'
+      | 'secondary'
+      | 'sent'
+      | 'success'
+      | 'transferred'
+      | 'warning'
+      | 'white-blue'
+      | 'white-transparent'
+    bold?: boolean
+    capitalize?: boolean
+    className?: string
+    disabled?: boolean
+    fullwidth?: boolean
+    height?: string
+    jumbo?: boolean
+    margin?: string
+    name: keyof IcoMoonType | AllCoinsType
+    onClick?: () => void
+    padding?: string
+    rounded?: boolean
+    small?: boolean
+    style?: CSSProperties
+    uppercase?: boolean
+    width?: string
+  } & ButtonHTMLAttributes<{}>
+>
 export const IconGlobalStyles: FunctionComponent<{}>
 export const Image: FunctionComponent<{
   name: keyof ImageType

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/CoinAccountListOption/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Form/CoinAccountListOption/index.tsx
@@ -5,32 +5,32 @@ import styled, { css, DefaultTheme } from 'styled-components'
 import { CoinAccountIcon, Icon, Text } from 'blockchain-info-components'
 import { FiatType, SupportedCoinType } from 'blockchain-wallet-v4/src/types'
 import { SuccessCartridge } from 'components/Cartridge'
-import { SwapAccountType } from 'data/types'
+import { SwapAccountType, SwapBaseCounterTypes } from 'data/types'
 
 import CoinAccountListBalance from '../CoinAccountListBalance'
 
 const Option = styled.div<{ displayOnly?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: ${props => `1px solid ${props.theme.grey000}`};
+  border-top: ${(props) => `1px solid ${props.theme.grey000}`};
   padding: 16px 40px;
   &:first-child {
     border-top: 0;
   }
 
-  ${props =>
+  ${(props) =>
     !props.displayOnly &&
     css`
       cursor: pointer;
       &:hover {
-        background-color: ${props => props.theme.blue000};
+        background-color: ${(props) => props.theme.blue000};
       }
     `}
 `
 
 const OptionTitle = styled(Text)`
-  color: ${props => props.theme.grey800};
+  color: ${(props) => props.theme.grey800};
   font-weight: 600;
   max-width: 200px;
   white-space: nowrap;
@@ -41,9 +41,9 @@ const OptionValue = styled(Text)<{
   color?: keyof DefaultTheme
   weight?: number
 }>`
-  color: ${props => props.color || props.theme.grey600};
+  color: ${(props) => props.color || props.theme.grey600};
   margin-top: 4px;
-  font-weight: ${props => (props.weight ? props.weight : 600)};
+  font-weight: ${(props) => (props.weight ? props.weight : 600)};
   font-size: 14px;
 `
 const BalanceRow = styled.div`
@@ -64,7 +64,7 @@ const CircleBorder = styled.div`
   width: 24px;
   height: 24px;
   background-color: white;
-  border: 1px solid ${props => props.theme.grey300};
+  border: 1px solid ${(props) => props.theme.grey300};
   border-radius: 24px;
   margin-left: 18px;
 `
@@ -74,7 +74,7 @@ const LowFeeCartridge = styled(SuccessCartridge)`
   padding: 6px;
 `
 
-const CoinAccountListOption: React.FC<Props> = props => {
+const CoinAccountListOption: React.FC<Props> = (props) => {
   const {
     account,
     coinModel,
@@ -87,12 +87,7 @@ const CoinAccountListOption: React.FC<Props> = props => {
   } = props
 
   return (
-    <Option
-      data-e2e='changeAcct'
-      displayOnly={displayOnly}
-      onClick={props.onClick}
-      role='button'
-    >
+    <Option data-e2e='changeAcct' displayOnly={displayOnly} onClick={props.onClick} role='button'>
       <FlexStartRow>
         <CoinAccountIcon
           accountType={account.type}
@@ -113,12 +108,9 @@ const CoinAccountListOption: React.FC<Props> = props => {
         </div>
       </FlexStartRow>
       <FlexStartRow>
-        {showLowFeeBadges && account.type === 'CUSTODIAL' && (
+        {showLowFeeBadges && account.type === SwapBaseCounterTypes.CUSTODIAL && (
           <LowFeeCartridge>
-            <FormattedMessage
-              id='scenes.swap.low_fees'
-              defaultMessage='Low Fees'
-            />
+            <FormattedMessage id='scenes.swap.low_fees' defaultMessage='Low Fees' />
           </LowFeeCartridge>
         )}
         {isSwap && isAccountSelected && (
@@ -130,9 +122,7 @@ const CoinAccountListOption: React.FC<Props> = props => {
           />
         )}
         {isSwap && !isAccountSelected && <CircleBorder />}
-        {!isSwap && !hideActionIcon && (
-          <Icon name='chevron-right' size='32px' color='grey400' />
-        )}
+        {!isSwap && !hideActionIcon && <Icon name='chevron-right' size='32px' color='grey400' />}
       </FlexStartRow>
     </Option>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/request/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/request/sagas.ts
@@ -7,6 +7,7 @@ import { selectors } from 'data'
 
 import coinSagas from '../../coins/sagas'
 import profileSagas from '../../modules/profile/sagas'
+import { SwapBaseCounterTypes } from '../swap/types'
 import * as A from './actions'
 import { RequestExtrasType } from './types'
 import { generateKey } from './utils'
@@ -33,19 +34,21 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
       const { account } = action.payload
 
       switch (account.type) {
-        case 'ACCOUNT':
+        case SwapBaseCounterTypes.ACCOUNT:
           const { accountIndex, coin } = account
           address = yield call(getNextReceiveAddressForCoin, coin, accountIndex)
           break
-        case 'CUSTODIAL':
+        case SwapBaseCounterTypes.CUSTODIAL:
           yield call(waitForUserData)
           const custodial: ReturnType<typeof api.getSBPaymentAccount> = yield call(
             api.getSBPaymentAccount,
             account.coin
           )
           address = custodial.address
           if (supportedCoins[account.coin].isMemoBased) {
+            // eslint-disable-next-line prefer-destructuring
             extras.Memo = address.split(':')[1]
+            // eslint-disable-next-line prefer-destructuring
             address = address.split(':')[0]
           }
           break