First work to integrate staking (Idle) in own wallet

Author: mathijs81

web/src/components/SliderPanel.vue

@@ -35,7 +35,7 @@
             >
           </td>
           <td :title="formatPriceLong(token)" class="text-end">{{ formatPrice(token) }}</td>
-          <td class="text-end">{{ formatOwned(token) }}</td>
+          <td class="text-end" :title="tokenTitle(token)">{{ formatOwned(token) }}</td>
           <td class="text-end">{{ formatValue(token) }}</td>
           <td class="text-end">
             <div class="d-flex flex-column align-items-end">
@@ -59,6 +59,7 @@ import { asyncComputed, debouncedWatch } from '@vueuse/core';
 import { computed, defineComponent, PropType, reactive, Ref, ref, watch } from 'vue';
 import Dropdown from 'primevue/dropdown';
 import { numberMixin } from '@/util/numbers';
+import { StakedToken } from '@/util/stakedTokens';
 
 function adjustRatios(
   before: Record<string, number>,
@@ -219,6 +220,9 @@ export default defineComponent({
     formatValue(token: TokenData): string {
       return this.formatDollars(token.ownedAmount.toUnsafeFloat() * token.value);
     },
+    tokenTitle(token: TokenData): string {
+      return 'description' in token ? (token as StakedToken).description : '';
+    },
   },
   mixins: [numberMixin],
 });

web/src/util/numbers.ts

@@ -38,6 +38,9 @@ export function reduceDecimals(n: FixedNumber, decimals: number): FixedNumber {
 export function fixedToBigNumber(n: FixedNumber, decimals: number): BigNumber {
   return utils.parseUnits(n.toString(), decimals);
 }
+export function bigNumberToFixed(n: BigNumber, decimals: number): FixedNumber {
+  return FixedNumber.from(utils.formatUnits(n, decimals), decimals);
+}
 
 export function formatMaxDigits(n: number, digits = 2): string {
   if (n === undefined) {

web/src/util/stakedTokens.ts

@@ -0,0 +1,55 @@
+import { TokenData } from './tokens';
+import { FixedNumber } from 'ethers';
+
+export interface StakedToken extends TokenData {
+  stakedUnderlyingValue: FixedNumber;
+  description: string;
+}
+
+export function reduceTokens(allTokens: TokenData[]): StakedToken[] {
+  // Find all tokens with the same symbol
+  const tokensBySymbol: Record<string, TokenData[]> = {};
+  for (const token of allTokens) {
+    const tokenArray = tokensBySymbol[token.symbol];
+    if (!tokenArray) {
+      tokensBySymbol[token.symbol] = [token];
+    } else {
+      tokenArray.push(token);
+    }
+  }
+  console.log(allTokens, tokensBySymbol);
+
+  // Reduce all symbols to one item
+  const result: StakedToken[] = [];
+  for (const [symbol, tokenArray] of Object.entries(tokensBySymbol)) {
+    if (tokenArray.length === 0) {
+      console.log('Empty array for ' + symbol);
+      continue;
+    }
+    // Find the non-staked token version
+    const nonStakedIndex = tokenArray.findIndex((token) => !('stakedUnderlyingValue' in token));
+    if (nonStakedIndex === -1) {
+      throw new Error(`${symbol} only has staked tokens? ${tokenArray}`);
+    }
+    const nonStakedItem: TokenData = tokenArray.splice(nonStakedIndex, 1)[0];
+    const newToken: StakedToken = {
+      ...nonStakedItem,
+      stakedUnderlyingValue: FixedNumber.from(0.0),
+      description: `${nonStakedItem.ownedAmount} ${symbol}`,
+    };
+    // Add up the stakedTokens
+    for (const _stakedToken of tokenArray) {
+      if (!('stakedUnderlyingValue' in _stakedToken)) {
+        throw new Error(`${symbol} has multiple unstaked tokens in list?`);
+      }
+      const stakedToken = _stakedToken as StakedToken;
+      newToken.ownedAmount = newToken.ownedAmount.addUnsafe(stakedToken.stakedUnderlyingValue);
+      newToken.stakedUnderlyingValue = newToken.stakedUnderlyingValue.addUnsafe(
+        stakedToken.stakedUnderlyingValue
+      );
+      newToken.description += '\n' + stakedToken.description;
+    }
+    result.push(newToken);
+  }
+  return result;
+}

web/src/util/tokens.ts

@@ -4,7 +4,7 @@ import { BigNumber, Contract, FixedNumber } from 'ethers';
 export interface TokenData {
   id: string;
   name: string;
-  symbol?: string;
+  symbol: string;
   decimals: number;
   ownedAmount: FixedNumber;
   value: number;

web/src/views/EnzymeSliders.vue

@@ -77,7 +77,7 @@ export default defineComponent({
       if (tokenList) {
         if (fund) {
           const assetMap = await trackAssets(fund.id, web3Service.getProvider());
-          const daiValue = tokenList.find(token => token.symbol == "DAI")?.value ?? 1.0;
+          const daiValue = tokenList.find((token) => token.symbol == 'DAI')?.value ?? 1.0;
           tokens.value = tokenList
             .map((token) => {
               let value = token.value / daiValue;

web/src/views/FarmingStrategy.vue

@@ -72,6 +72,7 @@ export default defineComponent({
         .map((asset) => ({
           id: asset.id.toLowerCase(),
           name: asset.name,
+          symbol: asset.symbol,
           value: asset.price?.price ?? -1,
           ownedAmount: FixedNumber.from('0'),
           decimals: asset.decimals,

web/src/views/WalletAccount.vue

@@ -25,23 +25,27 @@ import { calcSliderChangeResult } from '@/util/sliderUtil';
 import { fetchTokens } from '@/util/tokenlist';
 import { calcPercentageMap, getTokenBalance, TokenData } from '@/util/tokens';
 import { getTokenPrices } from '@/web3/uniswapService';
+import { idleService } from '@/web3/idleService';
 import { web3Service } from '@/web3/web3Service';
 import { asyncComputed } from '@vueuse/core';
 import { BigNumber, FixedNumber } from 'ethers';
 import { defineComponent, ref, Ref, watchEffect } from 'vue';
+import { reduceTokens } from '@/util/stakedTokens';
 
 export default defineComponent({
   setup() {
     const tokenList = asyncComputed(() => fetchTokens(), []);
     const tokenData: Ref<TokenData[]> = ref([]);
     const distribution: Ref<Record<string, number>> = ref({});
     const startingDistribution: Ref<Record<string, number>> = ref({});
+    const idleTokenList = asyncComputed(() => idleService.getTokenData());
 
     // TODO: native ETH is not shown now (only WETH)
 
     watchEffect(async () => {
       const account = web3Service.status().address;
       const tokens = tokenList.value;
+      const idleTokens = idleTokenList.value;
       // Look up all balances and create TokenData
       const balances = tokens.map((token) => {
         if (account) {
@@ -56,27 +60,30 @@ export default defineComponent({
       const multiplier = 1.0 / (tokenPrices[usdAddress]?.derivedETH ?? 1.0);
 
       let index = -1;
-      tokenData.value = (
-        await Promise.all(
-          tokens.map(async (tokenInfo) => {
-            index++;
-            let value =
-              parseFloat(tokenPrices[tokenInfo.address]?.derivedETH ?? '0.0001') * multiplier;
-            if (value == 0.0) {
-              value = 0.0001 * multiplier;
-            }
-            return {
-              id: tokenInfo.address,
-              name: tokenInfo.name,
-              symbol: tokenInfo.symbol,
-              decimals: tokenInfo.decimals,
-              ownedAmount: FixedNumber.fromValue(await balances[index], tokenInfo.decimals),
-              value: value,
-              logoUri: tokenInfo.logoURI,
-            } as TokenData;
-          })
-        )
-      ).sort(
+      let basicTokens = await Promise.all(
+        tokens.map(async (tokenInfo) => {
+          index++;
+          let value =
+            parseFloat(tokenPrices[tokenInfo.address]?.derivedETH ?? '0.0001') * multiplier;
+          if (value == 0.0) {
+            value = 0.0001 * multiplier;
+          }
+          return {
+            id: tokenInfo.address,
+            name: tokenInfo.name,
+            symbol: tokenInfo.symbol,
+            decimals: tokenInfo.decimals,
+            ownedAmount: FixedNumber.fromValue(await balances[index], tokenInfo.decimals),
+            value: value,
+            logoUri: tokenInfo.logoURI,
+          } as TokenData;
+        })
+      );
+      if (basicTokens.length > 0) {
+        basicTokens.push(...idleTokens);
+        basicTokens = reduceTokens(basicTokens);
+      }
+      tokenData.value = basicTokens.sort(
         (a, b) => b.value * b.ownedAmount.toUnsafeFloat() - a.value * a.ownedAmount.toUnsafeFloat()
       );
       distribution.value = calcPercentageMap(tokenData.value);

web/src/web3/idleService.ts

@@ -0,0 +1,64 @@
+import { bigNumberToFixed } from '@/util/numbers';
+import { StakedToken } from '@/util/stakedTokens';
+import { getTokenBalance } from '@/util/tokens';
+import { BigNumber, Contract, FixedNumber, utils } from 'ethers';
+import idleTokenAbi from './IdleToken.json';
+import { web3Service } from './web3Service';
+
+const idleAddresses = {
+  DAI: '0x3fE7940616e5Bc47b0775a0dccf6237893353bB4',
+  USDC: '0x5274891bEC421B39D23760c04A6755eCB444797C',
+  USDT: '0xF34842d05A1c888Ca02769A633DF37177415C2f8',
+  WBTC: '0x8C81121B15197fA0eEaEE1DC75533419DcfD3151',
+  WETH: '0xC8E6CA6E96a326dC448307A5fDE90a0b21fd7f80',
+};
+
+// Staking through idle.finance
+class IdleService {
+  public async getTokenData(): Promise<StakedToken[]> {
+    const address = web3Service.status().address;
+    if (!address) {
+      return [];
+    }
+
+    // Enable this to test what things look like with 1 WETH staked:
+    const testContract = ''; // '0xC8E6CA6E96a326dC448307A5fDE90a0b21fd7f80'
+
+    const balanceMap = await Promise.all(
+      Object.values(idleAddresses).map((contractAddress) => {
+        if (contractAddress == testContract) return Promise.resolve(utils.parseEther('1'));
+        else return getTokenBalance(contractAddress, address);
+      })
+    );
+    let index = -1;
+    return Promise.all(
+      Object.entries(idleAddresses).map(async ([symbol, address]) => {
+        const decimals = 18; // 4-Jul-2021: the 5 addresses we use all have 18 as decimals.
+        // For future, better to look it up
+        index++;
+        const owned = bigNumberToFixed(balanceMap[index], decimals);
+        let value = FixedNumber.from(0.0);
+        if (balanceMap[index].gt(BigNumber.from(0))) {
+          const contract = new Contract(address, idleTokenAbi, web3Service.getProvider());
+          const tokenPrice: BigNumber = await contract.tokenPrice();
+          value = bigNumberToFixed(tokenPrice, decimals);
+          console.log(owned, value);
+        }
+        return {
+          id: address,
+          name: symbol,
+          symbol: symbol,
+          decimals: decimals,
+          ownedAmount: owned,
+          value: value.toUnsafeFloat(),
+          stakedUnderlyingValue: owned.mulUnsafe(value),
+          description: `${value} Staked ${symbol} on idle.finance`,
+        };
+      })
+    );
+  }
+}
+
+const idleService = new IdleService();
+
+export { idleService };

web/tsconfig.json

@@ -10,6 +10,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
+    "resolveJsonModule": true,
     "baseUrl": ".",
     "types": [
       "webpack-env"