Merge branch 'master' into micah/transactions

OriginProtocol · Sep 20, 2018 · a576eb2 · a576eb2
2 parents 77f1d85 + 58df328
commit a576eb2
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 5 deletions.
diff --git a/src/components/listing-create.js b/src/components/listing-create.js
@@ -675,6 +675,7 @@ class ListingCreate extends Component {
             <div className={`pt-xs-4 pt-sm-4 col-md-5 col-lg-4${step >= this.STEP.PREVIEW ? '' : ' offset-md-1 offset-lg-3'}`}>
               <WalletCard
                 wallet={wallet}
+                withBalanceTooltip={!this.props.wallet.ognBalance}
                 withMenus={true}
                 withProfile={false}
               />

diff --git a/src/components/wallet-card.js b/src/components/wallet-card.js
@@ -1,7 +1,8 @@
 import React, { Component, Fragment } from 'react'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
+import $ from 'jquery'
 
 import { getEthBalance, getOgnBalance } from 'actions/Wallet'
 
@@ -23,6 +24,30 @@ class WalletCard extends Component {
       modalOpen: false,
       ethToUsdBalance: 0
     }
+
+    this.intlMessages = defineMessages({
+      yourBalance: {
+        id: '_wallet-card.yourBalance',
+        defaultMessage: 'You have <img class="ogn-icon" src="images/ogn-icon.svg" role="presentation" /><span class="ogn">0 OGN</span>'
+      },
+      balanceText: {
+        id: '_wallet-card.balanceText',
+        defaultMessage: 'Having OGN is not required but will allow you \
+        to create a listing that will be more visible to buyers.'
+      },
+      getOGN: {
+        id: '_wallet-card.getOgn',
+        defaultMessage: 'Get OGN'
+      },
+      recommendation: {
+        id: '_wallet-card.recommendation',
+        defaultMessage: '(recommended)'
+      },
+      learnMore: {
+        id: '_wallet-card.learnMore',
+        defaultMessage: 'Learn more'
+      }
+    })
   }
 
   async convertEthToUsd() {
@@ -41,6 +66,7 @@ class WalletCard extends Component {
     this.props.getOgnBalance()
 
     this.convertEthToUsd()
+    this.initiateBootstrapTooltip()
   }
 
   componentDidUpdate(prevProps) {
@@ -57,13 +83,35 @@ class WalletCard extends Component {
     this.setState({ modalOpen: !this.state.modalOpen })
   }
 
+  initiateBootstrapTooltip() {
+    $('body').tooltip({
+      selector: '[data-toggle="tooltip"]'
+    })
+  }
+
   render() {
-    const { profile, wallet, web3Account, withMenus, withProfile } = this.props
+    const { profile, wallet, web3Account, withBalanceTooltip, withMenus, withProfile } = this.props
     const { address, ethBalance, ognBalance } = wallet
     const { user } = profile
     const userCanReceiveMessages =
       address !== web3Account && origin.messaging.canReceiveMessages(address)
 
+    const balanceTooltip = `
+      <div>
+        <p class='tooltip-balance-heading tooltip-align-left'>
+          ${this.props.intl.formatMessage(this.intlMessages.yourBalance)}
+        </p>
+        <p class='tooltip-balance-text tooltip-align-left'>
+          ${this.props.intl.formatMessage(this.intlMessages.balanceText)}
+        </p>
+        <p class='tooltip-align-left'>
+          <a href='/#/about-tokens' target='_blank' class='learn-more'>
+            ${this.props.intl.formatMessage(this.intlMessages.learnMore)} ▸
+          </a>
+        </p>
+      </div>
+    `
+
     return (
       <div className="wallet">
         <div className="d-flex">
@@ -158,7 +206,23 @@ class WalletCard extends Component {
                 )}
               </div>
               <div className="d-flex align-items-start">
-                <img src="images/ogn-icon.svg" role="presentation" />
+                {!withBalanceTooltip &&
+                  <img src="images/ogn-icon.svg" role="presentation" />
+                }
+                {withBalanceTooltip &&
+                  <a className="ogn-balance"
+                    data-toggle="tooltip"
+                    data-placement="left"
+                    data-trigger="hover focus"
+                    data-title={balanceTooltip}
+                    data-animation={true}
+                    data-html={true}
+                    data-container="body"
+                    data-delay='{"show":"0", "hide":"5000"}'
+                  >
+                    <img src="images/ogn-icon.svg" role="presentation" />
+                  </a>
+                }
                 <div className="amounts">
                   <div className="ogn">
                     {`${Number(ognBalance).toLocaleString(undefined)}` || 0}&nbsp;
@@ -282,4 +346,4 @@ const matchDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   matchDispatchToProps
-)(WalletCard)
+)(injectIntl(WalletCard))
diff --git a/src/css/app.css b/src/css/app.css
@@ -2884,6 +2884,78 @@ select.form-control:not([size]):not([multiple]) {
   font-weight: bold;
 }
 
+/* OGN Balance Tooltip */
+.tooltip-balance-heading {
+  font-weight: 800;
+  font-size: 18px;
+  color: white;
+}
+
+.ogn-balance {
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.tooltip-balance-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+}
+
+.tooltip-align-left {
+  text-align: left;
+  margin-bottom: 0.7rem;
+}
+
+.tooltip-inner img.ogn-icon {
+  width: 18px;
+  height: 18px;
+  margin-bottom: 5px;
+  margin-left: 2px;
+}
+
+.ogn {
+  color: var(--clear-blue);
+}
+
+.tooltip .tooltip-inner .add-more-btn {
+  border-radius: 15px;
+  background-color: var(--dark-grey-blue);
+  border: solid 1px var(--clear-blue);
+  margin-right: 10px;
+  padding: 2px 5px 6px 1px;
+}
+
+.tooltip .tooltip-inner .add-more-text,
+.tooltip .tooltip-inner .add-more-text:hover {
+  color: var(--clear-blue);
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.tooltip .tooltip-inner .add-more-icon {
+  width: 21px;
+  height: 21px;
+  margin: 1px 2px 0px 1px;
+}
+
+.recommended {
+  font-size: 12px;
+  color: var(--bluey-grey);
+}
+
+.tooltip .tooltip-inner a.learn-more {
+  color: var(--clear-blue);
+  font-size: 15px;
+}
+
+.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
+    left: 0;
+    border-width: 0.4rem 0 0.4rem 0.4rem;
+    border-left-color: var(--dark-grey-blue);
+    border-top-color: transparent;
+}
+
 /* Sales */
 
 .sale.card {

diff --git a/translations/all-messages.json b/translations/all-messages.json
@@ -295,6 +295,11 @@
   "user-card.ethAddress": "ETH Address:",
   "user-card.enabledContact": "Contact",
   "transaction-progress.viewProfile": "View Profile",
+  "_wallet-card.yourBalance": "You have <img class=\"ogn-icon\" src=\"images/ogn-icon.svg\" role=\"presentation\" /><span class=\"ogn\">0 OGN</span>",
+  "_wallet-card.balanceText": "Having OGN is not required but will allow you         to create a listing that will be more visible to buyers.",
+  "_wallet-card.getOgn": "Get OGN",
+  "_wallet-card.recommendation": "(recommended)",
+  "_wallet-card.learnMore": "Learn more",
   "wallet-card.ethAddress": "ETH Address:",
   "wallet-card.noEthAccountConnected": "No ETH Account Connected",
   "wallet-card.accountBalances": "Account Balances",

diff --git a/translations/messages/src/components/wallet-card.json b/translations/messages/src/components/wallet-card.json
@@ -1,4 +1,24 @@
 [
+  {
+    "id": "_wallet-card.yourBalance",
+    "defaultMessage": "You have <img class=\"ogn-icon\" src=\"images/ogn-icon.svg\" role=\"presentation\" /><span class=\"ogn\">0 OGN</span>"
+  },
+  {
+    "id": "_wallet-card.balanceText",
+    "defaultMessage": "Having OGN is not required but will allow you         to create a listing that will be more visible to buyers."
+  },
+  {
+    "id": "_wallet-card.getOgn",
+    "defaultMessage": "Get OGN"
+  },
+  {
+    "id": "_wallet-card.recommendation",
+    "defaultMessage": "(recommended)"
+  },
+  {
+    "id": "_wallet-card.learnMore",
+    "defaultMessage": "Learn more"
+  },
   {
     "id": "wallet-card.ethAddress",
     "defaultMessage": "ETH Address:"

diff --git a/webpack.config.js b/webpack.config.js
@@ -11,9 +11,10 @@ const isProduction = process.env.NODE_ENV === 'production'
 
 const env = {
   ARBITRATOR_ACCOUNT: '',
-  CONTRACT_ADDRESSES: '{}',
   BRIDGE_SERVER_DOMAIN: '',
   BRIDGE_SERVER_PROTOCOL: 'https',
+  CONTRACT_ADDRESSES: '{}',
+  DISCOVERY_SERVER_URL: '',
   FORCE_HTTPS: false,
   IPFS_API_PORT: '',
   IPFS_DOMAIN: '',