Starting to integrate lend (#58)

* Add lend page back in * Adding new lending pair data type
aloelabs · Sep 19, 2022 · efe30b4 · efe30b4
1 parent 8f9c36c
commit efe30b4
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 110 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -80,7 +80,7 @@ function App() {
             <Header />
             <main className='flex-grow'>
               <Routes>
-                {/* <Route path='/lend' element={<LendPage />} /> */}
+                <Route path='/lend' element={<LendPage />} />
                 <Route path='/borrow' element={<BorrowAccountsPage />} />
                 <Route path='/borrow/account/:account' element={<BorrowActionsPage />} />
                 {

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -19,11 +19,11 @@ type MenuItem = {
 };
 
 const menuItems: MenuItem[] = [
-  // {
-  //   title: 'Lend',
-  //   name: 'lend',
-  //   url: '/lend',
-  // },
+  {
+    title: 'Lend',
+    name: 'lend',
+    url: '/lend',
+  },
   {
     title: 'Borrow',
     name: 'borrow',

diff --git a/src/data/LendingPair.ts b/src/data/LendingPair.ts
@@ -0,0 +1,78 @@
+import { ethers } from 'ethers';
+import { makeEtherscanRequest } from '../util/Etherscan';
+import { FeeTier, NumericFeeTierToEnum } from './FeeTier';
+import { GetTokenData, TokenData } from './TokenData';
+import KittyABI from '../assets/abis/Kitty.json';
+import KittyLensABI from '../assets/abis/KittyLens.json';
+import UniswapV3PoolABI from '../assets/abis/UniswapV3Pool.json';
+import Big from 'big.js';
+import { ALOE_II_FACTORY_ADDRESS_GOERLI, ALOE_II_KITTY_LENS_ADDRESS } from './constants/Addresses';
+
+export type LendingPair = {
+  token0: TokenData;
+  token1: TokenData;
+  kitty0: TokenData;
+  kitty1: TokenData;
+  token0APY: number;
+  token1APY: number;
+  token0TotalSupply: number;
+  token1TotalSupply: number;
+  token0Utilization: number;
+  token1Utilization: number;
+  uniswapFeeTier: FeeTier;
+};
+
+export async function getAvailableLendingPairs(provider: ethers.providers.BaseProvider): Promise<LendingPair[]> {
+  const etherscanResult = await makeEtherscanRequest(
+    7537163,
+    ALOE_II_FACTORY_ADDRESS_GOERLI,
+    ['0x3f53d2c2743b2b162c0aa5d678be4058d3ae2043700424be52c04105df3e2411'],
+    true,
+    'api-goerli'
+  );
+  if (!Array.isArray(etherscanResult.data.result)) return [];
+
+  const addresses: {pool: string, kitty0: string, kitty1: string}[] = etherscanResult.data.result.map((item: any) => {
+    return {
+      pool: item.topics[1].slice(26),
+      kitty0: item.topics[2].slice(26),
+      kitty1: item.topics[3].slice(26)
+    };
+  });
+
+  const kittyLens = new ethers.Contract(ALOE_II_KITTY_LENS_ADDRESS, KittyLensABI, provider);
+
+  return await Promise.all(addresses.map(async (market) => {
+    const uniswapPool = new ethers.Contract(market.pool, UniswapV3PoolABI, provider);
+
+    const [result0, result1, result2] = await Promise.all([
+      kittyLens.readBasics(market.kitty0),
+      kittyLens.readBasics(market.kitty1),
+      uniswapPool.fee(),
+    ]);
+
+    const token0 = GetTokenData(result0.asset);
+    const token1 = GetTokenData(result1.asset);
+    const kitty0 = GetTokenData(market.kitty0);
+    const kitty1 = GetTokenData(market.kitty1);
+
+    const interestRate0 = new Big(result0.interestRate.toString());
+    const interestRate1 = new Big(result1.interestRate.toString());
+    const APY0 = (interestRate0.div(10 ** 18).plus(1.0).toNumber() ** (365 * 24 * 60 * 60)) - 1.0;
+    const APY1 = (interestRate1.div(10 ** 18).plus(1.0).toNumber() ** (365 * 24 * 60 * 60)) - 1.0;
+
+    return {
+      token0,
+      token1,
+      kitty0,
+      kitty1,
+      token0APY: APY0,
+      token1APY: APY1,
+      token0TotalSupply: new Big(result0.inventory.toString()).div(10 ** token0.decimals).toNumber(),
+      token1TotalSupply: new Big(result1.inventory.toString()).div(10 ** token1.decimals).toNumber(),
+      token0Utilization: new Big(result0.utilization.toString()).div(10 ** 18).toNumber(),
+      token1Utilization: new Big(result1.utilization.toString()).div(10 ** 18).toNumber(),
+      uniswapFeeTier: NumericFeeTierToEnum(result2),
+    };
+  }));
+}
diff --git a/src/data/constants/Addresses.ts b/src/data/constants/Addresses.ts
@@ -7,4 +7,5 @@ export const BLEND_FACTORY_CREATION_BLOCK = 14128969;
 export const WETH_9_MAINNET_ADDRESS =
   '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2';
 
-export const ALOE_II_FACTORY_ADDRESS_GOERLI = '0xC49D44f7e3Eb918A9E038EEbB007Ae0292BE5576';
+export const ALOE_II_FACTORY_ADDRESS_GOERLI = '0xc49d44f7e3eb918a9e038eebb007ae0292be5576';
+export const ALOE_II_KITTY_LENS_ADDRESS = '0x723bfe564661536fdffa3e9e060135928d3bf18f';
diff --git a/src/pages/LendPage.tsx b/src/pages/LendPage.tsx
@@ -5,30 +5,21 @@ import AppPage from '../components/common/AppPage';
 import { FilledGreyButtonWithIcon } from '../components/common/Buttons';
 import { Text } from '../components/common/Typography';
 import BalanceSlider from '../components/lend/BalanceSlider';
-import { GetTokenData, getTokens, TokenData } from '../data/TokenData';
+import { GetTokenData, getTokens } from '../data/TokenData';
 import { formatUSD, roundPercentage } from '../util/Numbers';
 import { ReactComponent as FilterIcon } from '../assets/svg/filter.svg';
 import { Divider } from '../components/common/Divider';
 import Tooltip from '../components/common/Tooltip';
 import LendPairCard, { LendPairCardProps } from '../components/lend/LendPairCard';
-import { FeeTier, NumericFeeTierToEnum } from '../data/FeeTier';
-import YieldAggregatorCard from '../components/lend/YieldAggregatorCard';
 import Pagination, { ItemsPerPage } from '../components/common/Pagination';
 import {
   MultiDropdownButton,
   MultiDropdownOption,
 } from '../components/common/Dropdown';
 import { SquareInputWithIcon } from '../components/common/Input';
 import { ReactComponent as SearchIcon } from '../assets/svg/search.svg';
-import { chain, useAccount, useEnsName, useNetwork, useProvider } from 'wagmi';
-import { ethers } from 'ethers';
-import { makeEtherscanRequest } from '../util/Etherscan';
-
-import KittyABI from '../assets/abis/Kitty.json';
-import KittyLensABI from '../assets/abis/KittyLens.json';
-import UniswapV3PoolABI from '../assets/abis/UniswapV3Pool.json';
-
-import Big from 'big.js';
+import { chain, useAccount, useEnsName, useProvider } from 'wagmi';
+import { getAvailableLendingPairs } from '../data/LendingPair';
 
 const LEND_TITLE_TEXT_COLOR = 'rgba(130, 160, 182, 1)';
 
@@ -64,77 +55,6 @@ const filterOptions: MultiDropdownOption[] = getTokens().map((token) => {
   } as MultiDropdownOption;
 });
 
-//TODO: move this function to where it belongs
-async function getAvailableLendingPairs(provider: ethers.providers.Provider): Promise<LendPairCardProps[]> {
-  const etherscanResult = await makeEtherscanRequest(
-    7537163,
-    '0x9F6d4681fD8c557e5dC75b6713078233e98CA351', // TODO replace with constant for FACTORY address
-    ['0x3f53d2c2743b2b162c0aa5d678be4058d3ae2043700424be52c04105df3e2411'],
-    true,
-    'api-goerli'
-  );
-  console.log(etherscanResult.data);
-  if (!Array.isArray(etherscanResult.data.result)) return [];
-
-  //TODO: KITTY LENS (TEMPORARY): 0x723bfe564661536fdffa3e9e060135928d3bf18f
-
-  const addresses: {pool: string, kitty0: string, kitty1: string}[] = etherscanResult.data.result.map((item: any) => {
-    return {
-      pool: item.topics[1].slice(26),
-      kitty0: item.topics[2].slice(26),
-      kitty1: item.topics[3].slice(26)
-    };
-  });
-
-  const kittyLens = new ethers.Contract('0x723bfe564661536fdffa3e9e060135928d3bf18f', KittyLensABI, provider);
-
-  return await Promise.all(addresses.map(async (market) => {
-    const uniswapPool = new ethers.Contract(market.pool, UniswapV3PoolABI, provider);
-
-    const [result0, result1, result2] = await Promise.all([
-      kittyLens.readBasics(market.kitty0),
-      kittyLens.readBasics(market.kitty1),
-      uniswapPool.fee(),
-    ]);
-
-    const token0 = GetTokenData(result0.asset);
-    const token1 = GetTokenData(result1.asset);
-    const kitty0: TokenData = {
-      address: market.kitty0,
-      decimals: 18,
-      iconPath: token0.iconPath,
-      name: `Aloe II ${token0.name ?? 'Token'}`,
-      ticker: token0.ticker ? `${token0.ticker}+` : undefined,
-    }
-    const kitty1: TokenData = {
-      address: market.kitty1,
-      decimals: 18,
-      iconPath: token1.iconPath,
-      name: `Aloe II ${token1.name ?? 'Token'}`,
-      ticker: token1.ticker ? `${token1.ticker}+` : undefined,
-    }
-
-    const interestRate0 = new Big(result0.interestRate.toString());
-    const interestRate1 = new Big(result1.interestRate.toString());
-    const APY0 = (interestRate0.div(10 ** 18).plus(1.0).toNumber() ** (365 * 24 * 60 * 60)) - 1.0;
-    const APY1 = (interestRate1.div(10 ** 18).plus(1.0).toNumber() ** (365 * 24 * 60 * 60)) - 1.0;
-
-    return {
-      token0,
-      token1,
-      kitty0,
-      kitty1,
-      token0APY: APY0,
-      token1APY: APY1,
-      token0TotalSupply: new Big(result0.inventory.toString()).div(10 ** token0.decimals).toNumber(),
-      token1TotalSupply: new Big(result1.inventory.toString()).div(10 ** token1.decimals).toNumber(),
-      token0Utilization: new Big(result0.utilization.toString()).div(10 ** 18).toNumber(),
-      token1Utilization: new Big(result1.utilization.toString()).div(10 ** 18).toNumber(),
-      uniswapFeeTier: NumericFeeTierToEnum(result2),
-    };
-  }));
-}
-
 export default function LendPage() {
   // MARK: component state
   const [lendingPairs, setLendingPairs] = useState<LendPairCardProps[]>([]);
@@ -149,9 +69,6 @@ export default function LendPage() {
     address: address,
     chainId: chain.mainnet.id,
   });
-  // const { chain: currentChain, chains: availableChains } = useNetwork()
-  // console.log(currentChain);
-  // console.log(availableChains);
 
   const chartData = [];
   for (let i = 0; i < 100; i++) {
@@ -276,23 +193,6 @@ export default function LendPage() {
             {lendingPairs.map((lendPair) => (
               <LendPairCard key={lendPair.token0.address} {...lendPair} />
             ))}
-            {/* <YieldAggregatorCard
-              tokens={[
-                GetTokenData('0x03ab458634910aad20ef5f1c8ee96f1d6ac54919'),
-                GetTokenData('0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'),
-                GetTokenData('0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'),
-                GetTokenData('0xf4d2888d29d722226fafa5d9b24f9164c092421e'),
-                GetTokenData('0xc7283b66eb1eb5fb86327f08e1b5816b0720212b'),
-                GetTokenData('0x03ab458634910aad20ef5f1c8ee96f1d6ac54919'),
-                GetTokenData('0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'),
-                GetTokenData('0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'),
-                GetTokenData('0xf4d2888d29d722226fafa5d9b24f9164c092421e'),
-                GetTokenData('0xc7283b66eb1eb5fb86327f08e1b5816b0720212b'),
-              ]}
-              totalAPY={5.54}
-              totalSupply={1000.01}
-              totalUtilization={70.5}
-            /> */}
           </LendCards>
           <Pagination
             totalItems={/*TODO*/10}