Bug fix/farm info claim

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/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()

src/stores/insta.store.js

@@ -7,10 +7,8 @@ import userStore from "./user.store"
 import { BproStore } from './bpro.store'
 import { ApyStore } from './apy.store'
 
-export const bproInstaStores = {}
-
 class InstaStore {
-  accounts = []
+  bproInstaStores = {}
 
   constructor (){
     makeAutoObservable(this)
@@ -28,14 +26,12 @@ class InstaStore {
     const { web3, networkType, user } = userStore
     const accounts = await getAccounts(web3, networkType, user)
     accounts.forEach(account => {
-      bproInstaStores[account] = new BproStore('uBPRO-BIP4', account)
-      bproInstaStores[account].onUserConnect()
-    })
-    runInAction(()=> {
-      this.accounts = accounts
+      const store = new BproStore('uBPRO-BIP4', account)
+      store.onUserConnect()
+      this.bproInstaStores[account] = store
     })
   }
-    
-}
+} 
+
 
 export default new InstaStore()

src/stores/user.store.js

@@ -33,11 +33,16 @@ class UserStore {
     walletType = null
     provider
     connecting = false
+    userAgreesToTerms = false
 
     constructor (){
         makeAutoObservable(this)
     }
 
+    iAgree = () => {
+        this.userAgreesToTerms = true
+    }
+
     selectWallet = async () => {
         return new Promise((resolve, reject) =>{
             this.walletSelectionResult = null