updated side bar

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,5 +1,6 @@
 {
   "name": "bprotocol-react-client",
+  "version": "1.0.29",
   "version": "1.0.27",
   "private": true,
   "dependencies": {

src/App.js

@@ -20,6 +20,7 @@ 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"));
@@ -55,6 +56,7 @@ const App = observer(() => {
             <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";
@@ -76,8 +77,9 @@ class Sidebar extends Component {
               ? 
                 <div >
                   <MakerMigration>
-                    <div className="ln"> </div>
                     { !params.export && userInfo && userInfo.makerdaoCdpInfo.hasCdp && (
+                      <React.Fragment>
+                      <div className="ln"> </div>
                       <div>
                         <div className="cdp-convert">
                           {makerStoreNames.map(makerCollType => <MakerMigrationButton key={makerCollType} makerCollType={makerCollType}/>)}
@@ -101,6 +103,7 @@ class Sidebar extends Component {
                           </div>
                         </div>
                       </div>
+                      </React.Fragment>
                     )}
                     {params.export && 
                       <div className="container">
@@ -132,7 +135,16 @@ class Sidebar extends Component {
                 }`}
                 onClick={() => this.handleItemSelect("liquity")}>
                 <img src={LiquityLogo} />
-                {false && <small>(Testnet)</small>}
+                {false && <small>(Arbitrum)</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">

src/components/modals/BproClaimModal.js

@@ -14,6 +14,7 @@ import XIcon from "../../assets/red-x-icon.svg"
 import TermsAndConditionsModal from "./TermsAndConditionsModal"
 import AnimateNumericalString from "../../components/style-components/AnimateNumericalString"
 import {stringToFixed} from '../../lib/Utils'
+import userStore from "../../stores/user.store"
 
 
 const Container = styled.div`
@@ -177,7 +178,7 @@ class BproClaimModal extends Component {
     const {actionState} = this.state
     const claimed = actionState == "done"
     const balance = stringToFixed(totalBproNotInWallet, 9)
-    const agreed = bproStore.userAgreesToTerms
+    const agreed = userStore.userAgreesToTerms
     const disabled = claimable == "0"
     return (
       <Container>

src/components/modals/TermsAndConditionsModal.js

@@ -10,7 +10,7 @@ import {device} from "../../screenSizes"
 import LoadingRing from "../LoadingRing"
 import BpLoader from "../../components/style-components/BpLoader"
 import VIcon from "../../assets/v-icon.svg"
-import bproStore, {uBproStore} from "../../stores/bpro.store"
+import userStore from "../../stores/user.store"
 import TermsAndConditionsContent from "./TermsAndConditionContent"
 import BproClaimModal from "./BproClaimModal"
 
@@ -102,9 +102,7 @@ class TermsAndConditionsModal extends Component {
   }
 
   iAgree = () => {
-    // todo: 
-    bproStore.iAgree()
-    uBproStore.iAgree()
+    userStore.iAgree()
     const noWrapper = true
     EventBus.$emit('show-modal', <BproClaimModal {...this.props}/>, noWrapper);
   }

src/containers/FarmInfo.js

@@ -15,7 +15,7 @@ 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 instaStore from "../stores/insta.store"
 import BproClaimModal from "../components/modals/BproClaimModal"
 import EventBus from "../lib/EventBus"
 import ConnectButton from "../components/ConnectButton";
@@ -112,11 +112,11 @@ export const Cell = styled(Text)`
   }
 `
 
-export const ANS = props => {
+export const ANS = observer((props) => {
   return (
     <AnimateNumericalString val={props.val} decimals={props.decimal || 3}>  </AnimateNumericalString>
   )
-}
+})
 
 export const Button = styled.div`
   transition: all 0.3s ease-in-out;
@@ -180,6 +180,7 @@ class FarmInfo extends Component {
     const params = qs.parse(search, { ignoreQueryPrefix: true })
     const { tvlNumeric: compTvl } = mainCompStore
     const { tvlUsdNumeric: makerTvl } = mainStore
+
     const { liquityTvlNumeric: liquityTvl } = liquityStore
     const tvl = parseInt((compTvl + makerTvl + liquityTvl + mainHundredStore.TVL) / 1000000)
     const instaAccounts = instaStore.accounts
@@ -236,26 +237,26 @@ class FarmInfo extends Component {
                   </Flex>
               </ContentBox>
             </div>
-            <div>
+            {Object.entries(instaStore.bproInstaStores).map(([account, store]) => <div>
               <Title>
-                INSTADAPP account {instaAccount}
+                INSTADAPP account {account}
               </Title>
 
               <ContentBox>
                 <Flex justifyBetween>
                     <Text>Claimable uBPRO-BIP4</Text>
-                    <Text><ANS val={instaBproStore ? instaBproStore.claimable : "0"}/></Text>
+                    <Text><ANS val={store.claimable} decimal={3}/></Text>
                   </Flex>
 
                   <Flex justifyAround>
-                    <Button className={instaBproStore ? "" : "disabled" } onClick={()=> this.openClaimModal(instaBproStore)}>
+                    <Button className={store ? "" : "disabled" } onClick={()=> this.openClaimModal(store)}>
                       <span>
                         CLAIM uBPRO-BIP4
                       </span>
                     </Button>
                   </Flex>
               </ContentBox>
-            </div>
+            </div>)}
             <div>
               <Title>
                 <a target="_blank" href="https://forum.bprotocol.org/t/bip-1-bpro-tokenomics-change-reward-liquidity-providers-on-sushiswap-and-uniswap/82">

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)

src/stores/bpro.store.js

@@ -17,7 +17,6 @@ const {toBN, toWei, fromWei} = Web3.utils
 
 export class BproStore {
 
-  userAgreesToTerms = false
   smartContractScore = null
   claimed = "0"
   claimable = "0"
@@ -41,12 +40,11 @@ export class BproStore {
     this.bproType = type
     this.instaUser = instaUser
     makeAutoObservable(this)
-    this.init()
   }
 
   onUserConnect = async () => {
     try{
-      await !this.smartContractScore ? this.init() : Promise.resolve(this.smartContractScore)
+      await this.init()
       await Promise.all([
         this.getClaimableAmount(),
         this.getUnclaimableAmount(),
@@ -80,7 +78,7 @@ export class BproStore {
       let {user, web3} = userStore
       user = this.instaUser || user
       const claimed = await getClaimedAmount(web3, user, this.bproType)
-      
+
       console.log(claimed)
       const {amount} = this.smartContractScore.userData[user.toLowerCase()] || {}
       if(amount){
@@ -128,29 +126,29 @@ export class BproStore {
     user = this.instaUser || user
     const {cycle, index, amount, proof} = this.smartContractScore.userData[user.toLowerCase()]
     const tx = claimBpro(web3, user, cycle, index.toString(), amount, proof, this.bproType)
-    await ApiAction(tx, user, web3, 0)
+    await ApiAction(tx, userStore.user, web3, 0)
     await this.onUserConnect() // refresh state
   }
 
   init = async () => {
     let url
     try{
+      if(this.smartContractScore && this.smartContractScore.userData){
+        return Promise.resolve(this.smartContractScore)
+      }
       const web3 = new Web3(BP_API)
       // todo fetch data
       const {contentHash} = await getBproDistribution(web3, this.bproType)
       url = "https://cloudflare-ipfs.com/ipfs/" + contentHash
       const res = await fetch(url)
       this.smartContractScore = await res.json()
+      return this.smartContractScore
     } catch (err) {
       console.error("failed to fetch score data from: ", url)
       console.error(err)
     }
   }
 
-  iAgree = () => {
-    this.userAgreesToTerms = true
-  }
-
   showClaimBproPopup = () => {
     if(!userStore.loggedIn){
       userStore.showConnect()