Replace react-joyride with react-popper

4 files changed, 63 insertions, 53 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index 69115be9a..0cc6dfac1 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -11,22 +11,19 @@
         "clean": "shx rm -f public/bundle*",
         "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
         "watch": "webpack-dev-server --content-base public --https",
-        "deploy_dogfood":
-            "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
-        "deploy_staging":
-            "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
-        "deploy_live":
-            "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
+        "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+        "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+        "deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
     },
     "author": "Fabio Berger",
     "license": "Apache-2.0",
     "dependencies": {
+        "@0xproject/contract-wrappers": "^0.0.2",
         "@0xproject/react-docs": "^0.0.12",
         "@0xproject/react-shared": "^0.1.7",
         "@0xproject/subproviders": "^0.10.2",
-        "@0xproject/contract-wrappers": "^0.0.2",
-        "@0xproject/typescript-typings": "^0.3.2",
         "@0xproject/types": "0.7.0",
+        "@0xproject/typescript-typings": "^0.3.2",
         "@0xproject/utils": "^0.6.2",
         "@0xproject/web3-wrapper": "^0.6.4",
         "accounting": "^0.4.1",
@@ -47,6 +44,7 @@
         "react-dom": "15.6.1",
         "react-ga": "^2.4.1",
         "react-joyride": "^2.0.0-11",
+        "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
         "react-router-dom": "^4.1.1",
         "react-scroll": "^1.5.2",
diff --git a/packages/website/public/index.html b/packages/website/public/index.html
index c28e4abf4..4c0985c71 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -26,53 +26,53 @@
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-98720122-1"></script>
     <script>
-    window.dataLayer = window.dataLayer || [];
-function gtag() {
-    dataLayer.push(arguments);
-}
-gtag('js', new Date());
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
 
-gtag('config', 'UA-98720122-1');
-</script>
+        gtag('config', 'UA-98720122-1');
+    </script>
     <!-- End Google Analytics -->
     <!-- Facebook SDK -->
     <div id="fb-root"></div>
     <script>
-    (function(d, s, id) {
-    var js,
-        fjs = d.getElementsByTagName(s)[0];
-    if (d.getElementById(id)) return;
-    js = d.createElement(s);
-    js.id = id;
-    js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192';
-    fjs.parentNode.insertBefore(js, fjs);
-})(document, 'script', 'facebook-jssdk');
-</script>
+        (function (d, s, id) {
+            var js,
+                fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) return;
+            js = d.createElement(s);
+            js.id = id;
+            js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192';
+            fjs.parentNode.insertBefore(js, fjs);
+        })(document, 'script', 'facebook-jssdk');
+    </script>
     <div id="app"></div>
     <!-- End Facebook SDK -->
     <!-- Twitter SDK -->
     <script>
-    window.twttr = (function(d, s, id) {
-    var js,
-        fjs = d.getElementsByTagName(s)[0],
-        t = window.twttr || {};
-    if (d.getElementById(id)) return t;
-    js = d.createElement(s);
-    js.id = id;
-    js.src = 'https://platform.twitter.com/widgets.js';
-    fjs.parentNode.insertBefore(js, fjs);
+        window.twttr = (function (d, s, id) {
+            var js,
+                fjs = d.getElementsByTagName(s)[0],
+                t = window.twttr || {};
+            if (d.getElementById(id)) return t;
+            js = d.createElement(s);
+            js.id = id;
+            js.src = 'https://platform.twitter.com/widgets.js';
+            fjs.parentNode.insertBefore(js, fjs);
 
-    t._e = [];
-    t.ready = function(f) {
-        t._e.push(f);
-    };
-    return t;
-})(document, 'script', 'twitter-wjs');
-</script>
+            t._e = [];
+            t.ready = function (f) {
+                t._e.push(f);
+            };
+            return t;
+        })(document, 'script', 'twitter-wjs');
+    </script>
     <!-- End Twitter SDK -->
 
     <!-- Main -->
     <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 4ed834916..cd6fe2195 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
+import { Popper, PopperChildrenProps } from 'react-popper';
 
 import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
 import { zIndex } from 'ts/utils/style';
@@ -29,16 +30,13 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
     }
 
     public render(): React.ReactNode {
+        if (!this.props.isRunning) {
+            return null;
+        }
         return (
-            <Joyride
-                run={this.props.isRunning}
-                continuous={true}
-                debug={true}
-                steps={this.props.steps}
-                stepIndex={this.props.stepIndex}
-                styles={{ options: joyrideStyleOptions }}
-                tooltipComponent={this._renderToolTip.bind(this)}
-            />
+            <Popper referenceElement={this._getElementForStep()} placement="right">
+                {this._renderPopperChildren.bind(this)}
+            </Popper>
         );
     }
 
@@ -87,6 +85,21 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         return newStep;
     }
 
+    private _getElementForStep(): Element {
+        const step = this.props.steps[this.props.stepIndex];
+        return document.querySelector(step.target);
+    }
+
+    private _renderPopperChildren(props: any): React.ReactNode {
+        const { arrowProps } = props;
+        return (
+            <div ref={props.ref} style={props.style} data-placement={props.placement}>
+                {this._renderToolTip()}
+                <div ref={arrowProps.ref} style={arrowProps.style} />
+            </div>
+        );
+    }
+
     private _renderToolTip(): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 3ab18b011..3994b0546 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -3,10 +3,9 @@ import * as React from 'react';
 import { Island } from 'ts/components/ui/island';
 
 export interface OnboardingTooltipProps {
-    title: string;
+    title?: string;
     content: React.ReactNode;
     isLastStep: boolean;
-    index: number;
     onClose: () => void;
     onClickNext: () => void;
     onClickBack: () => void;