Make pages generic w/ accept poolName prop (#372)

remove the concept of "DepositBTC", instead just have <Deposit poolName="BTC" />

src/constants/index.ts

@@ -64,6 +64,13 @@ export const MERKLETREE_DATA: { [chainId in ChainId]: string } = {
   [ChainId.HARDHAT]: "hardhat.json",
 }
 
+export const STABLECOIN_SWAP_TOKEN_CONTRACT_ADDRESSES: {
+  [chainId in ChainId]: string
+} = {
+  [ChainId.MAINNET]: "",
+  [ChainId.HARDHAT]: "0x6A358FD7B7700887b0cd974202CdF93208F793E2",
+}
+
 export const BTC_SWAP_TOKEN_CONTRACT_ADDRESSES: {
   [chainId in ChainId]: string
 } = {
@@ -74,9 +81,18 @@ export const BTC_SWAP_TOKEN_CONTRACT_ADDRESSES: {
 export const BTC_SWAP_TOKEN = new Token(
   BTC_SWAP_TOKEN_CONTRACT_ADDRESSES,
   18,
-  "BLPT",
-  "blpt",
-  "Saddle BTC Pool LP Token",
+  "saddleBTC",
+  "saddlebtc",
+  "Saddle TBTC/WBTC/RENBTC/SBTC",
+  saddleLogo,
+)
+
+export const STABLECOIN_SWAP_TOKEN = new Token(
+  STABLECOIN_SWAP_TOKEN_CONTRACT_ADDRESSES,
+  18,
+  "saddleUSD",
+  "saddleusd",
+  "Saddle DAI/USDC/USDT",
   saddleLogo,
 )
 
@@ -199,10 +215,19 @@ export const TOKENS_MAP: {
 )
 
 export const POOLS_MAP: {
-  [poolName: string]: Token[]
+  [poolName in PoolName]: {
+    lpToken: Token
+    poolTokens: Token[]
+  }
 } = {
-  [BTC_POOL_NAME]: BTC_POOL_TOKENS,
-  [STABLECOIN_POOL_NAME]: STABLECOIN_POOL_TOKENS,
+  [BTC_POOL_NAME]: {
+    lpToken: BTC_SWAP_TOKEN,
+    poolTokens: BTC_POOL_TOKENS,
+  },
+  [STABLECOIN_POOL_NAME]: {
+    lpToken: STABLECOIN_SWAP_TOKEN,
+    poolTokens: STABLECOIN_POOL_TOKENS,
+  },
 }
 
 export const TRANSACTION_TYPES = {

src/hooks/useApproveAndDeposit.ts

@@ -41,9 +41,7 @@ export function useApproveAndDeposit(
     transactionDeadlineSelected,
     infiniteApproval,
   } = useSelector((state: AppState) => state.user)
-  const POOL_TOKENS = POOLS_MAP[poolName]
-  if (!POOL_TOKENS)
-    throw new Error("useApproveAndDeposit requires a valid pool name")
+  const POOL = POOLS_MAP[poolName]
 
   return async function approveAndDeposit(
     state: ApproveAndDepositStateArgument,
@@ -92,14 +90,13 @@ export function useApproveAndDeposit(
     }
     try {
       // For each token being deposited, check the allowance and approve it if necessary
-      // await Promise.all(POOL_TOKENS.map((token) => approveSingleToken(token)))
-      for (const token of POOL_TOKENS) {
-        await approveSingleToken(token)
-      }
+      await Promise.all(
+        POOL.poolTokens.map((token) => approveSingleToken(token)),
+      )
 
       // "isFirstTransaction" check can be removed after launch
       const poolTokenBalances: BigNumber[] = await Promise.all(
-        POOL_TOKENS.map(async (token, i) => {
+        POOL.poolTokens.map(async (token, i) => {
           return await swapContract.getTokenBalance(i)
         }),
       )
@@ -110,7 +107,7 @@ export function useApproveAndDeposit(
       } else {
         minToMint = await swapContract.calculateTokenAmount(
           account,
-          POOL_TOKENS.map(({ symbol }) => state[symbol].valueSafe),
+          POOL.poolTokens.map(({ symbol }) => state[symbol].valueSafe),
           true, // deposit boolean
         )
       }
@@ -137,7 +134,7 @@ export function useApproveAndDeposit(
       )
 
       const spendTransaction = await swapContract.addLiquidity(
-        POOL_TOKENS.map(({ symbol }) => state[symbol].valueSafe),
+        POOL.poolTokens.map(({ symbol }) => state[symbol].valueSafe),
         minToMint,
         Math.round(new Date().getTime() / 1000 + 60 * deadline),
         [],

src/hooks/useApproveAndWithdraw.ts

@@ -42,9 +42,7 @@ export function useApproveAndWithdraw(
     infiniteApproval,
   } = useSelector((state: AppState) => state.user)
   const lpTokenContract = useLPTokenContract(poolName)
-  const POOL_TOKENS = POOLS_MAP[poolName]
-  if (!POOL_TOKENS)
-    throw new Error("useApproveAndWithdraw requires a valid pool name")
+  const POOL = POOLS_MAP[poolName]
 
   return async function approveAndWithdraw(
     state: ApproveAndWithdrawStateArgument,
@@ -122,7 +120,7 @@ export function useApproveAndWithdraw(
       if (state.withdrawType === "ALL") {
         spendTransaction = await swapContract.removeLiquidity(
           state.lpTokenAmountToSpend,
-          POOL_TOKENS.map(({ symbol }) =>
+          POOL.poolTokens.map(({ symbol }) =>
             subtractSlippage(
               BigNumber.from(state.tokenFormState[symbol].valueSafe),
               slippageSelected,
@@ -136,7 +134,7 @@ export function useApproveAndWithdraw(
         )
       } else if (state.withdrawType === "IMBALANCE") {
         spendTransaction = await swapContract.removeLiquidityImbalance(
-          POOL_TOKENS.map(
+          POOL.poolTokens.map(
             ({ symbol }) => state.tokenFormState[symbol].valueSafe,
           ),
           addSlippage(
@@ -153,7 +151,9 @@ export function useApproveAndWithdraw(
         // state.withdrawType === [TokenSymbol]
         spendTransaction = await swapContract.removeLiquidityOneToken(
           state.lpTokenAmountToSpend,
-          POOL_TOKENS.findIndex(({ symbol }) => symbol === state.withdrawType),
+          POOL.poolTokens.findIndex(
+            ({ symbol }) => symbol === state.withdrawType,
+          ),
           subtractSlippage(
             BigNumber.from(
               state.tokenFormState[state.withdrawType || ""].valueSafe,

src/hooks/useContract.ts

@@ -6,7 +6,9 @@ import {
   PoolName,
   RENBTC,
   SBTC,
+  STABLECOIN_POOL_NAME,
   STABLECOIN_SWAP_ADDRESSES,
+  STABLECOIN_SWAP_TOKEN,
   SUSD,
   TBTC,
   Token,
@@ -75,9 +77,10 @@ export function useSwapContract(poolName: PoolName): Swap | null {
   return useMemo(() => {
     if (poolName === BTC_POOL_NAME) {
       return btcSwapContract as Swap
-    } else {
+    } else if (poolName === STABLECOIN_POOL_NAME) {
       return stablecoinSwapContract as Swap
     }
+    return null
   }, [stablecoinSwapContract, btcSwapContract, poolName])
 }
 
@@ -103,6 +106,9 @@ export function useAllContracts(): AllContractsObject | null {
   const usdtContract = useTokenContract(USDT) as Erc20
   const susdContract = useTokenContract(SUSD) as Erc20
   const btcSwapTokenContract = useTokenContract(BTC_SWAP_TOKEN) as Swap
+  const stablecoinSwapTokenContract = useTokenContract(
+    STABLECOIN_SWAP_TOKEN,
+  ) as Swap
 
   return useMemo(() => {
     if (
@@ -116,6 +122,7 @@ export function useAllContracts(): AllContractsObject | null {
         usdtContract,
         susdContract,
         btcSwapTokenContract,
+        // stablecoinSwapTokenContract, // TODO: add back when contract deployed
       ].some(Boolean)
     )
       return null
@@ -129,6 +136,7 @@ export function useAllContracts(): AllContractsObject | null {
       [USDT.symbol]: usdtContract,
       [SUSD.symbol]: susdContract,
       [BTC_SWAP_TOKEN.symbol]: btcSwapTokenContract,
+      [STABLECOIN_SWAP_TOKEN.symbol]: stablecoinSwapTokenContract,
     }
   }, [
     tbtcContract,
@@ -140,5 +148,6 @@ export function useAllContracts(): AllContractsObject | null {
     usdtContract,
     susdContract,
     btcSwapTokenContract,
+    stablecoinSwapTokenContract,
   ])
 }

src/hooks/usePoolData.ts

@@ -1,6 +1,5 @@
 import { POOLS_MAP, PoolName, TRANSACTION_TYPES } from "../constants"
 import { formatBNToPercentString, getContract } from "../utils"
-import { useAllContracts, useSwapContract } from "./useContract"
 import { useEffect, useState } from "react"
 
 import { AddressZero } from "@ethersproject/constants"
@@ -12,6 +11,7 @@ import { Zero } from "@ethersproject/constants"
 import { parseUnits } from "@ethersproject/units"
 import { useActiveWeb3React } from "."
 import { useSelector } from "react-redux"
+import { useSwapContract } from "./useContract"
 
 interface TokenShareType {
   percent: string
@@ -53,7 +53,6 @@ export default function usePoolData(
 ): PoolDataHookReturnType {
   const { account, library } = useActiveWeb3React()
   const swapContract = useSwapContract(poolName)
-  const tokenContracts = useAllContracts()
   const [poolData, setPoolData] = useState<PoolDataHookReturnType>([null, null])
   const { tokenPricesUSD, lastTransactionTimes } = useSelector(
     (state: AppState) => state.application,
@@ -67,22 +66,21 @@ export default function usePoolData(
       if (
         poolName == null ||
         swapContract == null ||
-        tokenContracts == null ||
         tokenPricesUSD == null ||
         library == null ||
         account == null
       )
         return
 
-      const POOL_TOKENS = POOLS_MAP[poolName]
+      const POOL = POOLS_MAP[poolName]
 
       // Swap fees, price, and LP Token data
       const [userCurrentWithdrawFee, swapStorage] = await Promise.all([
         swapContract.calculateCurrentWithdrawFee(account || AddressZero),
         swapContract.swapStorage(),
       ])
       const { adminFee, lpToken: lpTokenAddress, swapFee } = swapStorage
-      const lpToken = getContract(
+      const lpTokenContract = getContract(
         lpTokenAddress,
         LPTOKEN_ABI,
         library,
@@ -93,9 +91,9 @@ export default function usePoolData(
         userLpTokenMinted,
         totalLpTokenBalance,
       ] = await Promise.all([
-        lpToken.balanceOf(account || AddressZero),
-        lpToken.mintedAmounts(account || AddressZero),
-        lpToken.totalSupply(),
+        lpTokenContract.balanceOf(account || AddressZero),
+        lpTokenContract.mintedAmounts(account || AddressZero),
+        lpTokenContract.totalSupply(),
       ])
 
       const virtualPrice = totalLpTokenBalance.isZero()
@@ -104,7 +102,7 @@ export default function usePoolData(
 
       // Pool token data
       const tokenBalances: BigNumber[] = await Promise.all(
-        POOL_TOKENS.map(async (token, i) => {
+        POOL.poolTokens.map(async (token, i) => {
           const balance = await swapContract.getTokenBalance(i)
           return BigNumber.from(10)
             .pow(18 - token.decimals) // cast all to 18 decimals
@@ -114,7 +112,7 @@ export default function usePoolData(
       const tokenBalancesSum: BigNumber = tokenBalances.reduce((sum, b) =>
         sum.add(b),
       )
-      const tokenBalancesUSD = POOL_TOKENS.map((token, i) => {
+      const tokenBalancesUSD = POOL.poolTokens.map((token, i) => {
         const balance = tokenBalances[i]
         return balance
           .mul(parseUnits(String(tokenPricesUSD[token.symbol]), 18))
@@ -130,7 +128,7 @@ export default function usePoolData(
             .div(tokenBalancesSum)
 
       // (weeksPerYear * KEEPPerWeek * KEEPPrice) / (BTCPrice * BTCInPool)
-      const comparisonPoolToken = POOL_TOKENS[0]
+      const comparisonPoolToken = POOL.poolTokens[0]
       const keepAPRNumerator = BigNumber.from(52 * 250000)
         .mul(BigNumber.from(10).pow(18))
         .mul(parseUnits(String(tokenPricesUSD.KEEP), 18))
@@ -163,7 +161,7 @@ export default function usePoolData(
         (sum, b) => sum.add(b),
       )
 
-      const poolTokens = POOL_TOKENS.map((token, i) => ({
+      const poolTokens = POOL.poolTokens.map((token, i) => ({
         symbol: token.symbol,
         percent: formatBNToPercentString(
           tokenBalances[i]
@@ -177,7 +175,7 @@ export default function usePoolData(
         ),
         value: tokenBalances[i],
       }))
-      const userPoolTokens = POOL_TOKENS.map((token, i) => ({
+      const userPoolTokens = POOL.poolTokens.map((token, i) => ({
         symbol: token.symbol,
         percent: formatBNToPercentString(
           tokenBalances[i]
@@ -227,7 +225,6 @@ export default function usePoolData(
     lastSwapTime,
     poolName,
     swapContract,
-    tokenContracts,
     tokenPricesUSD,
     account,
     library,