Merge pull request #349 from meriadec/few-fixes-and-pal

Few fixes and pal

package.json

@@ -13,6 +13,7 @@
     "test": "jest",
     "flow": "flow",
     "lint": "eslint src webpack .storybook",
+    "ci": "yarn lint && yarn flow && yarn prettier && yarn test",
     "postinstall": "bash ./scripts/postinstall.sh",
     "prettier": "prettier --write \"{src,webpack,.storybook}/**/*.js\"",
     "publish-storybook": "bash ./scripts/publish-storybook.sh",

src/components/DeviceConnect/stories.js

@@ -4,9 +4,16 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { boolean, select, text } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
+import {
+  getCryptoCurrencyById,
+  listCryptoCurrencies,
+} from '@ledgerhq/live-common/lib/helpers/currencies'
+
+import type { Currency } from '@ledgerhq/live-common/lib/types'
 
 import DeviceConnect from 'components/DeviceConnect'
 
+const currencies = listCryptoCurrencies().map(c => c.id)
 const stories = storiesOf('Components', module)
 
 const devices = [
@@ -34,12 +41,27 @@ const devices = [
 ]
 
 stories.add('DeviceConnect', () => (
+  <Wrapper currencyId={select('currencyId', currencies, 'bitcoin_testnet')}>
+    {({ currency }) => (
       <DeviceConnect
+        currency={currency}
         accountName={boolean('withAccount', true) ? text('accountName', 'Test Account') : null}
-    coinType={Number(select('coinType', [0, 1, 145, 156, 2, 3, 5], '0'))}
         appOpened={select('appOpened', ['', 'success', 'fail'], '')}
         devices={devices.slice(0, Number(select('devices', [0, 1, 2, 3], '0')))}
         deviceSelected={devices[select('deviceSelected', ['', 0, 1, 2], '')] || null}
         onChangeDevice={action('onChangeDevice')}
       />
+    )}
+  </Wrapper>
 ))
+
+function Wrapper({
+  currencyId,
+  children,
+}: {
+  currencyId: string,
+  children: (props: { currency: Currency }) => any,
+}) {
+  const currency = getCryptoCurrencyById(currencyId)
+  return children({ currency })
+}

src/components/SelectAccount/index.js

@@ -22,8 +22,13 @@ const mapStateToProps = state => ({
 })
 
 const renderItem = a => {
-  const Icon = getCryptoCurrencyIcon(a)
+  const Icon = getCryptoCurrencyIcon(a.currency)
   const { color } = a.currency
+
+  // FIXME: we need a non-hacky way to handle text ellipsis
+  const nameOuterStyle = { width: 0 }
+  const nameInnerStyle = { overflow: 'hidden', textOverflow: 'ellipsis' }
+
   return (
     <Box grow horizontal alignItems="center" flow={2}>
       {Icon && (
@@ -31,8 +36,8 @@ const renderItem = a => {
           <Icon size={16} />
         </Box>
       )}
-      <Box grow>
-        <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
+      <Box grow style={nameOuterStyle} ff="Open Sans|SemiBold" color="dark" fontSize={4}>
+        <Text style={nameInnerStyle} ff="Open Sans|SemiBold" color="dark" fontSize={4}>
           {a.name}
         </Text>
       </Box>