Merge branch 'latest' into issue-463

balance-io · Jun 2, 2019 · bb0952b · bb0952b
2 parents 7dd174c + 285e4c6
commit bb0952b
Show file tree

Hide file tree

Showing 12 changed files with 294 additions and 230 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,8 @@
     "@devshack/react-native-storage": "^0.2.2",
     "@ledgerhq/hw-app-eth": "^4.7.3",
     "@ledgerhq/hw-transport-u2f": "^4.7.3",
+    "@walletconnect/browser": "^1.0.0-beta.18",
+    "@walletconnect/qrcode-modal": "^1.0.0-beta.18",
     "axios": "^0.18.0",
     "balance-common": "^0.6.1",
     "bignumber.js": "^7.0.1",
@@ -44,7 +46,6 @@
     "redux-thunk": "^2.2.0",
     "styled-components": "^3.2.3",
     "trezor-connect": "^5.0.13",
-    "walletconnect": "^0.7.25",
     "web3": "^1.0.0-beta.34"
   },
   "scripts": {

diff --git a/src/Router.js b/src/Router.js
@@ -13,6 +13,7 @@ import { warningOnline, warningOffline } from './reducers/_warning';
 class Router extends Component {
   componentDidMount() {
     window.browserHistory = this.context.router.history;
+    window.reduxStore = this.context.store;
     window.onoffline = () => this.props.warningOffline();
     window.ononline = () => this.props.warningOnline();
   }

diff --git a/src/handlers/walletconnect.js b/src/handlers/walletconnect.js
diff --git a/src/handlers/web3.js b/src/handlers/web3.js
@@ -1,8 +1,7 @@
 import Web3 from 'web3';
-import { ledgerEthSignTransaction } from './ledger-eth';
 import piwik from '../piwik';
+import { ledgerEthSignTransaction } from './ledger-eth';
 import { trezorEthSignTransaction } from './trezor-eth';
-import { walletConnectSignTransaction } from './walletconnect';
 
 /**
  * @desc web3 http instance
@@ -51,13 +50,18 @@ export const web3MetamaskSendTransaction = txDetails =>
  */
 export const web3WalletConnectSendTransaction = txDetails =>
   new Promise((resolve, reject) => {
-    walletConnectSignTransaction(txDetails)
-      .then(txHash => {
-        resolve(txHash);
-      })
-      .catch(error => {
-        reject(error);
-      });
+    const { walletConnector } = window.reduxStore.getState().walletconnect;
+    if (walletConnector.connected) {
+      walletConnector
+        .sendTransaction(txDetails)
+        .then(({ result }) => resolve(result))
+        .catch(error => reject(error));
+    } else {
+      const error = new Error(
+        'WalletConnect session has expired. Please reconnect.',
+      );
+      reject(error);
+    }
   });
 
 /**

diff --git a/src/modals/WalletConnectModal.js b/src/modals/WalletConnectModal.js
@@ -8,7 +8,7 @@ import Loader from '../components/Loader';
 import QRCodeDisplay from '../components/QRCodeDisplay';
 import Button from '../components/Button';
 import { modalClose } from '../reducers/_modal';
-import { walletConnectClearFields } from '../reducers/_walletconnect';
+import { walletConnectClearState } from '../reducers/_walletconnect';
 
 const StyledCard = styled(Card)`
   margin: 0 16px;
@@ -39,19 +39,19 @@ class WalletConnectModal extends Component {
     this.isSmallScreen = window.innerWidth < 530;
   }
   onClose = () => {
-    this.props.walletConnectClearFields();
+    this.props.walletConnectClearState();
     this.props.modalClose();
   };
 
   render = () => {
-    const { qrcode } = this.props;
+    const { uri } = this.props.walletConnector;
     return (
       <StyledCard maxWidth={this.isSmallScreen ? 305 : 427} background="white">
         <StyledContainer>
           <StyledQRCodeWrapper>
-            {qrcode ? (
+            {uri ? (
               <StyledQRCodeDisplay
-                data={qrcode}
+                data={uri}
                 scale={this.isSmallScreen ? 5 : 7}
               />
             ) : (
@@ -79,13 +79,13 @@ WalletConnectModal.propTypes = {
 };
 
 const reduxProps = ({ modal, walletconnect }) => ({
-  qrcode: walletconnect.qrcode,
+  walletConnector: walletconnect.walletConnector,
 });
 
 export default connect(
   reduxProps,
   {
     modalClose,
-    walletConnectClearFields,
+    walletConnectClearState,
   },
 )(WalletConnectModal);
diff --git a/src/pages/Wallet.js b/src/pages/Wallet.js
@@ -6,6 +6,7 @@ import BaseLayout from '../layouts/base';
 import Account from '../views/Account';
 import Card from '../components/Card';
 import { lang } from 'balance-common';
+import { walletConnectInit } from '../reducers/_walletconnect';
 import { fonts, colors } from '../styles';
 
 const StyledWrapper = styled.div`
@@ -22,27 +23,27 @@ const StyledMessage = styled.div`
 
 class Wallet extends Component {
   componentDidMount() {
-    if (!this.props.accountAddress) {
-      console.log('wallet page does not have account address');
-      this.props.history.push('/');
-    }
+    this.props.walletConnectInit();
   }
 
-  render = () => (
-    <BaseLayout>
-      <StyledWrapper>
-        {this.props.fetching || this.props.accountAddress ? (
-          <Account match={this.props.match} />
-        ) : (
-          <Card minHeight={200} fetching={this.props.fetching}>
-            <StyledMessage>
-              {lang.t('message.walletconnect_not_unlocked')}
-            </StyledMessage>
-          </Card>
-        )}
-      </StyledWrapper>
-    </BaseLayout>
-  );
+  render = () => {
+    const { fetching, accountAddress, match } = this.props;
+    return (
+      <BaseLayout>
+        <StyledWrapper>
+          {fetching || accountAddress ? (
+            <Account fetchingWallet={fetching} match={match} />
+          ) : (
+            <Card minHeight={200} fetching={fetching}>
+              <StyledMessage>
+                {lang.t('message.walletconnect_not_unlocked')}
+              </StyledMessage>
+            </Card>
+          )}
+        </StyledWrapper>
+      </BaseLayout>
+    );
+  };
 }
 
 Wallet.propTypes = {
@@ -62,5 +63,5 @@ const reduxProps = ({ walletconnect }) => ({
 
 export default connect(
   reduxProps,
-  null,
+  { walletConnectInit },
 )(Wallet);
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -20,7 +20,6 @@ import firefoxLogoImage from '../assets/firefox-logo.svg';
 import firefoxLogoText from '../assets/firefox-text.svg';
 import operaLogoImage from '../assets/opera-logo.svg';
 import operaLogoText from '../assets/opera-text.svg';
-import { walletConnectHasExistingSession } from '../reducers/_walletconnect';
 import { modalOpen } from '../reducers/_modal';
 import { colors, fonts, responsive } from '../styles';
 
@@ -235,6 +234,12 @@ const TrustWalletLogo = styled.img`
   width: 52px;
 `;
 
+const WalletConnectLink = styled(Link)`
+  margin: 0 auto;
+  max-width: 315px;
+  width: 100%;
+`;
+
 const WalletConnectLogo = styled.div`
   background-image: url(${walletConnectLogoImage});
   background-repeat: no-repeat;
@@ -304,21 +309,6 @@ class Home extends Component {
     this.props.accountInitializeState();
   };
 
-  onWalletConnectInit = () => {
-    this.props
-      .walletConnectHasExistingSession()
-      .then(isValid => {
-        if (isValid) {
-          this.props.history.push('/wallet');
-        } else {
-          this.props.modalOpen('WALLET_CONNECT', null);
-        }
-      })
-      .catch(error => {
-        console.log('error checking valid session', error);
-        this.props.modalOpen('WALLET_CONNECT', null);
-      });
-  };
   render = () => (
     <BaseLayout>
       {isMobile() ? (
@@ -386,15 +376,16 @@ class Home extends Component {
                   .
                 </LogoText>
               </LogoSectionMobile>
-              <WalletConnectButton
-                color="walletconnect"
-                hoverColor="walletconnectHover"
-                activeColor="walletconnectActive"
-                onClick={this.onWalletConnectInit}
-                width={`100%`}
-              >
-                {lang.t('homepage.connect_walletconnect.button_mobile')}
-              </WalletConnectButton>
+              <WalletConnectLink to="/wallet">
+                <WalletConnectButton
+                  color="walletconnect"
+                  hoverColor="walletconnectHover"
+                  activeColor="walletconnectActive"
+                  width={`100%`}
+                >
+                  {lang.t('homepage.connect_walletconnect.button_mobile')}
+                </WalletConnectButton>
+              </WalletConnectLink>
             </CardContainerMobile>
           </StyledCard>
           <CardContainerMobile>
@@ -540,15 +531,16 @@ class Home extends Component {
                   .
                 </LogoText>
               </LogoSection>
-              <WalletConnectButton
-                left
-                color="walletconnect"
-                hoverColor="walletconnectHover"
-                activeColor="walletconnectActive"
-                onClick={this.onWalletConnectInit}
-              >
-                {lang.t('homepage.connect_walletconnect.button')}
-              </WalletConnectButton>
+              <Link to="/wallet">
+                <WalletConnectButton
+                  left
+                  color="walletconnect"
+                  hoverColor="walletconnectHover"
+                  activeColor="walletconnectActive"
+                >
+                  {lang.t('homepage.connect_walletconnect.button')}
+                </WalletConnectButton>
+              </Link>
             </CardContainer>
           </StyledCard>
 
@@ -597,14 +589,12 @@ class Home extends Component {
 Home.propTypes = {
   accountInitializeState: PropTypes.func.isRequired,
   modalOpen: PropTypes.func.isRequired,
-  walletConnectHasExistingSession: PropTypes.func.isRequired,
 };
 
 export default connect(
   null,
   {
     accountInitializeState,
     modalOpen,
-    walletConnectHasExistingSession,
   },
 )(Home);