Merge 05b5df9 into 22cfd67

MyCryptoHQ · Feb 3, 2020 · fb2d321 · fb2d321
2 parents 22cfd67 + 05b5df9
commit fb2d321
Show file tree

Hide file tree

Showing 31 changed files with 345 additions and 343 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # MyCrypto Beta Web App
 
+Minor change
+
 [![Build Status](https://travis-ci.org/MyCryptoHQ/MyCrypto.svg?branch=master)](https://travis-ci.org/MyCryptoHQ/MyCrypto)
 [![Coverage Status](https://coveralls.io/repos/github/MyCryptoHQ/MyCrypto/badge.svg?branch=master)](https://coveralls.io/github/MyCryptoHQ/MyCrypto?branch=develop)
 
@@ -52,6 +54,6 @@ yarn dev:electron
 #### Staging
 
 ```bash
-# builds production app version used on mycryptobuilds.com 
+# builds production app version used on mycryptobuilds.com
 yarn build:downloadable
 ```
diff --git a/common/assets/images/icn-checkmark.svg b/common/assets/images/icn-checkmark.svg
diff --git a/common/assets/images/icn-edit.svg b/common/assets/images/icn-edit.svg
diff --git a/common/v2/components/AccountList.tsx b/common/v2/components/AccountList.tsx
@@ -3,18 +3,19 @@ import styled, { css } from 'styled-components';
 import { Button, Identicon } from '@mycrypto/ui';
 
 import { translateRaw } from 'v2/translations';
-import { ROUTE_PATHS, Fiats } from 'v2/config';
+import { ROUTE_PATHS, Fiats, WALLETS_CONFIG } from 'v2/config';
 import {
   EthAddress,
   CollapsibleTable,
   Network,
   RowDeleteOverlay,
   RouterLink,
-  Typography
+  Typography,
+  EditableText
 } from 'v2/components';
 import { truncate } from 'v2/utils';
 import { BREAK_POINTS, COLORS, breakpointToNumber } from 'v2/theme';
-import { ExtendedAccount, AddressBook, StoreAccount } from 'v2/types';
+import { ExtendedAccount, StoreAccount, ExtendedAddressBook } from 'v2/types';
 import {
   AccountContext,
   getLabelByAccount,
@@ -30,9 +31,27 @@ import { TUuid } from 'v2/types/uuid';
 const Label = styled.span`
   display: flex;
   align-items: center;
-  @media (min-width: ${BREAK_POINTS.SCREEN_SM} {
+  @media (min-width: ${BREAK_POINTS.SCREEN_SM}) {
+    font-weight: bold;
+  }
+`;
+
+const LabelWithWallet = styled.span`
+  display: flex;
+  flex-direction: column;
+  @media (min-width: ${BREAK_POINTS.SCREEN_SM}) {
     font-weight: bold;
-  })
+  }
+`;
+
+const WalletTypeLabel = styled.div`
+  background: ${COLORS.MIDDLE_GREY};
+  display: inline-block;
+  text-align: center;
+  border-radius: 600px;
+  font-size: 0.6em;
+  padding: 3px 6px;
+  color: ${COLORS.WHITE};
 `;
 
 const SIdenticon = styled(Identicon)`
@@ -102,7 +121,7 @@ const AccountListFooterWrapper = styled.div`
   & img {
     height: 1.1em;
     margin-right: 0.5em;
-  }s
+  }
 `;
 
 interface AccountListProps {
@@ -186,8 +205,7 @@ function buildAccountTable(
   const { totalFiat } = useContext(StoreContext);
   const { getAssetRate } = useContext(RatesContext);
   const { settings } = useContext(SettingsContext);
-  const { addressBook } = useContext(AddressBookContext);
-
+  const { addressBook, updateAddressBooks, createAddressBooks } = useContext(AddressBookContext);
   const columns = [
     translateRaw('ACCOUNT_LIST_LABEL'),
     translateRaw('ACCOUNT_LIST_ADDRESS'),
@@ -222,13 +240,33 @@ function buildAccountTable(
       ),
     overlayRows,
     body: accounts.map((account, index) => {
-      const addressCard: AddressBook | undefined = getLabelByAccount(account, addressBook);
+      const addressCard: ExtendedAddressBook | undefined = getLabelByAccount(account, addressBook);
       const total = totalFiat([account])(getAssetRate);
       const label = addressCard ? addressCard.label : 'Unknown Account';
       const bodyContent = [
         <Label key={index}>
           <SIdenticon address={account.address} />
-          <Typography value={label} />
+          <LabelWithWallet>
+            <EditableText
+              truncate={true}
+              saveValue={value => {
+                if (addressCard) {
+                  updateAddressBooks(addressCard.uuid, { ...addressCard, label: value });
+                } else {
+                  createAddressBooks({
+                    address: account.address,
+                    label: value,
+                    network: account.networkId,
+                    notes: ''
+                  });
+                }
+              }}
+              value={label}
+            />
+            <div>
+              <WalletTypeLabel>{WALLETS_CONFIG[account.wallet].name}</WalletTypeLabel>
+            </div>
+          </LabelWithWallet>
         </Label>,
         <EthAddress
           key={index}

diff --git a/common/v2/components/EditableText.tsx b/common/v2/components/EditableText.tsx
@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import Typography from './Typography';
+import styled from 'styled-components';
+
+import editIcon from 'common/assets/images/icn-edit.svg';
+import { COLORS } from 'v2/theme';
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+`;
+
+const EditIcon = styled.img`
+  margin-left: 3px;
+`;
+
+const SInputField = styled.input`
+  border: 1px solid ${COLORS.ATHENS_GREY};
+  border-radius: 6px;
+  padding: 6px 6px;
+  font-weight: 400;
+`;
+
+const STypography = styled(Typography)`
+  &:hover {
+    cursor: pointer;
+    border-bottom: 1px ${COLORS.CLOUDY_BLUE} dashed;
+  }
+`;
+
+export interface Props {
+  value: string;
+  className?: string;
+  bold?: boolean;
+  truncate?: boolean;
+  saveValue(value: string): void;
+}
+
+function EditableText({ saveValue, value, className, bold, truncate }: Props) {
+  const [editMode, setEditMode] = useState(false);
+  const [editValue, setEditValue] = useState('');
+
+  const handleKeyDown = ({ key }: { key: string }) => {
+    if (key === 'Escape') {
+      cancel();
+    } else if (key === 'Enter') {
+      save();
+    }
+  };
+
+  useEffect(() => {
+    setEditValue(value);
+  }, [value]);
+
+  const edit = () => {
+    setEditMode(true);
+  };
+
+  const cancel = () => {
+    setEditMode(false);
+    setEditValue(value);
+  };
+
+  const save = () => {
+    saveValue(editValue);
+    setEditMode(false);
+  };
+
+  return (
+    <Wrapper className={className}>
+      {editMode ? (
+        <SInputField
+          autoFocus={true}
+          value={editValue}
+          onChange={e => setEditValue(e.currentTarget.value)}
+          onBlur={save}
+          onKeyDown={handleKeyDown}
+        />
+      ) : (
+        <>
+          <STypography bold={bold} truncate={truncate} inheritFontWeight={true} onClick={edit}>
+            {value}
+          </STypography>
+          <EditIcon onClick={edit} src={editIcon} />
+        </>
+      )}
+    </Wrapper>
+  );
+}
+
+export default EditableText;
diff --git a/common/v2/components/InputField.tsx b/common/v2/components/InputField.tsx
@@ -7,11 +7,15 @@ import { InlineErrorMsg, Spinner } from 'v2/components';
 
 const { PASTEL_RED, BRIGHT_SKY_BLUE, DARK_SILVER, LIGHT_GREY } = COLORS;
 
-const MainWrapper = styled.div`
-  margin-bottom: 15px;
+const MainWrapper = styled.div<WrapperProps>`
+  margin-bottom: ${props => props.marginBottom};
   width: 100%;
 `;
 
+interface WrapperProps {
+  marginBottom?: string;
+}
+
 const Label = styled.p`
   font-size: 18px;
   width: 100%;
@@ -25,6 +29,7 @@ const Label = styled.p`
 interface CustomInputProps {
   inputError?: string | JSX.Element;
   showEye?: boolean;
+  customIcon?: React.ReactType;
   height?: string;
   maxHeight?: string;
   resizable?: boolean;
@@ -35,7 +40,7 @@ const CustomInput = styled.input<CustomInputProps>`
   background: ${props => props.theme.controlBackground};
   border: 0.125em solid ${props => props.theme.controlBorder};
   border-radius: 0.125em;
-  padding: ${props => (props.showEye ? '12px 36px 12px 12px' : '12px 12px')};
+  padding: ${props => (props.showEye || props.customIcon ? '12px 36px 12px 12px' : '12px 12px')};
   display: flex;
   :focus-within {
     outline: none;
@@ -85,7 +90,7 @@ interface CustomIconProps {
   showPassword?: boolean;
 }
 
-const CustomIcon = styled(Icon)`
+const EyeIcon = styled(Icon)`
   svg {
     margin-top: 6px;
     width: 23px;
@@ -96,6 +101,15 @@ const CustomIcon = styled(Icon)`
   }
 `;
 
+const DefaultIconWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  position: absolute;
+  right: 10px;
+  top: 0;
+`;
+
 const CustomIconWrapper = styled.div`
   display: flex;
   height: 100%;
@@ -105,17 +119,32 @@ const CustomIconWrapper = styled.div`
   top: 0;
 `;
 
+const CustomIcon = styled.span`
+  display: flex;
+  border-left: 1px solid ${COLORS.GEYSER_GREY};
+  img {
+    margin-top: 2px;
+    margin-bottom: 2px;
+    margin-left: 8px;
+    color: ${BRIGHT_SKY_BLUE}};
+    cursor: pointer;
+    user-select: none;
+  }
+`;
+
 interface Props {
   name?: string;
   type?: string;
   label?: string | JSX.Element;
   value: string | undefined;
   inputError?: string | JSX.Element | undefined;
   showEye?: boolean;
+  customIcon?: React.ElementType;
   textarea?: boolean;
   placeholder?: string;
   height?: string;
   maxHeight?: string;
+  marginBottom?: string;
   resizableTextArea?: boolean;
   disabled?: boolean;
   isLoading?: boolean;
@@ -144,16 +173,21 @@ export class InputField extends Component<Props> {
       inputError,
       type,
       showEye,
+      customIcon,
       textarea,
       placeholder,
       height,
       resizableTextArea,
       disabled,
       isLoading,
-      maxHeight
+      maxHeight,
+      marginBottom = '15px'
     } = this.props;
+
+    const IconComponent = customIcon as React.ElementType;
+
     return (
-      <MainWrapper>
+      <MainWrapper marginBottom={marginBottom}>
         {label && <Label>{label}</Label>}
         <InputWrapper>
           {textarea ? (
@@ -181,23 +215,32 @@ export class InputField extends Component<Props> {
               inputError={inputError}
               onKeyUp={this.handleKeyUp}
               showEye={showEye}
+              customIcon={customIcon}
               type={this.state.showPassword ? 'text' : type ? type : 'text'}
               placeholder={placeholder ? placeholder : ''}
               height={height}
               disabled={isLoading || disabled}
             />
           )}
 
-          {showEye && (
-            <CustomIconWrapper onClick={this.handleEyeClick}>
-              <CustomIcon icon={'showNetworks'} showPassword={this.state.showPassword} />
+          {customIcon && (
+            <CustomIconWrapper>
+              <CustomIcon>
+                <IconComponent />
+              </CustomIcon>
             </CustomIconWrapper>
           )}
 
+          {showEye && (
+            <DefaultIconWrapper onClick={this.handleEyeClick}>
+              <EyeIcon icon={'showNetworks'} showPassword={this.state.showPassword} />
+            </DefaultIconWrapper>
+          )}
+
           {isLoading && (
-            <CustomIconWrapper>
+            <DefaultIconWrapper>
               <Spinner />
-            </CustomIconWrapper>
+            </DefaultIconWrapper>
           )}
         </InputWrapper>
 

diff --git a/common/v2/components/SignTransactionWallets/Keystore.tsx b/common/v2/components/SignTransactionWallets/Keystore.tsx
@@ -216,8 +216,6 @@ export default class SignTransactionKeystore extends Component<
 
     if (isValidFile(inputFile)) {
       fileReader.readAsText(inputFile, 'utf-8');
-    } else {
-      // this.props.showNotification('danger', translateRaw('ERROR_3'));
     }
   };
 }