release staging ren announcment

src/components-v2/NetworkURLManager/index.tsx

@@ -1,4 +1,5 @@
 import usePrevious from 'hooks/usePrevious';
+import { runInAction } from 'mobx';
 import { StoreContext } from 'mobx/stores/store-context';
 import { observer } from 'mobx-react-lite';
 import React, { useContext, useEffect } from 'react';
@@ -21,10 +22,12 @@ const NetworkURLManager = (): JSX.Element => {
     }
 
     if (chainId !== previousChainId && wallet.isConnected) {
-      router.queryParams = {
-        ...router.queryParams,
-        chain: NETWORK_IDS_TO_NAMES[chainId as NETWORK_IDS],
-      };
+      runInAction(() => {
+        router.queryParams = {
+          ...router.queryParams,
+          chain: NETWORK_IDS_TO_NAMES[chainId as NETWORK_IDS],
+        };
+      });
     }
   }, [chainId, previousChainId, router, wallet]);
 

src/components-v2/landing/VaultListTitle.tsx

@@ -28,10 +28,10 @@ const VaultListTitle = observer(() => {
   return (
     <>
       <Typography className={classes.title} component="h1">
-        Do Less & Earn More with BadgerDAO
+        Do Less & Earn More
       </Typography>
       <Typography className={classes.subtitle}>
-        Deposit to earn{' '}
+        Deposit to earn
         <Link href="#" onClick={() => setOpenModal(true)} color="primary">
           Yield-Bearing Rewards
         </Link>{' '}

src/components/IbBTC/Mint.tsx

@@ -79,7 +79,7 @@ export const Mint = observer((): JSX.Element => {
   const classes = useStyles();
 
   const {
-    ibBTCStore: { ibBTC, mintFeePercent, mintOptions, mintRates, tokenBalances, initialized },
+    ibBTCStore: { ibBTC, mintFeePercent, mintOptions, mintRates, tokenBalances },
     transactions,
     wallet,
     sdk,

src/components/IbBTC/Redeem.tsx

@@ -62,7 +62,7 @@ export const Redeem = observer((): JSX.Element => {
   const classes = useStyles();
 
   const {
-    ibBTCStore: { redeemOptions, ibBTC, redeemFeePercent, redeemRates, initialized },
+    ibBTCStore: { redeemOptions, ibBTC, redeemFeePercent, redeemRates },
     transactions,
     wallet,
     sdk,

src/config/constants.ts

@@ -81,8 +81,8 @@ function stringHash(input?: string): string | undefined {
 
 // Message should be defined or explicitly undefined.
 export const APP_NEWS_MESSAGE =
-  'As of Decemeber 20th the Ren 1.0 network has been shut down and users are no longer able to bridge renBTC back to its native network. As a result, it is recommended that Badger users remove exposure to renBTC immediately. Learn How. ';
+  'The shutdown of the Ren 1.0 network is imminent. Once complete,  users will no longer able to bridge renBTC back to its native network. As a result, it is recommended that Badger users remove exposure to renBTC immediately.';
 // Text & URL should be defined or explicitly undefined.
-export const APP_NEWS_URL_TEXT = 'Here';
+export const APP_NEWS_URL_TEXT = 'Learn How.';
 export const APP_NEWS_URL = 'https://docs.badger.com/assistants/removing-exposure-to-renbtc';
 export const APP_NEWS_STORAGE_HASH = stringHash(APP_NEWS_MESSAGE);

src/mobx/stores/InfluenceVaultStore.ts

@@ -1,7 +1,7 @@
 import { ChartTimeFrame, ONE_DAY_SECONDS, ONE_YEAR_MS, VaultDTOV3, YieldEvent, YieldType } from '@badger-dao/sdk';
 import { getInfluenceVaultConfig } from 'components-v2/InfluenceVault/InfluenceVaultUtil';
 import { formatUnits, parseUnits } from 'ethers/lib/utils';
-import { extendObservable } from 'mobx';
+import { extendObservable, runInAction } from 'mobx';
 import { EmissionRoundToken, GraphObject, InfluenceVaultEmissionRound } from 'mobx/model/charts/influence-vaults-graph';
 import { ETH_DEPLOY } from 'mobx/model/network/eth.network';
 import { InfluenceVaultConfig, InfluenceVaultData } from 'mobx/model/vaults/influence-vault-data';
@@ -23,14 +23,16 @@ class InfluenceVaultStore {
 
   async init(token: string) {
     const vault = this.store.vaults.getVault(token);
-    this.influenceVaults[token] = {
-      vault: vault,
-      vaultChartData: null,
-      emissionsSchedules: null,
-      processingChartData: true,
-      processingEmissions: true,
-      swapPercentage: '',
-    };
+    runInAction(() => {
+      this.influenceVaults[token] = {
+        vault: vault,
+        vaultChartData: null,
+        emissionsSchedules: null,
+        processingChartData: true,
+        processingEmissions: true,
+        swapPercentage: '',
+      };
+    });
     if (vault !== undefined)
       await Promise.all([
         this.loadChartInfo(ChartTimeFrame.Week, vault),
@@ -55,12 +57,19 @@ class InfluenceVaultStore {
 
   async loadChartInfo(timeframe: ChartTimeFrame, vault: VaultDTOV3) {
     try {
-      this.influenceVaults[vault.vaultToken].processingChartData = true;
-      this.influenceVaults[vault.vaultToken].vaultChartData = await this.store.vaultCharts.search(vault, timeframe);
+      runInAction(() => {
+        this.influenceVaults[vault.vaultToken].processingChartData = true;
+      });
+      const vaultChartData = await this.store.vaultCharts.search(vault, timeframe);
+      runInAction(async () => {
+        this.influenceVaults[vault.vaultToken].vaultChartData = vaultChartData;
+      });
     } catch (error) {
       console.error(error);
     } finally {
-      this.influenceVaults[vault.vaultToken].processingChartData = false;
+      runInAction(() => {
+        this.influenceVaults[vault.vaultToken].processingChartData = false;
+      });
     }
   }
 
@@ -74,7 +83,9 @@ class InfluenceVaultStore {
     try {
       const { roundStart } = config;
       const { api } = this.store;
-      this.influenceVaults[vault.vaultToken].processingEmissions = true;
+      runInAction(() => {
+        this.influenceVaults[vault.vaultToken].processingEmissions = true;
+      });
 
       // TODO: if we do not even bother showing rounds with emissions, should we include this?
       const emissionSchedules = await api.loadSchedule(vault.address, false);
@@ -126,11 +137,15 @@ class InfluenceVaultStore {
       const totalYieldEvents = yieldEvents.concat(emissionYieldEvents).filter((e) => e.timestamp >= roundStart * 1000);
       const bucketedEvents = await this.#bucketYieldEvents(totalYieldEvents, vault, config);
 
-      this.influenceVaults[vault.vaultToken].emissionsSchedules = bucketedEvents;
+      runInAction(() => {
+        this.influenceVaults[vault.vaultToken].emissionsSchedules = bucketedEvents;
+      });
     } catch (error) {
       console.error(error);
     } finally {
-      this.influenceVaults[vault.vaultToken].processingEmissions = false;
+      runInAction(() => {
+        this.influenceVaults[vault.vaultToken].processingEmissions = false;
+      });
     }
   }
 
@@ -149,7 +164,9 @@ class InfluenceVaultStore {
     const estimatedSwap = await curvePool.get_dy(1, 0, parseUnits(String(swapAmount), 'ether'));
     const swap = Number(formatUnits(estimatedSwap, 'ether'));
     const percentage = swap / swapAmount;
-    this.influenceVaults[vault.vaultToken].swapPercentage = `${(percentage * 100).toFixed(2)}%`;
+    runInAction(() => {
+      this.influenceVaults[vault.vaultToken].swapPercentage = `${(percentage * 100).toFixed(2)}%`;
+    });
   }
 
   async #bucketYieldEvents(

src/mobx/stores/NetworkStore.ts

@@ -3,7 +3,7 @@ import { DEBUG } from 'config/environment';
 import { defaultNetwork } from 'config/networks.config';
 import { DEFAULT_RPC } from 'config/rpc.config';
 import { BigNumber } from 'ethers';
-import { action, makeObservable, observable } from 'mobx';
+import { action, makeObservable, observable, runInAction } from 'mobx';
 import { RootStore } from 'mobx/stores/RootStore';
 
 import { NETWORK_IDS, NETWORK_IDS_TO_NAMES } from '../../config/constants';
@@ -88,8 +88,11 @@ export class NetworkStore {
         }
       }
     }
-    this.network = config.network;
-    this.config = config;
+    runInAction(() => {
+      this.network = config.network;
+      this.config = config;
+    });
+
     if (!this.store.wallet.isConnected) {
       await this.store.updateNetwork(config.chainId);
     } else {

src/mobx/stores/PricesStore.ts

@@ -1,6 +1,6 @@
 import { PriceSummary } from '@badger-dao/sdk';
 import { ethers } from 'ethers';
-import { action, makeAutoObservable } from 'mobx';
+import { action, makeAutoObservable, runInAction } from 'mobx';
 
 import { RootStore } from './RootStore';
 
@@ -20,10 +20,12 @@ export default class PricesStore {
   loadPrices = action(async (): Promise<void> => {
     const prices = await this.store.api.loadPrices();
     if (prices) {
-      this.priceCache = {
-        ...this.priceCache,
-        ...prices,
-      };
+      runInAction(() => {
+        this.priceCache = {
+          ...this.priceCache,
+          ...prices,
+        };
+      });
     }
   });
 }

src/mobx/stores/TreeStore.ts

@@ -1,6 +1,6 @@
 import { RewardTree } from '@badger-dao/sdk';
 import { BigNumber } from 'ethers';
-import { action, makeAutoObservable } from 'mobx';
+import { action, makeAutoObservable, runInAction } from 'mobx';
 import { TokenBalances } from 'mobx/model/account/user-balances';
 import { TokenBalance } from 'mobx/model/tokens/token-balance';
 
@@ -49,9 +49,11 @@ export class TreeStore {
         sdk.rewards.badgerTree.currentCycle(),
         sdk.rewards.badgerTree.lastPublishTimestamp(),
       ]);
-      this.lastUpdateTimestamp = lastTreeUpdate.toNumber();
-      this.lastUpdate = this.calculateDelta(this.lastUpdateTimestamp);
-      this.cycle = treeCycle.toNumber();
+      runInAction(() => {
+        this.lastUpdateTimestamp = lastTreeUpdate.toNumber();
+        this.lastUpdate = this.calculateDelta(this.lastUpdateTimestamp);
+        this.cycle = treeCycle.toNumber();
+      });
     } catch (err) {
       console.error({
         err,
@@ -88,7 +90,9 @@ export class TreeStore {
           const token = tokenInformation[claimableTokens[i]];
           const amount = claimableAmounts[i];
           const price = prices.getPrice(token.address);
-          this.claimable[token.address] = new TokenBalance(token, amount, price);
+          runInAction(() => {
+            this.claimable[token.address] = new TokenBalance(token, amount, price);
+          });
         }
       } catch (err) {
         console.error({
@@ -98,7 +102,9 @@ export class TreeStore {
       }
     }
 
-    this.loadingTree = false;
+    runInAction(() => {
+      this.loadingTree = false;
+    });
   }
 
   reset() {

src/mobx/stores/UserStore.ts

@@ -1,6 +1,6 @@
 import { Account, BouncerType, MerkleProof, VaultCaps, VaultDTO, VaultState } from '@badger-dao/sdk';
 import { BigNumber, ethers } from 'ethers';
-import { action, makeAutoObservable } from 'mobx';
+import { action, makeAutoObservable, runInAction } from 'mobx';
 import { TokenBalances } from 'mobx/model/account/user-balances';
 import { TokenBalance } from 'mobx/model/tokens/token-balance';
 
@@ -101,7 +101,9 @@ export default class UserStore {
   private loadAccountDetails = action(async (address: string): Promise<void> => {
     const accountDetails = await this.store.api.loadAccount(address);
     if (accountDetails) {
-      this.accountDetails = accountDetails;
+      runInAction(() => {
+        this.accountDetails = accountDetails;
+      });
     }
   });
 
@@ -117,36 +119,50 @@ export default class UserStore {
       return;
     }
 
-    this.loadingBalances = true;
+    runInAction(() => {
+      this.loadingBalances = true;
+    });
+
+    // this.loadingBalances = true;
 
     try {
       const balances = await sdk.tokens.loadBalances(Object.keys(vaults.tokenConfig));
-      this.balances = Object.fromEntries(
-        Object.entries(balances).map((b) => {
-          const [token, balance] = b;
-          const price = prices.getPrice(token);
-          const tokenInfo = vaults.getToken(token);
-          const tokenBalance = new TokenBalance(tokenInfo, balance, price);
-          return [token, tokenBalance];
-        }),
-      );
+      runInAction(() => {
+        this.balances = Object.fromEntries(
+          Object.entries(balances).map((b) => {
+            const [token, balance] = b;
+            const price = prices.getPrice(token);
+            const tokenInfo = vaults.getToken(token);
+            const tokenBalance = new TokenBalance(tokenInfo, balance, price);
+            return [token, tokenBalance];
+          }),
+        );
+      });
 
       const targetVaults = this.store.vaults.vaultOrder
         .slice()
         .filter((v) => v.state === VaultState.Guarded || v.state === VaultState.Experimental);
       await Promise.all(
         targetVaults.map(async (v) => {
-          this.vaultCaps[v.vaultToken] = await this.store.sdk.vaults.getDepositCaps({
+          const vaultCap = await this.store.sdk.vaults.getDepositCaps({
             address: v.vaultToken,
             user: sdk.address,
           });
+          runInAction(() => {
+            this.vaultCaps[v.vaultToken] = vaultCap;
+          });
+          vaultCap;
         }),
       );
 
-      this.loadingBalances = false;
+      runInAction(() => {
+        this.loadingBalances = false;
+      });
     } catch (err) {
       console.error(err);
-      this.loadingBalances = false;
+      runInAction(() => {
+        this.loadingBalances = false;
+      });
     }
   });