feature: animation and general improvements to the send and receive views

2019-01-24 00:08:20 -05:00 · 2019-01-24 00:08:20 -05:00 · 70fe5fb120
parent 4ae193f3ed
commit 70fe5fb120
3 changed files with 287 additions and 101 deletions
--- a/app/components/wallet-address.js
+++ b/app/components/wallet-address.js
@ -1,6 +1,7 @@
 // @flow
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
+import { Transition, animated } from 'react-spring';

 import { ColumnComponent } from './column';
 import { Button } from './button';
@ -36,16 +37,16 @@ const Input = styled.input`

 const Btn = styled(Button)`
  border-width: 1px;
-  font-weight: ${props => props.theme.fontWeight.light};
+  font-weight: ${props => props.theme.fontWeight.regular};
  border-color: ${props => (props.isVisible
    ? props.theme.colors.primary : props.theme.colors.buttonBorderColor
  )};
-  padding: 6px 10px;
-  width: 50%;
+  padding: 8px 10px;
+  min-width: 260px;

  img {
    height: 12px;
-    width: 16px;
+    width: 20px;
  }
 `;

@ -59,36 +60,50 @@ const QRCodeWrapper = styled.div`
  width: 100%;
 `;

+const RevealsMain = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  & > div {
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+`;
+
 type Props = {
  address: string,
+  isVisible?: boolean,
 };

 type State = {
  isVisible: boolean,
 };

-export class WalletAddress extends Component<Props, State> {
-  state = {
+export class WalletAddress extends PureComponent<Props, State> {
+  static defaultProps = {
    isVisible: false,
-  };
+  }

-  show = () => {
-    this.setState(
-      () => ({ isVisible: true }),
-    );
-  };
+  constructor(props: Props) {
+    super(props);

-  hide = () => {
-    this.setState(
-      () => ({ isVisible: false }),
-    );
-  };
+    this.state = { isVisible: props.isVisible };
+  }

+  show = () => this.setState(() => ({ isVisible: true }));
+
+  hide = () => this.setState(() => ({ isVisible: false }));

  render() {
    const { address } = this.props;
    const { isVisible } = this.state;
    const toggleVisibility = isVisible ? this.hide : this.show;
+    const buttonLabel = `${isVisible ? 'Hide' : 'Show'} details and QR Code`;

    return (
      <ColumnComponent width='100%'>
@ -100,19 +115,34 @@ export class WalletAddress extends Component<Props, State> {
          />
          <Btn
            icon={eyeIcon}
-            label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
+            label={buttonLabel}
            onClick={toggleVisibility}
            variant='secondary'
            isVisible={isVisible}
          />
        </AddressWrapper>
-        {isVisible
-          ? (
-            <QRCodeWrapper>
-              <QRCode value={address} />
-            </QRCodeWrapper>
-          )
-          : null}
+        <RevealsMain>
+          <Transition
+            native
+            items={isVisible}
+            enter={[{ height: 'auto' }]}
+            leave={{ height: 0 }}
+            from={{
+              // TODO: fix this
+              // position: 'absolute',
+              // overflow: 'hidden',
+              // height: 0,
+            }}
+          >
+            {show => show && (props => (
+              <animated.div style={props}>
+                <QRCodeWrapper>
+                  <QRCode value={address} />
+                </QRCodeWrapper>
+              </animated.div>
+            ))}
+          </Transition>
+        </RevealsMain>
      </ColumnComponent>
    );
  }
--- a/app/views/receive.js
+++ b/app/views/receive.js
@ -1,50 +1,171 @@
 // @flow
-import React, { PureComponent } from 'react';
+import React, { Fragment, PureComponent } from 'react';
 import styled from 'styled-components';
+import { Transition, animated } from 'react-spring';

 import { InputLabelComponent } from '../components/input-label';
 import { RowComponent } from '../components/row';
+import { TextComponent } from '../components/text';
 import { WalletAddress } from '../components/wallet-address';

-type Props = {
-  addresses: Array<string>,
-  loadAddresses: () => void,
-};
-
-const Wrapper = styled.div`
-  margin-top: ${props => props.theme.layoutContentPaddingTop};
-`;
+import MenuIcon from '../assets/images/menu_icon.svg';

 const Row = styled(RowComponent)`
  margin-bottom: 10px;
 `;

 const Label = styled(InputLabelComponent)`
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 10px;
-  margin-top: 10px;
+  text-transform: uppercase;
+  color: ${props => props.theme.colors.transactionsDate};
+  font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
+  font-weight: ${props => props.theme.fontWeight.bold};
+  margin-bottom: 5px;
 `;

-export class ReceiveView extends PureComponent<Props> {
+const ShowMoreButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  color: ${props => props.theme.colors.text};
+  outline: none;
+  display: flex;
+  align-items: center;
+  margin-top: 30px;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const ShowMoreIcon = styled.img`
+  width: 25px;
+  height: 25px;
+  border: 1px solid ${props => props.theme.colors.text};
+  border-radius: 100%;
+  margin-right: 11.5px;
+`;
+
+const RevealsMain = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  & > div {
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+`;
+
+type Props = {
+  addresses: Array<string>,
+  loadAddresses: () => void,
+};
+
+type State = {
+  showAdditionalOptions: boolean,
+}
+
+export class ReceiveView extends PureComponent<Props, State> {
+  state = {
+    showAdditionalOptions: false,
+  };
+
  componentDidMount() {
    const { loadAddresses } = this.props;

    loadAddresses();
  }

+  toggleAdditionalOptions = () => this.setState((prevState: State) => ({
+    showAdditionalOptions: !prevState.showAdditionalOptions,
+  }));
+
+  renderShieldedAddresses = (address: string) => {
+    const { showAdditionalOptions } = this.state;
+    const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
+
+    return (
+      <Fragment>
+        <Label value='Shielded Address' />
+        <Row
+          alignItems='center'
+          justifyContent='space-between'
+        >
+          <WalletAddress
+            address={address}
+            isVisible
+          />
+        </Row>
+        <Row>
+          <ShowMoreButton
+            onClick={this.toggleAdditionalOptions}
+            isActive={showAdditionalOptions}
+          >
+            <ShowMoreIcon
+              isActive={showAdditionalOptions}
+              src={MenuIcon}
+              alt='More Options'
+            />
+            <TextComponent value={buttonText} />
+          </ShowMoreButton>
+        </Row>
+      </Fragment>
+    );
+  }
+
+  renderTransparentAddresses = (address: string) => {
+    const { showAdditionalOptions } = this.state;
+
+    return (
+      <RevealsMain>
+        <Transition
+          native
+          items={showAdditionalOptions}
+          leave={{ height: 0 }}
+          from={{
+            position: 'absolute',
+            // TODO: fix this as we need the overflow but need the
+            // overflow: 'hidden',
+            height: 0,
+          }}
+          enter={[{
+            height: 'auto',
+            width: 'auto',
+          }]}
+        >
+          {show => show && (props => (
+            <animated.div style={props}>
+              <Label value='Transparent Address (not private)' />
+              <Row
+                key={address}
+                alignItems='center'
+                justifyContent='space-between'
+              >
+                <WalletAddress address={address} />
+              </Row>
+            </animated.div>
+          ))}
+        </Transition>
+      </RevealsMain>
+    );
+  }
+
  render() {
    const { addresses } = this.props;

    return (
-      <Wrapper>
-        <Label value='Addresses: ' />
-        {(addresses || []).map(address => (
-          <Row key={address} alignItems='center' justifyContent='space-between'>
-            <WalletAddress address={address} />
-          </Row>
-        ))}
-      </Wrapper>
+      <div>
+        {(addresses || []).map((address, index) => {
+          if (index === 0) return this.renderShieldedAddresses(address);
+          return this.renderTransparentAddresses(address);
+        })}
+      </div>
    );
  }
 }
--- a/app/views/send.js
+++ b/app/views/send.js
@ -1,7 +1,8 @@
 // @flow
-import React, { PureComponent } from 'react';
+import React, { Fragment, PureComponent } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { BigNumber } from 'bignumber.js';
+import { Transition, animated } from 'react-spring';

 import FEES from '../constants/fees';

@ -75,19 +76,6 @@ const AmountInput = styled(InputComponent)`
  padding-left: ${props => (props.isEmpty ? '15' : '50')}px;
 `;

-// const ShowFeeButton = styled.button`
-//   align-items: center;
-//   background: none;
-//   border: none;
-//   cursor: pointer;
-//   display: flex;
-//   width: 100%;
-//   color: ${props => props.theme.colors.text};
-//   outline: none;
-//   margin-bottom: 15px;
-//   margin-top: 15px;
-// `;
-
 const ShowFeeButton = styled.button`
  background: none;
  border: none;
@ -97,7 +85,7 @@ const ShowFeeButton = styled.button`
  outline: none;
  display: flex;
  align-items: center;
-  margin-top: 30px;
+  margin: 30px 0;
  opacity: 0.7;

  &:hover {
@ -115,7 +103,7 @@ const SeeMoreIcon = styled.img`

 const FeeWrapper = styled.div`
  background-color: #000;
-  border-radius: 6px;
+  border-radius: 4px;
  padding: 13px 19px;
  margin-bottom: 20px;
 `;
@ -141,6 +129,7 @@ const InfoCardUSD = styled(TextComponent)`
 `;

 const FormButton = styled(Button)`
+  width: 100%;
  margin: 10px 0;
  border-color: ${props => (props.focused
    ? props.theme.colors.activeItem
@ -202,11 +191,27 @@ const ValidateStatusIcon = styled.img`
  margin-right: 7px;
 `;

+const RevealsMain = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  & > div {
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+`;
+
 type Props = SendState & {
  balance: number,
  zecPrice: number,
  addresses: string[],
  sendTransaction: SendTransactionInput => void,
+  loadAddresses: () => void,
  resetSendView: () => void,
  validateAddress: ({ address: string }) => void,
 };
@ -235,7 +240,9 @@ export class SendView extends PureComponent<Props, State> {
  state = initialState;

  componentDidMount() {
-    const { resetSendView } = this.props;
+    const { resetSendView, addresses, loadAddresses } = this.props;
+
+    if (addresses.length === 0) loadAddresses();

    resetSendView();
  }
@ -344,16 +351,16 @@ export class SendView extends PureComponent<Props, State> {

    if (isSending) {
      return (
-        <>
+        <Fragment>
          <Loader src={LoadingIcon} />
          <TextComponent value='Processing transaction...' />
-        </>
+        </Fragment>
      );
    }

    if (operationId) {
      return (
-        <>
+        <Fragment>
          <TextComponent
            value={`Transaction ID: ${operationId}`}
            align='center'
@ -367,7 +374,7 @@ export class SendView extends PureComponent<Props, State> {
          >
            Send again!
          </button>
-        </>
+        </Fragment>
      );
    }

@ -478,42 +485,65 @@ export class SendView extends PureComponent<Props, State> {
            placeholder='Enter a text here'
          />
          <ShowFeeButton
-            onClick={() => this.setState(state => ({ showFee: !state.showFee }))
-            }
+            onClick={() => this.setState(state => ({
+              showFee: !state.showFee,
+            }))}
          >
-            <SeeMoreIcon src={MenuIcon} alt='Show more icon' />
+            <SeeMoreIcon
+              src={MenuIcon}
+              alt='Show more icon'
+            />
            <TextComponent
              value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
            />
          </ShowFeeButton>
-          {showFee && (
-            <FeeWrapper>
-              <RowComponent alignItems='flex-end' justifyContent='space-between'>
-                <ColumnComponent width='74%'>
-                  <InputLabelComponent value='Fee' />
-                  <InputComponent
-                    type='number'
-                    onChange={this.handleChange('fee')}
-                    value={String(fee)}
-                    disabled={feeType !== FEES.CUSTOM}
-                    bgColor={theme.colors.blackTwo}
-                  />
-                </ColumnComponent>
-                <ColumnComponent width='25%'>
-                  <SelectComponent
-                    onChange={this.handleChangeFeeType}
-                    value={String(feeType)}
-                    options={Object.keys(FEES).map(cur => ({
-                      label: cur.toLowerCase(),
-                      value: String(FEES[cur]),
-                    }))}
-                    placement='top'
-                    bgColor={theme.colors.blackTwo}
-                  />
-                </ColumnComponent>
-              </RowComponent>
-            </FeeWrapper>
-          )}
+          <RevealsMain>
+            <Transition
+              native
+              items={showFee}
+              leave={{ height: 0 }}
+              from={{
+                position: 'absolute',
+                overflow: 'hidden',
+                height: 0,
+              }}
+              enter={[{
+                height: 'auto',
+                width: 'auto',
+              }]}
+            >
+              {show => show && (props => (
+                <animated.div style={props}>
+                  <FeeWrapper>
+                    <RowComponent alignItems='flex-end' justifyContent='space-between'>
+                      <ColumnComponent width='74%'>
+                        <InputLabelComponent value='Fee' />
+                        <InputComponent
+                          type='number'
+                          onChange={this.handleChange('fee')}
+                          value={String(fee)}
+                          disabled={feeType !== FEES.CUSTOM}
+                          bgColor={theme.colors.blackTwo}
+                        />
+                      </ColumnComponent>
+                      <ColumnComponent width='25%'>
+                        <SelectComponent
+                          placement='top'
+                          value={String(feeType)}
+                          bgColor={theme.colors.blackTwo}
+                          onChange={this.handleChangeFeeType}
+                          options={Object.keys(FEES).map(cur => ({
+                            label: cur.toLowerCase(),
+                            value: String(FEES[cur]),
+                          }))}
+                        />
+                      </ColumnComponent>
+                    </RowComponent>
+                  </FeeWrapper>
+                </animated.div>
+              ))}
+            </Transition>
+          </RevealsMain>
          {feeType === FEES.CUSTOM && (
            <TextComponent value='Custom fees may compromise your privacy since fees are transparent' />
          )}
@ -540,6 +570,7 @@ export class SendView extends PureComponent<Props, State> {
                label='Send'
                variant='secondary'
                focused
+                isFluid
                onClick={this.showModal(toggle)}
              />
            )}
@ -548,7 +579,11 @@ export class SendView extends PureComponent<Props, State> {
          >
            {toggle => (
              <ModalContent>
-                {this.renderModalContent({ valueSent, valueSentInUsd, toggle })}
+                {this.renderModalContent({
+                  valueSent,
+                  valueSentInUsd,
+                  toggle,
+                })}
              </ModalContent>
            )}
          </ConfirmDialogComponent>