Update staging environment

public/index.html

@@ -5,6 +5,17 @@
 
     <meta name="theme-color" content="#000000">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta property="og:title" content="AMP by Proof Suite" />
+    <meta property="og:description" content="The community-owned digital assets marketplace" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="https://www.proofsuite.com/ampmarket" />
+    <meta property="og:image" content="https://www.proofsuite.com/ampmarket/images/screen3.png" />
+    <meta content='https://www.proofsuite.com/ampmarket/images/screen3.png' name='twitter:image:src'/> 
+    <meta content='AMP: The community-owned digital assets marketplace' name='twitter:title'/>
+    <link rel="apple-touch-icon" sizes="180x180" href="https://www.proofsuite.com/apple-touch-icon.png%22%3E" >
+    <link rel="icon" type="image/png" sizes="32x32" href="https://www.proofsuite.com//favicon-32x32.png%22%3E" >
+    <link rel="icon" type="image/png" sizes="16x16" href="https://www.proofsuite.com/favicon-16x16.png%22%3E" >
+    <link rel="mask-icon" href="https://www.proofsuite.com/safari-pinned-tab.svg" color="#5bbad5">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

src/app/FaqPage/FaqPage.js

@@ -110,7 +110,7 @@ class FaqPage extends React.PureComponent {
           question="What are PRFT tokens (Proof Tokens) ?"
           match={match}
         >
-          Proof Tokens have originally been sold during the Proofsuite ICO in November 2017.
+          Proof Tokens have originally been sold during the Proof Suite ICO in November 2017.
           1,217,000 tokens have been sold for a total value at the time of around ~3 million USD.
           PRFT Tokens are used to offer rewards with a staking mechanism.
           Although we describe some of the potential sources of revenues that will be sent to the reward pool, we plan to adapt our original vision.
@@ -214,10 +214,10 @@ class FaqPage extends React.PureComponent {
         </FaqItem>
         <Divider />
         <FaqItem
-          question="Where is Proofsuite based ?"
+          question="Where is Proof Suite based ?"
           match={match}
         >
-          Proofsuite is based in South Korea with remote workers all over the world and members of our business team constantly traveling to establish new relationships.
+          Proof Suite is based in South Korea with remote workers all over the world and members of our business team constantly traveling to establish new relationships.
         </FaqItem>
         <Divider />
         <FaqItem

src/app/LandingPage/LandingPage.js

@@ -2,11 +2,18 @@ import React from 'react';
 import { NonIdealState } from '@blueprintjs/core';
 
 class LandingPage extends React.PureComponent {
+
+  iframe = () => {
+    return {
+      __html: '<iframe style="position:fixed; width:100%; height:100%; top:0px; left:0px; z-index:10000000; background-color:#000; "  frameBorder="0" src="https://www.proofsuite.com/ampmarket" ></iframe>'
+    }
+  }
+
   render() {
     return (
-      <NonIdealState title="WORK IN PROGRESS" visual="wrench">
-        Landing Page
-      </NonIdealState>
+      <div>
+        <div dangerouslySetInnerHTML={ this.iframe() } />
+      </div>
     );
   }
 }

src/app/Layout/Layout.js

@@ -5,7 +5,7 @@ import Notifier from '../../components/Notifier'
 import ConnectionStatus from '../../components/ConnectionStatus'
 import { IntlProvider } from 'react-intl'
 import { Link, NavLink } from 'react-router-dom'
-import { Footer } from '../../components/Common'
+import { Footer, Indent } from '../../components/Common'
 
 import styled from 'styled-components'
 import {
@@ -17,7 +17,8 @@ import {
   NavbarGroup,
   NavbarHeading,
   Popover,
-  Position
+  Position,
+  Tag
 } from '@blueprintjs/core'
 
 export type Props = {
@@ -67,6 +68,8 @@ class Layout extends React.PureComponent<Props, State> {
                 <NavbarHeading>
                   <NavbarHeaderBox>
                     <img src="amp_black.svg" class="Profile-image" height={25} width={25} />
+                    <Indent />
+                    <Tag minimal intent="success">BETA</Tag>
                     {/* <NavbarHeaderLink to="/">PROOF</NavbarHeaderLink> */}
                   </NavbarHeaderBox>
                 </NavbarHeading>
@@ -76,6 +79,7 @@ class Layout extends React.PureComponent<Props, State> {
                     <NavbarLink to="/wallet">Wallet</NavbarLink>
                     <NavbarLink to="/trade">Exchange</NavbarLink>
                     <NavbarLink to="/settings">Settings</NavbarLink>
+                    <NavbarDivider />
                   </React.Fragment>
                 )}
               </NavbarGroup>

src/app/LoginPage/LoginPageRenderer.js

@@ -75,13 +75,13 @@ const LoginMethodsView = (props: Props) => {
               <FormattedMessage {...messages.noPlugins} />
             </Reminder>
             <Reminder>
-              <FormattedMessage {...messages.noPhoneCalls} />
+              <FormattedMessage {...messages.noDisclosure} />
             </Reminder>
             <Reminder>
               <FormattedMessage {...messages.noOfficialStaffs} />
             </Reminder>
             <Reminder>
-              <FormattedMessage {...messages.noDisclosure} />
+              <FormattedMessage {...messages.exchangeLaws} />
             </Reminder>
           </AnnouncementMessages>
         </Callout>
@@ -92,20 +92,20 @@ const LoginMethodsView = (props: Props) => {
         </LoginMethodsHeading>
         <LoginCards>
           <LoginCard onClick={loginWithMetamask}>
-            <MetamaskIcon size={100} />
+            <MetamaskIcon size={75} />
             <Heading>
               <FormattedMessage {...messages.metamask} />
             </Heading>
             <MetamaskStatusTag>{metamaskStatuses[metamaskStatus]}</MetamaskStatusTag>
           </LoginCard>
           <LoginCard onClick={showWalletLoginForm}>
-            <KeyIcon size={100} />
+            <KeyIcon size={75} />
             <Heading>
               <FormattedMessage {...messages.wallet} />
             </Heading>
           </LoginCard>
           <LoginCard onClick={showCreateWallet}>
-            <WalletIcon size={100} color={Colors.WHITE} />
+            <WalletIcon size={75} color={Colors.WHITE} />
             <Heading>
               <FormattedMessage {...messages.createWallet} />
             </Heading>
@@ -167,8 +167,8 @@ const LoginCard = styled(Card).attrs({
   interactive: true,
 })`
   margin: 10px;
-  height: 13em;
-  width: 13em;
+  height: 11.5em;
+  width: 11.5em;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -195,18 +195,18 @@ const messages = defineMessages({
     id: 'loginPage.thisAppIsInBeta',
     defaultMessage: "This app is in beta. Please expect a certain amount of bugs for upcoming weeks",
   },
-  noPhoneCalls: {
-    id: 'loginPage.noPhoneCalls',
-    defaultMessage: 'Never make any phone calls to anyone that claims to be a Proofsuite representative',
+  exchangeLaws: {
+    id: 'loginPage.exchangeLaws',
+    defaultMessage: ' To adhere to international securities and exchange laws, AMP Marketplace prohibits use of this platform by US and South Korean residents. By using this platform, you are confirming that you are not excluded from use by this criteria.',
   },
   noOfficialStaffs: {
     id: 'loginPage.noOfficialStaffs',
-    defaultMessage: 'Never make transactions or send funds to anyone who claims to be a member of Proofsuite support',
+    defaultMessage: 'Never make transactions or send funds to anyone who claims to be a member of Proof Suite support',
   },
   noDisclosure: {
     id: 'loginPage.noDisclosure',
     defaultMessage:
-      'Never disclose your password, private keys or other authentication elements to anyone, including Proofsuite support',
+      'Never disclose your password, private keys or other authentication elements to anyone, including Proof Suite support',
   },
   loginMethods: {
     id: 'loginPage.loginMethodsHeading',

src/app/TradingPage/TradingPage.js

@@ -21,7 +21,9 @@ type Props = {
   quoteTokenAllowance: string,
   baseTokenSymbol: string,
   quoteTokenSymbol: string,
-  getDefaultData: () => void
+  getDefaultData: () => void,
+  makeFee: string, 
+  takeFee: string,
 }
 
 type State = {
@@ -42,10 +44,20 @@ class TradingPage extends React.PureComponent<Props, State> {
       intent: 'danger',
       message: 'Please authenticate to start trading'
     }),
-    fundsLocked: (symbol: string) => ({
-      title: `${symbol} Tokens locked`,
+    quoteTokensLocked: (quoteTokenSymbol: string) => ({ 
+      title: `Unlock tokens to start trading`,
       intent: 'danger',
-      message: 'To start trading, you need to unlock funds and allow AMP to settle transactions when a match is found'
+      message: `To start trading, unlock trading for ${quoteTokenSymbol} tokens on your wallet page.` 
+    }),
+    baseTokensLocked: (baseTokenSymbol: string) => ({
+      title: `Unlock tokens to start trading`,
+      intent: 'danger',
+      message: `To start trading, unlock trading for ${baseTokenSymbol} tokens on your wallet page.`
+    }),
+    tokensLocked: (baseTokenSymbol: string, quoteTokenSymbol: string) => ({
+      title: `Unlock tokens to start trading`,
+      intent: `danger`,
+      message: `To start trading a currency pair, unlock trading for both tokens (${baseTokenSymbol} and ${quoteTokenSymbol}) on your wallet page.`
     })
   }
 
@@ -73,23 +85,32 @@ class TradingPage extends React.PureComponent<Props, State> {
       baseTokenAllowance,
       quoteTokenAllowance,
       baseTokenSymbol,
-      quoteTokenSymbol
+      quoteTokenSymbol,
      } = this.props
 
     if (!authenticated) {
       let calloutOptions = this.callouts.notAuthenticated()
       this.setState({ calloutVisible: true, calloutOptions })
     }
 
+    if (baseTokenBalance === '0.0' && quoteTokenBalance === '0.0') {
+      return
+    }
+
+    if (baseTokenAllowance === '0.0' && quoteTokenAllowance === '0.0') {
+      let calloutOptions = this.callouts.tokensLocked(baseTokenSymbol, quoteTokenSymbol)
+      return this.setState({ calloutVisible: true, calloutOptions })
+    }
+
     // TODO update when moving balances in redux from string to numbers
-    if (baseTokenBalance !== '0.0' && baseTokenAllowance === '0.0') {
-      let calloutOptions = this.callouts.fundsLocked(baseTokenSymbol)
-      this.setState({ calloutVisible: true, calloutOptions })
+    if (baseTokenAllowance === '0.0') {
+      let calloutOptions = this.callouts.baseTokensLocked(baseTokenSymbol)
+      return this.setState({ calloutVisible: true, calloutOptions })
     }
 
-    if (quoteTokenBalance !== '0.0' && quoteTokenAllowance === '0.0') {
-      let calloutOptions = this.callouts.fundsLocked(quoteTokenSymbol)
-      this.setState({ calloutVisible: true, calloutOptions })
+    if (quoteTokenAllowance === '0.0') {
+      let calloutOptions = this.callouts.quoteTokensLocked(quoteTokenSymbol)
+      return this.setState({ calloutVisible: true, calloutOptions })
     }
   }
 

src/components/Common/ColoredCryptoIcon.js

@@ -25,7 +25,7 @@ import TUSD from './Icons/icon/tusd.js'
 import WTC from './Icons/icon/wtc.js'
 import ZRX from './Icons/icon/zrx.js'
 import ETH from './Icons/icon/eth.js'
-
+import USD from './Icons/icon/usd.js'
 
 
 const ColoredCryptoIcon = ({ name, color, size }) => {
@@ -51,6 +51,8 @@ const ColoredCryptoIcon = ({ name, color, size }) => {
     case 'OMG': return <OMG witdh={size} height={size} viewBox="0 0 32 32"  />
     case 'PPT': return <PPT witdh={size} height={size} viewBox="0 0 32 32"  />
     // case 'PRFT': return <PRFT witdh={size} height={size} viewBox="0 0 32 32"  />
+    case 'DAI': return <USD witdh={size} height={size} viewBox="0 0 32 32"  />
+    case 'USDC': return <USD witdh={size} height={size} viewBox="0 0 32 32"  />
     case 'REP': return <REP witdh={size} height={size} viewBox="0 0 32 32"  />
     case 'SNT': return <SNT witdh={size} height={size} viewBox="0 0 32 32"  />
     case 'TRX': return <TRX witdh={size} height={size} viewBox="0 0 32 32"  />

src/components/Common/Footer.js

@@ -14,15 +14,15 @@ const Footer = () => (
         <LogosWrapper>
         <img src="amp_black.png" class="Profile-image" width="120" height="120" />
         <FooterText>The AMP trading platform settles trades directly on the blockchain.
-        Trading fees are distributed to the Proofsuite community.</FooterText>
+        Trading fees are distributed to the Proof Suite community.</FooterText>
         </LogosWrapper>
         <LinksWrapper className="content">
           <List>
             <HeadListItem>About</HeadListItem>
             <NormalListItem>
                 <LinkText>
                   <a href="https://www.proofsuite.com/#about" target="_blank">
-                    Proofsuite
+                    Proof Suite
                   </a>
                 </LinkText>
             </NormalListItem>

src/components/Help/index.js

@@ -18,7 +18,7 @@ function Help(props) {
     >
       <Tooltip
         className={Classes.TOOLTIP_INDICATOR}
-        content={label}
+        // content={label}
         position={position}
         disabled={disabled}
       >

src/components/OHLCV/Chart.js

@@ -168,9 +168,9 @@ class OHLCVChart extends React.Component {
 
               <CandlestickSeries
                 opacity={1}
-                fill={d => { return d.close > d.open ? theme.GREEN3 : theme.RED2 }}
-                stroke={d => { return d.close > d.open ? theme.GREEN3 : theme.RED2 }}
-                wickStroke={d => { return d.close > d.open ? theme.GREEN3 : theme.RED2 }}
+                fill={d => { return d.close >= d.open ? theme.GREEN3 : theme.RED2 }}
+                stroke={d => { return d.close >= d.open ? theme.GREEN3 : theme.RED2 }}
+                wickStroke={d => { return d.close >= d.open ? theme.GREEN3 : theme.RED2 }}
               />
 
               <MouseCoordinateX
@@ -197,8 +197,8 @@ class OHLCVChart extends React.Component {
                 orient="right"
                 edgeAt="right"
                 yAccessor={d => d.close}
-                fill={d => (d.close > d.open ? theme.GREEN3 : theme.RED2)}
-                stroke={d => (d.close > d.open ? theme.GREEN3 : theme.RED2)}
+                fill={d => (d.close >= d.open ? theme.GREEN3 : theme.RED2)}
+                stroke={d => (d.close >= d.open ? theme.GREEN3 : theme.RED2)}
                 textFill={theme.white}
                 {...edgeIndicatorAppearance}
               />
@@ -332,11 +332,11 @@ class OHLCVChart extends React.Component {
               <MouseCoordinateY at="right" orient="right" displayFormat={format('.1f')} />
 
               <CandlestickSeries
-                fill={d => d.close > d.open ? theme.GREEN3 : theme.RED2 }
+                fill={d => d.close >= d.open ? theme.GREEN3 : theme.RED2 }
                 opacity={1}
-                stroke={d => d.close > d.open ? theme.GREEN3 : theme.RED2 }
+                stroke={d => d.close >= d.open ? theme.GREEN3 : theme.RED2 }
                 widthRatio={0.8}
-                wickStroke={d => d.close > d.open ? theme.GREEN3 : theme.RED2 }
+                wickStroke={d => d.close >= d.open ? theme.GREEN3 : theme.RED2 }
               />
 
               {line.active && (

src/components/OHLCV/OHLCV.js

@@ -66,6 +66,7 @@ type Props = {
   saveDuration: Object => void,
   saveTimeSpan: Object => void,
 };
+
 type State = {
   chartHeight: number,
   indicatorHeight: number,