From 79b43470f652249c55482f14ab7b5b2ea54dcab9 Mon Sep 17 00:00:00 2001
From: joshslee <joshslee93@gmail.com>
Date: Tue, 15 Sep 2020 15:49:40 -0700
Subject: [PATCH] sift FE integration

---
 config/constants.js |  2 ++
 pages/Base.js       | 59 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/config/constants.js b/config/constants.js
index 4a104d76fe..6ecad4a9ec 100644
--- a/config/constants.js
+++ b/config/constants.js
@@ -52,3 +52,5 @@ export const MAINNET_CHAIN_ID = "1";
 export const RINKEBY_CHAIN_ID = "4";
 
 export const RECAPTCHA_CLIENT_KEY = "6LdxeboZAAAAAEgn_Oa0VnohS724vZhI3_ezLbVD";
+
+export const SIFT_BEACON_KEY = "891d8fb796";
diff --git a/pages/Base.js b/pages/Base.js
index e53c2f4cec..c26f47b476 100644
--- a/pages/Base.js
+++ b/pages/Base.js
@@ -20,6 +20,7 @@ import { BannerActions } from "~/redux/banner";
 
 import PermissionActions from "../redux/permission";
 import Footer from "./footer";
+import { SIFT_BEACON_KEY } from "~/config/constants";
 
 class Base extends React.Component {
   componentDidMount = async () => {
@@ -44,6 +45,7 @@ class Base extends React.Component {
     if (auth.isLoggedIn) {
       getWithdrawals();
       getNotifications();
+      this.connectSift();
     }
     getUserBannerPreference();
     determineBanner();
@@ -51,6 +53,63 @@ class Base extends React.Component {
     await fetchPermissions();
   };
 
+  componentDidUpdate(prevProps) {
+    if (!prevProps.auth.isLoggedIn && this.props.auth.isLoggedIn) {
+      this.connectSift();
+    } else if (prevProps.auth.isLoggedIn && !this.props.auth.isLoggedIn) {
+      this.disconnectSift();
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("load", this.loadSift);
+  }
+
+  connectSift = () => {
+    let _user_id = this.props.auth.user.id;
+    let _session_id = this.uniqueId();
+    let _sift = (window._sift = window._sift || []);
+    _sift.push(["_setAccount", SIFT_BEACON_KEY]);
+    _sift.push(["_setUserId", _user_id]);
+    _sift.push(["_setSessionId", _session_id]);
+    _sift.push(["_trackPageview"]);
+
+    if (window.attachEvent) {
+      window.attachEvent("onload", this.loadSift);
+    } else {
+      window.addEventListener("load", this.loadSift, false);
+    }
+
+    this.loadSift();
+  };
+
+  disconnectSift = () => {
+    let sift = document.getElementById("sift");
+    sift.parentNode.removeChild(sift);
+  };
+
+  loadSift = () => {
+    if (this.props.auth.isLoggedIn) {
+      if (!document.getElementById("sift")) {
+        // only attach script if it isn't there
+        let script = document.createElement("script");
+        script.setAttribute("id", "sift");
+        script.src = "https://cdn.sift.com/s.js";
+        document.body.appendChild(script);
+      }
+    } else {
+      this.disconnectSift();
+    }
+  };
+
+  uniqueId = () => {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+      var r = (Math.random() * 16) | 0,
+        v = c == "x" ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  };
+
   render() {
     const { Component, pageProps } = this.props;
     const options = {