From 8289af6721ed1c2d7b3eb9a52113c24da3c79a5f Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 19 Dec 2018 18:39:10 -0300
Subject: [PATCH 01/32] feature: add chevron assets

---
 app/assets/images/chevron-down.svg | 1 +
 app/assets/images/chevron-up.svg   | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 app/assets/images/chevron-down.svg
 create mode 100644 app/assets/images/chevron-up.svg

diff --git a/app/assets/images/chevron-down.svg b/app/assets/images/chevron-down.svg
new file mode 100644
index 0000000..0794c73
--- /dev/null
+++ b/app/assets/images/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/chevron-up.svg b/app/assets/images/chevron-up.svg
new file mode 100644
index 0000000..dfff4e4
--- /dev/null
+++ b/app/assets/images/chevron-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>
\ No newline at end of file

From 6051113beaa5db6f6e0a695cff3b0f7d41ed437b Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 19 Dec 2018 18:39:46 -0300
Subject: [PATCH 02/32] feature: add selectButtonShadow color

---
 app/theme.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/theme.js b/app/theme.js
index f6c816a..8d98df9 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -23,6 +23,7 @@ const transactionSent = '#FF6C6C';
 const transactionReceived = '#6AEAC0';
 const transactionsDate = '#777777';
 const transactionsItemHovered = '#222222';
+const selectButtonShadow = '#EEC94C';
 
 const appTheme = {
   mode: DARK,
@@ -61,11 +62,14 @@ const appTheme = {
     transactionReceived,
     transactionsDate,
     transactionsItemHovered,
+    inputBackground: brandOne,
+    selectButtonShadow,
   },
   sidebarWidth: '200px',
   headerHeight: '60px',
   layoutPaddingLeft: '50px',
   layoutPaddingRight: '45px',
+  layoutContentPaddingTop: '20px',
 };
 
 export const GlobalStyle = createGlobalStyle`

From 243a645febfb736b3d908a4a5013e6b14e9fac21 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 19 Dec 2018 18:40:24 -0300
Subject: [PATCH 03/32] feature: add InputLabel

---
 app/components/input-label.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 app/components/input-label.js

diff --git a/app/components/input-label.js b/app/components/input-label.js
new file mode 100644
index 0000000..bc93b52
--- /dev/null
+++ b/app/components/input-label.js
@@ -0,0 +1,9 @@
+//  @flow
+import styled from 'styled-components';
+
+import { TextComponent } from './text';
+
+export const InputLabelComponent = styled(TextComponent)`
+  margin: 20px 0 5px 0;
+  font-weight: ${props => props.theme.fontWeight.bold};
+`;

From e43282124abc785b786d32e28c9b2ca637b6a8e3 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 19 Dec 2018 18:40:39 -0300
Subject: [PATCH 04/32] hotfix: remove useless margin top

---
 app/components/wallet-summary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js
index 63816e0..cccb535 100644
--- a/app/components/wallet-summary.js
+++ b/app/components/wallet-summary.js
@@ -17,8 +17,8 @@ const Wrapper = styled.div`
   background-color: ${props => props.theme.colors.cardBackgroundColor};
   border-radius: 5px;
   padding: 37px 45px;
-  margin-top: 20px;
   position: relative;
+  margin-top: ${props => props.theme.layoutContentPaddingTop};
 `;
 
 const AllAddresses = styled(TextComponent)`

From 56acd17efa1c3e332a3c6f83fe619719a7ce89a2 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 19 Dec 2018 18:41:00 -0300
Subject: [PATCH 05/32] feature: add Select component

---
 app/components/select.js | 137 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 app/components/select.js

diff --git a/app/components/select.js b/app/components/select.js
new file mode 100644
index 0000000..3d6b64e
--- /dev/null
+++ b/app/components/select.js
@@ -0,0 +1,137 @@
+// @flow
+import React, { PureComponent } from 'react';
+import styled from 'styled-components';
+
+import { TextComponent } from './text';
+import ChevronUp from '../assets/images/chevron-up.svg';
+import ChevronDown from '../assets/images/chevron-down.svg';
+
+const SelectWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-radius: 6px;
+  border: none;
+  background-color: ${// $FlowFixMe
+  props => props.theme.colors.inputBackground};
+  color: ${// $FlowFixMe
+  props => props.theme.colors.text};
+  width: 100%;
+  outline: none;
+  font-family: ${// $FlowFixMe
+  props => props.theme.fontFamily};
+  cursor: pointer;
+  position: relative;
+`;
+
+const ValueWrapper = styled.div`
+  width: 95%;
+  padding: 15px;
+  opacity: ${props => (props.hasValue ? '1' : '0.2')};
+`;
+
+const SelectMenuButtonWrapper = styled.button`
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  width: 50px;
+  height: 100%;
+  padding: 15px;
+  border-left: ${props => `1px solid ${props.theme.colors.background}`};
+`;
+/* eslint-disable max-len */
+const SelectMenuButton = styled.button`
+  outline: none;
+  background-color: transparent;
+  border: 1px solid ${props => props.theme.colors.text};
+  border-radius: 100%;
+  box-shadow: ${props => `0px 0px 10px 0px ${props.theme.colors.selectButtonShadow}`};
+`;
+/* eslint-enable max-len */
+
+const Icon = styled.img`
+  width: 10px;
+  height: 10px;
+`;
+
+const OptionsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  bottom: ${props => `-${props.optionsAmount * 60}px`};
+`;
+
+const Option = styled.button`
+  border: none;
+  background: none;
+  height: 60px;
+  background-color: ${props => props.theme.colors.inputBackground};
+  cursor: pointer;
+  z-index: 99;
+
+  &:hover {
+    background-color: ${props => props.theme.colors.background};
+  }
+`;
+
+type Props = {
+  value: string,
+  options: { value: string, label: string }[],
+  placeholder?: string,
+  onChange: string => void,
+};
+type State = {
+  isOpen: boolean,
+};
+
+export class SelectComponent extends PureComponent<Props, State> {
+  state = {
+    isOpen: false,
+  };
+
+  static defaultProps = {
+    placeholder: null,
+  };
+
+  onSelect = (value: string) => {
+    const { onChange } = this.props;
+
+    this.setState(() => ({ isOpen: false }), () => onChange(value));
+  };
+
+  handleClickOutside = (event: Object) => {
+    const { isOpen } = this.state;
+    if (isOpen && event.target.id !== 'select-options-wrapper') this.setState(() => ({ isOpen: false }));
+  };
+
+  render() {
+    const { value, options, placeholder } = this.props;
+    const { isOpen } = this.state;
+
+    return (
+      <SelectWrapper onClick={() => this.setState(() => ({ isOpen: !isOpen }))}>
+        <ValueWrapper hasValue={Boolean(value)}>
+          {value || placeholder}
+        </ValueWrapper>
+        <SelectMenuButtonWrapper>
+          <SelectMenuButton>
+            <Icon src={isOpen ? ChevronUp : ChevronDown} />
+          </SelectMenuButton>
+        </SelectMenuButtonWrapper>
+        {isOpen && (
+          <OptionsWrapper
+            id='select-options-wrapper'
+            optionsAmount={options.length}
+          >
+            {options.map(({ label, value: optionValue }) => (
+              <Option onClick={() => this.onSelect(optionValue)}>
+                <TextComponent value={label} />
+              </Option>
+            ))}
+          </OptionsWrapper>
+        )}
+      </SelectWrapper>
+    );
+  }
+}

From dedb3380d5f2881e725c0606d09c156947cd1b45 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 19 Dec 2018 18:41:16 -0300
Subject: [PATCH 06/32] hotfix: remove dropdown option from input

---
 app/components/input.js | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/app/components/input.js b/app/components/input.js
index 3e61a97..3992bc1 100644
--- a/app/components/input.js
+++ b/app/components/input.js
@@ -3,30 +3,29 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-// TODO: Missing styles
-
-const defaultStyles = `
-  padding: 10px;
+const getDefaultStyles = t => styled[t]`
+  border-radius: 6px;
+  border: none;
+  background-color: ${// $FlowFixMe
+  props => props.theme.colors.inputBackground};
+  color: ${// $FlowFixMe
+  props => props.theme.colors.text};
+  padding: 15px;
   width: 100%;
   outline: none;
-  font-family: ${
-  // $FlowFixMe
-  props => props.theme.fontFamily
-}
+  font-family: ${// $FlowFixMe
+  props => props.theme.fontFamily};
+
+  ::placeholder {
+    opacity: 0.5;
+  }
 `;
 
-const Input = styled.input.attrs({
-  type: 'text',
-})`
-  ${defaultStyles};
-`;
-
-const Textarea = styled.textarea`
-  ${defaultStyles};
-`;
+const Input = getDefaultStyles('input');
+const Textarea = getDefaultStyles('textarea');
 
 type Props = {
-  inputType?: 'input' | 'textarea' | 'dropdown',
+  inputType?: 'input' | 'textarea',
   value: string,
   onChange: string => void,
   rows?: number,
@@ -42,7 +41,6 @@ export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
     textarea: () => (
       <Textarea onChange={evt => onChange(evt.target.value)} {...props} />
     ),
-    dropdown: () => null,
   };
 
   if (!Object.keys(inputTypes).find(key => key === inputType)) {

From 4c139dae053c3c023934bcd4a4d3587a4a2293a2 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 19 Dec 2018 18:41:43 -0300
Subject: [PATCH 07/32] [WIP] feature: add SendView

---
 app/views/send.js | 119 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 117 insertions(+), 2 deletions(-)

diff --git a/app/views/send.js b/app/views/send.js
index a60df9c..f2ab094 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -1,5 +1,120 @@
 // @flow
+import React, { PureComponent, Fragment } from 'react';
+import styled from 'styled-components';
 
-import React from 'react';
+import { InputLabelComponent } from '../components/input-label';
+import { InputComponent } from '../components/input';
+import { TextComponent } from '../components/text';
+import { SelectComponent } from '../components/select';
 
-export const SendView = () => <div className='send'>send</div>;
+const Wrapper = styled.div`
+  margin-top: ${props => props.theme.layoutContentPaddingTop};
+`;
+
+const ShowFeeButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  color: ${props => props.theme.colors.text};
+  outline: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+type Props = {};
+type State = {
+  showFee: boolean,
+  from: string,
+  amount: number,
+  to: string,
+  fee: number,
+  memo: string,
+};
+
+export class SendView extends PureComponent<Props, State> {
+  state = {
+    showFee: false,
+    from: '',
+    amount: 0,
+    to: '',
+    fee: 0,
+    memo: '',
+  };
+
+  handleChange = (field: string) => (value: string) => {
+    this.setState(() => ({
+      [field]: value,
+    }));
+  };
+
+  render() {
+    const {
+      showFee, from, amount, to, memo, fee,
+    } = this.state;
+
+    return (
+      <Wrapper>
+        <InputLabelComponent value='From' />
+        <SelectComponent
+          onChange={this.handleChange('from')}
+          value={from}
+          placeholder='Select a address'
+          options={[
+            {
+              label: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
+              value: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
+            },
+            {
+              label: 'kjnasG8643asd12e45jbhbdsDGvds',
+              value: 'kjnasG8643asd12e45jbhbdsDGvds',
+            },
+          ]}
+        />
+        <InputLabelComponent value='Amount' />
+        <InputComponent
+          type='number'
+          onChange={this.handleChange('amount')}
+          value={String(amount)}
+          placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+        />
+        <InputLabelComponent value='To' />
+        <InputComponent
+          onChange={this.handleChange('to')}
+          value={to}
+          placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+        />
+        <InputLabelComponent value='Memo' />
+        <InputComponent
+          onChange={this.handleChange('memo')}
+          value={memo}
+          inputType='textarea'
+          placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+        />
+
+        <ShowFeeButton
+          onClick={() => this.setState(state => ({ showFee: !state.showFee }))}
+        >
+          <TextComponent
+            value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
+            align='right'
+          />
+        </ShowFeeButton>
+
+        {showFee && (
+          <Fragment>
+            <InputLabelComponent value='Fee' />
+            <InputComponent
+              type='number'
+              onChange={this.handleChange('fee')}
+              value={String(fee)}
+              placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+            />
+          </Fragment>
+        )}
+      </Wrapper>
+    );
+  }
+}

From a8b2fadcaebdb2a15a8c930ceea4bdef6697ad01 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 11:09:10 -0300
Subject: [PATCH 08/32] feature: add default boxBorderRadius theme prop

---
 app/components/dropdown.js          |  2 +-
 app/components/input.js             |  3 ++-
 app/components/select.js            |  2 +-
 app/components/transaction-daily.js | 16 ++++++++--------
 app/components/wallet-summary.js    |  2 +-
 app/theme.js                        |  1 +
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/components/dropdown.js b/app/components/dropdown.js
index 59c9101..9d2f776 100644
--- a/app/components/dropdown.js
+++ b/app/components/dropdown.js
@@ -16,7 +16,7 @@ const MenuWrapper = styled.div`
     props.theme.colors.activeItem,
   )}, ${props.theme.colors.activeItem})`};
   padding: 10px 20px;
-  border-radius: 10px;
+  border-radius: ${props => props.theme.boxBorderRadius};
   margin-left: -10px;
 `;
 
diff --git a/app/components/input.js b/app/components/input.js
index 3992bc1..9edd8bf 100644
--- a/app/components/input.js
+++ b/app/components/input.js
@@ -4,7 +4,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 const getDefaultStyles = t => styled[t]`
-  border-radius: 6px;
+  border-radius: ${// $FlowFixMe
+  props => props.theme.boxBorderRadius};
   border: none;
   background-color: ${// $FlowFixMe
   props => props.theme.colors.inputBackground};
diff --git a/app/components/select.js b/app/components/select.js
index 3d6b64e..743af78 100644
--- a/app/components/select.js
+++ b/app/components/select.js
@@ -9,7 +9,7 @@ import ChevronDown from '../assets/images/chevron-down.svg';
 const SelectWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  border-radius: 6px;
+  border-radius: ${props => props.theme.boxBorderRadius};
   border: none;
   background-color: ${// $FlowFixMe
   props => props.theme.colors.inputBackground};
diff --git a/app/components/transaction-daily.js b/app/components/transaction-daily.js
index 68a3cd7..c015860 100644
--- a/app/components/transaction-daily.js
+++ b/app/components/transaction-daily.js
@@ -1,15 +1,19 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+
 import { TransactionItemComponent, type Transaction } from './transaction-item';
 import { TextComponent } from './text';
+import { Divider } from './divider';
+
+import theme from '../theme';
 
 const Wrapper = styled.div`
   margin-top: 20px;
 `;
 
 const TransactionsWrapper = styled.div`
-  border-radius: 7.5px;
+  border-radius: ${props => props.theme.boxBorderRadius};
   overflow: hidden;
   background-color: ${props => props.theme.colors.cardBackgroundColor};
   padding: 0;
@@ -26,12 +30,6 @@ const Day = styled(TextComponent)`
   margin-bottom: 5px;
 `;
 
-const Divider = styled.div`
-  width: 100%;
-  height: 1px;
-  background-color: ${props => props.theme.colors.inactiveItem};
-`;
-
 type Props = {
   transactionsDate: string,
   transactions: Transaction[],
@@ -57,7 +55,9 @@ export const TransactionDailyComponent = ({
             amount={amount}
             zecPrice={zecPrice}
           />
-          {idx < transactions.length - 1 && <Divider />}
+          {idx < transactions.length - 1 && (
+          <Divider color={theme.colors.inactiveItem} />
+          )}
         </div>
       ))}
     </TransactionsWrapper>
diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js
index cccb535..cac061f 100644
--- a/app/components/wallet-summary.js
+++ b/app/components/wallet-summary.js
@@ -15,7 +15,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   background-color: ${props => props.theme.colors.cardBackgroundColor};
-  border-radius: 5px;
+  border-radius: ${props => props.theme.boxBorderRadius};
   padding: 37px 45px;
   position: relative;
   margin-top: ${props => props.theme.layoutContentPaddingTop};
diff --git a/app/theme.js b/app/theme.js
index 8d98df9..c59bc51 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -70,6 +70,7 @@ const appTheme = {
   layoutPaddingLeft: '50px',
   layoutPaddingRight: '45px',
   layoutContentPaddingTop: '20px',
+  boxBorderRadius: '6px',
 };
 
 export const GlobalStyle = createGlobalStyle`

From 04ba5a3dc651a8a9be64751e7b508a80a02d2c08 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 11:10:03 -0300
Subject: [PATCH 09/32] feature: split Divider component

---
 app/components/divider.js |  9 +++++++++
 app/components/header.js  | 10 ++--------
 2 files changed, 11 insertions(+), 8 deletions(-)
 create mode 100644 app/components/divider.js

diff --git a/app/components/divider.js b/app/components/divider.js
new file mode 100644
index 0000000..62e9f50
--- /dev/null
+++ b/app/components/divider.js
@@ -0,0 +1,9 @@
+// @flow
+import styled from 'styled-components';
+
+export const Divider = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${props => props.color || props.theme.colors.text};
+  opacity: ${props => props.opacity || 1};
+`;
diff --git a/app/components/header.js b/app/components/header.js
index 4e3589a..aca727d 100644
--- a/app/components/header.js
+++ b/app/components/header.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import { ZcashLogo } from './zcash-logo';
 import { TextComponent } from './text';
+import { Divider } from './divider';
 
 const Wrapper = styled.div`
   height: ${props => props.theme.headerHeight};
@@ -44,13 +45,6 @@ const Title = styled(TextComponent)`
   text-transform: capitalize;
 `;
 
-const Divider = styled.div`
-  width: 100%;
-  background-color: ${props => props.theme.colors.text};
-  height: 1px;
-  opacity: 0.1;
-`;
-
 type Props = {
   title: string,
 };
@@ -62,7 +56,7 @@ export const HeaderComponent = ({ title }: Props) => (
     </LogoWrapper>
     <TitleWrapper>
       <Title value={title} />
-      <Divider />
+      <Divider opacity={0.1} />
     </TitleWrapper>
   </Wrapper>
 );

From b6308f8a3e356a64a4277ce92e0cae6d3b548f34 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 11:10:25 -0300
Subject: [PATCH 10/32] hotfix: button default styles

---
 app/components/button.js | 42 ++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/components/button.js b/app/components/button.js
index 5b1cc18..3f464f5 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -8,29 +8,23 @@ import { Link } from 'react-router-dom';
 // $FlowFixMe
 import { darken } from 'polished';
 
-const defaultStyles = `
+const DefaultButton = styled.button`
   padding: 10px 30px;
-  font-family: ${
-  // $FlowFixMe
-  props => props.theme.fontFamily
-};
-  font-weight: ${
-  // $FlowFixMe
-  props => props.theme.fontWeight.bold
-};
-  font-size: ${
-  // $FlowFixMe
-  props => `${props.theme.fontSize.text}em`
-};
+  font-family: ${// $FlowFixMe
+  props => props.theme.fontFamily};
+  font-weight: ${// $FlowFixMe
+  props => props.theme.fontWeight.bold};
+  font-size: ${// $FlowFixMe
+  props => `${props.theme.fontSize.text}em`};
   cursor: pointer;
   outline: none;
   min-width: 100px;
   border-radius: 100px;
   transition: background-color 0.1s ease-in-out;
+  width: 100%;
 `;
 
-const Primary = styled.button`
-  ${defaultStyles};
+const Primary = styled(DefaultButton)`
   background-color: ${props => props.theme.colors.primary};
   color: ${props => props.theme.colors.secondary};
   border: none;
@@ -46,9 +40,8 @@ const Primary = styled.button`
   }
 `;
 
-const Secondary = styled.button`
-  ${defaultStyles};
-  background-color: Transparent;
+const Secondary = styled(DefaultButton)`
+  background-color: transparent;
   color: ${props => props.theme.colors.secondary};
   border: 2px solid #3e3c42;
 
@@ -73,19 +66,25 @@ type Props = {
   to?: string,
   variant?: 'primary' | 'secondary',
   disabled?: boolean,
+  className?: string,
 };
 
 export const Button = ({
-  onClick, label, to, variant, disabled,
+  onClick,
+  label,
+  to,
+  variant,
+  disabled,
+  className,
 }: Props) => {
   if (to && onClick) throw new Error('Should define either "to" or "onClick"');
 
   const component = variant === 'primary' ? (
-    <Primary onClick={onClick} disabled={disabled}>
+    <Primary onClick={onClick} disabled={disabled} className={className}>
       {label}
     </Primary>
   ) : (
-    <Secondary onClick={onClick} disabled={disabled}>
+    <Secondary onClick={onClick} disabled={disabled} className={className}>
       {label}
     </Secondary>
   );
@@ -98,4 +97,5 @@ Button.defaultProps = {
   variant: 'primary',
   onClick: null,
   disabled: false,
+  className: '',
 };

From e6c3e8c7f62bea5dffca80c1e363004ff922edd9 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 11:10:44 -0300
Subject: [PATCH 11/32] feture: add Send view side information

---
 app/views/send.js | 179 +++++++++++++++++++++++++++++++---------------
 1 file changed, 122 insertions(+), 57 deletions(-)

diff --git a/app/views/send.js b/app/views/send.js
index f2ab094..4fb02de 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -6,9 +6,19 @@ import { InputLabelComponent } from '../components/input-label';
 import { InputComponent } from '../components/input';
 import { TextComponent } from '../components/text';
 import { SelectComponent } from '../components/select';
+import { RowComponent } from '../components/row';
+import { ColumnComponent } from '../components/column';
+import { Divider } from '../components/divider';
+import { Button } from '../components/button';
 
-const Wrapper = styled.div`
+const FormWrapper = styled.div`
   margin-top: ${props => props.theme.layoutContentPaddingTop};
+  width: 80%;
+`;
+
+const SendWrapper = styled(ColumnComponent)`
+  margin-top: 60px;
+  width: 15%;
 `;
 
 const ShowFeeButton = styled.button`
@@ -24,6 +34,42 @@ const ShowFeeButton = styled.button`
   }
 `;
 
+const InfoCard = styled.div`
+  width: 100%;
+  background-color: ${props => props.theme.colors.cardBackgroundColor};
+  border-radius: ${props => props.theme.boxBorderRadius};
+`;
+
+const InfoContent = styled.div`
+  padding: 15px;
+`;
+
+const InfoCardLabel = styled(TextComponent)`
+  opacity: 0.5;
+  margin-bottom: 10px;
+`;
+
+const InfoCardUSD = styled(TextComponent)`
+  opacity: 0.5;
+  margin-top: 2.5px;
+`;
+
+const FormButton = styled(Button)`
+  margin: 10px 0;
+  border-color: ${props => (props.focused
+    ? props.theme.colors.activeItem
+    : props.theme.colors.inactiveItem)};
+
+  &:hover {
+    border-color: ${props => (props.focused
+    ? props.theme.colors.activeItem
+    : props.theme.colors.inactiveItem)};
+    background-color: ${props => (props.focused
+    ? props.theme.colors.activeItem
+    : props.theme.colors.inactiveItem)};
+  }
+`;
+
 type Props = {};
 type State = {
   showFee: boolean,
@@ -56,65 +102,84 @@ export class SendView extends PureComponent<Props, State> {
     } = this.state;
 
     return (
-      <Wrapper>
-        <InputLabelComponent value='From' />
-        <SelectComponent
-          onChange={this.handleChange('from')}
-          value={from}
-          placeholder='Select a address'
-          options={[
-            {
-              label: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
-              value: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
-            },
-            {
-              label: 'kjnasG8643asd12e45jbhbdsDGvds',
-              value: 'kjnasG8643asd12e45jbhbdsDGvds',
-            },
-          ]}
-        />
-        <InputLabelComponent value='Amount' />
-        <InputComponent
-          type='number'
-          onChange={this.handleChange('amount')}
-          value={String(amount)}
-          placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
-        />
-        <InputLabelComponent value='To' />
-        <InputComponent
-          onChange={this.handleChange('to')}
-          value={to}
-          placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
-        />
-        <InputLabelComponent value='Memo' />
-        <InputComponent
-          onChange={this.handleChange('memo')}
-          value={memo}
-          inputType='textarea'
-          placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
-        />
-
-        <ShowFeeButton
-          onClick={() => this.setState(state => ({ showFee: !state.showFee }))}
-        >
-          <TextComponent
-            value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
-            align='right'
+      <RowComponent justifyContent='space-between'>
+        <FormWrapper>
+          <InputLabelComponent value='From' />
+          <SelectComponent
+            onChange={this.handleChange('from')}
+            value={from}
+            placeholder='Select a address'
+            options={[
+              {
+                label: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
+                value: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
+              },
+              {
+                label: 'kjnasG8643asd12e45jbhbdsDGvds',
+                value: 'kjnasG8643asd12e45jbhbdsDGvds',
+              },
+            ]}
+          />
+          <InputLabelComponent value='Amount' />
+          <InputComponent
+            type='number'
+            onChange={this.handleChange('amount')}
+            value={String(amount)}
+            placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+          />
+          <InputLabelComponent value='To' />
+          <InputComponent
+            onChange={this.handleChange('to')}
+            value={to}
+            placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+          />
+          <InputLabelComponent value='Memo' />
+          <InputComponent
+            onChange={this.handleChange('memo')}
+            value={memo}
+            inputType='textarea'
+            placeholder='Enter a text here'
           />
-        </ShowFeeButton>
 
-        {showFee && (
-          <Fragment>
-            <InputLabelComponent value='Fee' />
-            <InputComponent
-              type='number'
-              onChange={this.handleChange('fee')}
-              value={String(fee)}
-              placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+          <ShowFeeButton
+            onClick={() => this.setState(state => ({ showFee: !state.showFee }))
+            }
+          >
+            <TextComponent
+              value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
+              align='right'
             />
-          </Fragment>
-        )}
-      </Wrapper>
+          </ShowFeeButton>
+          {showFee && (
+            <Fragment>
+              <InputLabelComponent value='Fee' />
+              <InputComponent
+                type='number'
+                onChange={this.handleChange('fee')}
+                value={String(fee)}
+                placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+              />
+            </Fragment>
+          )}
+        </FormWrapper>
+        <SendWrapper>
+          <InfoCard>
+            <InfoContent>
+              <InfoCardLabel value='Available Funds:' />
+              <TextComponent value='ZEC 2.235' size={1.125} isBold />
+              <InfoCardUSD value='USD $25.000,00' />
+            </InfoContent>
+            <Divider opacity={0.5} />
+            <InfoContent>
+              <InfoCardLabel value='Sending' />
+              <TextComponent value='ZEC 0' size={1.125} isBold />
+              <InfoCardUSD value='USD $0.00' />
+            </InfoContent>
+          </InfoCard>
+          <FormButton label='Send' variant='secondary' focused />
+          <FormButton label='Cancel' variant='secondary' />
+        </SendWrapper>
+      </RowComponent>
     );
   }
 }

From 0423077cd748114f288ff1839e44c382f79b6098 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 11:31:52 -0300
Subject: [PATCH 12/32] hotfix: add with in column component

---
 app/components/column.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/components/column.js b/app/components/column.js
index ba58e4d..1a06505 100644
--- a/app/components/column.js
+++ b/app/components/column.js
@@ -9,6 +9,7 @@ const Flex = styled.div`
   flex-direction: column;
   align-items: ${props => props.alignItems};
   justify-content: ${props => props.justifyContent};
+  ${props => props.width && `width: ${props.width};`}
 `;
 
 type Props = {
@@ -16,6 +17,7 @@ type Props = {
   justifyContent?: string,
   className?: string,
   children: Node,
+  width?: string,
 };
 
 export const ColumnComponent = ({ children, ...props }: Props) => (
@@ -26,4 +28,5 @@ ColumnComponent.defaultProps = {
   alignItems: 'flex-start',
   justifyContent: 'flex-start',
   className: '',
+  width: '',
 };

From 2199c987e1abdc62434f36394d08cd52616d4d1e Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 11:32:28 -0300
Subject: [PATCH 13/32] hotfix: add getSelectedLabel in Select component

---
 app/components/select.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/components/select.js b/app/components/select.js
index 743af78..f1d2e76 100644
--- a/app/components/select.js
+++ b/app/components/select.js
@@ -25,7 +25,7 @@ const SelectWrapper = styled.div`
 
 const ValueWrapper = styled.div`
   width: 95%;
-  padding: 15px;
+  padding: 13px;
   opacity: ${props => (props.hasValue ? '1' : '0.2')};
 `;
 
@@ -36,7 +36,7 @@ const SelectMenuButtonWrapper = styled.button`
   background-color: transparent;
   width: 50px;
   height: 100%;
-  padding: 15px;
+  padding: 13px;
   border-left: ${props => `1px solid ${props.theme.colors.background}`};
 `;
 /* eslint-disable max-len */
@@ -91,7 +91,7 @@ export class SelectComponent extends PureComponent<Props, State> {
   };
 
   static defaultProps = {
-    placeholder: null,
+    placeholder: '',
   };
 
   onSelect = (value: string) => {
@@ -105,6 +105,13 @@ export class SelectComponent extends PureComponent<Props, State> {
     if (isOpen && event.target.id !== 'select-options-wrapper') this.setState(() => ({ isOpen: false }));
   };
 
+  getSelectedLabel = (value: string) => {
+    const { options } = this.props;
+    const option = options.find(opt => opt.value === value);
+
+    if (option) return option.label;
+  };
+
   render() {
     const { value, options, placeholder } = this.props;
     const { isOpen } = this.state;
@@ -112,7 +119,7 @@ export class SelectComponent extends PureComponent<Props, State> {
     return (
       <SelectWrapper onClick={() => this.setState(() => ({ isOpen: !isOpen }))}>
         <ValueWrapper hasValue={Boolean(value)}>
-          {value || placeholder}
+          {this.getSelectedLabel(value) || placeholder}
         </ValueWrapper>
         <SelectMenuButtonWrapper>
           <SelectMenuButton>

From e8340482e90d7c8b802c6b2f341f0460b0a192d9 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 11:33:00 -0300
Subject: [PATCH 14/32] feature: add select field in Send View fees

---
 app/views/send.js | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/views/send.js b/app/views/send.js
index 4fb02de..fcced27 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 
 import { InputLabelComponent } from '../components/input-label';
@@ -140,7 +140,6 @@ export class SendView extends PureComponent<Props, State> {
             inputType='textarea'
             placeholder='Enter a text here'
           />
-
           <ShowFeeButton
             onClick={() => this.setState(state => ({ showFee: !state.showFee }))
             }
@@ -151,15 +150,29 @@ export class SendView extends PureComponent<Props, State> {
             />
           </ShowFeeButton>
           {showFee && (
-            <Fragment>
-              <InputLabelComponent value='Fee' />
-              <InputComponent
-                type='number'
-                onChange={this.handleChange('fee')}
-                value={String(fee)}
-                placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
-              />
-            </Fragment>
+            <RowComponent alignItems='flex-end' justifyContent='space-between'>
+              <ColumnComponent width='74%'>
+                <InputLabelComponent value='Fee' />
+                <InputComponent
+                  type='number'
+                  onChange={this.handleChange('fee')}
+                  value={String(fee)}
+                  placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+                />
+              </ColumnComponent>
+              <ColumnComponent width='25%'>
+                <SelectComponent
+                  onChange={this.handleChange('from')}
+                  value={from}
+                  options={[
+                    {
+                      label: 'Medium',
+                      value: 'medium',
+                    },
+                  ]}
+                />
+              </ColumnComponent>
+            </RowComponent>
           )}
         </FormWrapper>
         <SendWrapper>

From b7df0fa86a9d0fc2a7a89cec62314db20cdeea3d Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 14:13:52 -0300
Subject: [PATCH 15/32] hotfix: add opacity in selectButtonShadow color

---
 app/theme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/theme.js b/app/theme.js
index c59bc51..170b240 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -23,7 +23,7 @@ const transactionSent = '#FF6C6C';
 const transactionReceived = '#6AEAC0';
 const transactionsDate = '#777777';
 const transactionsItemHovered = '#222222';
-const selectButtonShadow = '#EEC94C';
+const selectButtonShadow = 'rgba(238,201,76,0.65)';
 
 const appTheme = {
   mode: DARK,

From 7e76173a068541954efc456acd52bc459ff8309d Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 14:15:55 -0300
Subject: [PATCH 16/32] hotfix: add missing overflow in Layout

---
 app/components/layout.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/layout.js b/app/components/layout.js
index 47c0b28..703ed28 100644
--- a/app/components/layout.js
+++ b/app/components/layout.js
@@ -10,6 +10,7 @@ const Layout = styled.div`
   background-color: ${props => props.theme.colors.background};
   padding-left: ${props => props.theme.layoutPaddingLeft};
   padding-right: ${props => props.theme.layoutPaddingRight};
+  overflow: auto;
 `;
 
 type Props = {

From 9245ab7a3a792ff1082c92dba001ac4b701dfbd4 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 14:16:46 -0300
Subject: [PATCH 17/32] feature: add placement prop in Select

---
 app/components/select.js | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/components/select.js b/app/components/select.js
index f1d2e76..0a3250a 100644
--- a/app/components/select.js
+++ b/app/components/select.js
@@ -27,6 +27,7 @@ const ValueWrapper = styled.div`
   width: 95%;
   padding: 13px;
   opacity: ${props => (props.hasValue ? '1' : '0.2')};
+  text-transform: capitalize;
 `;
 
 const SelectMenuButtonWrapper = styled.button`
@@ -45,7 +46,9 @@ const SelectMenuButton = styled.button`
   background-color: transparent;
   border: 1px solid ${props => props.theme.colors.text};
   border-radius: 100%;
-  box-shadow: ${props => `0px 0px 10px 0px ${props.theme.colors.selectButtonShadow}`};
+  box-shadow: ${props => `0px 0px 10px 0px ${
+    props.theme.colors.selectButtonShadow
+  }, 0px 0px 10px 0px ${props.theme.colors.selectButtonShadow} inset`};
 `;
 /* eslint-enable max-len */
 
@@ -59,7 +62,7 @@ const OptionsWrapper = styled.div`
   flex-direction: column;
   position: absolute;
   width: 100%;
-  bottom: ${props => `-${props.optionsAmount * 60}px`};
+  ${props => `${props.placement}: ${`-${props.optionsAmount * 60}px`}`};
 `;
 
 const Option = styled.button`
@@ -69,6 +72,7 @@ const Option = styled.button`
   background-color: ${props => props.theme.colors.inputBackground};
   cursor: pointer;
   z-index: 99;
+  text-transform: capitalize;
 
   &:hover {
     background-color: ${props => props.theme.colors.background};
@@ -80,6 +84,7 @@ type Props = {
   options: { value: string, label: string }[],
   placeholder?: string,
   onChange: string => void,
+  placement?: 'top' | 'bottom',
 };
 type State = {
   isOpen: boolean,
@@ -92,6 +97,7 @@ export class SelectComponent extends PureComponent<Props, State> {
 
   static defaultProps = {
     placeholder: '',
+    placement: 'bottom',
   };
 
   onSelect = (value: string) => {
@@ -112,8 +118,21 @@ export class SelectComponent extends PureComponent<Props, State> {
     if (option) return option.label;
   };
 
+  getSelectIcon = () => {
+    const { placement } = this.props;
+    const { isOpen } = this.state;
+
+    if (placement === 'bottom') {
+      return isOpen ? ChevronUp : ChevronDown;
+    }
+
+    return isOpen ? ChevronDown : ChevronUp;
+  };
+
   render() {
-    const { value, options, placeholder } = this.props;
+    const {
+      value, options, placeholder, placement,
+    } = this.props;
     const { isOpen } = this.state;
 
     return (
@@ -123,16 +142,20 @@ export class SelectComponent extends PureComponent<Props, State> {
         </ValueWrapper>
         <SelectMenuButtonWrapper>
           <SelectMenuButton>
-            <Icon src={isOpen ? ChevronUp : ChevronDown} />
+            <Icon src={this.getSelectIcon()} />
           </SelectMenuButton>
         </SelectMenuButtonWrapper>
         {isOpen && (
           <OptionsWrapper
             id='select-options-wrapper'
             optionsAmount={options.length}
+            placement={placement}
           >
             {options.map(({ label, value: optionValue }) => (
-              <Option onClick={() => this.onSelect(optionValue)}>
+              <Option
+                key={label + optionValue}
+                onClick={() => this.onSelect(optionValue)}
+              >
                 <TextComponent value={label} />
               </Option>
             ))}

From bd8b3783d8fc66c1fb13b1b3e4748576b6a35a2c Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 14:17:22 -0300
Subject: [PATCH 18/32] feature: add fees constants

---
 app/constants/fees.js | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 app/constants/fees.js

diff --git a/app/constants/fees.js b/app/constants/fees.js
new file mode 100644
index 0000000..498e95d
--- /dev/null
+++ b/app/constants/fees.js
@@ -0,0 +1,8 @@
+// @flow
+
+export default {
+  LOW: 1,
+  MEDIUM: 5,
+  HIGH: 9,
+  CUSTOM: 'custom',
+};

From 87a86277d3ef733e2e662b68389a0b2b9150dadf Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 14:18:07 -0300
Subject: [PATCH 19/32] hotfix: fix ScrollTopContainer

---
 app/router/router.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/router/router.js b/app/router/router.js
index 9b6050b..0298ea5 100644
--- a/app/router/router.js
+++ b/app/router/router.js
@@ -48,9 +48,9 @@ export const RouterComponent = ({ location }: { location: Location }) => (
     <HeaderComponent title={getTitle(location.pathname)} />
     <ContentWrapper>
       <SidebarContainer location={location} />
-      <ScrollTopComponent>
-        {/* $FlowFixMe */}
-        <LayoutComponent>
+      {/* $FlowFixMe */}
+      <LayoutComponent>
+        <ScrollTopComponent>
           <Switch>
             <Route
               exact
@@ -67,8 +67,8 @@ export const RouterComponent = ({ location }: { location: Location }) => (
             />
             <Route component={NotFoundView} />
           </Switch>
-        </LayoutComponent>
-      </ScrollTopComponent>
+        </ScrollTopComponent>
+      </LayoutComponent>
     </ContentWrapper>
   </FullWrapper>
 );

From 150f578a86fc38e486cf3ca7646e86e6cf957184 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 14:18:45 -0300
Subject: [PATCH 20/32] feature: add handleChangeFeeType in Send view

---
 app/views/send.js | 47 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/views/send.js b/app/views/send.js
index fcced27..db724da 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -2,6 +2,8 @@
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 
+import FEES from '../constants/fees';
+
 import { InputLabelComponent } from '../components/input-label';
 import { InputComponent } from '../components/input';
 import { TextComponent } from '../components/text';
@@ -76,7 +78,8 @@ type State = {
   from: string,
   amount: number,
   to: string,
-  fee: number,
+  feeType: string | number,
+  fee: number | null,
   memo: string,
 };
 
@@ -86,7 +89,8 @@ export class SendView extends PureComponent<Props, State> {
     from: '',
     amount: 0,
     to: '',
-    fee: 0,
+    feeType: FEES.LOW,
+    fee: FEES.LOW,
     memo: '',
   };
 
@@ -96,9 +100,29 @@ export class SendView extends PureComponent<Props, State> {
     }));
   };
 
+  handleChangeFeeType = (value: string) => {
+    this.setState(
+      {
+        feeType: value,
+        fee: null,
+      },
+      () => {
+        if (
+          value === String(FEES.LOW)
+          || value === String(FEES.MEDIUM)
+          || value === String(FEES.HIGH)
+        ) {
+          this.setState(() => ({
+            fee: Number(value),
+          }));
+        }
+      },
+    );
+  };
+
   render() {
     const {
-      showFee, from, amount, to, memo, fee,
+      showFee, from, amount, to, memo, fee, feeType,
     } = this.state;
 
     return (
@@ -157,19 +181,18 @@ export class SendView extends PureComponent<Props, State> {
                   type='number'
                   onChange={this.handleChange('fee')}
                   value={String(fee)}
-                  placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+                  disabled={feeType !== FEES.CUSTOM}
                 />
               </ColumnComponent>
               <ColumnComponent width='25%'>
                 <SelectComponent
-                  onChange={this.handleChange('from')}
-                  value={from}
-                  options={[
-                    {
-                      label: 'Medium',
-                      value: 'medium',
-                    },
-                  ]}
+                  onChange={this.handleChangeFeeType}
+                  value={String(feeType)}
+                  options={Object.keys(FEES).map(cur => ({
+                    label: cur.toLowerCase(),
+                    value: String(FEES[cur]),
+                  }))}
+                  placement='top'
                 />
               </ColumnComponent>
             </RowComponent>

From 020b12df7dd63388ef83f938ff7dc82a539c7684 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 15:55:27 -0300
Subject: [PATCH 21/32] hotfix: add ellipsis in select value

---
 app/components/select.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/components/select.js b/app/components/select.js
index 0a3250a..758d6b9 100644
--- a/app/components/select.js
+++ b/app/components/select.js
@@ -28,6 +28,9 @@ const ValueWrapper = styled.div`
   padding: 13px;
   opacity: ${props => (props.hasValue ? '1' : '0.2')};
   text-transform: capitalize;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const SelectMenuButtonWrapper = styled.button`

From d306a2e37efd302f012629166d855d2ddb480838 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 15:56:45 -0300
Subject: [PATCH 22/32] feature: send view container

---
 app/containers/send.js | 14 ++++++++++++++
 app/router/router.js   |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 app/containers/send.js

diff --git a/app/containers/send.js b/app/containers/send.js
new file mode 100644
index 0000000..f8b1fe1
--- /dev/null
+++ b/app/containers/send.js
@@ -0,0 +1,14 @@
+// @flow
+import { connect } from 'react-redux';
+
+import { SendView } from '../views/send';
+
+import type { AppState } from '../types/app-state';
+
+const mapStateToProps = ({ walletSummary }: AppState) => ({
+  balance: walletSummary.total,
+  zecPrice: walletSummary.zecPrice,
+  addresses: walletSummary.addresses,
+});
+
+export const SendContainer = connect(mapStateToProps)(SendView);
diff --git a/app/router/router.js b/app/router/router.js
index 0298ea5..11952fe 100644
--- a/app/router/router.js
+++ b/app/router/router.js
@@ -8,7 +8,7 @@ import { ScrollTopComponent } from './scroll-top';
 import { SidebarContainer } from '../containers/sidebar';
 import { DashboardContainer } from '../containers/dashboard';
 import { TransactionsContainer } from '../containers/transactions';
-import { SendView } from '../views/send';
+import { SendContainer } from '../containers/send';
 import { ReceiveView } from '../views/receive';
 import { SettingsView } from '../views/settings';
 import { NotFoundView } from '../views/not-found';
@@ -57,7 +57,7 @@ export const RouterComponent = ({ location }: { location: Location }) => (
               path={DASHBOARD_ROUTE}
               component={DashboardContainer}
             />
-            <Route path={SEND_ROUTE} component={SendView} />
+            <Route path={SEND_ROUTE} component={SendContainer} />
             <Route path={RECEIVE_ROUTE} component={ReceiveView} />
             <Route path={SETTINGS_ROUTE} component={SettingsView} />
             <Route path={CONSOLE_ROUTE} component={ConsoleView} />

From 3af8d643cf559a8a731180a1fcecdb29ef59e3c9 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 16:00:35 -0300
Subject: [PATCH 23/32] feature: hookup values to send view

---
 app/views/send.js | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/app/views/send.js b/app/views/send.js
index db724da..94576b3 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -13,6 +13,8 @@ import { ColumnComponent } from '../components/column';
 import { Divider } from '../components/divider';
 import { Button } from '../components/button';
 
+import formatNumber from '../utils/formatNumber';
+
 const FormWrapper = styled.div`
   margin-top: ${props => props.theme.layoutContentPaddingTop};
   width: 80%;
@@ -72,7 +74,11 @@ const FormButton = styled(Button)`
   }
 `;
 
-type Props = {};
+type Props = {
+  balance: number,
+  zecPrice: number,
+  addresses: string[],
+};
 type State = {
   showFee: boolean,
   from: string,
@@ -121,10 +127,22 @@ export class SendView extends PureComponent<Props, State> {
   };
 
   render() {
+    const { addresses, balance, zecPrice } = this.props;
     const {
       showFee, from, amount, to, memo, fee, feeType,
     } = this.state;
 
+    const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
+    const zecBalanceInUsd = formatNumber({
+      value: balance * zecPrice,
+      append: 'USD $',
+    });
+    const valueSent = formatNumber({ value: amount, append: 'ZEC ' });
+    const valueSentInUsd = formatNumber({
+      value: amount * zecPrice,
+      append: 'USD $',
+    });
+
     return (
       <RowComponent justifyContent='space-between'>
         <FormWrapper>
@@ -133,16 +151,7 @@ export class SendView extends PureComponent<Props, State> {
             onChange={this.handleChange('from')}
             value={from}
             placeholder='Select a address'
-            options={[
-              {
-                label: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
-                value: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
-              },
-              {
-                label: 'kjnasG8643asd12e45jbhbdsDGvds',
-                value: 'kjnasG8643asd12e45jbhbdsDGvds',
-              },
-            ]}
+            options={addresses.map(addr => ({ value: addr, label: addr }))}
           />
           <InputLabelComponent value='Amount' />
           <InputComponent
@@ -202,14 +211,14 @@ export class SendView extends PureComponent<Props, State> {
           <InfoCard>
             <InfoContent>
               <InfoCardLabel value='Available Funds:' />
-              <TextComponent value='ZEC 2.235' size={1.125} isBold />
-              <InfoCardUSD value='USD $25.000,00' />
+              <TextComponent value={zecBalance} size={1.125} isBold />
+              <InfoCardUSD value={zecBalanceInUsd} />
             </InfoContent>
             <Divider opacity={0.5} />
             <InfoContent>
               <InfoCardLabel value='Sending' />
-              <TextComponent value='ZEC 0' size={1.125} isBold />
-              <InfoCardUSD value='USD $0.00' />
+              <TextComponent value={valueSent} size={1.125} isBold />
+              <InfoCardUSD value={valueSentInUsd} />
             </InfoContent>
           </InfoCard>
           <FormButton label='Send' variant='secondary' focused />

From a37c5fb6ca78c1ca0f3c036ed0c69d293eb53dbb Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 20 Dec 2018 16:04:00 -0300
Subject: [PATCH 24/32] feature: add warning on select custom fee

---
 app/views/send.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/views/send.js b/app/views/send.js
index 94576b3..9fdeae3 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -206,6 +206,9 @@ export class SendView extends PureComponent<Props, State> {
               </ColumnComponent>
             </RowComponent>
           )}
+          {feeType === FEES.CUSTOM && (
+            <TextComponent value='Custom fees may compromise your privacy since fees are transparent' />
+          )}
         </FormWrapper>
         <SendWrapper>
           <InfoCard>

From 082ec8db2402425e553e0d779fb47d70741b9125 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 12:36:28 -0300
Subject: [PATCH 25/32] feature: add @babel/plugin-proposal-optional-chaining

---
 .babelrc     |  3 ++-
 .flowconfig  |  1 +
 package.json |  1 +
 yarn.lock    | 15 +++++++++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/.babelrc b/.babelrc
index 7336e76..b60e66e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,6 +3,7 @@
   "plugins": [
     "@babel/plugin-transform-regenerator",
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-optional-chaining"
   ]
 }
diff --git a/.flowconfig b/.flowconfig
index cebe5f8..b5f785d 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -9,5 +9,6 @@ flow-typed
 [lints]
 
 [options]
+esproposal.optional_chaining=enable
 
 [strict]
\ No newline at end of file
diff --git a/package.json b/package.json
index 15259dc..5391e78 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
     "@babel/plugin-transform-regenerator": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-flow": "^7.0.0",
diff --git a/yarn.lock b/yarn.lock
index 36deca7..c232cda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -406,6 +406,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
 
+"@babel/plugin-proposal-optional-chaining@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.2.0.tgz#ae454f4c21c6c2ce8cb2397dc332ae8b420c5441"
+  integrity sha512-ea3Q6edZC/55wEBVZAEz42v528VulyO0eir+7uky/sT4XRcdkWJcFi1aPtitTlwUzGnECWJNExWww1SStt+yWw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.2.0"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.0.0", "@babel/plugin-proposal-unicode-property-regex@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.2.0.tgz#abe7281fe46c95ddc143a65e5358647792039520"
@@ -478,6 +486,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-optional-chaining@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.2.0.tgz#a59d6ae8c167e7608eaa443fda9fa8fa6bf21dff"
+  integrity sha512-HtGCtvp5Uq/jH/WNUPkK6b7rufnCPLLlDAFN7cmACoIjaOOiXxUt3SswU5loHqrhtqTsa/WoLQ1OQ1AGuZqaWA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-typescript@^7.0.0", "@babel/plugin-syntax-typescript@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.2.0.tgz#55d240536bd314dcbbec70fd949c5cabaed1de29"

From 571b11af4e6e443f202e949ecf4f424763380f24 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 12:42:31 -0300
Subject: [PATCH 26/32] hotfix: remove $FlowFixMe from button

---
 app/components/button.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/app/components/button.js b/app/components/button.js
index 3f464f5..6b74932 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -10,12 +10,9 @@ import { darken } from 'polished';
 
 const DefaultButton = styled.button`
   padding: 10px 30px;
-  font-family: ${// $FlowFixMe
-  props => props.theme.fontFamily};
-  font-weight: ${// $FlowFixMe
-  props => props.theme.fontWeight.bold};
-  font-size: ${// $FlowFixMe
-  props => `${props.theme.fontSize.text}em`};
+  font-family: ${props => props.theme.fontFamily};
+  font-weight: ${props => props.theme.fontWeight.bold};
+  font-size: ${props => `${props.theme.fontSize.text}em`};
   cursor: pointer;
   outline: none;
   min-width: 100px;
@@ -67,6 +64,7 @@ type Props = {
   variant?: 'primary' | 'secondary',
   disabled?: boolean,
   className?: string,
+  isLoading?: boolean,
 };
 
 export const Button = ({
@@ -76,17 +74,17 @@ export const Button = ({
   variant,
   disabled,
   className,
+  isLoading,
 }: Props) => {
   if (to && onClick) throw new Error('Should define either "to" or "onClick"');
 
+  const props = { onClick, disabled: disabled || isLoading, className };
+  const buttonLabel = isLoading ? 'Loading...' : label;
+
   const component = variant === 'primary' ? (
-    <Primary onClick={onClick} disabled={disabled} className={className}>
-      {label}
-    </Primary>
+    <Primary {...props}>{buttonLabel}</Primary>
   ) : (
-    <Secondary onClick={onClick} disabled={disabled} className={className}>
-      {label}
-    </Secondary>
+    <Secondary {...props}>{buttonLabel}</Secondary>
   );
 
   return to ? <Link to={String(to)}>{component}</Link> : component;
@@ -98,4 +96,5 @@ Button.defaultProps = {
   onClick: null,
   disabled: false,
   className: '',
+  isLoading: false,
 };

From 5d0060194bf4eba90344181c064622777298ce1b Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 12:43:12 -0300
Subject: [PATCH 27/32] hotfix: add keys in map

---
 app/components/transaction-daily.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/transaction-daily.js b/app/components/transaction-daily.js
index c015860..cf100e1 100644
--- a/app/components/transaction-daily.js
+++ b/app/components/transaction-daily.js
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled from 'styled-components';
 
 import { TransactionItemComponent, type Transaction } from './transaction-item';
@@ -47,7 +47,7 @@ export const TransactionDailyComponent = ({
       {transactions.map(({
         date, type, address, amount,
       }, idx) => (
-        <div>
+        <Fragment key={address + type + date}>
           <TransactionItemComponent
             type={type}
             date={date}
@@ -58,7 +58,7 @@ export const TransactionDailyComponent = ({
           {idx < transactions.length - 1 && (
           <Divider color={theme.colors.inactiveItem} />
           )}
-        </div>
+        </Fragment>
       ))}
     </TransactionsWrapper>
   </Wrapper>

From 2c71bcbbdc023a1362a31bc57c4e526b25013a6a Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 12:43:40 -0300
Subject: [PATCH 28/32] hotfix: fix reject error message in rpc api

---
 services/api.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/services/api.js b/services/api.js
index 259f337..adebe47 100644
--- a/services/api.js
+++ b/services/api.js
@@ -32,7 +32,10 @@ const api: APIMethods = METHODS.reduce(
           params: args,
         },
       })
-      .then(data => Promise.resolve(data.body && data.body.result)),
+      .then(data => Promise.resolve(data.body && data.body.result))
+      .catch(payload => Promise.reject(
+        new Error(payload.body?.error.message || 'Something went wrong'),
+      )),
   }),
   {},
 );

From c3e66a286c1b4870f5831dde3caacd0dc33a14c6 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 12:44:11 -0300
Subject: [PATCH 29/32] feature: add send redux module

---
 app/containers/send.js       | 49 +++++++++++++++++++++++++++++++++---
 app/redux/modules/reducer.js |  2 ++
 app/redux/modules/send.js    | 46 +++++++++++++++++++++++++++++++++
 app/types/app-state.js       |  2 ++
 4 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 app/redux/modules/send.js

diff --git a/app/containers/send.js b/app/containers/send.js
index f8b1fe1..c80c27e 100644
--- a/app/containers/send.js
+++ b/app/containers/send.js
@@ -1,14 +1,57 @@
 // @flow
 import { connect } from 'react-redux';
+import eres from 'eres';
 
+import rpc from '../../services/api';
 import { SendView } from '../views/send';
 
-import type { AppState } from '../types/app-state';
+import {
+  sendTransaction,
+  sendTransactionSuccess,
+  sendTransactionError,
+} from '../redux/modules/send';
 
-const mapStateToProps = ({ walletSummary }: AppState) => ({
+import type { AppState } from '../types/app-state';
+import type { Dispatch } from '../types/redux';
+
+export type SendTransactionInput = {
+  from: string,
+  to: string,
+  amount: number,
+  fee: number,
+  memo: string,
+};
+
+const mapStateToProps = ({ walletSummary, sendStatus }: AppState) => ({
   balance: walletSummary.total,
   zecPrice: walletSummary.zecPrice,
   addresses: walletSummary.addresses,
+  error: sendStatus.error,
+  isSending: sendStatus.isSending,
 });
 
-export const SendContainer = connect(mapStateToProps)(SendView);
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  sendTransaction: async ({
+    from,
+    to,
+    amount,
+    fee,
+    memo,
+  }: SendTransactionInput) => {
+    dispatch(sendTransaction());
+
+    const [sendErr] = await eres(
+      rpc.z_sendmany(from, [{ address: to, amount, memo }], 1, fee),
+    );
+
+    // eslint-disable-next-line
+    if (sendErr) return dispatch(sendTransactionError({ error: sendErr.message }));
+
+    dispatch(sendTransactionSuccess());
+  },
+});
+
+export const SendContainer = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SendView);
diff --git a/app/redux/modules/reducer.js b/app/redux/modules/reducer.js
index 8c9e2ad..6d2fb75 100644
--- a/app/redux/modules/reducer.js
+++ b/app/redux/modules/reducer.js
@@ -6,9 +6,11 @@ import type { RouterHistory } from 'react-router-dom';
 
 import wallet from './wallet';
 import transactions from './transactions';
+import send from './send';
 
 export const createRootReducer = (history: RouterHistory) => combineReducers({
   walletSummary: wallet,
   transactions,
+  sendStatus: send,
   router: connectRouter(history),
 });
diff --git a/app/redux/modules/send.js b/app/redux/modules/send.js
new file mode 100644
index 0000000..c21daae
--- /dev/null
+++ b/app/redux/modules/send.js
@@ -0,0 +1,46 @@
+// @flow
+import type { Action } from '../../types/redux';
+
+export const SEND_TRANSACTION = 'SEND_TRANSACTION';
+export const SEND_TRANSACTION_SUCCESS = 'SEND_TRANSACTION_SUCCESS';
+export const SEND_TRANSACTION_ERROR = 'SEND_TRANSACTION_ERROR';
+
+export const sendTransaction = () => ({
+  type: SEND_TRANSACTION,
+  payload: {},
+});
+
+export const sendTransactionSuccess = () => ({
+  type: SEND_TRANSACTION_SUCCESS,
+  payload: {},
+});
+
+export const sendTransactionError = ({ error }: { error: string }) => ({
+  type: SEND_TRANSACTION_ERROR,
+  payload: {
+    error,
+  },
+});
+
+export type State = {
+  isSending: boolean,
+  error: string | null,
+};
+
+const initialState = {
+  isSending: false,
+  error: null,
+};
+
+export default (state: State = initialState, action: Action) => {
+  switch (action.type) {
+    case SEND_TRANSACTION:
+      return { isSending: true, error: null };
+    case SEND_TRANSACTION_SUCCESS:
+      return { isSending: false, error: null };
+    case SEND_TRANSACTION_ERROR:
+      return { isSending: false, error: action.payload.error };
+    default:
+      return state;
+  }
+};
diff --git a/app/types/app-state.js b/app/types/app-state.js
index 281fa60..0954e03 100644
--- a/app/types/app-state.js
+++ b/app/types/app-state.js
@@ -2,8 +2,10 @@
 
 import type { State as WalletSummaryState } from '../redux/modules/wallet';
 import type { State as TransactionsState } from '../redux/modules/transactions';
+import type { State as SendState } from '../redux/modules/send';
 
 export type AppState = {
   walletSummary: WalletSummaryState,
   transactions: TransactionsState,
+  sendStatus: SendState,
 };

From 5707a664f5ce2ecf1308b6c3f9f4b28722c4309b Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 12:44:29 -0300
Subject: [PATCH 30/32] feature: hookup handleSubmit in send view

---
 app/views/send.js | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/views/send.js b/app/views/send.js
index 9fdeae3..2fb2e4b 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -15,6 +15,8 @@ import { Button } from '../components/button';
 
 import formatNumber from '../utils/formatNumber';
 
+import type { SendTransactionInput } from '../containers/send';
+
 const FormWrapper = styled.div`
   margin-top: ${props => props.theme.layoutContentPaddingTop};
   width: 80%;
@@ -78,6 +80,9 @@ type Props = {
   balance: number,
   zecPrice: number,
   addresses: string[],
+  sendTransaction: SendTransactionInput => void,
+  // error: string | null,
+  isSending: boolean,
 };
 type State = {
   showFee: boolean,
@@ -126,8 +131,27 @@ export class SendView extends PureComponent<Props, State> {
     );
   };
 
+  handleSubmit = () => {
+    const {
+      from, amount, to, memo, fee,
+    } = this.state;
+    const { sendTransaction } = this.props;
+
+    if (!from || !amount || !to || !memo || !fee) return;
+
+    sendTransaction({
+      from,
+      to,
+      amount,
+      fee,
+      memo,
+    });
+  };
+
   render() {
-    const { addresses, balance, zecPrice } = this.props;
+    const {
+      addresses, balance, zecPrice, isSending,
+    } = this.props;
     const {
       showFee, from, amount, to, memo, fee, feeType,
     } = this.state;
@@ -224,7 +248,13 @@ export class SendView extends PureComponent<Props, State> {
               <InfoCardUSD value={valueSentInUsd} />
             </InfoContent>
           </InfoCard>
-          <FormButton label='Send' variant='secondary' focused />
+          <FormButton
+            label='Send'
+            variant='secondary'
+            focused
+            onClick={this.handleSubmit}
+            isLoading={isSending}
+          />
           <FormButton label='Cancel' variant='secondary' />
         </SendWrapper>
       </RowComponent>

From 8f3f67cd4b8db96a146390f2a33f645b76df96d3 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 13:43:09 -0300
Subject: [PATCH 31/32] hotfix: add missing key in Dashboard

---
 app/views/dashboard.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/views/dashboard.js b/app/views/dashboard.js
index bae7bec..0c7381c 100644
--- a/app/views/dashboard.js
+++ b/app/views/dashboard.js
@@ -61,6 +61,7 @@ export class DashboardView extends PureComponent<Props> {
                 transactionsDate={day}
                 transactions={transactions[day]}
                 zecPrice={zecPrice}
+                key={day}
               />
             ))}
           </Fragment>

From ffb54b039e65f049c8d8a94c91d95c85e7b43a08 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Fri, 21 Dec 2018 13:52:50 -0300
Subject: [PATCH 32/32] hotfix: add border-radius on open select

---
 app/components/select.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/select.js b/app/components/select.js
index 758d6b9..573c8de 100644
--- a/app/components/select.js
+++ b/app/components/select.js
@@ -21,6 +21,11 @@ const SelectWrapper = styled.div`
   props => props.theme.fontFamily};
   cursor: pointer;
   position: relative;
+
+  ${props => props.isOpen
+    && `border-${props.placement}-left-radius: 0; border-${
+      props.placement
+    }-right-radius: 0;`}
 `;
 
 const ValueWrapper = styled.div`
@@ -139,7 +144,11 @@ export class SelectComponent extends PureComponent<Props, State> {
     const { isOpen } = this.state;
 
     return (
-      <SelectWrapper onClick={() => this.setState(() => ({ isOpen: !isOpen }))}>
+      <SelectWrapper
+        isOpen={isOpen}
+        placement={placement}
+        onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
+      >
         <ValueWrapper hasValue={Boolean(value)}>
           {this.getSelectedLabel(value) || placeholder}
         </ValueWrapper>