Feature/side bar vesta

src/App.js

@@ -19,6 +19,7 @@ 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"));
@@ -54,6 +55,7 @@ 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))} />

src/components/Sidebar.js

@@ -144,14 +144,13 @@ class Sidebar extends Component {
                 <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 ${
@@ -170,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/stores/apy.store.js

@@ -10,6 +10,7 @@ import {BP_API} from "../common/constants"
 import { getUserLiquityTvl } from "../lib/liquity.interface"
 import userStore from "../stores/user.store"
 import liquityStore from "../stores/main.liquity.store"
+import mainHundredStore from "../stores/main.hundred.store"
 
 const {toBN, fromWei, toWei} = Web3.utils
 const _1e18 = toBN("10").pow(toBN("18"))
@@ -85,7 +86,7 @@ export class ApyStore {
     const liquityColl = await getUserLiquityTvl(userStore.web3, userStore.networkType, userStore.user)
     this.liquityUserCollateral = fromWei(liquityColl)
     await liquityStore.dataPromise
-    this.liquityTotalCollateral = liquityStore.liquityTvlNumeric + liquityStore.othersTvlNumeric
+    this.liquityTotalCollateral = liquityStore.liquityTvlNumeric
   }
 
   getUserCollateral = async () => {

src/stores/main.hundred.store.js

@@ -0,0 +1,42 @@
+import { makeAutoObservable, runInAction } from "mobx"
+import axios from "axios"
+
+/**
+ * Main Store is desigend for general purpose app data
+ */
+class MainHundredStore {
+
+    hundredTvlFantom = 0
+    hundredTvlArbitrum = 0
+
+    get TVL(){
+        return this.hundredTvlFantom + this.hundredTvlArbitrum
+    }
+
+    constructor (){
+        makeAutoObservable(this)
+        this.dataPromise = this.fetchGeneralDappData()
+    }
+
+    async fetchGeneralDappData () {
+        try{
+            await this.fetchBammUsd()
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    async fetchBammUsd () {
+        try{
+            const {data} = await axios.get('https://api.llama.fi/protocol/b.protocol')
+            const {currentChainTvls} = data
+            debugger
+            this.hundredTvlArbitrum = currentChainTvls.Arbitrum
+            this.hundredTvlFantom = currentChainTvls.Fantom
+        } catch (err) {
+            console.error(err)
+        }
+    }
+}
+
+export default new MainHundredStore()

src/stores/main.liquity.store.js

@@ -11,7 +11,6 @@ const { fromWei} = Web3.utils
 class MainLiquityStore {
 
     liquityTvlNumeric = 0
-    othersTvlNumeric = 0
 
     constructor (){
         makeAutoObservable(this)
@@ -34,8 +33,7 @@ class MainLiquityStore {
             return parseFloat(fromWei(lusd))
         }))
         runInAction(()=>{
-            this.liquityTvlNumeric = bammsTvls.shift() || 0
-            this.othersTvlNumeric = bammsTvls.reduce((x, y)=> x + y) 
+            this.liquityTvlNumeric = bammsTvls.reduce((x, y)=> x + y) 
         })
     }
 }