From f90156f4af4d3cade42dd1b0d7235510d7903b69 Mon Sep 17 00:00:00 2001 From: Longfei Zhao Date: Wed, 14 Sep 2022 11:47:13 +1000 Subject: [PATCH 1/3] update Zapper API to v2 --- package.json | 1 + .../darknodeStatsPage/DarknodeStatsPage.tsx | 134 +++++++++++------- src/lib/react/environmentVariables.ts | 2 + 3 files changed, 86 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index a9240a25..7c88a2eb 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "bs58": "^4.0.1", "d3-geo-projection": "^4.0.0", "ethereumjs-util": "^7.1.0", + "eventsource": "^2.0.2", "graphql": "^15.5.1", "highcharts": "^9.2.1", "highcharts-react-official": "^3.0.0", diff --git a/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx b/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx index d9772b68..cf1c50f8 100644 --- a/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx +++ b/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx @@ -1,9 +1,9 @@ import BigNumber from "bignumber.js"; import { OrderedMap } from "immutable"; import React, { useEffect, useMemo, useState } from "react"; - import { Loading } from "@renproject/react-components"; - +// @ts-ignore +import EventSource from "eventsource"; import { getAggregatedFeesCollection, getFeesCollection, @@ -31,6 +31,7 @@ import { updatePrices } from "../../common/tokenBalanceUtils"; import { mergeFees } from "../darknodePage/blocks/FeesBlockController"; import { OverviewDiv } from "./DarknodeStatsStyles"; import { FeesStat } from "./FeesStat"; +import { ZAPPER_API_KEY } from "../../../lib/react/environmentVariables"; const REN_TOTAL_SUPPLY = new BigNumber(1000000000); interface ZapperToken { @@ -40,15 +41,10 @@ interface ZapperToken { balanceUSD: number; } interface ZapperAsset { - tokens: ZapperToken; + context: ZapperToken; balanceUSD: number; -} -interface ZapperProduct { - assets: ZapperAsset[]; -} -interface ZapperBalance { - [key: string]: { - products: ZapperProduct[]; + displayProps: { + label: string; }; } @@ -89,59 +85,95 @@ export const DarknodeStatsPage = () => { const { renNetwork } = Web3Container.useContainer(); const { darknodes, fetchDarknodes } = MapContainer.useContainer(); + const generateEventSourceDict = (apiKey: string) => { + return { + withCredentials: true, + headers: { + "Content-Type": "text/event-stream", + "User-Agent": "Mozilla/5.0", + Authorization: `Basic ${Buffer.from(`${apiKey}:`).toString( + "base64", + )}`, + }, + }; + }; + useEffect(() => { - // Public API Key '96e0cc51-a62e-42ca-acee-910ea7d2a241' is from https://docs.zapper.fi/zapper-api/endpoints const sse = new EventSource( - `https://api.zapper.fi/v1/balances?addresses%5B%5D=${WithdrawAddresses.join( + `https://api.zapper.fi/v2/balances?addresses%5B%5D=${WithdrawAddresses.join( "&addresses%5B%5D=", - )}&api_key=96e0cc51-a62e-42ca-acee-910ea7d2a241`, + )}`, + generateEventSourceDict(ZAPPER_API_KEY), ); - sse.addEventListener("balance", function (e) { - const parsedData = JSON.parse((e as MessageEvent).data); + sse.addEventListener("balance", function (e: MessageEvent) { + const parsedData = JSON.parse(e.data); + if (parsedData.appId === "convex") { + parsedData.app.data[0].breakdown.forEach( + (item: ZapperAsset) => { + const token = item.context as ZapperToken; + const amount = new BigNumber(token.balanceRaw); + const amountInUsd = new BigNumber(item.balanceUSD); + const symbol = item.displayProps.label.split( + "/", + )[0] as Token; + const decimals = token.decimals; + setWithdraw((prevState) => + prevState.set(symbol, { + amount: prevState.has(symbol) + ? ( + prevState.get(symbol) as TokenAmount + ).amount.plus(amount) + : amount, + amountInEth: new BigNumber(0), + amountInUsd: prevState.has(symbol) + ? ( + prevState.get(symbol) as TokenAmount + ).amountInUsd.plus(amountInUsd) + : amountInUsd, + asset: { decimals }, + symbol, + }), + ); + }, + ); + } if ( - parsedData.network === "ethereum" || - parsedData.network === "fantom" + parsedData.appId === "tokens" && + (parsedData.network === "ethereum" || + parsedData.network === "fantom") ) { - for (let [key, value] of Object.entries( - parsedData.balances as ZapperBalance, + for (let [_, wallet] of Object.entries( + parsedData.balance.wallet as ZapperAsset, )) { - value.products.forEach((product: ZapperProduct) => { - product.assets.forEach((asset: ZapperAsset) => { - const token = asset.tokens[0] as ZapperToken; - const amount = new BigNumber(token.balanceRaw); - const amountInUsd = new BigNumber(token.balanceUSD); - const symbol = token.symbol as Token; - const decimals = token.decimals; - setWithdraw((prevState) => - prevState.set(symbol, { - amount: prevState.has(symbol) - ? ( - prevState.get( - symbol, - ) as TokenAmount - ).amount.plus(amount) - : amount, - amountInEth: new BigNumber(0), - amountInUsd: prevState.has(symbol) - ? ( - prevState.get( - symbol, - ) as TokenAmount - ).amountInUsd.plus(amountInUsd) - : amountInUsd, - asset: { decimals }, - symbol, - }), - ); - }); - }); + const token = wallet.context as ZapperToken; + const amount = new BigNumber(token.balanceRaw); + const amountInUsd = new BigNumber(wallet.balanceUSD); + const symbol = token.symbol as Token; + const decimals = token.decimals; + setWithdraw((prevState) => + prevState.set(symbol, { + amount: prevState.has(symbol) + ? ( + prevState.get(symbol) as TokenAmount + ).amount.plus(amount) + : amount, + amountInEth: new BigNumber(0), + amountInUsd: prevState.has(symbol) + ? ( + prevState.get(symbol) as TokenAmount + ).amountInUsd.plus(amountInUsd) + : amountInUsd, + asset: { decimals }, + symbol, + }), + ); } } }); - sse.addEventListener("start", function (e) { + sse.addEventListener("start", function (e: MessageEvent) { setWithdraw(OrderedMap()); }); - sse.addEventListener("end", function (e) { + sse.addEventListener("end", function (e: MessageEvent) { sse.close(); }); }, []); diff --git a/src/lib/react/environmentVariables.ts b/src/lib/react/environmentVariables.ts index fe39532e..0b298f15 100644 --- a/src/lib/react/environmentVariables.ts +++ b/src/lib/react/environmentVariables.ts @@ -24,3 +24,5 @@ export const DEV_TOOLS = DEFAULT_REN_NETWORK === "testnet" ? "https://explorer-testnet.renproject.io" : "https://explorer.renproject.io"; + +export const ZAPPER_API_KEY = process.env.REACT_APP_ZAPPER_KEY || ""; From 95c224b1c57362642dd3a6be26c5d444ad529176 Mon Sep 17 00:00:00 2001 From: Longfei Zhao Date: Wed, 14 Sep 2022 14:31:29 +1000 Subject: [PATCH 2/3] split USDT / WBTC / WETH data to 3 parts --- .../darknodeStatsPage/DarknodeStatsPage.tsx | 69 ++++++++++++------- 1 file changed, 45 insertions(+), 24 deletions(-) diff --git a/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx b/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx index cf1c50f8..863a9707 100644 --- a/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx +++ b/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx @@ -46,6 +46,7 @@ interface ZapperAsset { displayProps: { label: string; }; + breakdown: []; } const WithdrawAddresses = [ @@ -98,6 +99,30 @@ export const DarknodeStatsPage = () => { }; }; + const updateWithdraw = ( + token: ZapperToken, + symbol: Token, + amountInUsd: BigNumber, + ) => { + const amount = new BigNumber(token.balanceRaw); + const decimals = token.decimals; + setWithdraw((prevState) => + prevState.set(symbol, { + amount: prevState.has(symbol) + ? (prevState.get(symbol) as TokenAmount).amount.plus(amount) + : amount, + amountInEth: new BigNumber(0), + amountInUsd: prevState.has(symbol) + ? (prevState.get(symbol) as TokenAmount).amountInUsd.plus( + amountInUsd, + ) + : amountInUsd, + asset: { decimals }, + symbol, + }), + ); + }; + useEffect(() => { const sse = new EventSource( `https://api.zapper.fi/v2/balances?addresses%5B%5D=${WithdrawAddresses.join( @@ -110,30 +135,26 @@ export const DarknodeStatsPage = () => { if (parsedData.appId === "convex") { parsedData.app.data[0].breakdown.forEach( (item: ZapperAsset) => { - const token = item.context as ZapperToken; - const amount = new BigNumber(token.balanceRaw); - const amountInUsd = new BigNumber(item.balanceUSD); - const symbol = item.displayProps.label.split( - "/", - )[0] as Token; - const decimals = token.decimals; - setWithdraw((prevState) => - prevState.set(symbol, { - amount: prevState.has(symbol) - ? ( - prevState.get(symbol) as TokenAmount - ).amount.plus(amount) - : amount, - amountInEth: new BigNumber(0), - amountInUsd: prevState.has(symbol) - ? ( - prevState.get(symbol) as TokenAmount - ).amountInUsd.plus(amountInUsd) - : amountInUsd, - asset: { decimals }, - symbol, - }), - ); + if (item.breakdown.length !== 0) { + item.breakdown.forEach((i: ZapperAsset) => { + i.breakdown.forEach((balance: ZapperAsset) => { + console.log(balance); + const token = + balance.context as ZapperToken; + const amountInUsd = new BigNumber( + balance.balanceUSD, + ); + const symbol = balance.displayProps + .label as Token; + updateWithdraw(token, symbol, amountInUsd); + }); + }); + } else { + const token = item.context as ZapperToken; + const amountInUsd = new BigNumber(item.balanceUSD); + const symbol = item.displayProps.label as Token; + updateWithdraw(token, symbol, amountInUsd); + } }, ); } From 0b70c0db0a29ba175dd57a65ef5cb8a0c4cf29d2 Mon Sep 17 00:00:00 2001 From: Longfei Zhao Date: Thu, 15 Sep 2022 09:57:17 +1000 Subject: [PATCH 3/3] remove consolo log --- src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx b/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx index 863a9707..2ae6a810 100644 --- a/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx +++ b/src/controllers/pages/darknodeStatsPage/DarknodeStatsPage.tsx @@ -138,7 +138,6 @@ export const DarknodeStatsPage = () => { if (item.breakdown.length !== 0) { item.breakdown.forEach((i: ZapperAsset) => { i.breakdown.forEach((balance: ZapperAsset) => { - console.log(balance); const token = balance.context as ZapperToken; const amountInUsd = new BigNumber(