From c5f42bbc5f0780cb0ffea0fc7786a5c1172332ae Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 10:51:24 -0500
Subject: [PATCH 1/8] migrate cvx positions

---
 .../Modals/PluginModal/PluginRewardsModal.tsx |  18 +-
 src/components/shared/Layout/Layout.tsx       |  28 +++
 src/components/shared/SwitchNetworkMenu.tsx   |   1 -
 src/constants/convex.ts                       |   7 +-
 src/context/BalancesContext.tsx               |  15 +-
 src/context/RariContext.tsx                   |   4 +
 src/contracts/abi/ConvexBaseRewardPool.json   |   1 +
 .../convex/useConvexPoolSuppliedCTokens.ts    |   4 +-
 src/hooks/convex/useStakedConvexBalances.ts   |  61 ++++++
 src/utils/convex/migratePositions.ts          | 188 ++++++++++++++++++
 src/utils/multicall.ts                        |  25 ++-
 11 files changed, 328 insertions(+), 24 deletions(-)
 create mode 100644 src/contracts/abi/ConvexBaseRewardPool.json
 create mode 100644 src/hooks/convex/useStakedConvexBalances.ts
 create mode 100644 src/utils/convex/migratePositions.ts

diff --git a/src/components/pages/Fuse/Modals/PluginModal/PluginRewardsModal.tsx b/src/components/pages/Fuse/Modals/PluginModal/PluginRewardsModal.tsx
index 4e31b450..6d06cfda 100644
--- a/src/components/pages/Fuse/Modals/PluginModal/PluginRewardsModal.tsx
+++ b/src/components/pages/Fuse/Modals/PluginModal/PluginRewardsModal.tsx
@@ -21,7 +21,7 @@ import { USDPricedFuseAsset } from "utils/fetchFusePoolData"
 import { InfoIcon } from "@chakra-ui/icons"
 import AppLink from "components/shared/AppLink"
 import { CTokenAvatarGroup } from "components/shared/Icons/CTokenIcon"
-import { eligibleTokens, tokenInfo } from "constants/convex"
+import { eligibleTokens, CONVEX_CTOKEN_INFO } from "constants/convex"
 
 export const PluginRewardsModal = ({
     market,
@@ -61,10 +61,10 @@ export const PluginRewardsModal = ({
                                     <InfoIcon size="15px" />
                                     <Text>This market streams
                                         <CTokenAvatarGroup tokenAddresses={rewardTokens} popOnHover={false} /> rewards
-                                        from the <b>{tokenInfo[market.underlyingSymbol].convexPoolName}</b> Convex pool
-                                        to suppliers of <b>{tokenInfo[market.underlyingSymbol].curvePoolName}</b> Curve LPs. </Text>
-                                    {/* <Text fontSize="sm"> Deposit your {tokenInfo[market.underlyingSymbol].curvePoolName} Curve LP tokens into Fuse to borrow against it while earning all the same rewards from Convex.</Text> */}
-                                    {/* <Text py={1}>View reward rates for <b>{tokenInfo[market.underlyingSymbol].convexPoolName}</b> on Convex </Text> */}
+                                        from the <b>{CONVEX_CTOKEN_INFO[market.underlyingSymbol].convexPoolName}</b> Convex pool
+                                        to suppliers of <b>{CONVEX_CTOKEN_INFO[market.underlyingSymbol].curvePoolName}</b> Curve LPs. </Text>
+                                    {/* <Text fontSize="sm"> Deposit your {CONVEX_CTOKEN_INFO[market.underlyingSymbol].curvePoolName} Curve LP tokens into Fuse to borrow against it while earning all the same rewards from Convex.</Text> */}
+                                    {/* <Text py={1}>View reward rates for <b>{CONVEX_CTOKEN_INFO[market.underlyingSymbol].convexPoolName}</b> on Convex </Text> */}
                                 </VStack>
                                 {/* </AppLink> */}
 
@@ -73,9 +73,9 @@ export const PluginRewardsModal = ({
                                     Info
                                 </Heading>
 
-                                <InfoPairs title="Curve Pool" link={tokenInfo[market.underlyingSymbol].curvePoolLink} address={''} />
-                                <InfoPairs title="Curve LP Token" address={tokenInfo[market.underlyingSymbol].lpToken} />
-                                <InfoPairs title="ERC4626 Plugin" address={tokenInfo[market.underlyingSymbol].plugin} />
+                                <InfoPairs title="Curve Pool" link={CONVEX_CTOKEN_INFO[market.underlyingSymbol].curvePoolLink} address={''} />
+                                <InfoPairs title="Curve LP Token" address={CONVEX_CTOKEN_INFO[market.underlyingSymbol].lpToken} />
+                                <InfoPairs title="ERC4626 Plugin" address={CONVEX_CTOKEN_INFO[market.underlyingSymbol].plugin} />
 
                             </Flex>
                         }
@@ -83,7 +83,7 @@ export const PluginRewardsModal = ({
                     <ModalFooter mt={2}>
                         <AppLink isExternal={true} href="https://www.convexfinance.com/stake">
                             <Button colorScheme='white' minW="100%">
-                                View rates for {' '} <Text mx={1} fontWeight={"bold"}>{tokenInfo[market.underlyingSymbol].convexPoolName}</Text>  {' '} on Convex
+                                View rates for {' '} <Text mx={1} fontWeight={"bold"}>{CONVEX_CTOKEN_INFO[market.underlyingSymbol].convexPoolName}</Text>  {' '} on Convex
                             </Button>
                         </AppLink>
                     </ModalFooter>
diff --git a/src/components/shared/Layout/Layout.tsx b/src/components/shared/Layout/Layout.tsx
index 9d2be4b8..a142a9f0 100644
--- a/src/components/shared/Layout/Layout.tsx
+++ b/src/components/shared/Layout/Layout.tsx
@@ -7,6 +7,14 @@ import { useMemo, useState, useEffect } from "react";
 import NewHeader from "../Header2/NewHeader";
 import Footer from "./Footer";
 
+import { Button, Image } from "@chakra-ui/react"
+
+//CVX
+import { useAccountBalances } from "context/BalancesContext"
+import { useDisclosure } from "@chakra-ui/react";
+import CVXMigrateModal from "components/pages/Fuse/Modals/CVXMigrateModal";
+
+
 
 const Layout = ({ children }) => {
   const { chainId } = useRari()
@@ -37,6 +45,16 @@ const Layout = ({ children }) => {
     return () => document.removeEventListener("keydown", handler);
   }, []);
 
+  const [_, __, cvxBalances] = useAccountBalances()
+  const hasCvxBalances = !!Object.keys(cvxBalances ?? {}).length
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  console.log({cvxBalances})
+
+  useEffect(() => {
+    console.log({ hasCvxBalances })
+    if (!!hasCvxBalances) onOpen()
+  }, [hasCvxBalances])
 
   return (
     <Column
@@ -62,11 +80,21 @@ const Layout = ({ children }) => {
 
       <NewHeader />
       {children}
+      {!!hasCvxBalances && <CVXMigrateModal isOpen={isOpen} onClose={onClose} />}
+      {!!hasCvxBalances && <ConvexModalButton onOpen={onOpen} />}
       <Footer />
     </Column>
   );
 };
 
 
+const ConvexModalButton = ({onOpen}: {onOpen: any}) => {
+  return (
+      <Button onClick={onOpen}  position="fixed" bottom={0} right={0} m={5}>
+        <Image src="/static/icons/convex.svg" h="100%" w="100%"/>
+      </Button>
+  )
+}
+
 
 export default Layout;
diff --git a/src/components/shared/SwitchNetworkMenu.tsx b/src/components/shared/SwitchNetworkMenu.tsx
index 407670ee..932e78c4 100644
--- a/src/components/shared/SwitchNetworkMenu.tsx
+++ b/src/components/shared/SwitchNetworkMenu.tsx
@@ -86,7 +86,6 @@ const SwitchNetworkMenu: React.FC = () => {
   // If user presses meta key or control key + slash they will toggle the private allocation claim mode.
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      console.log(e.code)
       if (e.code === "Slash") {
         e.preventDefault();
         setDevMode(true);
diff --git a/src/constants/convex.ts b/src/constants/convex.ts
index ce99792c..6f70fa7a 100644
--- a/src/constants/convex.ts
+++ b/src/constants/convex.ts
@@ -1,6 +1,6 @@
 export const eligibleTokens = ["FRAX3CRV-f", "steCRV", "UST_whv23CRV-f", "crv3crypto", "D3-f", "FEI3CRV3CRV-f", "alUSD3CRV-f"]
 
-export const tokenInfo: PluginCTokenInfoType = {
+export const CONVEX_CTOKEN_INFO: PluginCTokenInfoType = {
     "FRAX3CRV-f": {
         "cToken": "0x2ec70d3Ff3FD7ac5c2a72AAA64A398b6CA7428A5",
         "plugin": "0xd88e89ac6a0859e9b91078cb2a183a36ba6c8933",
@@ -89,3 +89,8 @@ type PluginCTokenInfoType = {
 }
 
 export const POOL_156_COMPTROLLER = "0x07cd53380FE9B2a5E64099591b498c73F0EfaA66"
+
+
+export const SUPPORTED_CONVEX_LPS = [
+
+]
\ No newline at end of file
diff --git a/src/context/BalancesContext.tsx b/src/context/BalancesContext.tsx
index 1d06711c..aab9663f 100644
--- a/src/context/BalancesContext.tsx
+++ b/src/context/BalancesContext.tsx
@@ -1,9 +1,10 @@
+
+import { StakedConvexBalancesMap, useStakedConvexBalances } from "hooks/convex/useStakedConvexBalances";
 import { useTokenBalances } from "hooks/useTokenBalance";
 import { SubgraphUnderlyingAsset } from "pages/api/explore";
-import { createContext, useContext, ReactNode, useMemo } from "react";
+import { createContext, useContext, ReactNode, useMemo, useEffect } from "react";
 import { queryAllUnderlyingAssets } from "services/gql";
 import useSWR from "swr";
-import { UnderlyingAsset } from "types/tokens";
 import { useRari } from "./RariContext";
 
 export const BalancesContext = createContext<any | undefined>(undefined);
@@ -35,6 +36,7 @@ export const BalancesContextProvider = ({
   );
 
   const tokenBalances = useTokenBalances(tokenAddresses);
+  const cvxBalances = useStakedConvexBalances()
 
   const balances: {
     [address: string]: number;
@@ -54,15 +56,16 @@ export const BalancesContextProvider = ({
     return ret;
   }, [tokenBalances, isAuthed]);
 
+
   return (
-    <BalancesContext.Provider value={balances}>
+    <BalancesContext.Provider value={{ balances, cvxBalances }}>
       {children}
     </BalancesContext.Provider>
   );
 };
 
-export const useAccountBalances = (): [any, string[]] => {
-  const balances = useContext(BalancesContext);
+export const useAccountBalances = (): [any, string[], StakedConvexBalancesMap] => {
+  const { balances, cvxBalances } = useContext(BalancesContext);
 
   const significantTokens: string[] = useMemo(
     () =>
@@ -80,5 +83,5 @@ export const useAccountBalances = (): [any, string[]] => {
     );
   }
 
-  return [balances, significantTokens];
+  return [balances, significantTokens, cvxBalances];
 };
diff --git a/src/context/RariContext.tsx b/src/context/RariContext.tsx
index 4a02abf0..0eada725 100644
--- a/src/context/RariContext.tsx
+++ b/src/context/RariContext.tsx
@@ -131,6 +131,10 @@ export const RariProvider = ({ children }: { children: ReactNode }) => {
   const queryClient = useQueryClient();
   const { t } = useTranslation();
 
+  useEffect(() => {
+    // if (!!requestedAddress) setAddress(requestedAddress as string)
+  }, [requestedAddress])
+
   useEffect(() => {
     //toast on brave users
     if(typeof navigator !== 'object') return
diff --git a/src/contracts/abi/ConvexBaseRewardPool.json b/src/contracts/abi/ConvexBaseRewardPool.json
new file mode 100644
index 00000000..35189fec
--- /dev/null
+++ b/src/contracts/abi/ConvexBaseRewardPool.json
@@ -0,0 +1 @@
+[{"inputs":[{"internalType":"uint256","name":"pid_","type":"uint256"},{"internalType":"address","name":"stakingToken_","type":"address"},{"internalType":"address","name":"rewardToken_","type":"address"},{"internalType":"address","name":"operator_","type":"address"},{"internalType":"address","name":"rewardManager_","type":"address"}],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"uint256","name":"reward","type":"uint256"}],"name":"RewardAdded","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"user","type":"address"},{"indexed":false,"internalType":"uint256","name":"reward","type":"uint256"}],"name":"RewardPaid","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"user","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"Staked","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"user","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"Withdrawn","type":"event"},{"inputs":[{"internalType":"address","name":"_reward","type":"address"}],"name":"addExtraReward","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"clearExtraRewards","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"currentRewards","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"donate","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"duration","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"earned","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"extraRewards","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"extraRewardsLength","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getReward","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"_account","type":"address"},{"internalType":"bool","name":"_claimExtras","type":"bool"}],"name":"getReward","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"historicalRewards","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"lastTimeRewardApplicable","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"lastUpdateTime","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"newRewardRatio","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"operator","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"periodFinish","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pid","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_rewards","type":"uint256"}],"name":"queueNewRewards","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"queuedRewards","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"rewardManager","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"rewardPerToken","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"rewardPerTokenStored","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"rewardRate","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"rewardToken","outputs":[{"internalType":"contract IERC20","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"","type":"address"}],"name":"rewards","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"stake","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"stakeAll","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"_for","type":"address"},{"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"stakeFor","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"stakingToken","outputs":[{"internalType":"contract IERC20","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"totalSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"","type":"address"}],"name":"userRewardPerTokenPaid","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"amount","type":"uint256"},{"internalType":"bool","name":"claim","type":"bool"}],"name":"withdraw","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bool","name":"claim","type":"bool"}],"name":"withdrawAll","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bool","name":"claim","type":"bool"}],"name":"withdrawAllAndUnwrap","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"amount","type":"uint256"},{"internalType":"bool","name":"claim","type":"bool"}],"name":"withdrawAndUnwrap","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"}]
\ No newline at end of file
diff --git a/src/hooks/convex/useConvexPoolSuppliedCTokens.ts b/src/hooks/convex/useConvexPoolSuppliedCTokens.ts
index 4578bb92..2edee266 100644
--- a/src/hooks/convex/useConvexPoolSuppliedCTokens.ts
+++ b/src/hooks/convex/useConvexPoolSuppliedCTokens.ts
@@ -1,4 +1,4 @@
-import { tokenInfo } from 'constants/convex';
+import { CONVEX_CTOKEN_INFO } from 'constants/convex';
 import { useRari } from 'context/RariContext'
 import { BigNumber } from 'ethers';
 import { Interface } from 'ethers/lib/utils';
@@ -11,7 +11,7 @@ export const useConvexPoolSuppliedCTokens = (comptrollerAddress: string) => {
 
     const { data: suppliedMarkets } = useQuery(`Pool ${comptrollerAddress}  CTokens User ${address}`, async () => {
 
-        const markets = Object.values(tokenInfo).map((value => value.cToken))
+        const markets = Object.values(CONVEX_CTOKEN_INFO).map((value => value.cToken))
 
         const IComptroller = new Interface(JSON.parse(
             fuse.compoundContracts["contracts/CErc20Delegate.sol:CErc20Delegate"].abi
diff --git a/src/hooks/convex/useStakedConvexBalances.ts b/src/hooks/convex/useStakedConvexBalances.ts
new file mode 100644
index 00000000..ec8a3a8d
--- /dev/null
+++ b/src/hooks/convex/useStakedConvexBalances.ts
@@ -0,0 +1,61 @@
+import { providers } from "@0xsequence/multicall";
+import { useRari } from "context/RariContext";
+import { useQuery } from "react-query";
+
+import BaseRewardPoolABI from "contracts/abi/ConvexBaseRewardPool.json"
+import { CONVEX_CTOKEN_INFO } from "constants/convex";
+import { Contract } from "ethers";
+import { BigNumber } from "ethers";
+
+export type StakedConvexBalancesMap = {
+    [cToken: string]: {
+        balance: BigNumber,
+        baseRewardsPool: string
+    }
+}
+
+export const useStakedConvexBalances = (): StakedConvexBalancesMap => {
+    const { fuse, address, isAuthed } = useRari();
+    const multiCallProvider = new providers.MulticallProvider(fuse.provider)
+    const { data: stakedConvexBalances } = useQuery<StakedConvexBalancesMap | undefined>(
+        ' staked convex balances for ' + address,
+        async () => {
+            if (!isAuthed) return undefined
+
+            let map: StakedConvexBalancesMap = {}
+
+            await Promise.all(Object.values(CONVEX_CTOKEN_INFO)
+                .map(c => ({ baseRewardsPool: c.rewardsContract, cToken: c.cToken }))
+                .map(({ baseRewardsPool, cToken }) => {
+                    let contract = new Contract(baseRewardsPool, BaseRewardPoolABI as any, multiCallProvider)
+                    return contract.balanceOf(address)
+                        .then((balance: BigNumber) => {
+                            if (!balance.isZero()) {
+                                map[cToken] = {
+                                    balance,
+                                    baseRewardsPool,
+                                }
+                            }
+                        })
+                        .catch((_err: any) => { })
+                }
+                ))
+
+                console.log({map})
+
+            return map
+        },
+        {
+            enabled: !!address ? true : false,
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+          }
+    )
+
+    // const hasBalances = 
+
+    return stakedConvexBalances ?? {}
+
+}
+
+
diff --git a/src/utils/convex/migratePositions.ts b/src/utils/convex/migratePositions.ts
new file mode 100644
index 00000000..84a3651b
--- /dev/null
+++ b/src/utils/convex/migratePositions.ts
@@ -0,0 +1,188 @@
+import { testForCTokenErrorAndSend } from "components/pages/Fuse/Modals/PoolModal/AmountSelect";
+import BaseRewardPoolABI from "contracts/abi/ConvexBaseRewardPool.json"
+import { Contract } from "ethers";
+import { constants } from "ethers";
+import { BigNumber } from "ethers";
+import { Interface } from "ethers/lib/utils"
+import { USDPricedFuseAsset } from "utils/fetchFusePoolData";
+import { callStaticWithMultiCall, encodeCall, estimateGasWithMultiCall, sendWithMultiCall } from "utils/multicall"
+import { Fuse } from "../../esm";
+
+
+export const unstakeAndWithdrawCVXPool = async (fuse: Fuse, baseRewardPool: string) => {
+    const IBaseRewardPool = new Interface(JSON.stringify(BaseRewardPoolABI))
+
+    const BaseRewardPool = new Contract(baseRewardPool, IBaseRewardPool, fuse.provider.getSigner())
+
+    try {
+        let estimatedGas = await BaseRewardPool.estimateGas.withdrawAllAndUnwrap(true)
+        console.log({ estimatedGas })
+
+        let result = await BaseRewardPool.callStatic.withdrawAllAndUnwrap(true)
+        console.log({ result })
+
+        result = await BaseRewardPool.withdrawAllAndUnwrap(true)
+        console.log({ result })
+
+        return result
+
+    } catch (err) {
+        console.error("Could not unstake and claim CVX Rewards")
+        throw err
+    }
+}
+
+
+/**
+ * @param marketAddress - Market/ctoken to give approval to.
+ * @param underlyingAddress - The token to approve.
+ * @param amount - Amount user is supplying.
+ * @param provider - An initiated ethers provider.
+ */
+export async function checkAllowanceAndApprove(
+    fuse: Fuse,
+    userAddress: string,
+    marketAddress: string,
+    underlyingAddress: string,
+    amount: BigNumber,
+) {
+    const erc20Interface = new Interface([
+        'function allowance(address owner, address spender) public view returns (uint256 remaining)',
+        'function approve(address spender, uint256 value) public returns (bool success)',
+    ])
+
+    const erc20Contract = new Contract(
+        underlyingAddress,
+        erc20Interface,
+        fuse.provider.getSigner(userAddress)
+    )
+
+    const hasApprovedEnough = (
+        await erc20Contract.callStatic.allowance(userAddress, marketAddress)
+    ).gte(amount);
+
+    if (!hasApprovedEnough) {
+        const max = BigNumber.from(2).pow(BigNumber.from(256)).sub(constants.One); //big fucking #
+        await erc20Contract.approve(marketAddress, max);
+    }
+}
+
+// Todo - remove. Will be replaced by SDK
+export const deposit = async (fuse: Fuse, marketAddress: string, amount: BigNumber) => {
+    const market = new Contract(
+        marketAddress,
+        JSON.parse(
+            fuse.compoundContracts[
+                "contracts/CErc20Delegate.sol:CErc20Delegate"
+            ].abi),
+        fuse.provider.getSigner()
+    );
+
+    let tx = await testForCTokenErrorAndSend(
+        market.callStatic.mint,
+        amount,
+        market.mint,
+        "Cannot deposit this amount right now!"
+    );
+
+    return tx
+}
+
+export const collateralize = async (fuse: Fuse, comptrollerAddress: string, marketAddresses: string[]) => {
+    const comptroller = new Contract(
+        comptrollerAddress,
+        JSON.parse(
+            fuse.compoundContracts["contracts/Comptroller.sol:Comptroller"].abi
+        ),
+        fuse.provider.getSigner()
+    );
+
+    await comptroller.enterMarkets(marketAddresses);
+
+    return comptroller;
+}
+
+/*
+Can't Multicall these :/
+
+export const unstakeAndWithdrawStakedCVXMulti = async (fuse: Fuse, baseRewardPools: string[]) => {
+    const IBaseRewardPool = new Interface(JSON.stringify(BaseRewardPoolABI))
+
+    const encodedCalls = baseRewardPools.map(baseRewardPool => encodeCall(IBaseRewardPool, baseRewardPool, "withdrawAllAndUnwrap", [true]))
+    try {
+        let estimatedGas = await estimateGasWithMultiCall(fuse.provider, encodedCalls)
+        console.log({ estimatedGas })
+
+        let result = await callStaticWithMultiCall(fuse.provider, encodedCalls)
+        console.log({ result })
+
+        result = await sendWithMultiCall(fuse, encodedCalls)
+        console.log({ result })
+
+        return result
+
+    } catch (err) {
+        console.error("Could not unstake and claim CVX Rewards")
+    }
+}
+
+// Todo - move elswhere
+export const approveAllMarketsMulti = async (fuse: Fuse, assets: USDPricedFuseAsset[]) => {
+    const MAX_APPROVAL = BigNumber.from(2).pow(BigNumber.from(256)).sub(constants.One); //big fucking #
+
+    const IERC20 = new Interface(JSON.parse(
+        fuse.compoundContracts[
+            "contracts/EIP20Interface.sol:EIP20Interface"
+        ].abi
+    ))
+
+    const encodedCalls = assets.map(asset => encodeCall(IERC20, asset.underlyingToken, "approve", [asset.cToken, MAX_APPROVAL]))
+    try {
+        let estimatedGas = await estimateGasWithMultiCall(fuse.provider, encodedCalls)
+        console.log({ estimatedGas })
+
+        let result = await callStaticWithMultiCall(fuse.provider, encodedCalls)
+        console.log({ result })
+
+        result = await sendWithMultiCall(fuse, encodedCalls)
+        console.log({ result })
+
+        return result
+
+    } catch (err) {
+        console.error("Could not unstake and claim CVX Rewards")
+    }
+
+}
+
+
+export const unstakeAndWithdrawStakedCVXAndApproveCtokens = async (fuse: Fuse, baseRewardPools: string[], assets: USDPricedFuseAsset[]) => {
+    const IBaseRewardPool = new Interface(JSON.stringify(BaseRewardPoolABI))
+    const IERC20 = new Interface(JSON.parse(
+        fuse.compoundContracts[
+            "contracts/EIP20Interface.sol:EIP20Interface"
+        ].abi
+    ))
+    const MAX_APPROVAL = BigNumber.from(2).pow(BigNumber.from(256)).sub(constants.One); //big fucking #
+
+    let cvxEncodedCalls = baseRewardPools.map(baseRewardPool => encodeCall(IBaseRewardPool, baseRewardPool, "withdrawAllAndUnwrap", [true]))
+    let approvalEncodedCalls = assets.map(asset => encodeCall(IERC20, asset.underlyingToken, "approve", [asset.cToken, MAX_APPROVAL]))
+    const encodedCalls = [...cvxEncodedCalls, ...approvalEncodedCalls]
+
+    try {
+        let estimatedGas = await estimateGasWithMultiCall(fuse.provider, encodedCalls)
+        console.log({ estimatedGas })
+
+        let result = await callStaticWithMultiCall(fuse.provider, encodedCalls)
+        console.log({ result })
+
+        result = await sendWithMultiCall(fuse, encodedCalls)
+        console.log({ result })
+
+        return result
+
+    } catch (err) {
+        console.error("Could not unstake and claim CVX Rewards and Approve CTokens :( :(")
+    }
+}
+*/
\ No newline at end of file
diff --git a/src/utils/multicall.ts b/src/utils/multicall.ts
index 39efc34d..acd021fb 100644
--- a/src/utils/multicall.ts
+++ b/src/utils/multicall.ts
@@ -18,16 +18,16 @@ export const createMultiCall = (provider: JsonRpcProvider | Web3Provider,) => {
 export const sendWithMultiCall = async (
   fuse: Fuse,
   encodedCalls: any,
-  address: string
+  address?: string
 ) => {
   // @ts-ignore
   const multicall = createMultiCall(fuse.provider);
 
-  console.log("sendWithMultiCall", { encodedCalls, multicall });
+  console.log("sendWithMultiCall", { encodedCalls, multicall });  
+  let options: any = {}
+  if (!!address) options.address = address
 
-  const returnDatas = await multicall.aggregate(encodedCalls, {
-    from: address,
-  });
+  const returnDatas = await multicall.aggregate(encodedCalls, options);
 
   return returnDatas;
 };
@@ -48,6 +48,21 @@ export const callStaticWithMultiCall = async (
 };
 
 
+export const estimateGasWithMultiCall = async (
+  provider: JsonRpcProvider | Web3Provider,
+  encodedCalls: EncodedCall[],
+  address?: string
+) => {
+  const multicall = createMultiCall(provider);
+  let options: any = {}
+  if (!!address) options.address = address
+
+  const estimatedGas = await multicall.estimateGas.aggregate(encodedCalls, options)
+
+  return estimatedGas;
+};
+
+
 
 export const callInterfaceWithMulticall = async (
   provider: JsonRpcProvider | Web3Provider,

From dc1200568343736165f3c0eed70e080fef7c218a Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 11:20:02 -0500
Subject: [PATCH 2/8]  update modal

---
 .../pages/Fuse/Modals/CVXMigrateModal.tsx     | 196 ++++++++++++++++++
 src/esm/utils/networks.js                     |  18 +-
 2 files changed, 205 insertions(+), 9 deletions(-)
 create mode 100644 src/components/pages/Fuse/Modals/CVXMigrateModal.tsx

diff --git a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
new file mode 100644
index 00000000..b1d0e1c9
--- /dev/null
+++ b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
@@ -0,0 +1,196 @@
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    Text,
+    Flex,
+    VStack,
+    Spacer,
+    Button,
+    HStack,
+    useToast,
+    Avatar,
+    Box
+} from "@chakra-ui/react"
+import { POOL_156_COMPTROLLER } from "constants/convex"
+import { useAccountBalances } from "context/BalancesContext"
+import { useRari } from "context/RariContext"
+import { commify } from "ethers/lib/utils"
+import { formatEther } from "ethers/lib/utils"
+import { useFusePoolData } from "hooks/useFusePoolData"
+import { useTokensDataAsMap } from "hooks/useTokenData"
+import { useEffect, useMemo, useState } from "react"
+import { checkAllowanceAndApprove, collateralize, deposit, unstakeAndWithdrawCVXPool } from "utils/convex/migratePositions"
+import { handleGenericError } from "utils/errorHandling"
+
+export const CVXMigrateModal = ({
+    isOpen,
+    onClose,
+}: {
+    isOpen: boolean,
+    onClose: () => void,
+}) => {
+
+    const { fuse, address } = useRari()
+    const [_, __, _cvxBalances] = useAccountBalances()
+
+    const toast = useToast()
+    const [step, setStep] = useState<1 | 2 | 3 | 4 | 5|  undefined>()
+    const [assetIndex, setAssetIndex] = useState(0)
+
+    const cvxBalances = useMemo(() => _cvxBalances, [])
+    const fusePoolData = useFusePoolData("156")
+
+    const assets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(cvxBalances).includes(a.cToken))
+
+    const marketsUnderlyingMap: { [underlying: string]: string } = assets.reduce((obj, asset) => ({
+        ...obj,
+        [asset.cToken]: asset.underlyingToken
+    }), {})
+    const tokenData = useTokensDataAsMap(assets.map(a => a.underlyingToken))
+
+    console.log({ tokenData, marketsUnderlyingMap })
+
+    useEffect(() => {
+        setStep(undefined)
+    }, [assetIndex])
+
+
+    /*  Unstakes and Claims all CVX Staked Positions supported by Fuse  */
+    const handleUnstake = async () => {
+        try {
+            const baseRewardPool = cvxBalances[assets[assetIndex].cToken].baseRewardsPool
+            const res = await unstakeAndWithdrawCVXPool(fuse, baseRewardPool)
+            setStep(2)
+        } catch (err) {
+            handleGenericError(err, toast)
+        }
+    }
+
+    const handleApproveMarket = async () => {
+        const { cToken, underlyingToken } = assets[assetIndex]
+        try {
+            setStep(2)
+            const res = await checkAllowanceAndApprove(fuse, address, cToken, underlyingToken, cvxBalances[cToken].balance)
+            console.log({ res })
+            setStep(3)
+        } catch (err) {
+            handleGenericError(err, toast)
+        }
+    }
+
+    const handleDeposit = async () => {
+        const { cToken } = assets[assetIndex]
+        try {
+            setStep(3)
+            const res = await deposit(fuse, cToken, cvxBalances[cToken].balance)
+            console.log({ res })
+            setStep(4)
+        } catch (err) {
+            handleGenericError(err, toast)
+        }
+    }
+
+    const handleCollateralize = async () => {
+        const { membership } = assets[assetIndex]
+        const markets = assets.map(({ cToken }) => cToken)
+        if (!!membership) return
+        try {
+            setStep(4)
+            const res = await collateralize(fuse, POOL_156_COMPTROLLER, markets)
+            console.log({ res })
+            setStep(5)
+        } catch (err) {
+            handleGenericError(err, toast)
+        }
+    }
+
+
+    const activeSymbol = tokenData[assets[assetIndex]?.underlyingToken]?.symbol
+
+    const showEnableAsCollateral = !assets[assetIndex]?.membership
+
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose}>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader display="flex" width="100%" alignSelf="center">
+                        <Text fontSize="lg" mr={4} alignSelf="center">
+                            🔌 Migrate Staked CVX to Fuse Pool 156
+                        </Text>
+                        <ModalCloseButton />
+                    </ModalHeader>
+                    <ModalBody>
+
+                        <Flex direction="column" height="100%">
+                            {/* <AppLink isExternal={true} href="https://www.convexfinance.com/stake"> */}
+                            <VStack align={"flex-start"} my={2}>
+                                <Text>We detected {assets.length} staked Convex positions </Text>
+                                <ul>
+                                    {Object.keys(cvxBalances).map((market, i) =>
+                                        <Box onClick={() => setAssetIndex(i)} bg={assetIndex === i ? "aqua" : "white"}>
+                                            <HStack key={market}>
+                                                <Avatar src={tokenData[marketsUnderlyingMap[market]]?.logoURL} />
+                                                <Text>
+                                                    {commify(parseFloat(formatEther(cvxBalances[market].balance)).toFixed(2))} {tokenData[marketsUnderlyingMap[market]]?.symbol}
+                                                </Text>
+                                            </HStack>
+                                        </Box>
+                                    )}
+                                </ul>
+                                <Spacer />
+                                <Text>
+                                    Migrate {activeSymbol} in four clicks
+                                </Text>
+
+                                <HStack>
+                                    <Text>
+                                        1.)
+                                    </Text>
+                                    <Button disabled={!!step && step !== 1} onClick={handleUnstake}>Unstake {activeSymbol} and Claim Rewards</Button>
+                                </HStack>
+
+                                <HStack>
+                                    <Text>
+                                        2.)
+                                    </Text>
+                                    <Button disabled={step !== 2} onClick={handleApproveMarket}>Approve {activeSymbol}</Button>
+                                </HStack>
+
+                                <HStack>
+                                    <Text>
+                                        3.)
+                                    </Text>
+                                    <Button disabled={step !== 3} onClick={handleDeposit}>Deposit {activeSymbol}</Button>
+                                </HStack>
+
+                                {showEnableAsCollateral && <HStack>
+                                    <Text>
+                                        4.)
+                                    </Text>
+                                    <Button disabled={step !== 4} onClick={handleCollateralize}>Enable Collateral</Button>
+                                </HStack>}
+
+                                {step === 5 && <Text>Done!</Text>} 
+
+                            </VStack>
+                        </Flex>
+                    </ModalBody>
+                    <ModalFooter mt={2}>
+
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}
+
+
+
+export default CVXMigrateModal
\ No newline at end of file
diff --git a/src/esm/utils/networks.js b/src/esm/utils/networks.js
index 4929a457..bfe6ead8 100644
--- a/src/esm/utils/networks.js
+++ b/src/esm/utils/networks.js
@@ -81,15 +81,15 @@ export const chainMetadata = {
         blockExplorerURL: "https://optimistic.etherscan.io",
         color: "#FE0521",
     },
-    // [ChainID.HARDHAT]: {
-    //   chainId: ChainID.HARDHAT,
-    //   name: "Hardhat",
-    //   imageUrl: "/static/networks/optimism.svg", // no logo
-    //   supported: true,
-    //   rpcUrl: "http://localhost:8545",
-    //   blockExplorerURL: "",
-    //   color: "#BC6C6C"
-    // }
+    [ChainID.HARDHAT]: {
+      chainId: ChainID.HARDHAT,
+      name: "Hardhat",
+      imageUrl: "/static/networks/optimism.svg", // no logo
+      supported: true,
+      rpcUrl: "http://localhost:8545",
+      blockExplorerURL: "",
+      color: "#BC6C6C"
+    }
 };
 export const isSupportedChainId = (chainId) => Object.values(ChainID).includes(chainId);
 export function getSupportedChains() {

From a05807ee6a617752b1381f71a377669bcb64d60c Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 11:34:54 -0500
Subject: [PATCH 3/8] loading states

---
 .../pages/Fuse/Modals/CVXMigrateModal.tsx     | 41 +++++++++++++++----
 src/utils/convex/migratePositions.ts          | 22 ++++++----
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
index b1d0e1c9..46d4b85a 100644
--- a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
+++ b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
@@ -39,7 +39,9 @@ export const CVXMigrateModal = ({
     const [_, __, _cvxBalances] = useAccountBalances()
 
     const toast = useToast()
-    const [step, setStep] = useState<1 | 2 | 3 | 4 | 5|  undefined>()
+    const [step, setStep] = useState<1 | 2 | 3 | 4 | 5 | undefined>()
+    const [activeStep, setActiveStep] = useState<1 | 2 | 3 | 4 | 5 | undefined>()
+
     const [assetIndex, setAssetIndex] = useState(0)
 
     const cvxBalances = useMemo(() => _cvxBalances, [])
@@ -63,10 +65,12 @@ export const CVXMigrateModal = ({
     /*  Unstakes and Claims all CVX Staked Positions supported by Fuse  */
     const handleUnstake = async () => {
         try {
+            setActiveStep(1)
             const baseRewardPool = cvxBalances[assets[assetIndex].cToken].baseRewardsPool
             const res = await unstakeAndWithdrawCVXPool(fuse, baseRewardPool)
             setStep(2)
         } catch (err) {
+            setActiveStep(undefined)
             handleGenericError(err, toast)
         }
     }
@@ -74,11 +78,12 @@ export const CVXMigrateModal = ({
     const handleApproveMarket = async () => {
         const { cToken, underlyingToken } = assets[assetIndex]
         try {
-            setStep(2)
+            setActiveStep(2)
             const res = await checkAllowanceAndApprove(fuse, address, cToken, underlyingToken, cvxBalances[cToken].balance)
             console.log({ res })
             setStep(3)
         } catch (err) {
+            setActiveStep(undefined)
             handleGenericError(err, toast)
         }
     }
@@ -86,11 +91,12 @@ export const CVXMigrateModal = ({
     const handleDeposit = async () => {
         const { cToken } = assets[assetIndex]
         try {
-            setStep(3)
+            setActiveStep(3)
             const res = await deposit(fuse, cToken, cvxBalances[cToken].balance)
             console.log({ res })
             setStep(4)
         } catch (err) {
+            setActiveStep(undefined)
             handleGenericError(err, toast)
         }
     }
@@ -100,11 +106,12 @@ export const CVXMigrateModal = ({
         const markets = assets.map(({ cToken }) => cToken)
         if (!!membership) return
         try {
-            setStep(4)
+            setActiveStep(4)
             const res = await collateralize(fuse, POOL_156_COMPTROLLER, markets)
             console.log({ res })
             setStep(5)
         } catch (err) {
+            setActiveStep(undefined)
             handleGenericError(err, toast)
         }
     }
@@ -153,31 +160,47 @@ export const CVXMigrateModal = ({
                                     <Text>
                                         1.)
                                     </Text>
-                                    <Button disabled={!!step && step !== 1} onClick={handleUnstake}>Unstake {activeSymbol} and Claim Rewards</Button>
+                                    <Button colorScheme="blue" disabled={!!step && step !== 1} onClick={handleUnstake}>
+                                        {
+                                            activeStep === 1 ? "Unstaking and Claiming..." : `Unstake ${activeSymbol} and Claim Rewards`
+                                        }
+                                    </Button>
                                 </HStack>
 
                                 <HStack>
                                     <Text>
                                         2.)
                                     </Text>
-                                    <Button disabled={step !== 2} onClick={handleApproveMarket}>Approve {activeSymbol}</Button>
+                                    <Button colorScheme="blue" disabled={step !== 2} onClick={handleApproveMarket}>
+                                        {
+                                            activeStep === 2 ? `Approving ${activeSymbol}...` : ` Approve ${activeSymbol}`
+                                        }
+                                    </Button>
                                 </HStack>
 
                                 <HStack>
                                     <Text>
                                         3.)
                                     </Text>
-                                    <Button disabled={step !== 3} onClick={handleDeposit}>Deposit {activeSymbol}</Button>
+                                    <Button colorScheme="blue" disabled={step !== 3} onClick={handleDeposit}>
+                                        {
+                                            activeStep === 3 ? `Depositing ${activeSymbol}...` : ` Deposit ${activeSymbol}`
+                                        }
+                                    </Button>
                                 </HStack>
 
                                 {showEnableAsCollateral && <HStack>
                                     <Text>
                                         4.)
                                     </Text>
-                                    <Button disabled={step !== 4} onClick={handleCollateralize}>Enable Collateral</Button>
+                                    <Button colorScheme="blue" disabled={step !== 4} onClick={handleCollateralize}>
+                                        {
+                                            activeStep === 4 ? `Collateralizing...` : `Collateralize`
+                                        }
+                                    </Button>
                                 </HStack>}
 
-                                {step === 5 && <Text>Done!</Text>} 
+                                {step === 5 && <Text>Done!</Text>}
 
                             </VStack>
                         </Flex>
diff --git a/src/utils/convex/migratePositions.ts b/src/utils/convex/migratePositions.ts
index 84a3651b..7ad97eb3 100644
--- a/src/utils/convex/migratePositions.ts
+++ b/src/utils/convex/migratePositions.ts
@@ -21,10 +21,11 @@ export const unstakeAndWithdrawCVXPool = async (fuse: Fuse, baseRewardPool: stri
         let result = await BaseRewardPool.callStatic.withdrawAllAndUnwrap(true)
         console.log({ result })
 
-        result = await BaseRewardPool.withdrawAllAndUnwrap(true)
-        console.log({ result })
+        let tx = await BaseRewardPool.withdrawAllAndUnwrap(true)
+        console.log({ tx })
 
-        return result
+        const txConfirmed = await tx.wait(1)
+        return txConfirmed;
 
     } catch (err) {
         console.error("Could not unstake and claim CVX Rewards")
@@ -63,7 +64,9 @@ export async function checkAllowanceAndApprove(
 
     if (!hasApprovedEnough) {
         const max = BigNumber.from(2).pow(BigNumber.from(256)).sub(constants.One); //big fucking #
-        await erc20Contract.approve(marketAddress, max);
+        let tx = await erc20Contract.approve(marketAddress, max);
+        const txConfirmed = await tx.wait(1)
+        return txConfirmed;
     }
 }
 
@@ -85,7 +88,10 @@ export const deposit = async (fuse: Fuse, marketAddress: string, amount: BigNumb
         "Cannot deposit this amount right now!"
     );
 
-    return tx
+    const txConfirmed = await tx.wait(1)
+    console.log({txConfirmed})
+
+    return txConfirmed
 }
 
 export const collateralize = async (fuse: Fuse, comptrollerAddress: string, marketAddresses: string[]) => {
@@ -97,9 +103,9 @@ export const collateralize = async (fuse: Fuse, comptrollerAddress: string, mark
         fuse.provider.getSigner()
     );
 
-    await comptroller.enterMarkets(marketAddresses);
-
-    return comptroller;
+    let tx = await comptroller.enterMarkets(marketAddresses);
+    const txConfirmed = await tx.wait(1)
+    return txConfirmed;
 }
 
 /*

From 0a0c0032a89e0e659819990608bab846ab1431e2 Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 13:38:27 -0500
Subject: [PATCH 4/8] support for curve lp tokens

---
 .../pages/Fuse/Modals/CVXMigrateModal.tsx     | 144 +++++++++++++-----
 src/components/shared/Layout/Layout.tsx       |  17 ++-
 src/context/BalancesContext.tsx               |  10 +-
 src/hooks/convex/useStakedConvexBalances.ts   |  59 ++++++-
 src/hooks/useHasApproval.ts                   |  49 ++++++
 5 files changed, 221 insertions(+), 58 deletions(-)
 create mode 100644 src/hooks/useHasApproval.ts

diff --git a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
index 46d4b85a..4235da63 100644
--- a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
+++ b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
@@ -17,11 +17,13 @@ import {
     Box
 } from "@chakra-ui/react"
 import { POOL_156_COMPTROLLER } from "constants/convex"
-import { useAccountBalances } from "context/BalancesContext"
 import { useRari } from "context/RariContext"
+import { BigNumber, constants } from "ethers"
 import { commify } from "ethers/lib/utils"
 import { formatEther } from "ethers/lib/utils"
+import { useCurveLPBalances, useStakedConvexBalances } from "hooks/convex/useStakedConvexBalances"
 import { useFusePoolData } from "hooks/useFusePoolData"
+import useHasApproval from "hooks/useHasApproval"
 import { useTokensDataAsMap } from "hooks/useTokenData"
 import { useEffect, useMemo, useState } from "react"
 import { checkAllowanceAndApprove, collateralize, deposit, unstakeAndWithdrawCVXPool } from "utils/convex/migratePositions"
@@ -36,8 +38,12 @@ export const CVXMigrateModal = ({
 }) => {
 
     const { fuse, address } = useRari()
-    const [_, __, _cvxBalances] = useAccountBalances()
+    const _cvxBalances = useStakedConvexBalances()
+    const curveLPBalances = useCurveLPBalances()
 
+    console.log({ curveLPBalances })
+
+    // Steppers
     const toast = useToast()
     const [step, setStep] = useState<1 | 2 | 3 | 4 | 5 | undefined>()
     const [activeStep, setActiveStep] = useState<1 | 2 | 3 | 4 | 5 | undefined>()
@@ -47,39 +53,67 @@ export const CVXMigrateModal = ({
     const cvxBalances = useMemo(() => _cvxBalances, [])
     const fusePoolData = useFusePoolData("156")
 
-    const assets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(cvxBalances).includes(a.cToken))
+    const assets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(cvxBalances).includes(a.cToken) || Object.keys(curveLPBalances).includes(a.underlyingToken))
+    const curveAssets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(curveLPBalances).includes(a.underlyingToken))
 
     const marketsUnderlyingMap: { [underlying: string]: string } = assets.reduce((obj, asset) => ({
         ...obj,
         [asset.cToken]: asset.underlyingToken
     }), {})
+
+    const marketsBalancesMap: {
+        [cToken: string]: {
+            stakedBalance: BigNumber,
+            curveBalance: BigNumber,
+            total: BigNumber
+        }
+    } = assets.reduce((obj, asset) => {
+        const stakedBalance = cvxBalances[asset.cToken]?.balance ?? constants.Zero
+        const curveBalance = curveLPBalances[asset.underlyingToken] ?? constants.Zero
+        const total = stakedBalance.add(curveBalance)
+
+        if (total.isZero()) return { ...obj }
+        return {
+            ...obj,
+            [asset.cToken]: {
+                stakedBalance,
+                curveBalance,
+                total
+            }
+        }
+    }, {})
+
     const tokenData = useTokensDataAsMap(assets.map(a => a.underlyingToken))
 
-    console.log({ tokenData, marketsUnderlyingMap })
+    console.log({ tokenData, marketsBalancesMap, marketsUnderlyingMap })
+
+    const marketBalance = marketsBalancesMap[assets[assetIndex]?.cToken]
 
-    useEffect(() => {
-        setStep(undefined)
-    }, [assetIndex])
 
 
     /*  Unstakes and Claims all CVX Staked Positions supported by Fuse  */
     const handleUnstake = async () => {
+        const { stakedBalance } = marketBalance
         try {
             setActiveStep(1)
-            const baseRewardPool = cvxBalances[assets[assetIndex].cToken].baseRewardsPool
-            const res = await unstakeAndWithdrawCVXPool(fuse, baseRewardPool)
-            setStep(2)
+            if (stakedBalance.gt(0)) {
+                const baseRewardPool = cvxBalances[assets[assetIndex].cToken].baseRewardsPool
+                const res = await unstakeAndWithdrawCVXPool(fuse, baseRewardPool)
+            }
         } catch (err) {
             setActiveStep(undefined)
             handleGenericError(err, toast)
         }
+        setStep(2)
     }
 
+    // Approve for stakedBalance + curveBalance
     const handleApproveMarket = async () => {
         const { cToken, underlyingToken } = assets[assetIndex]
+        const { total } = marketBalance
         try {
             setActiveStep(2)
-            const res = await checkAllowanceAndApprove(fuse, address, cToken, underlyingToken, cvxBalances[cToken].balance)
+            const res = await checkAllowanceAndApprove(fuse, address, cToken, underlyingToken, total)
             console.log({ res })
             setStep(3)
         } catch (err) {
@@ -88,11 +122,13 @@ export const CVXMigrateModal = ({
         }
     }
 
+    // Deposit curveBalance
     const handleDeposit = async () => {
         const { cToken } = assets[assetIndex]
+        const { curveBalance } = marketBalance
         try {
             setActiveStep(3)
-            const res = await deposit(fuse, cToken, cvxBalances[cToken].balance)
+            const res = await deposit(fuse, cToken, curveBalance)
             console.log({ res })
             setStep(4)
         } catch (err) {
@@ -101,10 +137,9 @@ export const CVXMigrateModal = ({
         }
     }
 
+    // Collateralize all
     const handleCollateralize = async () => {
-        const { membership } = assets[assetIndex]
-        const markets = assets.map(({ cToken }) => cToken)
-        if (!!membership) return
+        const markets = Object.keys(marketsBalancesMap)
         try {
             setActiveStep(4)
             const res = await collateralize(fuse, POOL_156_COMPTROLLER, markets)
@@ -116,11 +151,24 @@ export const CVXMigrateModal = ({
         }
     }
 
-
     const activeSymbol = tokenData[assets[assetIndex]?.underlyingToken]?.symbol
 
+    const hasApproval = useHasApproval(assets[assetIndex], marketBalance.total.toString())
+
     const showEnableAsCollateral = !assets[assetIndex]?.membership
 
+    const showUnstake = !marketBalance?.stakedBalance?.isZero() ?? true
+
+    const showApproval = !hasApproval
+
+    useEffect(() => {
+        if (!showUnstake) setStep(2)
+        else if (hasApproval) setStep(3)
+        else setStep(undefined)
+    }, [assetIndex])
+
+
+    console.log({ marketBalance, showUnstake })
 
     return (
         <>
@@ -138,16 +186,24 @@ export const CVXMigrateModal = ({
                         <Flex direction="column" height="100%">
                             {/* <AppLink isExternal={true} href="https://www.convexfinance.com/stake"> */}
                             <VStack align={"flex-start"} my={2}>
-                                <Text>We detected {assets.length} staked Convex positions </Text>
+                                <Text>We detected {Object.keys(cvxBalances).length} staked Convex positions {!!curveAssets.length && ` and ${curveAssets.length} Curve LP tokens`} </Text>
                                 <ul>
-                                    {Object.keys(cvxBalances).map((market, i) =>
+                                    {Object.keys(marketsBalancesMap).map((market, i) =>
                                         <Box onClick={() => setAssetIndex(i)} bg={assetIndex === i ? "aqua" : "white"}>
-                                            <HStack key={market}>
-                                                <Avatar src={tokenData[marketsUnderlyingMap[market]]?.logoURL} />
+                                            <VStack>
+                                                <HStack key={market}>
+                                                    <Avatar src={tokenData[marketsUnderlyingMap[market]]?.logoURL} />
+                                                    <Text>
+                                                        {tokenData[marketsUnderlyingMap[market]]?.symbol}
+                                                    </Text>
+                                                </HStack>
                                                 <Text>
-                                                    {commify(parseFloat(formatEther(cvxBalances[market].balance)).toFixed(2))} {tokenData[marketsUnderlyingMap[market]]?.symbol}
+                                                    {commify(parseFloat(formatEther(marketsBalancesMap[market].stakedBalance)).toFixed(2))} staked
                                                 </Text>
-                                            </HStack>
+                                                <Text>
+                                                    {commify(parseFloat(formatEther(marketsBalancesMap[market].curveBalance)).toFixed(2))} in Curve
+                                                </Text>
+                                            </VStack>
                                         </Box>
                                     )}
                                 </ul>
@@ -156,27 +212,31 @@ export const CVXMigrateModal = ({
                                     Migrate {activeSymbol} in four clicks
                                 </Text>
 
-                                <HStack>
-                                    <Text>
-                                        1.)
-                                    </Text>
-                                    <Button colorScheme="blue" disabled={!!step && step !== 1} onClick={handleUnstake}>
-                                        {
-                                            activeStep === 1 ? "Unstaking and Claiming..." : `Unstake ${activeSymbol} and Claim Rewards`
-                                        }
-                                    </Button>
-                                </HStack>
+                                {showUnstake && (
+                                    <HStack>
+                                        <Text>
+                                            1.)
+                                        </Text>
+                                        <Button colorScheme="blue" disabled={!!step && step !== 1} onClick={handleUnstake}>
+                                            {
+                                                activeStep === 1 ? "Unstaking and Claiming..." : `Unstake ${activeSymbol} and Claim Rewards`
+                                            }
+                                        </Button>
+                                    </HStack>
+                                )}
 
-                                <HStack>
-                                    <Text>
-                                        2.)
-                                    </Text>
-                                    <Button colorScheme="blue" disabled={step !== 2} onClick={handleApproveMarket}>
-                                        {
-                                            activeStep === 2 ? `Approving ${activeSymbol}...` : ` Approve ${activeSymbol}`
-                                        }
-                                    </Button>
-                                </HStack>
+                                {showApproval && (
+                                    <HStack>
+                                        <Text>
+                                            2.)
+                                        </Text>
+                                        <Button colorScheme="blue" disabled={step !== 2} onClick={handleApproveMarket}>
+                                            {
+                                                activeStep === 2 ? `Approving ${activeSymbol}...` : ` Approve ${activeSymbol}`
+                                            }
+                                        </Button>
+                                    </HStack>
+                                )}
 
                                 <HStack>
                                     <Text>
diff --git a/src/components/shared/Layout/Layout.tsx b/src/components/shared/Layout/Layout.tsx
index a142a9f0..1d82e601 100644
--- a/src/components/shared/Layout/Layout.tsx
+++ b/src/components/shared/Layout/Layout.tsx
@@ -13,6 +13,7 @@ import { Button, Image } from "@chakra-ui/react"
 import { useAccountBalances } from "context/BalancesContext"
 import { useDisclosure } from "@chakra-ui/react";
 import CVXMigrateModal from "components/pages/Fuse/Modals/CVXMigrateModal";
+import { useCurveLPBalances, useStakedConvexBalances } from "hooks/convex/useStakedConvexBalances";
 
 
 
@@ -45,14 +46,14 @@ const Layout = ({ children }) => {
     return () => document.removeEventListener("keydown", handler);
   }, []);
 
-  const [_, __, cvxBalances] = useAccountBalances()
-  const hasCvxBalances = !!Object.keys(cvxBalances ?? {}).length
+  const cvxBalances = useStakedConvexBalances()
+  const curveLPBalances = useCurveLPBalances()
+  const hasCvxBalances = !!Object.keys(cvxBalances ?? {}).length || !!Object.keys(curveLPBalances ?? {}).length
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  console.log({cvxBalances})
+  console.log({ cvxBalances, curveLPBalances })
 
   useEffect(() => {
-    console.log({ hasCvxBalances })
     if (!!hasCvxBalances) onOpen()
   }, [hasCvxBalances])
 
@@ -88,11 +89,11 @@ const Layout = ({ children }) => {
 };
 
 
-const ConvexModalButton = ({onOpen}: {onOpen: any}) => {
+const ConvexModalButton = ({ onOpen }: { onOpen: any }) => {
   return (
-      <Button onClick={onOpen}  position="fixed" bottom={0} right={0} m={5}>
-        <Image src="/static/icons/convex.svg" h="100%" w="100%"/>
-      </Button>
+    <Button onClick={onOpen} position="fixed" bottom={0} right={0} m={5}>
+      <Image src="/static/icons/convex.svg" h="100%" w="100%" />
+    </Button>
   )
 }
 
diff --git a/src/context/BalancesContext.tsx b/src/context/BalancesContext.tsx
index aab9663f..d2ffd938 100644
--- a/src/context/BalancesContext.tsx
+++ b/src/context/BalancesContext.tsx
@@ -1,5 +1,4 @@
 
-import { StakedConvexBalancesMap, useStakedConvexBalances } from "hooks/convex/useStakedConvexBalances";
 import { useTokenBalances } from "hooks/useTokenBalance";
 import { SubgraphUnderlyingAsset } from "pages/api/explore";
 import { createContext, useContext, ReactNode, useMemo, useEffect } from "react";
@@ -36,7 +35,6 @@ export const BalancesContextProvider = ({
   );
 
   const tokenBalances = useTokenBalances(tokenAddresses);
-  const cvxBalances = useStakedConvexBalances()
 
   const balances: {
     [address: string]: number;
@@ -58,14 +56,14 @@ export const BalancesContextProvider = ({
 
 
   return (
-    <BalancesContext.Provider value={{ balances, cvxBalances }}>
+    <BalancesContext.Provider value={{ balances }}>
       {children}
     </BalancesContext.Provider>
   );
 };
 
-export const useAccountBalances = (): [any, string[], StakedConvexBalancesMap] => {
-  const { balances, cvxBalances } = useContext(BalancesContext);
+export const useAccountBalances = (): [any, string[]] => {
+  const { balances} = useContext(BalancesContext);
 
   const significantTokens: string[] = useMemo(
     () =>
@@ -83,5 +81,5 @@ export const useAccountBalances = (): [any, string[], StakedConvexBalancesMap] =
     );
   }
 
-  return [balances, significantTokens, cvxBalances];
+  return [balances, significantTokens];
 };
diff --git a/src/hooks/convex/useStakedConvexBalances.ts b/src/hooks/convex/useStakedConvexBalances.ts
index ec8a3a8d..558dd509 100644
--- a/src/hooks/convex/useStakedConvexBalances.ts
+++ b/src/hooks/convex/useStakedConvexBalances.ts
@@ -7,6 +7,10 @@ import { CONVEX_CTOKEN_INFO } from "constants/convex";
 import { Contract } from "ethers";
 import { BigNumber } from "ethers";
 
+import { useTokenBalances } from "hooks/useTokenBalance";
+import { useMemo } from "react";
+import { erc20ABI } from "wagmi";
+
 export type StakedConvexBalancesMap = {
     [cToken: string]: {
         balance: BigNumber,
@@ -14,6 +18,8 @@ export type StakedConvexBalancesMap = {
     }
 }
 
+
+/* For Staked CVX positions - there's no ERC20 to query balance for */
 export const useStakedConvexBalances = (): StakedConvexBalancesMap => {
     const { fuse, address, isAuthed } = useRari();
     const multiCallProvider = new providers.MulticallProvider(fuse.provider)
@@ -41,7 +47,7 @@ export const useStakedConvexBalances = (): StakedConvexBalancesMap => {
                 }
                 ))
 
-                console.log({map})
+            console.log({ map })
 
             return map
         },
@@ -49,7 +55,7 @@ export const useStakedConvexBalances = (): StakedConvexBalancesMap => {
             enabled: !!address ? true : false,
             refetchOnMount: false,
             refetchOnWindowFocus: false,
-          }
+        }
     )
 
     // const hasBalances = 
@@ -59,3 +65,52 @@ export const useStakedConvexBalances = (): StakedConvexBalancesMap => {
 }
 
 
+type BalancesMap = {
+    [token: string]: BigNumber
+}
+
+export const useCurveLPBalances = (): BalancesMap => {
+
+    const { fuse, address, isAuthed } = useRari();
+    const multiCallProvider = new providers.MulticallProvider(fuse.provider)
+
+    const { data: curveLPBalances } = useQuery<BalancesMap | undefined>(
+        ' curve convex balances for ' + address,
+        async () => {
+
+            if (!isAuthed) return undefined
+
+            let map: BalancesMap = {}
+
+            await Promise.all(
+                Object.values(CONVEX_CTOKEN_INFO)
+                    .map(c => ({ curveLPToken: c.lpToken }))
+                    .map(({ curveLPToken }) => {
+                        let contract = new Contract(curveLPToken, erc20ABI, multiCallProvider)
+                        return contract.balanceOf(address)
+                            .then((balance: BigNumber) => {
+                                if (!balance.isZero()) {
+                                    map[curveLPToken] = balance
+                                }
+                            })
+                            .catch((_err: any) => { })
+                    }
+                    ))
+            return map
+        },
+        {
+            enabled: !!address ? true : false,
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+        }
+    )
+
+
+    console.log({curveLPBalances})
+    // const hasBalances = 
+
+    return curveLPBalances ?? {}
+
+}
+
+
diff --git a/src/hooks/useHasApproval.ts b/src/hooks/useHasApproval.ts
new file mode 100644
index 00000000..ae425ccc
--- /dev/null
+++ b/src/hooks/useHasApproval.ts
@@ -0,0 +1,49 @@
+import { useQuery } from "react-query"
+import { useRari } from "context/RariContext"
+import { BigNumber, Contract } from "ethers"
+import { Interface, parseUnits } from "ethers/lib/utils"
+import { USDPricedFuseAsset } from "utils/fetchFusePoolData"
+import { isAssetETH } from "utils/tokenUtils"
+
+
+const useHasApproval = (market: USDPricedFuseAsset, amount: string) => {
+    const { fuse, address } = useRari()
+    const { provider } = fuse
+
+    const { data } = useQuery(`${address} has approval for ${market.underlyingSymbol}`, async () => {
+        if (!address) return false
+        let _amount = parseUnits(amount, market.underlyingDecimals)
+        return await checkAllowance(address, market.cToken, market.underlyingToken, _amount, provider)
+    })
+    return data ?? false
+}
+
+export default useHasApproval
+
+export async function checkAllowance(
+    userAddress: string,
+    marketAddress: string,
+    underlyingAddress: string,
+    amount: BigNumber,
+    provider: any
+) {
+    if (isAssetETH(underlyingAddress)) return
+
+    const erc20Interface = new Interface([
+        'function allowance(address owner, address spender) public view returns (uint256 remaining)',
+        'function approve(address spender, uint256 value) public returns (bool success)',
+    ])
+
+    const erc20Contract = new Contract(
+        underlyingAddress,
+        erc20Interface,
+        provider.getSigner(userAddress)
+    )
+
+    const hasApproval = (
+        await erc20Contract.callStatic.allowance(userAddress, marketAddress)
+    ).gte(amount);
+
+    return hasApproval
+
+}
\ No newline at end of file

From fbbcebbbcf50559f54b25b8649421e92ae42ae0b Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 15:03:19 -0500
Subject: [PATCH 5/8] modal shows borrow/supply info

---
 .../pages/Fuse/Modals/CVXMigrateModal.tsx     | 71 +++++++++++++++----
 src/hooks/useBorrowLimit.ts                   | 20 ++++++
 src/hooks/useHasApproval.ts                   |  4 +-
 3 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
index 4235da63..d92b32f0 100644
--- a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
+++ b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
@@ -18,16 +18,23 @@ import {
 } from "@chakra-ui/react"
 import { POOL_156_COMPTROLLER } from "constants/convex"
 import { useRari } from "context/RariContext"
+import { getEthUsdPriceBN } from "esm/utils/getUSDPriceBN"
 import { BigNumber, constants } from "ethers"
-import { commify } from "ethers/lib/utils"
+import { commify, parseEther } from "ethers/lib/utils"
 import { formatEther } from "ethers/lib/utils"
 import { useCurveLPBalances, useStakedConvexBalances } from "hooks/convex/useStakedConvexBalances"
+import { useBorrowLimit, useTotalSupply } from "hooks/useBorrowLimit"
 import { useFusePoolData } from "hooks/useFusePoolData"
 import useHasApproval from "hooks/useHasApproval"
 import { useTokensDataAsMap } from "hooks/useTokenData"
 import { useEffect, useMemo, useState } from "react"
+import { useQuery } from "react-query"
+import { smallStringUsdFormatter } from "utils/bigUtils"
 import { checkAllowanceAndApprove, collateralize, deposit, unstakeAndWithdrawCVXPool } from "utils/convex/migratePositions"
 import { handleGenericError } from "utils/errorHandling"
+import { USDPricedFuseAsset } from "utils/fetchFusePoolData"
+
+
 
 export const CVXMigrateModal = ({
     isOpen,
@@ -41,8 +48,6 @@ export const CVXMigrateModal = ({
     const _cvxBalances = useStakedConvexBalances()
     const curveLPBalances = useCurveLPBalances()
 
-    console.log({ curveLPBalances })
-
     // Steppers
     const toast = useToast()
     const [step, setStep] = useState<1 | 2 | 3 | 4 | 5 | undefined>()
@@ -56,6 +61,7 @@ export const CVXMigrateModal = ({
     const assets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(cvxBalances).includes(a.cToken) || Object.keys(curveLPBalances).includes(a.underlyingToken))
     const curveAssets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(curveLPBalances).includes(a.underlyingToken))
 
+
     const marketsUnderlyingMap: { [underlying: string]: string } = assets.reduce((obj, asset) => ({
         ...obj,
         [asset.cToken]: asset.underlyingToken
@@ -83,13 +89,52 @@ export const CVXMigrateModal = ({
         }
     }, {})
 
-    const tokenData = useTokensDataAsMap(assets.map(a => a.underlyingToken))
 
-    console.log({ tokenData, marketsBalancesMap, marketsUnderlyingMap })
+    // Simulates u depositing all your CVX positions into us >:)
+    const { data: updatedUserAssets } = useQuery('updated assets for convex user ' + address, async () => {
+
+        const ethPrice = await getEthUsdPriceBN()
+
+        const updatedUserAssets: USDPricedFuseAsset[] = fusePoolData?.assets.reduce((arr: USDPricedFuseAsset[], asset) => {
+            if (Object.keys(marketsBalancesMap).includes(asset.cToken)) {
+                const assetToBeUpdated = asset
+                const amount = (marketsBalancesMap[asset.cToken].total)
+
+                console.log({ assetToBeUpdated, amount })
+
+                const supplyBalance = assetToBeUpdated.supplyBalance.add(amount);
+                const totalSupply = assetToBeUpdated.totalSupply.add(amount);
+
+                // Todo - figure out where to better div by 1e18
+                const updatedAsset: USDPricedFuseAsset = {
+                    ...assetToBeUpdated,
+                    supplyBalance,
+                    supplyBalanceUSD: supplyBalance
+                        .mul(assetToBeUpdated.underlyingPrice)
+                        .mul(parseEther(ethPrice.toString()))
+                        .div(constants.WeiPerEther)
+                        .div(constants.WeiPerEther)
+                        .div(constants.WeiPerEther)
+                        .div(constants.WeiPerEther),
+                    totalSupply,
+                    membership: true
+                }
+                return [...arr, updatedAsset]
+            }
+            return [...arr, asset]
+        }, []) ?? []
 
-    const marketBalance = marketsBalancesMap[assets[assetIndex]?.cToken]
+        return updatedUserAssets
+    })
 
+    const borrowLimit = useBorrowLimit(updatedUserAssets ?? [])
+    const newTotalSupply = useTotalSupply(updatedUserAssets ?? [])
 
+    const tokenData = useTokensDataAsMap(assets.map(a => a.underlyingToken))
+
+    console.log({ tokenData, marketsBalancesMap, marketsUnderlyingMap, updatedUserAssets, borrowLimit })
+
+    const marketBalance = marketsBalancesMap[assets[assetIndex]?.cToken]
 
     /*  Unstakes and Claims all CVX Staked Positions supported by Fuse  */
     const handleUnstake = async () => {
@@ -153,7 +198,7 @@ export const CVXMigrateModal = ({
 
     const activeSymbol = tokenData[assets[assetIndex]?.underlyingToken]?.symbol
 
-    const hasApproval = useHasApproval(assets[assetIndex], marketBalance.total.toString())
+    const hasApproval = useHasApproval(assets[assetIndex], marketBalance?.total.toString() ?? "0")
 
     const showEnableAsCollateral = !assets[assetIndex]?.membership
 
@@ -186,10 +231,10 @@ export const CVXMigrateModal = ({
                         <Flex direction="column" height="100%">
                             {/* <AppLink isExternal={true} href="https://www.convexfinance.com/stake"> */}
                             <VStack align={"flex-start"} my={2}>
-                                <Text>We detected {Object.keys(cvxBalances).length} staked Convex positions {!!curveAssets.length && ` and ${curveAssets.length} Curve LP tokens`} </Text>
-                                <ul>
+                                <Text>We detected <b>{smallStringUsdFormatter(newTotalSupply.toString())}</b> from {Object.keys(cvxBalances).length} staked Convex positions {!!curveAssets.length && ` and ${curveAssets.length} Curve LP tokens`}. You can borrow up to <b>{smallStringUsdFormatter(borrowLimit.toString())}</b> by migrating them to Fuse.</Text> 
+                                <HStack>
                                     {Object.keys(marketsBalancesMap).map((market, i) =>
-                                        <Box onClick={() => setAssetIndex(i)} bg={assetIndex === i ? "aqua" : "white"}>
+                                        <Box onClick={() => setAssetIndex(i)} bg={assetIndex === i ? "aqua" : "white"} border="1px solid red">
                                             <VStack>
                                                 <HStack key={market}>
                                                     <Avatar src={tokenData[marketsUnderlyingMap[market]]?.logoURL} />
@@ -206,10 +251,10 @@ export const CVXMigrateModal = ({
                                             </VStack>
                                         </Box>
                                     )}
-                                </ul>
+                                </HStack>
                                 <Spacer />
                                 <Text>
-                                    Migrate {activeSymbol} in four clicks
+                                    Migrate {activeSymbol} in 3 clicks
                                 </Text>
 
                                 {showUnstake && (
@@ -249,7 +294,7 @@ export const CVXMigrateModal = ({
                                     </Button>
                                 </HStack>
 
-                                {showEnableAsCollateral && <HStack>
+                                {showEnableAsCollateral && step === 4 && <HStack>
                                     <Text>
                                         4.)
                                     </Text>
diff --git a/src/hooks/useBorrowLimit.ts b/src/hooks/useBorrowLimit.ts
index 764ca825..4220620d 100644
--- a/src/hooks/useBorrowLimit.ts
+++ b/src/hooks/useBorrowLimit.ts
@@ -30,6 +30,26 @@ export const useBorrowLimit = (
   return maxBorrow;
 };
 
+export const useTotalSupply = (
+  assets: USDPricedFuseAsset[],
+): BigNumber => {
+  const totalSupply = useMemo(() => {
+    let _totalSupplyUSD = constants.Zero;
+
+    for (let i = 0; i < assets.length; i++) {
+      let asset = assets[i];
+      _totalSupplyUSD = _totalSupplyUSD.add(
+        asset.supplyBalanceUSD
+      )
+    }
+
+    // console.log({result, _maxBorrow, id})
+    return _totalSupplyUSD
+  }, [assets]);
+
+  return totalSupply;
+};
+
 export const useBorrowLimits = (
   assetsArray: USDPricedFuseAsset[][] | null,
   options?: { ignoreIsEnabledCheckFor?: string }
diff --git a/src/hooks/useHasApproval.ts b/src/hooks/useHasApproval.ts
index ae425ccc..29b6f646 100644
--- a/src/hooks/useHasApproval.ts
+++ b/src/hooks/useHasApproval.ts
@@ -10,8 +10,8 @@ const useHasApproval = (market: USDPricedFuseAsset, amount: string) => {
     const { fuse, address } = useRari()
     const { provider } = fuse
 
-    const { data } = useQuery(`${address} has approval for ${market.underlyingSymbol}`, async () => {
-        if (!address) return false
+    const { data } = useQuery(`${address} has approval for ${market?.underlyingSymbol}`, async () => {
+        if (!address || !market) return false
         let _amount = parseUnits(amount, market.underlyingDecimals)
         return await checkAllowance(address, market.cToken, market.underlyingToken, _amount, provider)
     })

From 7e42c69f0c0ac82a05b266a641c69c2b97e1633a Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 17:51:14 -0500
Subject: [PATCH 6/8] =?UTF-8?q?New=20Button=20=F0=9F=98=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/Layout/Layout.tsx       | 14 ++------
 .../shared/Layout/PluginMigratorButton.tsx    | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 src/components/shared/Layout/PluginMigratorButton.tsx

diff --git a/src/components/shared/Layout/Layout.tsx b/src/components/shared/Layout/Layout.tsx
index 1d82e601..24e0abba 100644
--- a/src/components/shared/Layout/Layout.tsx
+++ b/src/components/shared/Layout/Layout.tsx
@@ -7,14 +7,11 @@ import { useMemo, useState, useEffect } from "react";
 import NewHeader from "../Header2/NewHeader";
 import Footer from "./Footer";
 
-import { Button, Image } from "@chakra-ui/react"
-
 //CVX
-import { useAccountBalances } from "context/BalancesContext"
 import { useDisclosure } from "@chakra-ui/react";
 import CVXMigrateModal from "components/pages/Fuse/Modals/CVXMigrateModal";
 import { useCurveLPBalances, useStakedConvexBalances } from "hooks/convex/useStakedConvexBalances";
-
+import PluginMigratorButton from "./PluginMigratorButton";
 
 
 const Layout = ({ children }) => {
@@ -82,20 +79,13 @@ const Layout = ({ children }) => {
       <NewHeader />
       {children}
       {!!hasCvxBalances && <CVXMigrateModal isOpen={isOpen} onClose={onClose} />}
-      {!!hasCvxBalances && <ConvexModalButton onOpen={onOpen} />}
+      {!!hasCvxBalances && <PluginMigratorButton onOpen={onOpen} />}
       <Footer />
     </Column>
   );
 };
 
 
-const ConvexModalButton = ({ onOpen }: { onOpen: any }) => {
-  return (
-    <Button onClick={onOpen} position="fixed" bottom={0} right={0} m={5}>
-      <Image src="/static/icons/convex.svg" h="100%" w="100%" />
-    </Button>
-  )
-}
 
 
 export default Layout;
diff --git a/src/components/shared/Layout/PluginMigratorButton.tsx b/src/components/shared/Layout/PluginMigratorButton.tsx
new file mode 100644
index 00000000..540ec9b4
--- /dev/null
+++ b/src/components/shared/Layout/PluginMigratorButton.tsx
@@ -0,0 +1,32 @@
+
+
+import { Button, Image, keyframes, usePrefersReducedMotion } from "@chakra-ui/react"
+
+
+const spin = keyframes`
+  from { transform: rotateY(0deg); }
+  to { transform: rotateY(360deg); }
+`
+
+export const PluginMigratorButton = ({ onOpen }: { onOpen: any }) => {
+    const prefersReducedMotion = usePrefersReducedMotion()
+
+    const animation = prefersReducedMotion
+        ? undefined
+        : `${spin} infinite 5s linear`
+    return (
+        <Button onClick={onOpen} position="fixed" 
+        bottom={0} right={0} m={10} bg="none"
+        transition="transform 0.2s ease 0s"
+        boxSize={"75px"}
+        _hover={{
+            transform: "translateY(-10px)",
+        }}>
+            <Image animation={animation} src="/static/icons/convex.svg" h="100%" w="100%" 
+               
+            />
+        </Button>
+    )
+}
+
+export default PluginMigratorButton
\ No newline at end of file

From 113bf61706c29fa2bb7275b01ce94f4e073713ce Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 18:14:17 -0500
Subject: [PATCH 7/8] Refactored Component + comments

---
 .../pages/Fuse/Modals/CVXMigrateModal.tsx     | 138 ++++++++++++------
 src/context/RariContext.tsx                   |   2 +-
 2 files changed, 92 insertions(+), 48 deletions(-)

diff --git a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
index d92b32f0..ecf103ff 100644
--- a/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
+++ b/src/components/pages/Fuse/Modals/CVXMigrateModal.tsx
@@ -14,7 +14,8 @@ import {
     HStack,
     useToast,
     Avatar,
-    Box
+    Box,
+    Image,
 } from "@chakra-ui/react"
 import { POOL_156_COMPTROLLER } from "constants/convex"
 import { useRari } from "context/RariContext"
@@ -29,6 +30,7 @@ import useHasApproval from "hooks/useHasApproval"
 import { useTokensDataAsMap } from "hooks/useTokenData"
 import { useEffect, useMemo, useState } from "react"
 import { useQuery } from "react-query"
+import { TokensDataMap } from "types/tokens"
 import { smallStringUsdFormatter } from "utils/bigUtils"
 import { checkAllowanceAndApprove, collateralize, deposit, unstakeAndWithdrawCVXPool } from "utils/convex/migratePositions"
 import { handleGenericError } from "utils/errorHandling"
@@ -45,7 +47,7 @@ export const CVXMigrateModal = ({
 }) => {
 
     const { fuse, address } = useRari()
-    const _cvxBalances = useStakedConvexBalances()
+    const cvxBalances = useStakedConvexBalances()
     const curveLPBalances = useCurveLPBalances()
 
     // Steppers
@@ -53,22 +55,22 @@ export const CVXMigrateModal = ({
     const [step, setStep] = useState<1 | 2 | 3 | 4 | 5 | undefined>()
     const [activeStep, setActiveStep] = useState<1 | 2 | 3 | 4 | 5 | undefined>()
 
-    const [assetIndex, setAssetIndex] = useState(0)
-
-    const cvxBalances = useMemo(() => _cvxBalances, [])
+    // Fuse pool Data
     const fusePoolData = useFusePoolData("156")
-
     const assets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(cvxBalances).includes(a.cToken) || Object.keys(curveLPBalances).includes(a.underlyingToken))
-    const curveAssets = !fusePoolData ? [] : fusePoolData.assets.filter(a => Object.keys(curveLPBalances).includes(a.underlyingToken))
-
+    const [assetIndex, setAssetIndex] = useState(0)
+    const tokenData = useTokensDataAsMap(assets.map(a => a.underlyingToken))
 
+    // marketAddr -> underlying
     const marketsUnderlyingMap: { [underlying: string]: string } = assets.reduce((obj, asset) => ({
         ...obj,
         [asset.cToken]: asset.underlyingToken
     }), {})
 
+
+    // marketAddr -> migratable balances data
     const marketsBalancesMap: {
-        [cToken: string]: {
+        [marketAddr: string]: {
             stakedBalance: BigNumber,
             curveBalance: BigNumber,
             total: BigNumber
@@ -89,8 +91,9 @@ export const CVXMigrateModal = ({
         }
     }, {})
 
+    const marketBalanceForAsset = marketsBalancesMap[assets[assetIndex]?.cToken]
 
-    // Simulates u depositing all your CVX positions into us >:)
+    // Simulates you depositing all your CVX positions into us - to get projected totalSupply & projected borrowLimit
     const { data: updatedUserAssets } = useQuery('updated assets for convex user ' + address, async () => {
 
         const ethPrice = await getEthUsdPriceBN()
@@ -127,35 +130,32 @@ export const CVXMigrateModal = ({
         return updatedUserAssets
     })
 
+    // Simulated position
     const borrowLimit = useBorrowLimit(updatedUserAssets ?? [])
     const newTotalSupply = useTotalSupply(updatedUserAssets ?? [])
 
-    const tokenData = useTokensDataAsMap(assets.map(a => a.underlyingToken))
-
-    console.log({ tokenData, marketsBalancesMap, marketsUnderlyingMap, updatedUserAssets, borrowLimit })
-
-    const marketBalance = marketsBalancesMap[assets[assetIndex]?.cToken]
 
     /*  Unstakes and Claims all CVX Staked Positions supported by Fuse  */
     const handleUnstake = async () => {
-        const { stakedBalance } = marketBalance
+        const { stakedBalance } = marketBalanceForAsset
         try {
             setActiveStep(1)
             if (stakedBalance.gt(0)) {
                 const baseRewardPool = cvxBalances[assets[assetIndex].cToken].baseRewardsPool
                 const res = await unstakeAndWithdrawCVXPool(fuse, baseRewardPool)
+                setStep(2)
+
             }
         } catch (err) {
             setActiveStep(undefined)
             handleGenericError(err, toast)
         }
-        setStep(2)
     }
 
     // Approve for stakedBalance + curveBalance
     const handleApproveMarket = async () => {
         const { cToken, underlyingToken } = assets[assetIndex]
-        const { total } = marketBalance
+        const { total } = marketBalanceForAsset
         try {
             setActiveStep(2)
             const res = await checkAllowanceAndApprove(fuse, address, cToken, underlyingToken, total)
@@ -170,7 +170,7 @@ export const CVXMigrateModal = ({
     // Deposit curveBalance
     const handleDeposit = async () => {
         const { cToken } = assets[assetIndex]
-        const { curveBalance } = marketBalance
+        const { curveBalance } = marketBalanceForAsset
         try {
             setActiveStep(3)
             const res = await deposit(fuse, cToken, curveBalance)
@@ -196,16 +196,18 @@ export const CVXMigrateModal = ({
         }
     }
 
-    const activeSymbol = tokenData[assets[assetIndex]?.underlyingToken]?.symbol
-
-    const hasApproval = useHasApproval(assets[assetIndex], marketBalance?.total.toString() ?? "0")
 
+    // If you've already approved this market, skip
+    const hasApproval = useHasApproval(assets[assetIndex], marketBalanceForAsset?.total.toString() ?? "0")
+    const showApproval = !hasApproval
+    // We show enable as Collateral only if this asset has not yet been anabled
     const showEnableAsCollateral = !assets[assetIndex]?.membership
+    // If you dont have any staked, you dont need to unstake to enter this market
+    const showUnstake = !marketBalanceForAsset?.stakedBalance?.isZero() ?? true
 
-    const showUnstake = !marketBalance?.stakedBalance?.isZero() ?? true
-
-    const showApproval = !hasApproval
+    const activeSymbol = tokenData[assets[assetIndex]?.underlyingToken]?.symbol
 
+    // Skip to step conditionally
     useEffect(() => {
         if (!showUnstake) setStep(2)
         else if (hasApproval) setStep(3)
@@ -213,17 +215,18 @@ export const CVXMigrateModal = ({
     }, [assetIndex])
 
 
-    console.log({ marketBalance, showUnstake })
-
     return (
         <>
             <Modal isOpen={isOpen} onClose={onClose}>
                 <ModalOverlay />
                 <ModalContent>
                     <ModalHeader display="flex" width="100%" alignSelf="center">
-                        <Text fontSize="lg" mr={4} alignSelf="center">
-                            🔌 Migrate Staked CVX to Fuse Pool 156
-                        </Text>
+                        <HStack>
+                            <Image src="/static/icons/convex.svg" boxSize="40px" />
+                            <Text fontSize="lg" mr={4} alignSelf="center">
+                                Migrate Staked CVX Positions to Fuse
+                            </Text>
+                        </HStack>
                         <ModalCloseButton />
                     </ModalHeader>
                     <ModalBody>
@@ -231,25 +234,23 @@ export const CVXMigrateModal = ({
                         <Flex direction="column" height="100%">
                             {/* <AppLink isExternal={true} href="https://www.convexfinance.com/stake"> */}
                             <VStack align={"flex-start"} my={2}>
-                                <Text>We detected <b>{smallStringUsdFormatter(newTotalSupply.toString())}</b> from {Object.keys(cvxBalances).length} staked Convex positions {!!curveAssets.length && ` and ${curveAssets.length} Curve LP tokens`}. You can borrow up to <b>{smallStringUsdFormatter(borrowLimit.toString())}</b> by migrating them to Fuse.</Text> 
+                                <Text>
+                                    We detected <b>{smallStringUsdFormatter(newTotalSupply.toString())}</b> from {Object.keys(cvxBalances).length}
+                                    staked Convex positions
+                                    {!!(Object.keys(curveLPBalances)).length && ` and ${Object.keys(curveLPBalances).length} Curve LP tokens`}.
+                                    You can borrow up to <b>{smallStringUsdFormatter(borrowLimit.toString())}</b> by migrating them to Fuse.</Text>
+                                {/* Select from available markets */}
                                 <HStack>
                                     {Object.keys(marketsBalancesMap).map((market, i) =>
-                                        <Box onClick={() => setAssetIndex(i)} bg={assetIndex === i ? "aqua" : "white"} border="1px solid red">
-                                            <VStack>
-                                                <HStack key={market}>
-                                                    <Avatar src={tokenData[marketsUnderlyingMap[market]]?.logoURL} />
-                                                    <Text>
-                                                        {tokenData[marketsUnderlyingMap[market]]?.symbol}
-                                                    </Text>
-                                                </HStack>
-                                                <Text>
-                                                    {commify(parseFloat(formatEther(marketsBalancesMap[market].stakedBalance)).toFixed(2))} staked
-                                                </Text>
-                                                <Text>
-                                                    {commify(parseFloat(formatEther(marketsBalancesMap[market].curveBalance)).toFixed(2))} in Curve
-                                                </Text>
-                                            </VStack>
-                                        </Box>
+                                        <Market
+                                            assetIndex={assetIndex}
+                                            setAssetIndex={setAssetIndex}
+                                            market={market}
+                                            i={i}
+                                            tokensData={tokenData}
+                                            marketsUnderlyingMap={marketsUnderlyingMap}
+                                            marketsBalancesMap={marketsBalancesMap}
+                                        />
                                     )}
                                 </HStack>
                                 <Spacer />
@@ -319,6 +320,49 @@ export const CVXMigrateModal = ({
     )
 }
 
+const Market = ({
+    setAssetIndex,
+    assetIndex,
+    market,
+    i,
+    tokensData,
+    marketsUnderlyingMap,
+    marketsBalancesMap
+}: {
+    setAssetIndex: any,
+    assetIndex: number,
+    market: string,
+    i: number;
+    tokensData: TokensDataMap,
+    marketsUnderlyingMap: { [underlying: string]: string },
+    marketsBalancesMap: {
+        [cToken: string]: {
+            stakedBalance: BigNumber,
+            curveBalance: BigNumber,
+            total: BigNumber
+        }
+    }
+}) => {
+    return (
+        <Box onClick={() => setAssetIndex(i)} bg={assetIndex === i ? "aqua" : "white"} border="1px solid red">
+            <VStack>
+                <HStack key={market}>
+                    <Avatar src={tokensData[marketsUnderlyingMap[market]]?.logoURL} />
+                    <Text>
+                        {tokensData[marketsUnderlyingMap[market]]?.symbol}
+                    </Text>
+                </HStack>
+                <Text>
+                    {commify(parseFloat(formatEther(marketsBalancesMap[market].stakedBalance)).toFixed(2))} staked
+                </Text>
+                <Text>
+                    {commify(parseFloat(formatEther(marketsBalancesMap[market].curveBalance)).toFixed(2))} in Curve
+                </Text>
+            </VStack>
+        </Box>
+    )
+}
+
 
 
 export default CVXMigrateModal
\ No newline at end of file
diff --git a/src/context/RariContext.tsx b/src/context/RariContext.tsx
index 0eada725..a747859e 100644
--- a/src/context/RariContext.tsx
+++ b/src/context/RariContext.tsx
@@ -16,7 +16,7 @@ import { DASHBOARD_BOX_PROPS } from "../components/shared/DashboardBox";
 
 import { Fuse } from "../esm";
 
-import LogRocket, { init } from "logrocket";
+import LogRocket from "logrocket";
 import { useToast } from "@chakra-ui/react";
 
 import {

From 80a013db17f907fc2b60125c3998df424a96e1ed Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Wed, 16 Mar 2022 18:16:09 -0500
Subject: [PATCH 8/8] IERC20

---
 src/hooks/convex/useStakedConvexBalances.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/hooks/convex/useStakedConvexBalances.ts b/src/hooks/convex/useStakedConvexBalances.ts
index 558dd509..a2f5e6c2 100644
--- a/src/hooks/convex/useStakedConvexBalances.ts
+++ b/src/hooks/convex/useStakedConvexBalances.ts
@@ -6,10 +6,7 @@ import BaseRewardPoolABI from "contracts/abi/ConvexBaseRewardPool.json"
 import { CONVEX_CTOKEN_INFO } from "constants/convex";
 import { Contract } from "ethers";
 import { BigNumber } from "ethers";
-
-import { useTokenBalances } from "hooks/useTokenBalance";
-import { useMemo } from "react";
-import { erc20ABI } from "wagmi";
+import { Interface } from "ethers/lib/utils";
 
 export type StakedConvexBalancesMap = {
     [cToken: string]: {
@@ -69,7 +66,15 @@ type BalancesMap = {
     [token: string]: BigNumber
 }
 
+const IERC20 =  new Interface([
+    'function name() public view returns (string)',
+    'function symbol() public view returns (string)',
+    'function decimals() public view returns (uint8)',
+    'function balanceOf(address _owner) public view returns (uint256 balance)',
+]) 
+
 export const useCurveLPBalances = (): BalancesMap => {
+    
 
     const { fuse, address, isAuthed } = useRari();
     const multiCallProvider = new providers.MulticallProvider(fuse.provider)
@@ -86,7 +91,7 @@ export const useCurveLPBalances = (): BalancesMap => {
                 Object.values(CONVEX_CTOKEN_INFO)
                     .map(c => ({ curveLPToken: c.lpToken }))
                     .map(({ curveLPToken }) => {
-                        let contract = new Contract(curveLPToken, erc20ABI, multiCallProvider)
+                        let contract = new Contract(curveLPToken, IERC20, multiCallProvider)
                         return contract.balanceOf(address)
                             .then((balance: BigNumber) => {
                                 if (!balance.isZero()) {