staging: deprecation notice + sdk upgrade

package.json

@@ -6,13 +6,11 @@
     "node": ">=16.13.1"
   },
   "dependencies": {
-    "@badger-dao/sdk": "^1.18.8",
-    "@badger-dao/sdk-mocks": "^1.18.8",
-    "@coinbase/wallet-sdk": "^3.3.0",
+    "@badger-dao/sdk": "^1.18.14",
+    "@badger-dao/sdk-mocks": "^1.18.13",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@portis/web3": "^4.0.7",
     "@storybook/react": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -75,7 +73,8 @@
     "requirements-check": "node check-version.js",
     "postinstall": "yarn requirements-check",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "analyze": "yarn build && source-map-explorer 'build/static/js/*.js'"
   },
   "eslintConfig": {
     "extends": [
@@ -96,7 +95,8 @@
     ]
   },
   "devDependencies": {
-    "jest-fetch-mock": "^3.0.3"
+    "jest-fetch-mock": "^3.0.3",
+    "source-map-explorer": "^2.5.3"
   },
   "jest": {
     "transformIgnorePatterns": [

src/components-v2/common/NetworkGasWidget.tsx

@@ -30,7 +30,13 @@ const NetworkGasWidget = (): JSX.Element => {
   } = useContext(StoreContext);
   const ref = useRef<HTMLButtonElement | null>(null);
   return (
-    <ClickAwayListener onClickAway={closeNetworkOptions}>
+    <ClickAwayListener
+      onClickAway={(e: React.MouseEvent<Document>) => {
+        if ((e.target as HTMLElement)?.textContent?.toLowerCase() !== 'switch networks') {
+          closeNetworkOptions();
+        }
+      }}
+    >
       <div>
         <Button
           ref={ref}

src/components-v2/landing/NoVaults.tsx

@@ -1,4 +1,6 @@
+import { Network } from '@badger-dao/sdk';
 import { Button, Grid, makeStyles, Typography } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
 import { StoreContext } from 'mobx/stores/store-context';
 import { observer } from 'mobx-react-lite';
 import React, { useContext } from 'react';
@@ -30,6 +32,9 @@ const useStyles = makeStyles((theme) => ({
   networkName: {
     textTransform: 'capitalize',
   },
+  alert: {
+    marginTop: 10,
+  },
 }));
 
 interface Props {
@@ -39,24 +44,27 @@ interface Props {
 const NoVaults = ({ network }: Props): JSX.Element => {
   const { uiState } = useContext(StoreContext);
   const classes = useStyles();
-
+  const networkDisplayName = network
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase().concat(w.slice(1)))
+    .join(' ');
   return (
     <Grid container direction="column" className={classes.messageContainer}>
       <Grid item container justifyContent="center">
         <img src={'/assets/icons/screwdriver-badger.svg'} alt="Badger Builder" />
       </Grid>
       <Grid item container direction="column" justifyContent="center" className={classes.helpTextContainer}>
         <Typography variant="h5" color="textSecondary">
-          No vaults on{' '}
-          {network
-            .split('-')
-            .map((w) => w.charAt(0).toUpperCase().concat(w.slice(1)))
-            .join(' ')}
-          .
+          No vaults on {networkDisplayName}.
         </Typography>
         <Typography variant="body2" color="textSecondary">
           Switch to another network to view more vaults.
         </Typography>
+        {[Network.Polygon.toString(), Network.BinanceSmartChain.toString()].includes(network) && (
+          <Alert severity="warning" variant="outlined" className={classes.alert}>
+            {networkDisplayName} will no longer be supported starting Nov 1st 2022
+          </Alert>
+        )}
       </Grid>
       <Grid item container justifyContent="center" className={classes.switchButtonContainer}>
         <Button color="primary" variant="outlined" onClick={uiState.openNetworkOptions}>

src/components-v2/vault-detail/charts/VaultChart.tsx

@@ -101,6 +101,7 @@ export const VaultChart = (props: Props): JSX.Element | null => {
       }
     }
   });
+  const hasAprVal = !!chartData.reduce((d, cD) => d + cD.apr, 0);
 
   return (
     <ResponsiveContainer width={'99%'}>
@@ -147,17 +148,20 @@ export const VaultChart = (props: Props): JSX.Element | null => {
             style={{ fill: 'white' }}
           />
         )}
-        <YAxis
-          dataKey="apr"
-          yAxisId="apr"
-          orientation="right"
-          type="number"
-          domain={[0, maxYield * 1.05]}
-          tickCount={10}
-          minTickGap={50}
-          tickFormatter={(v: number) => `${v.toFixed(1)}%`}
-          style={{ fill: 'white' }}
-        />
+        {hasAprVal && (
+          <YAxis
+            dataKey="apr"
+            yAxisId="apr"
+            orientation="right"
+            type="number"
+            domain={[0, maxYield]}
+            tickCount={10}
+            minTickGap={50}
+            tickFormatter={(v: number) => `${v?.toFixed(1)}%`}
+            style={{ fill: 'white' }}
+          />
+        )}
+
         {valueType === ChartValueType.USD && (
           <Area
             type="monotone"
@@ -178,15 +182,17 @@ export const VaultChart = (props: Props): JSX.Element | null => {
             strokeWidth={2}
           />
         )}
-        <Line
-          type="monotone"
-          dataKey="apr"
-          fill="#E2652B"
-          stroke="#E2652B"
-          yAxisId="apr"
-          strokeWidth={1.5}
-          dot={false}
-        />
+        {hasAprVal && (
+          <Line
+            type="monotone"
+            dataKey="apr"
+            fill="#E2652B"
+            stroke="#E2652B"
+            yAxisId="apr"
+            strokeWidth={1.5}
+            dot={false}
+          />
+        )}
         {version === VaultVersion.v1_5 && !isInfluenceVault(vault.vaultToken) && (
           <Line
             type="monotone"

src/components-v2/vault-detail/specs/VaultMetrics.tsx

@@ -6,7 +6,7 @@ import VaultApyInformation from 'components-v2/VaultApyInformation';
 import { useVaultInformation } from 'hooks/useVaultInformation';
 import { StoreContext } from 'mobx/stores/store-context';
 import { observer } from 'mobx-react-lite';
-import React, { MouseEvent, useContext, useState } from 'react';
+import React, { MouseEvent, useState } from 'react';
 
 import { numberWithCommas } from '../../../mobx/utils/helpers';
 import VaultDepositedAssets from '../../VaultDepositedAssets';
@@ -90,8 +90,6 @@ const VaultMetrics = observer(({ vault }: Props): JSX.Element => {
     setShowApyInfo(false);
   };
   const { projectedVaultBoost, vaultBoost } = useVaultInformation(vault);
-  const store = useContext(StoreContext);
-  const { vaults } = store;
   const isInfluence = isInfluenceVault(vault.vaultToken);
   const useHistoricAPY = projectedVaultBoost === null || isInfluence;
 

src/config/constants.ts

@@ -14,8 +14,6 @@ export const RPC_WALLETS: { [index: string]: boolean } = {
   [Wallets.WalletConnect]: true,
   [Wallets.WalletLink]: true,
   [Wallets.Trezor]: true,
-  [Wallets.Portis]: true,
-  [Wallets.CoinbaseWallet]: true,
 };
 
 export enum NETWORK_IDS {
@@ -41,7 +39,6 @@ export const NETWORK_IDS_TO_NAMES = {
 export const CONTACT_EMAIL = '[email protected]';
 
 export const APP_NAME = 'BadgerDAO App';
-export const PORTIS_APP_ID = 'cbf7534d-170d-4903-943f-e607dc588b7f';
 export const EMPTY_DATA = '0x';
 export const ZERO_CURRENCY = '0.00000';
 // https://semver.org/#is-v123-a-semantic-version

src/config/enums/wallets.enum.ts

@@ -4,6 +4,4 @@ export enum Wallets {
   WalletLink = 'WalletLink',
   MetaMask = 'MetaMask',
   Trezor = 'Trezor',
-  CoinbaseWallet = 'Coinbase Wallet',
-  Portis = 'Portis',
 }

src/config/routes.tsx

@@ -4,7 +4,7 @@ import { QueryParams, Route } from 'mobx-router';
 import React from 'react';
 
 import { VaultSortOrder } from '../mobx/model/ui/vaults-filters';
-import { RootStore } from '../mobx/stores/RootStore';
+import store, { RootStore } from '../mobx/stores/RootStore';
 import { parseQueryMultipleParams } from '../mobx/utils/helpers';
 
 const Landing = React.lazy(() => import('../pages/Landing'));
@@ -53,6 +53,7 @@ const routes = {
   IbBTC: new Route<RootStore, QueryParams>({
     path: '/ibBTC',
     component: withSuspense(IbBTC),
+    onEnter: () => store.ibBTCStore.init(),
   }),
   vaultDetail: new Route<RootStore, QueryParams>({
     path: '/vault/:vaultName',

src/config/wallets.ts

@@ -1,10 +1,8 @@
 import { getNetworkConfig, NetworkConfig } from '@badger-dao/sdk';
-import CoinbaseWalletSDK from '@coinbase/wallet-sdk';
-import Portis from '@portis/web3';
 import WalletConnectProvider from '@walletconnect/web3-provider';
 import { CHAIN_DATA_LIST } from 'web3modal';
 
-import { NETWORK_IDS, PORTIS_APP_ID } from './constants';
+import { NETWORK_IDS } from './constants';
 import { supportedNetworks } from './networks.config';
 import rpc from './rpc.config';
 
@@ -39,19 +37,5 @@ export function getWeb3ModalProviders(config: NetworkConfig) {
         network,
       },
     },
-    coinbasewallet: {
-      package: CoinbaseWalletSDK,
-      options: {
-        appName: 'BadgerDAO',
-        rpc: networkRPC,
-      },
-    },
-    portis: {
-      package: Portis,
-      options: {
-        id: PORTIS_APP_ID,
-        network,
-      },
-    },
   };
 }

src/mobx/stores/RootStore.ts

@@ -67,7 +67,7 @@ export class RootStore {
     this.chain = new NetworkStore(this);
     this.wallet = new WalletStore(this, config);
     this.prices = new PricesStore(this);
-    this.rebase = new RebaseStore(this);
+    this.rebase = new RebaseStore();
     this.uiState = new UiStateStore();
     this.vaults = new VaultStore(this);
     this.user = new UserStore(this);
@@ -125,23 +125,12 @@ export class RootStore {
     const { signer, address } = this.sdk;
 
     if (signer && address) {
-      const updateActions = [this.lockedDeposits.loadLockedBalances()];
+      const updateActions = [this.lockedDeposits.loadLockedBalances(), this.user.reloadBalances()];
 
       if (this.sdk.rewards.hasBadgerTree()) {
         updateActions.push(this.tree.loadBadgerTree());
       }
 
-      updateActions.push(this.user.reloadBalances());
-
-      if (network === Network.Ethereum || network === Network.Local) {
-        // handle per page reloads, when init route is skipped
-        if (this.router.currentRoute?.path === routes.IbBTC.path) {
-          updateActions.push(this.ibBTCStore.init());
-        }
-
-        updateActions.push(this.rebase.fetchRebaseStats());
-      }
-
       await Promise.all(updateActions);
     }
   }

src/mobx/stores/rebaseStore.ts

@@ -1,33 +1,19 @@
-import { action, extendObservable } from 'mobx';
+import { DiggService } from '@badger-dao/sdk';
+import { extendObservable } from 'mobx';
 import { RebaseInfo } from 'mobx/model/tokens/rebase-info';
 
-import { RootStore } from './RootStore';
-
 class RebaseStore {
-  private store: RootStore;
   public rebase?: RebaseInfo;
 
-  constructor(store: RootStore) {
-    this.store = store;
-
+  constructor() {
     extendObservable(this, {
       rebase: this.rebase,
     });
-  }
-
-  fetchRebaseStats = action(async () => {
-    const { sdk } = this.store;
-
-    // temporary while sdk init in root store is not utilized
-    await sdk.ready();
-
-    const { digg: diggContract } = sdk.digg;
-    const sharesPerFragment = await diggContract._sharesPerFragment();
 
     this.rebase = {
-      sharesPerFragment,
+      sharesPerFragment: DiggService.DIGG_SHARES_PER_FRAGMENT,
     };
-  });
+  }
 }
 
 export default RebaseStore;

src/tests/WalletWidget.test.tsx

@@ -48,8 +48,6 @@ describe('WalletWidget', () => {
     );
     fireEvent.click(screen.getByRole('button', { name: /connect/i }));
     expect(screen.getByText('WalletConnect')).toBeInTheDocument();
-    expect(screen.getByText('Portis')).toBeInTheDocument();
-    expect(screen.getByText('Coinbase')).toBeInTheDocument();
   });
 
   test('Connected address is properly displayed', async () => {