Feature/vesta sidebar

generate-static.sh

@@ -6,4 +6,5 @@ mkdir liquity && cp index.html liquity
 mkdir faq && cp index.html faq
 mkdir risk && cp index.html risk
 mkdir terms && cp index.html terms
-mkdir farm-info && cp index.html farm-info
+mkdir farm-info && cp index.html farm-info
+mkdir vesta && cp index.html vesta

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bprotocol-react-client",
-  "version": "1.0.25",
+  "version": "1.0.29",
   "private": true,
   "dependencies": {
     "@cloudflare/kv-asset-handler": "^0.1.0",

src/App.js

@@ -19,6 +19,8 @@ routerStore.setRouteProps(browserHistory)
 const Dashboard = React.lazy(() => import("./containers/Dashboard"));
 const Compound = React.lazy(() => import("./containers/Compound"));
 const Liquity = React.lazy(() => import("./containers/Liquity"));
+const LiquityLegacy = React.lazy(() => import("./containers/LiquityLegacy"));
+const Vesta = React.lazy(() => import("./containers/Vesta"));
 const Risk = React.lazy(() => import("./containers/Risk"));
 const TermsOfUse = React.lazy(() => import("./containers/Terms"));
 const FAQ = React.lazy(() => import("./containers/FAQ"));
@@ -53,6 +55,8 @@ const App = observer(() => {
             <Route exact path="/maker" render={props =>(renderPage(props, Dashboard))} />
             <Route exact path="/compound" render={props =>(renderPage(props, Compound))} />
             <Route exact path="/liquity" render={props =>(renderPage(props, Liquity))} />
+            <Route exact path="/liquity-leagacy" render={props =>(renderPage(props, LiquityLegacy))} />
+            <Route exact path="/vesta" render={props =>(renderPage(props, Vesta))} />
             <Route exact path="/faq" render={props =>(renderPage(props, FAQ))} />
             <Route exact path="/terms" render={props =>(renderPage(props, TermsOfUse))} />
             <Route exact path="/risk" render={props =>(renderPage(props, Risk))} />

src/components/Sidebar.js

@@ -7,6 +7,7 @@ import Discord from "../assets/discord.svg";
 import AAVELogo from "../assets/aav-ewhite-logo.svg";
 import CompoundLogo from "../assets/compound-logo.svg";
 import LiquityLogo from "../assets/liquity-logo.svg";
+import VestaLogo from "../assets/vesta-logo.svg";
 import MakerLogo from "../assets/logo-maker-white.svg";
 import HundredLogo from "../assets/hundred-logo.svg";
 import MigrationModal from "./modals/MigrationModal";
@@ -134,14 +135,22 @@ class Sidebar extends Component {
                 <img src={LiquityLogo} />
                 {false && <small>(Testnet)</small>}
               </div>
-
+              <div 
+                className={`product link-accesible ${
+                  pathname === "/vesta" &&
+                  "selected"
+                }`}
+                onClick={() => this.handleItemSelect("vesta")}>
+                <img src={VestaLogo} />
+                <small>Testnet</small>
+              </div>
               <div className="product">
                 <a href="https://hundred.finance" target="_blank">
                   <img src={HundredLogo} />
                 </a>
               </div>
               <div className="ln group">
-                <small>Lending</small>
+                <small>Legacy</small>
               </div>
               <div
                 className={`product link-accesible ${
@@ -160,6 +169,16 @@ class Sidebar extends Component {
                 onClick={() => this.handleItemSelect("compound")}>
                 <img src={CompoundLogo} />
               </div>
+
+              <div 
+                className={`product link-accesible ${
+                  pathname === "/liquity-leagacy" &&
+                  "selected"
+                }`}
+                onClick={() => this.handleItemSelect("liquity-leagacy")}>
+                <img src={LiquityLogo} />
+                <small>(Deprecated)</small>
+              </div>
             </div>
             <div className="ln"> </div>
             <div

src/components/Tvl.js

@@ -7,6 +7,7 @@ import {device} from "../screenSizes";
 import mainStore, {toCommmSepratedString} from "../stores/main.store"
 import mainCompStore from "../stores/main.comp.store"
 import liquityStore from "../stores/main.liquity.store"
+import mainHundredStore from "../stores/main.hundred.store"
 import AnimateNumberChange from "./style-components/AnimateNumberChange"
 import TvlTooltip from "./TvlTooltip"
 
@@ -152,8 +153,8 @@ class Tvl extends Component {
     render() {
         const { tvlNumeric: compTvl } = mainCompStore
         const { tvlUsdNumeric: makerTvl } = mainStore
-        const { liquityTvlNumeric: liquityTvl, othersTvlNumeric } = liquityStore
-        const tvl = (compTvl + makerTvl + liquityTvl + othersTvlNumeric) 
+        const { liquityTvlNumeric: liquityTvl } = liquityStore
+        const tvl = (compTvl + makerTvl + liquityTvl + mainHundredStore.TVL) 
        return (
            <div>
                <TvlBox>

src/components/TvlTooltip.js

@@ -6,6 +6,7 @@ import mainStore from "../stores/main.store"
 import apyStore from "../stores/apy.store"
 import {toCommmSepratedString} from '../lib/Utils'
 import liquityStore from "../stores/main.liquity.store"
+import mainHundredStore from "../stores/main.hundred.store"
 
 const ToolTipLine = styled.div`
     min-width: 160px;
@@ -33,7 +34,8 @@ const ToolTipTitle = styled.div`
 class TvlTooltip extends React.Component {
 
   render() {
-    const { liquityTvlNumeric, othersTvlNumeric } = liquityStore
+    const { liquityTvlNumeric } = liquityStore
+    const totalDeposits = parseFloat(apyStore.totalCollateral) + liquityTvlNumeric + mainHundredStore.TVL
     return (
       <span className="tooltip-container">
         <a data-tip data-for="tvl-tooltip">
@@ -42,16 +44,12 @@ class TvlTooltip extends React.Component {
         <ReactTooltip id="tvl-tooltip" className="react-tooltip-custom" effect='solid' type="light" place="right">
           <ToolTipLine>
             <div> total deposits: </div>
-            <div> ${toCommmSepratedString(parseFloat(apyStore.totalCollateral).toFixed(2))} </div>
+            <div> ${toCommmSepratedString(parseFloat(totalDeposits).toFixed(2))} </div>
           </ToolTipLine>
           <ToolTipLine>
             <div> total debt: </div>
             <div> ${toCommmSepratedString(parseFloat(apyStore.totalDebt).toFixed(2))} </div>
           </ToolTipLine>
-          <ToolTipLine>
-            <div> number of users: </div>
-            <div> {apyStore.totalUsers} </div>
-          </ToolTipLine>
 
           <ToolTipTitle>
             <span> Maker </span>
@@ -65,10 +63,6 @@ class TvlTooltip extends React.Component {
             <div> debt: </div>
             <div> ${toCommmSepratedString(parseFloat(apyStore.makerTotalDebt).toFixed(2))} </div>
           </ToolTipLine>
-          <ToolTipLine withTab>
-            <div> users: </div>
-            <div> {apyStore.makerUsers} </div>
-          </ToolTipLine>
 
           <ToolTipTitle>
             <span> Compound </span>
@@ -82,21 +76,25 @@ class TvlTooltip extends React.Component {
             <div>  debt: </div>
             <div> ${toCommmSepratedString(parseFloat(apyStore.compoundTotalDebt).toFixed(2))} </div>
           </ToolTipLine>
-          <ToolTipLine withTab>
-            <div> users: </div>
-            <div> {apyStore.compoundUsers} </div>
-          </ToolTipLine>
           <ToolTipTitle>
             <span> Liquity </span>
             <span>  </span>
           </ToolTipTitle>
           <ToolTipLine withTab>
-            <div style={{textTransform: "none"}}>bprotocol.org: </div>
+            <div style={{textTransform: "none"}}>Deposits: </div>
             <div> ${toCommmSepratedString((liquityTvlNumeric).toFixed(2))} </div>
           </ToolTipLine>
+          <ToolTipTitle>
+            <span> Hundred </span>
+            <span>  </span>
+          </ToolTipTitle>
+          <ToolTipLine withTab>
+            <div style={{textTransform: "none"}}> Arbitrum: </div>
+            <div> ${toCommmSepratedString((mainHundredStore.hundredTvlArbitrum).toFixed(2))} </div>
+          </ToolTipLine>
           <ToolTipLine withTab>
-            <div style={{textTransform: "none"}}> pickle.finance & others: </div>
-            <div> ${toCommmSepratedString((othersTvlNumeric).toFixed(2))} </div>
+            <div style={{textTransform: "none"}}> Fantom: </div>
+            <div> ${toCommmSepratedString((mainHundredStore.hundredTvlFantom).toFixed(2))} </div>
           </ToolTipLine>
         </ReactTooltip>
       </span>

src/containers/FarmInfo.js

@@ -13,6 +13,7 @@ import bproStore, {uBproStore} from "../stores/bpro.store"
 import mainStore from "../stores/main.store"
 import mainCompStore from "../stores/main.comp.store"
 import liquityStore from "../stores/main.liquity.store"
+import mainHundredStore from "../stores/main.hundred.store"
 import userStore from "../stores/user.store"
 import instaStore, {bproInstaStores} from "../stores/insta.store"
 import BproClaimModal from "../components/modals/BproClaimModal"
@@ -179,8 +180,8 @@ class FarmInfo extends Component {
     const params = qs.parse(search, { ignoreQueryPrefix: true })
     const { tvlNumeric: compTvl } = mainCompStore
     const { tvlUsdNumeric: makerTvl } = mainStore
-    const { liquityTvlNumeric: liquityTvl, othersTvlNumeric } = liquityStore
-    const tvl = parseInt((compTvl + makerTvl + liquityTvl + othersTvlNumeric) / 1000000)
+    const { liquityTvlNumeric: liquityTvl } = liquityStore
+    const tvl = parseInt((compTvl + makerTvl + liquityTvl + mainHundredStore.TVL) / 1000000)
     const instaAccounts = instaStore.accounts
 
     if(params.inIframe){

src/containers/Liquity.js

@@ -15,7 +15,7 @@ class Liquity extends Component {
   render() {
     return (
       <iframe 
-        src="/liquity-app/"
+        src="/liquity-app-v2/"
         width="100%"
         height="100%"
         frameBorder="0"

src/containers/LiquityLegacy.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import {observer} from "mobx-react"
+import routerStore from "../stores/router.store"
+
+class LiquityLegacy extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    routerStore.setRouteProps(this.props.history) 
+  }
+
+  render() {
+    return (
+      <iframe 
+        src="/liquity-app/"
+        width="100%"
+        height="100%"
+        frameBorder="0"
+      />
+    );
+  }
+}
+
+export default observer(LiquityLegacy)

src/containers/Vesta.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import {observer} from "mobx-react"
+import routerStore from "../stores/router.store"
+
+class Vesta extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    routerStore.setRouteProps(this.props.history) 
+  }
+
+  render() {
+    return (
+      <iframe 
+        src="/vesta-app/"
+        width="100%"
+        height="100%"
+        frameBorder="0"
+      />
+    );
+  }
+}
+
+export default observer(Vesta)