Merge pull request #5 from kinecosystem/version_2

Version 2

package.json

@@ -21,16 +21,17 @@
 		"gatsby-plugin-typescript": "^2.0.12",
 		"gatsby-source-filesystem": "^2.0.29",
 		"gatsby-transformer-sharp": "^2.1.17",
-		"kin-wallet": "^1.0.6",
+		"kin-wallet": "^1.1.0",
 		"lodash": "^4.17.14",
+		"moment": "^2.24.0",
 		"prop-types": "^15.7.2",
 		"rc-progress": "^2.3.0",
 		"react": "^16.8.6",
 		"react-dom": "^16.8.6",
 		"react-helmet": "^5.2.0",
 		"react-localization": "^1.0.13",
 		"react-redux": "^6.0.0",
-		"react-scripts-ts": "^3.1.0",
+		"react-scripts-ts": "^4.0.8",
 		"redux": "^4.0.1",
 		"redux-devtools-extension": "^2.13.7",
 		"redux-dialog": "^0.2.4",
@@ -40,12 +41,12 @@
 		"typescript": "^3.4.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^7.5.2",
+		"@commitlint/cli": "^8.1.0",
 		"@commitlint/config-angular": "^7.5.0",
 		"@semantic-release/changelog": "^3.0.2",
 		"@semantic-release/commit-analyzer": "^6.1.0",
 		"@semantic-release/git": "^7.0.8",
-		"@semantic-release/npm": "^5.1.4",
+		"@semantic-release/npm": "^5.1.15",
 		"@types/axios": "^0.14.0",
 		"@types/jest": "^23.3.10",
 		"@types/node": "^10.12.15",
@@ -57,7 +58,7 @@
 		"husky": "^1.3.1",
 		"lint-staged": "^8.1.5",
 		"prettier": "1.16.4",
-		"semantic-release": "^15.13.3"
+		"semantic-release": "^15.13.21"
 	},
 	"keywords": [
 		"gatsby"

src/components/antd/index.tsx

@@ -1,8 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import { CheckboxStyle, SelectStyle, InputStyle } from './style';
+import React, { useState } from 'react';
+import { CheckboxStyle, SelectStyle, InputStyle, StyledFloatingMessage } from './style';
 import { Select, Checkbox, Input } from 'antd';
 
 import downArrow from 'images/arrow_down.svg';
+import copy from 'images/copy.svg';
+
+//CHECKBOX\\
 
 export const CheckboxPremade = ({ onChange, children }) => (
 	<CheckboxStyle>
@@ -12,7 +15,7 @@ export const CheckboxPremade = ({ onChange, children }) => (
 );
 
 const Option = Select.Option;
-
+//SELECT\\
 export const SelectPremade = props => {
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 	const parseOptions = aOptions => {
@@ -42,8 +45,22 @@ export const SelectPremade = props => {
 	);
 };
 
+//INPUT\\
+
 export const InputPremade = props => (
 	<InputStyle>
 		<Input {...props} />
 	</InputStyle>
 );
+
+const icons = {
+	copy: <img src={copy} alt="copy" />
+};
+
+export const FloatingMessage = ({ children, icon }) => {
+	return (
+		<StyledFloatingMessage>
+			{icons[icon]} {children}
+		</StyledFloatingMessage>
+	);
+};

src/components/antd/style.ts

@@ -116,3 +116,12 @@ export const InputStyle = styled.div`
 		}
 	}
 `;
+
+export const StyledFloatingMessage = styled.div`
+	color: #1f1f1f;
+	display: flex;
+	align-items: center;
+	img {
+		margin-right: 26px;
+	}
+`;

src/components/formInput/formInput.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { WrappedFieldProps } from 'redux-form';
 import * as Styled from './style';
+import { volcanoRed } from '../../style/theme/generalVariables';
 
 export interface ITxtProps extends WrappedFieldProps {
 	label?: string;
@@ -94,7 +95,7 @@ const formInput = ({
 			</Styled.group>
 			{touched &&
 				(error && (
-					<Styled.errorMsg errorColor={errorColor} errorFontStyle={errorFontStyle} errorFontWeight={errorFontWeight}>
+					<Styled.errorMsg errorColor={errorColor || volcanoRed} errorFontStyle={errorFontStyle} errorFontWeight={errorFontWeight}>
 						{error}
 					</Styled.errorMsg>
 				))}

src/components/formInput/style.ts

@@ -17,6 +17,7 @@ export const formLabel = styled.label`
 	position: relative;
 	pointer-events: none;
 	top: unset;
+	color: ${({ theme }) => theme.blackish};
 	left: 0;
 	transition: 0.2s ease all;
 	${({ special }) =>

src/components/helpers/copy.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { message } from 'antd';
+import copy from 'copy-to-clipboard';
+import { FloatingMessage } from '../antd';
+
+function handleCopy(address) {
+	copy(address);
+	message.open({
+		content: <FloatingMessage icon={'copy'}>Wallet’s public address was copied to your clipboard.</FloatingMessage>
+	});
+}
+
+export default handleCopy;

src/components/helpers/showAddressOnLedger.ts

@@ -0,0 +1,7 @@
+import * as Kin from 'kin-wallet';
+
+async function showAddress(derviationPath) {
+	await Kin.Ledger.getPublicKey(derviationPath, true, true);
+}
+
+export default showAddress;

src/components/layout.css

@@ -14,23 +14,68 @@
 	font-family: SailecBold;
 	src: url('../../static/fonts/SailecBold.otf');
 }
-
-html {
+:root {
+	--gradientHeight: 737px;
+	--gradient-sm-Height: 504px;
+	--gradient-md-Height: 448px;
+	--gradient-lg-Height: 505px;
+	--gradient-xl-Height: 428px;
 }
+
 body {
 	margin: 0;
 	overflow-x: hidden;
 	background: rgb(111, 65, 232);
-	background: linear-gradient(to bottom, rgba(147, 107, 251, 1) 504px, rgba(111, 65, 232, 1) 504px);
+	background: linear-gradient(
+		to bottom,
+		rgba(147, 107, 251, 1) var(--gradientHeight),
+		rgba(111, 65, 232, 1) var(--gradientHeight)
+	);
 }
-#___gatsby, body {
+#___gatsby,
+body {
 	background: rgb(111, 65, 232);
-	background: linear-gradient(to bottom, rgba(147, 107, 251, 1) 504px, rgba(111, 65, 232, 1) 504px);
+	background: linear-gradient(
+		to bottom,
+		rgba(147, 107, 251, 1) var(--gradientHeight),
+		rgba(111, 65, 232, 1) var(--gradientHeight)
+	);
 }
 
+@media screen and (min-width: 504px) {
+	#___gatsby {
+		background: linear-gradient(
+			to bottom,
+			rgba(147, 107, 251, 1) var(--gradient-sm-Height),
+			rgba(111, 65, 232, 1) var(--gradient-sm-Height)
+		);
+	}
+}
+@media screen and (min-width: 768px) {
+	#___gatsby {
+		background: linear-gradient(
+			to bottom,
+			rgba(147, 107, 251, 1) var(--gradient-md-Height),
+			rgba(111, 65, 232, 1) var(--gradient-md-Height)
+		);
+	}
+}
 @media screen and (min-width: 992px) {
 	#___gatsby {
-		background: linear-gradient(to bottom, rgba(147, 107, 251, 1) 537px, rgba(111, 65, 232, 1) 537px);
+		background: linear-gradient(
+			to bottom,
+			rgba(147, 107, 251, 1) var(--gradient-lg-Height),
+			rgba(111, 65, 232, 1) var(--gradient-lg-Height)
+		);
+	}
+}
+@media screen and (min-width: 1366px) {
+	#___gatsby {
+		background: linear-gradient(
+			to bottom,
+			rgba(147, 107, 251, 1) var(--gradient-xl-Height),
+			rgba(111, 65, 232, 1) var(--gradient-xl-Height)
+		);
 	}
 }
 
@@ -120,3 +165,12 @@ h3 {
 .ant-modal-wrap .ant-modal .ant-modal-content .ant-modal-header {
 	border-bottom: none;
 }
+
+/* Message */
+.ant-message {
+	z-index: 2000 !important;
+}
+.ant-message .ant-message-info {
+	display: flex;
+	align-items: center;
+}

src/components/messages/error.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
 import { MessageBox, ErrorContainer, ErrorText } from './style';
+import { T_14_16_lg } from '../../style/common/selectors';
+import { volcanoRed } from 'src/style/theme/generalVariables';
 
 interface IError {
 	errors: string[];
@@ -10,7 +12,9 @@ const Error: React.SFC<IError> = ({ errors }) => {
 		aErros.map((sError, i) => {
 			return (
 				<MessageBox type="error" key={`${sError}_${i}`}>
-					<ErrorText>{sError}</ErrorText>
+					<ErrorText>
+						<T_14_16_lg color={volcanoRed}>{sError} </T_14_16_lg>
+					</ErrorText>
 				</MessageBox>
 			);
 		});

src/components/messages/info.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
-import { ErrorContainer, ErrorText } from './style';
+import React from 'react';
 import { MessageBox, MessageBoxTextOnly } from './style';
 import { SmallTitle, P } from 'common/selectors';
+import { T_14_16_lg } from '../../style/common/selectors';
+import { blackish } from '../../style/theme/generalVariables';
 
 interface IMessage {
 	errors: [];
@@ -13,8 +14,16 @@ export const MessageHeadAText: React.SFC<IMessage> = ({ errors }) => {
 		aMessages.map(({ head, text }, i) => {
 			return (
 				<MessageBox infoBox={true} key={`${i}_head`}>
-					<SmallTitle bold>{head}</SmallTitle>
-					<SmallTitle>{text}</SmallTitle>
+					<SmallTitle bold={!!text}>
+						<T_14_16_lg family="SailecBold" color={blackish}>
+							{head}
+						</T_14_16_lg>
+					</SmallTitle>
+					<SmallTitle>
+						<T_14_16_lg family="SailecBold" color={blackish}>
+							{text}
+						</T_14_16_lg>
+					</SmallTitle>
 				</MessageBox>
 			);
 		});

src/components/pageTemplate/Footer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Footer, Support, FooterItem } from './style';
+import { Link, navigate } from 'gatsby';
+import { A } from 'common/selectors';
+
+const hidePrivacyAt = ['/transaction', '/transaction-approved','/review-payment','/approve-payment'];
+const hidecostumerSupAt = ['/transaction-approved'];
+
+const FooterComponent = ({ hide, path, store, resetAll }) => (
+	<Footer hide={hide}>
+		{store.blockchain.publicKey && (
+			<div className="logOut" onClick={() => {
+				resetAll()
+				navigate('/')
+				}}>
+				Sign out
+			</div>
+		)}
+		<Support>
+			<FooterItem className="cSupp">
+				<a href="mailto:[email protected]" target="_top">
+					<A>Customer Support</A>
+				</a>
+			</FooterItem>
+			<FooterItem hide={hidePrivacyAt.includes(path)}>
+				<Link to="/privacy-policy" state={{ lastPage: path }}>
+					<A>Privacy policy</A>
+				</Link>
+			</FooterItem>
+		</Support>
+	</Footer>
+);
+
+export default FooterComponent;

src/components/pageTemplate/handleErrors.tsx

@@ -49,6 +49,8 @@ const ErrorsTemplateRed = error => {
 			return 'Account is missing or does not exist.';
 		case 'Ledger device: UNKNOWN_ERROR (0x6804)':
 			return 'Failed to sign with your Ledger device. Session timeout.';
+		case 'Failed to sign with Ledger device: U2F DEVICE_INELIGIBLE':
+			return 'Failed to sign with your Ledger device. Session timeout.';
 		default:
 			return error;
 	}