From 28d2dc49b54415d48a634286846b5f7d85421eb7 Mon Sep 17 00:00:00 2001 From: mrbasado Date: Tue, 20 Dec 2022 18:46:22 -0600 Subject: [PATCH 1/3] update app banner text --- src/components-v2/landing/VaultListTitle.tsx | 4 ++-- src/tests/__snapshots__/Landing.test.tsx.snap | 9 +++------ 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components-v2/landing/VaultListTitle.tsx b/src/components-v2/landing/VaultListTitle.tsx index d0268d6e2..621536383 100644 --- a/src/components-v2/landing/VaultListTitle.tsx +++ b/src/components-v2/landing/VaultListTitle.tsx @@ -28,10 +28,10 @@ const VaultListTitle = observer(() => { return ( <> - Do Less & Earn More with BadgerDAO + Do Less & Earn More - Deposit to earn{' '} + Deposit to earn setOpenModal(true)} color="primary"> Yield-Bearing Rewards {' '} diff --git a/src/tests/__snapshots__/Landing.test.tsx.snap b/src/tests/__snapshots__/Landing.test.tsx.snap index a0367bfd4..831c73185 100644 --- a/src/tests/__snapshots__/Landing.test.tsx.snap +++ b/src/tests/__snapshots__/Landing.test.tsx.snap @@ -8,13 +8,12 @@ exports[`Landing Renders correctly 1`] = `

- Do Less & Earn More with BadgerDAO + Do Less & Earn More

Deposit to earn - - Do Less & Earn More with BadgerDAO + Do Less & Earn More

Deposit to earn - - Do Less & Earn More with BadgerDAO + Do Less & Earn More

Deposit to earn - Date: Wed, 21 Dec 2022 09:55:16 -0600 Subject: [PATCH 2/3] mobx linting (#2471) * mobx strict mode lint cleanup Co-authored-by: Anil Kumar Rai --- src/components-v2/NetworkURLManager/index.tsx | 11 +++-- src/components/IbBTC/Mint.tsx | 2 +- src/components/IbBTC/Redeem.tsx | 2 +- src/mobx/stores/InfluenceVaultStore.ts | 49 +++++++++++++------ src/mobx/stores/NetworkStore.ts | 9 ++-- src/mobx/stores/PricesStore.ts | 12 +++-- src/mobx/stores/TreeStore.ts | 18 ++++--- src/mobx/stores/UserStore.ts | 46 +++++++++++------ src/mobx/stores/VaultStore.ts | 33 ++++++++----- src/mobx/stores/WalletStore.ts | 15 +++--- src/mobx/stores/ibBTCStore.ts | 12 +++-- 11 files changed, 137 insertions(+), 72 deletions(-) diff --git a/src/components-v2/NetworkURLManager/index.tsx b/src/components-v2/NetworkURLManager/index.tsx index f7d7654e2..6402583da 100644 --- a/src/components-v2/NetworkURLManager/index.tsx +++ b/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]); diff --git a/src/components/IbBTC/Mint.tsx b/src/components/IbBTC/Mint.tsx index 5759c5e1d..25725bed1 100644 --- a/src/components/IbBTC/Mint.tsx +++ b/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, diff --git a/src/components/IbBTC/Redeem.tsx b/src/components/IbBTC/Redeem.tsx index 481954185..a3dd5be2b 100644 --- a/src/components/IbBTC/Redeem.tsx +++ b/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, diff --git a/src/mobx/stores/InfluenceVaultStore.ts b/src/mobx/stores/InfluenceVaultStore.ts index ad5097183..5675c023f 100644 --- a/src/mobx/stores/InfluenceVaultStore.ts +++ b/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( diff --git a/src/mobx/stores/NetworkStore.ts b/src/mobx/stores/NetworkStore.ts index 2a3277526..361c7bb9d 100644 --- a/src/mobx/stores/NetworkStore.ts +++ b/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 { diff --git a/src/mobx/stores/PricesStore.ts b/src/mobx/stores/PricesStore.ts index 924e9ffdb..5483f1826 100644 --- a/src/mobx/stores/PricesStore.ts +++ b/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 => { const prices = await this.store.api.loadPrices(); if (prices) { - this.priceCache = { - ...this.priceCache, - ...prices, - }; + runInAction(() => { + this.priceCache = { + ...this.priceCache, + ...prices, + }; + }); } }); } diff --git a/src/mobx/stores/TreeStore.ts b/src/mobx/stores/TreeStore.ts index cc106f86a..a6cc58736 100644 --- a/src/mobx/stores/TreeStore.ts +++ b/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() { diff --git a/src/mobx/stores/UserStore.ts b/src/mobx/stores/UserStore.ts index df26c2433..0a50cfe95 100644 --- a/src/mobx/stores/UserStore.ts +++ b/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 => { 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; + }); } }); diff --git a/src/mobx/stores/VaultStore.ts b/src/mobx/stores/VaultStore.ts index 618416446..dbd244e4c 100644 --- a/src/mobx/stores/VaultStore.ts +++ b/src/mobx/stores/VaultStore.ts @@ -8,7 +8,7 @@ import { VaultState, } from '@badger-dao/sdk'; import { ethers } from 'ethers'; -import { action, makeAutoObservable } from 'mobx'; +import { action, makeAutoObservable, runInAction } from 'mobx'; import { TokenBalances } from 'mobx/model/account/user-balances'; import { Chain } from 'mobx/model/network/chain'; import { ProtocolSummaryCache } from 'mobx/model/system-config/protocol-summary-cache'; @@ -215,17 +215,23 @@ export default class VaultStore { async refresh(): Promise { const { network } = this.store.chain; if (network) { - this.initialized = false; + runInAction(() => { + this.initialized = false; + }); await Promise.all([this.loadVaults(network), this.loadTokens(network), this.loadAssets(network)]); - this.initialized = true; + runInAction(() => { + this.initialized = true; + }); } } loadVaults = action(async (chain = Network.Ethereum): Promise => { try { const vaults = await this.store.api.loadVaultsV3(); - this.vaultCache[chain] = Object.fromEntries(vaults.map((vault) => [vault.vaultToken, vault])); - this.slugCache[chain] = this.getVaultsSlugCache(vaults); + runInAction(() => { + this.vaultCache[chain] = Object.fromEntries(vaults.map((vault) => [vault.vaultToken, vault])); + this.slugCache[chain] = this.getVaultsSlugCache(vaults); + }); } catch (error) { console.error({ error, @@ -236,7 +242,10 @@ export default class VaultStore { loadTokens = action(async (chain = Network.Ethereum): Promise => { try { - this.tokenCache[chain] = await this.store.api.loadTokens(); + const tokens = await this.store.api.loadTokens(); + runInAction(() => { + this.tokenCache[chain] = tokens; + }); } catch (error) { // if (FLAGS.SDK_INTEGRATION_ENABLED) { // const tokensList = Array.from(this.vaultsDefinitions?.values() ?? []).map( @@ -249,11 +258,13 @@ export default class VaultStore { loadAssets = action(async (chain = Network.Ethereum): Promise => { const protocolSummary = await this.store.api.loadProtocolSummary(); - if (protocolSummary) { - this.protocolSummaryCache[chain] = protocolSummary; - } else { - this.protocolSummaryCache[chain] = null; - } + runInAction(() => { + if (protocolSummary) { + this.protocolSummaryCache[chain] = protocolSummary; + } else { + this.protocolSummaryCache[chain] = null; + } + }); }); canUserDeposit(vault: VaultDTO): boolean { diff --git a/src/mobx/stores/WalletStore.ts b/src/mobx/stores/WalletStore.ts index d5c1fc95a..f8b4333ed 100644 --- a/src/mobx/stores/WalletStore.ts +++ b/src/mobx/stores/WalletStore.ts @@ -1,6 +1,6 @@ import { NetworkConfig } from '@badger-dao/sdk'; import { Web3Provider } from '@ethersproject/providers'; -import { action, computed, makeObservable, observable } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import Web3Modal from 'web3modal'; import { getWeb3ModalProviders } from '../../config/wallets'; @@ -44,13 +44,16 @@ export class WalletStore { // extract information and pass it into our app, thank fuck const temporaryProvider = this.getLibrary(provider); const connectedNetwork = await temporaryProvider.getNetwork(); - this.provider = temporaryProvider; + const address = await temporaryProvider.getSigner().getAddress(); - // quickly render connection - provide address to the interface - this.address = await this.provider.getSigner().getAddress(); + runInAction(() => { + this.provider = temporaryProvider; + // quickly render connection - provide address to the interface + this.address = address; - // sync it up - this.store.chain.syncUrlNetworkId(); + // sync it up + this.store.chain.syncUrlNetworkId(); + }); // update piece wise app components await this.store.updateNetwork(connectedNetwork.chainId); diff --git a/src/mobx/stores/ibBTCStore.ts b/src/mobx/stores/ibBTCStore.ts index 385abd75d..5ca6b7c1a 100644 --- a/src/mobx/stores/ibBTCStore.ts +++ b/src/mobx/stores/ibBTCStore.ts @@ -2,7 +2,7 @@ import { formatBalance, Token } from '@badger-dao/sdk'; import addresses from 'config/ibBTC/addresses.json'; import { BadgerPeakSwap__factory } from 'contracts'; import { parseUnits } from 'ethers/lib/utils'; -import { action, makeAutoObservable } from 'mobx'; +import { action, makeAutoObservable, runInAction } from 'mobx'; import { ETH_DEPLOY } from 'mobx/model/network/eth.network'; import { TokenBalance } from 'mobx/model/tokens/token-balance'; import { toast } from 'react-toastify'; @@ -58,9 +58,11 @@ class IbBTCStore { // currently, the zap contract does not support redeem get redeemOptions(): TokenBalance[] { - return this.tokenBalances.filter(({ token }) => + const tokenBalance = this.tokenBalances.filter(({ token }) => addresses.mainnet.contracts.RenVaultZap.supportedTokens.includes(token.address), ); + tokenBalance.push(this.tokenBalances[0]); + return tokenBalance; } async init(): Promise { @@ -73,8 +75,10 @@ class IbBTCStore { fetchFees = action(async (): Promise => { const fees = await this.store.sdk.ibbtc.getFees(); - this.mintFeePercent = fees.mintFee; - this.redeemFeePercent = fees.redeemFee; + runInAction(() => { + this.mintFeePercent = fees.mintFee; + this.redeemFeePercent = fees.redeemFee; + }); }); fetchConversionRates = action(async (): Promise => { From 275da6a8e27e6558a9d9c1d70d73efc5f9e89f5f Mon Sep 17 00:00:00 2001 From: mrbasado Date: Thu, 22 Dec 2022 12:36:37 -0600 Subject: [PATCH 3/3] renbtc announcment 3 --- src/config/constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/config/constants.ts b/src/config/constants.ts index fcac73721..7a6766f29 100644 --- a/src/config/constants.ts +++ b/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);