feat: cleanup and moved things to proper place

blockchain · Aug 12, 2020 · 421756f · 421756f
1 parent d3030ee
commit 421756f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 62 deletions.
diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedBanks/template.success.tsx b/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedBanks/template.success.tsx
@@ -1,35 +1,14 @@
 import { Button, Icon, Text } from 'blockchain-info-components'
+import { CardDetails, CardWrapper, Child, CustomSettingHeader } from '../styles'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { fiatToString } from 'core/exchange/currency'
 import { FormattedMessage } from 'react-intl'
 import { InjectedFormProps, reduxForm } from 'redux-form'
 import { Props as OwnProps, SuccessStateType } from '.'
-import {
-  SettingContainer,
-  SettingHeader,
-  SettingSummary
-} from 'components/Setting'
-import media from 'services/ResponsiveService'
+import { SettingContainer, SettingSummary } from 'components/Setting'
 import React from 'react'
 import styled from 'styled-components'
 
-const CardWrapper = styled.div`
-  display: flex;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  justify-content: space-between;
-  border: 1px solid ${props => props.theme.grey000};
-  cursor: pointer;
-  width: 430px;
-
-  ${media.mobile`
-    width: 100%;
-  `}
-`
-const CustomSettingHeader = styled(SettingHeader)`
-  margin-bottom: 18px;
-`
 const RemoveButton = styled(Button)`
   &:hover {
     border-color: ${props => props.theme.red400};
@@ -43,17 +22,8 @@ const BankIconWrapper = styled.div`
   flex-direction: column;
   display: flex;
 `
-const Child = styled.div`
-  display: flex;
-  div:last-child {
-    margin-top: 4px;
-  }
-`
-const CardDetails = styled.div<{ right?: boolean }>`
-  text-align: ${props => (props.right ? 'right' : 'initial')};
-`
 
-const getAvailableAmount = (methods, currency) => {
+const getAvailableAmountForCurrency = (methods, currency) => {
   const method = methods.find(
     method => method.type === 'FUNDS' && method.currency === currency
   )
@@ -91,7 +61,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                           amount: fiatToString({
                             value: convertBaseToStandard(
                               'FIAT',
-                              getAvailableAmount(
+                              getAvailableAmountForCurrency(
                                 props.paymentMethods.methods,
                                 beneficiary.currency
                               )
@@ -131,4 +101,4 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
 }
 
 type Props = OwnProps & SuccessStateType
-export default reduxForm<{}, Props>({ form: 'linkedCards' })(Success)
+export default reduxForm<{}, Props>({ form: 'linkedBanks' })(Success)
diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx b/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx
@@ -3,6 +3,7 @@ import {
   CARD_TYPES,
   DEFAULT_CARD_SVG_LOGO
 } from 'components/Form/CreditCardBox/model'
+import { CardDetails, CardWrapper, Child, CustomSettingHeader } from '../styles'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType } from 'core/types'
@@ -12,56 +13,29 @@ import { Props as OwnProps, SuccessStateType } from '.'
 import {
   SettingComponent,
   SettingContainer,
-  SettingHeader,
   SettingSummary
 } from 'components/Setting'
 import media from 'services/ResponsiveService'
 import React, { SyntheticEvent } from 'react'
 import styled from 'styled-components'
 
-const CardWrapper = styled.div`
-  display: flex;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  justify-content: space-between;
-  border: 1px solid ${props => props.theme.grey000};
-  cursor: pointer;
-  width: 430px;
-
-  ${media.mobile`
-    width: 100%;
-  `}
-`
 const CustomSettingContainer = styled(SettingContainer)`
   ${media.atLeastLaptopL`
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
   `}
 `
-const CustomSettingHeader = styled(SettingHeader)`
-  margin-bottom: 18px;
-`
 const CustomSettingComponent = styled(SettingComponent)`
   margin-top: 36px;
   ${media.tablet`
     margin-top: 8px;
   `}
 `
-const Child = styled.div`
-  display: flex;
-  div:last-child {
-    margin-top: 4px;
-  }
-`
 const CardImg = styled.img`
   margin-right: 14px;
   width: 24px;
 `
-const CardDetails = styled.div<{ right?: boolean }>`
-  text-align: ${props => (props.right ? 'right' : 'initial')};
-`
 
 const Success: React.FC<InjectedFormProps<
   {},

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/styles.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/styles.tsx
@@ -0,0 +1,31 @@
+import { SettingHeader } from 'components/Setting'
+import media from 'services/ResponsiveService'
+import styled from 'styled-components'
+
+export const CardWrapper = styled.div`
+  display: flex;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  justify-content: space-between;
+  border: 1px solid ${props => props.theme.grey000};
+  cursor: pointer;
+  width: 430px;
+
+  ${media.mobile`
+  width: 100%;
+`}
+`
+export const CustomSettingHeader = styled(SettingHeader)`
+  margin-bottom: 18px;
+`
+
+export const Child = styled.div`
+  display: flex;
+  div:last-child {
+    margin-top: 4px;
+  }
+`
+export const CardDetails = styled.div<{ right?: boolean }>`
+  text-align: ${props => (props.right ? 'right' : 'initial')};
+`
diff --git a/typings/redux-form.d.ts b/typings/redux-form.d.ts
@@ -22,6 +22,7 @@ export type WalletFormType =
   | 'initBorrow'
   | 'interestDepositForm'
   | 'interestWithdrawalForm'
+  | 'linkedBanks'
   | 'linkedCards'
   | 'login'
   | 'register'