Improvements, dashboard tests, styling

src/components/account-card/__tests__/__snapshots__/account-card.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`account card component renders correctly 1`] = `
+"<View style={{...}}>
+  <Icon name=\\"money-wallet-1\\" size={25} style={{...}} allowFontScaling={false} />
+  <View style={{...}}>
+    <View style={{...}}>
+      <Component format={{...}}>
+        12332
+      </Component>
+      <TextSmall>
+
+         $
+        <Connect(ConvertComponent) from=\\"ZIL\\" to=\\"USD\\" style={{...}} amount={12332} />
+      </TextSmall>
+    </View>
+    <TextSmall>
+      zil1vs74hw5k21233h432kj321l3k21b
+
+    </TextSmall>
+  </View>
+  <Icon name=\\"arrow-right-1\\" size={25} style={{...}} allowFontScaling={false} />
+</View>"
+`;

src/components/account-card/__tests__/account-card.test.tsx

@@ -0,0 +1,26 @@
+import 'react-native';
+import React from 'react';
+import { AccountCardComponent, IProps } from '../account-card';
+import { Blockchain } from '../../../core/blockchain/types';
+import { darkTheme } from '../../../styles/themes/dark-theme';
+import styleProvider from '../styles';
+
+import { shallow } from 'enzyme';
+
+const props: IProps = {
+    account: {
+        index: 1,
+        blockchain: Blockchain.ZILLIQA,
+        address: 'zil1vs74hw5k21233h432kj321l3k21b',
+        publicKey: '1',
+        balance: 12332
+    },
+    blockchain: Blockchain.ZILLIQA,
+    styles: styleProvider(darkTheme)
+};
+describe('account card component', () => {
+    it('renders correctly', () => {
+        const wrapper = shallow(<AccountCardComponent {...props} />);
+        expect(wrapper.debug()).toMatchSnapshot();
+    });
+});

src/components/account-card/account-card.tsx

@@ -5,12 +5,12 @@ import { IAccountState } from '../../redux/wallets/state';
 import { Blockchain } from '../../core/blockchain/types';
 import { BLOCKCHAIN_INFO } from '../../core/constants/blockchain';
 import { Icon } from '../icon';
-import Convert from '../convert/convert';
+import { Convert } from '../convert/convert';
 
 import stylesProvider from './styles';
 import { withTheme } from '../../core/theme/with-theme';
 
-interface IProps {
+export interface IProps {
     account: IAccountState;
     blockchain: Blockchain;
     styles: ReturnType<typeof stylesProvider>;
@@ -22,19 +22,20 @@ export const AccountCardComponent = (props: IProps) => {
         <View style={styles.container}>
             <Icon name="money-wallet-1" size={25} style={styles.icon} />
             <View style={styles.accountInfoContainer}>
-                <Text>
-                    {props.account.balance} {BLOCKCHAIN_INFO[props.account.blockchain].coin}
+                <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+                    <Text format={{ currency: BLOCKCHAIN_INFO[props.account.blockchain].coin }}>
+                        {props.account.balance}
+                    </Text>
                     <TextSmall>
                         {'  '} $
                         <Convert
                             from={BLOCKCHAIN_INFO[props.account.blockchain].coin}
                             to="USD"
                             style={{ fontSize: 12, marginLeft: 82 }}
-                        >
-                            {props.account.balance}
-                        </Convert>
+                            amount={props.account.balance}
+                        />
                     </TextSmall>
-                </Text>
+                </View>
                 <TextSmall>{props.account.address} </TextSmall>
             </View>
             <Icon name="arrow-right-1" size={25} style={styles.icon} />

src/components/account-card/styles.ts

@@ -1,12 +1,11 @@
-import { StyleSheet } from 'react-native';
-import { COLORS } from '../../styles/colors';
+import { StyleSheet, Platform } from 'react-native';
 import { ITheme } from '../../core/theme/itheme';
 
 export default (theme: ITheme) =>
     StyleSheet.create({
         container: {
-            backgroundColor: COLORS.cardBackground,
-            borderRadius: 6,
+            backgroundColor: theme.colors.cardBackground,
+            borderRadius: Platform.OS === 'ios' ? 6 : 0,
             height: 80,
             display: 'flex',
             justifyContent: 'space-between',
@@ -23,6 +22,6 @@ export default (theme: ITheme) =>
             marginHorizontal: 8
         },
         icon: {
-            color: theme.colors.primary
+            color: theme.colors.accent
         }
     });

src/components/coin-balance-card/__tests__/__snapshots__/coin-balance-card.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`coin balance component renders correctly 1`] = `
+"<View style={{...}}>
+  <View style={{...}}>
+    <Component style={{...}} format={true}>
+      100
+    </Component>
+    <Component style={false}>
+
+      ZIL
+    </Component>
+  </View>
+  <View style={{...}}>
+    <Connect(ConvertComponent) from=\\"ZIL\\" to=\\"ETH\\" style={false} amount={100} displayCurrency={true} />
+  </View>
+</View>"
+`;

src/components/coin-balance-card/__tests__/coin-balance-card.test.tsx

@@ -0,0 +1,23 @@
+import 'react-native';
+import React from 'react';
+import { CoinBalanceCardComponent, IProps } from '../coin-balance-card';
+import { darkTheme } from '../../../styles/themes/dark-theme';
+import styleProvider from '../styles';
+
+import { shallow } from 'enzyme';
+
+const props: IProps = {
+    currency: 'ZIL',
+    balance: 100,
+    toCurrency: 'ETH',
+    width: 100,
+    active: true,
+    styles: styleProvider(darkTheme)
+};
+
+describe('coin balance component', () => {
+    it('renders correctly', () => {
+        const wrapper = shallow(<CoinBalanceCardComponent {...props} />);
+        expect(wrapper.debug()).toMatchSnapshot();
+    });
+});

src/components/coin-balance-card/coin-balance-card.tsx

@@ -1,35 +1,38 @@
 import React from 'react';
 import { View } from 'react-native';
-import Convert from '../convert/convert';
+import { Convert } from '../convert/convert';
 import { Text } from '../../library/text';
 
-import styles from './styles';
+import stylesProvider from './styles';
+import { withTheme } from '../../core/theme/with-theme';
 
-interface IProps {
+export interface IProps {
     currency: string;
     balance: number;
     toCurrency: string;
     width: number;
     active: boolean;
+    styles: ReturnType<typeof stylesProvider>;
 }
 
-export const CoinBalanceCard = (props: IProps) => (
-    <View style={[styles.container, { width: props.width }]}>
+export const CoinBalanceCardComponent = (props: IProps) => (
+    <View style={[props.styles.container, { width: props.width }]}>
         <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
-            <Text style={[styles.mainText, !props.active && styles.darkerText]}>
+            <Text style={[props.styles.mainText, !props.active && props.styles.darkerText]} format>
                 {props.balance}
             </Text>
-            <Text style={!props.active && styles.darkerText}> {props.currency}</Text>
+            <Text style={!props.active && props.styles.darkerText}> {props.currency}</Text>
         </View>
         <View style={{ flexDirection: 'row' }}>
             <Convert
                 from={props.currency}
                 to={props.toCurrency}
-                style={!props.active && styles.darkerText}
-            >
-                {props.balance}
-            </Convert>
-            <Text style={!props.active && styles.darkerText}> {props.toCurrency}</Text>
+                style={!props.active && props.styles.darkerText}
+                amount={props.balance}
+                displayCurrency={true}
+            />
         </View>
     </View>
 );
+
+export const CoinBalanceCard = withTheme(CoinBalanceCardComponent, stylesProvider);

src/components/coin-balance-card/styles.ts

@@ -1,19 +1,18 @@
 import { StyleSheet } from 'react-native';
-import { COLORS } from '../../styles/colors';
+import { ITheme } from '../../core/theme/itheme';
 
-export default StyleSheet.create({
-    container: {
-        padding: 0,
-        paddingTop: 10,
-        paddingBottom: 10,
-        alignItems: 'center',
-        color: COLORS.WHITE
-        // width: 200
-    },
-    darkerText: {
-        color: COLORS.LIGHT_GRAY
-    },
-    mainText: {
-        fontSize: 34
-    }
-});
+export default (theme: ITheme) =>
+    StyleSheet.create({
+        container: {
+            padding: 0,
+            paddingTop: 10,
+            paddingBottom: 10,
+            alignItems: 'center'
+        },
+        darkerText: {
+            color: theme.colors.textDarker
+        },
+        mainText: {
+            fontSize: 34
+        }
+    });

src/components/coin-dashboard/__tests__/__snapshots__/coin-dashboard.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`coin dashboard component renders correctly 1`] = `
+"<View style={{...}}>
+  <View style={{...}}>
+    <Connect(Component) fromCurrency=\\"ZIL\\" toCurrency=\\"USD\\" />
+    <Connect(Component) fromCurrency=\\"ZIL\\" toCurrency=\\"BTC\\" />
+    <Connect(Component) fromCurrency=\\"ZIL\\" toCurrency=\\"ETH\\" />
+  </View>
+  <View style={{...}}>
+    <Icon name=\\"add\\" size={25} style={{...}} allowFontScaling={false} />
+  </View>
+  <ScrollViewMock style={{...}}>
+    <Component account={{...}} blockchain=\\"ZILLIQA\\" />
+  </ScrollViewMock>
+</View>"
+`;

src/components/coin-dashboard/__tests__/coin-dashboard.test.tsx

@@ -0,0 +1,29 @@
+import 'react-native';
+import React from 'react';
+import { CoinDashboardComponent, IProps } from '../coin-dashboard';
+import { darkTheme } from '../../../styles/themes/dark-theme';
+import { Blockchain } from '../../../core/blockchain/types';
+import styleProvider from '../styles';
+
+import { shallow } from 'enzyme';
+
+const props: IProps = {
+    accounts: [
+        {
+            index: 1,
+            blockchain: Blockchain.ZILLIQA,
+            address: 'zil1vs74hw5k21233h432kj321l3k21b',
+            publicKey: '1',
+            balance: 12332
+        }
+    ],
+    blockchain: Blockchain.ZILLIQA,
+    styles: styleProvider(darkTheme)
+};
+
+describe('coin dashboard component', () => {
+    it('renders correctly', () => {
+        const wrapper = shallow(<CoinDashboardComponent {...props} />);
+        expect(wrapper.debug()).toMatchSnapshot();
+    });
+});

src/components/coin-dashboard/coin-dashboard.tsx

@@ -7,18 +7,20 @@ import { Blockchain } from '../../core/blockchain/types';
 import { BLOCKCHAIN_INFO } from '../../core/constants/blockchain';
 import { Icon } from '../icon';
 
-import styles from './styles';
+import stylesProvider from './styles';
+import { withTheme } from '../../core/theme/with-theme';
 
-interface IProps {
+export interface IProps {
     blockchain: Blockchain;
     accounts?: IAccountState[];
+    styles: ReturnType<typeof stylesProvider>;
 }
 
 const conversionCards = ['USD', 'BTC', 'ETH'];
 
-export const CoinDashboard = (props: IProps) => (
-    <View style={styles.container}>
-        <View style={styles.exchangeCardContainer}>
+export const CoinDashboardComponent = (props: IProps) => (
+    <View style={props.styles.container}>
+        <View style={props.styles.exchangeCardContainer}>
             {conversionCards.map(
                 (toCurrency, i) =>
                     BLOCKCHAIN_INFO[props.blockchain].coin !== toCurrency && (
@@ -30,8 +32,8 @@ export const CoinDashboard = (props: IProps) => (
                     )
             )}
         </View>
-        <View style={styles.addButton}>
-            <Icon name="add" size={25} style={styles.icon} />
+        <View style={props.styles.addButton}>
+            <Icon name="add" size={25} style={props.styles.icon} />
         </View>
         <ScrollView style={{ flex: 1, alignSelf: 'stretch' }}>
             {props.accounts &&
@@ -41,3 +43,4 @@ export const CoinDashboard = (props: IProps) => (
         </ScrollView>
     </View>
 );
+export const CoinDashboard = withTheme(CoinDashboardComponent, stylesProvider);

src/components/coin-dashboard/styles.ts

@@ -1,33 +1,28 @@
 import { StyleSheet } from 'react-native';
-import { COLORS } from '../../styles/colors';
+import { ITheme } from '../../core/theme/itheme';
 
-export default StyleSheet.create({
-    container: {
-        padding: 0,
-        paddingTop: 10,
-        alignItems: 'center',
-        alignSelf: 'stretch',
-        flex: 1,
-        margin: 12,
-        marginBottom: 4
-    },
-    exchangeCardContainer: {
-        display: 'flex',
-        flexDirection: 'row'
-    },
-    text: {
-        color: COLORS.WHITE
-    },
-    mainText: {
-        fontSize: 34
-    },
-    icon: {
-        color: COLORS.AQUA
-    },
-    addButton: {
-        marginTop: 20,
-        marginBottom: 12,
-        alignSelf: 'flex-end',
-        marginRight: 12
-    }
-});
+export default (theme: ITheme) =>
+    StyleSheet.create({
+        container: {
+            padding: 0,
+            paddingTop: 10,
+            alignItems: 'center',
+            alignSelf: 'stretch',
+            flex: 1,
+            margin: 12,
+            marginBottom: 4
+        },
+        exchangeCardContainer: {
+            display: 'flex',
+            flexDirection: 'row'
+        },
+        icon: {
+            color: theme.colors.accent
+        },
+        addButton: {
+            marginTop: 20,
+            marginBottom: 12,
+            alignSelf: 'flex-end',
+            marginRight: 12
+        }
+    });