From d93e36bde58e2a3250c0c2bb83cce1fb92293564 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Sun, 20 May 2018 18:17:10 +0200
Subject: [PATCH] Fix SelectAccount icon and text-overflow

---
 src/components/SelectAccount/index.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectAccount/index.js b/src/components/SelectAccount/index.js
index f3fd2925..5ab4067a 100644
--- a/src/components/SelectAccount/index.js
+++ b/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>