feature: add see more button and create WalletSummary docz

app/components/wallet-summary.js

@@ -1,16 +1,20 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import { IoIosMore } from 'react-icons/io';
 
 import { TextComponent } from './text';
 import { RowComponent } from './row';
+import { DropdownComponent } from './dropdown';
+
+import theme from '../theme';
 
 const Wrapper = styled.div`
   background-color: ${props => props.theme.colors.cardBackgroundColor};
   border-radius: 10px;
   width: 100%;
   padding: 30px;
-  margin: 10px;
+  position: relative;
 `;
 
 const AllAddresses = styled(TextComponent)`
@@ -35,6 +39,20 @@ const ShieldedValue = styled(Label)`
   color: ${props => props.theme.colors.activeItem};
 `;
 
+const SeeMoreButton = styled.button`
+  outline: none;
+  border-radius: 100%;
+  border-width: 1px;
+  border-color: ${props => (props.isOpen ? props.theme.colors.activeItem : props.theme.colors.text)};
+  background-color: transparent;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+`;
+
 type Props = {
   total: number,
   shielded: number,
@@ -48,6 +66,14 @@ export const WalletSummaryComponent = ({
   total, shielded, transparent, dollarValue,
 }: Props) => (
   <Wrapper>
+    <DropdownComponent
+      renderTrigger={(toggleVisibility, isOpen) => (
+        <SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}>
+          <IoIosMore color={theme.colors.text} size={35} />
+        </SeeMoreButton>
+      )}
+      options={[]}
+    />
     <AllAddresses value='ALL ADDRESSES' isBold />
     <ValueBox>
       <TextComponent size='3em' value={`ZEC ${formatNumber(total)}`} isBold />

app/components/wallet-summary.mdx

@@ -0,0 +1,24 @@
+---
+name: Wallet Summary
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { WalletSummaryComponent } from './wallet-summary.js'
+import { DoczWrapper } from '../theme.js'
+
+# Wallet Summary
+
+<PropsTable of={WalletSummaryComponent} />
+
+## Basic usage
+
+<Playground>
+  <DoczWrapper>
+    {() => (
+      <div style={{ width: '700px' }}>
+        <WalletSummaryComponent total={5000} shielded={2500} transparent={2500} dollarValue={56} />
+      </div>
+    )}
+  </DoczWrapper>
+</Playground>