User History Testing

package.json

@@ -72,7 +72,7 @@
     "next": "11.0.2-canary.27",
     "next-i18next": "^8.7.0",
     "node-fetch": "^2.6.1",
-    "picklefinance-core": "^0.5.7",
+    "picklefinance-core": "^0.5.46",
     "rc-slider": "^10.0.0-alpha.6",
     "react": "^16.13.1",
     "react-apexcharts": "^1.3.7",
@@ -95,6 +95,7 @@
     "rooks": "^5.8.0",
     "rxjs": "^6.6.3",
     "sass": "^1.26.11",
+    "sharp": "^0.31.1",
     "styled-components": "^5.2.0",
     "swr": "^1.0.1",
     "unstated-next": "^1.1.0",
@@ -111,7 +112,7 @@
     "@types/node": "^14.11.1",
     "@types/node-fetch": "^2.5.8",
     "@types/prettier": "2.1.2",
-    "@types/react": "^16.9.49",
+    "@types/react": "^18.0.27",
     "@types/react-dom": "^17.0.0",
     "@types/react-gauge-chart": "^0.3.0",
     "@types/react-html-parser": "^2.0.2",
@@ -120,6 +121,7 @@
     "@types/recharts": "^1.8.19",
     "@types/recharts-scale": "^1.0.0",
     "@types/sass": "^1.16.0",
+    "@types/sharp": "^0.31.0",
     "@types/styled-components": "^5.1.3",
     "@types/tailwindcss": "^3.0.4",
     "@typescript-eslint/eslint-plugin": "^4.1.1",
@@ -137,7 +139,8 @@
     "tailwindcss": "^3.0.15",
     "typechain": "^8.0.0",
     "typescript": "^4.3.5",
-    "typesync": "^0.8.0"
+    "typesync": "^0.8.0",
+    "uuidv4": "^6.2.13"
   },
   "husky": {
     "hooks": {

pages/stats.tsx

@@ -56,7 +56,7 @@ const Stats: PickleFinancePage = () => {
   );
 };
 
-const Loading: FC<{ ready: readyState; page?: "platform" | "chain" | "jar" }> = ({
+const Loading: FC<{ ready: ReadyState; page?: "platform" | "chain" | "jar" }> = ({
   ready,
   page,
 }) => {
@@ -93,7 +93,7 @@ const PageTitle: FC = () => {
   );
 };
 
-export interface readyState {
+export interface ReadyState {
   platform: boolean;
   chain: boolean;
   jar: boolean;

v2/components/PickleDillBalanceCard.tsx

@@ -28,8 +28,6 @@ const DillBalanceCard: FC = () => {
   }
 
   if (userModel && userModel.dill && userModel.dill.balance) {
-    // TODO this specific logic of dividing by 1e18 but then getting 3 decimals seems common.
-    // Might want to extract to a utility
     dill = (BigNumber.from(userModel.dill.balance).div(1e10).div(1e5).toNumber() / 1e3).toString();
     if (userModel.dill.pickleLocked)
       lockedPickles = (

v2/features/farms/FarmsTableBody.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { useTranslation } from "next-i18next";
 
 import FarmsTableRow from "./FarmsTableRow";
-import { AssetWithData, CoreSelectors, JarWithData } from "v2/store/core";
+import { AssetWithData, CoreSelectors } from "v2/store/core";
 import { UserSelectors } from "v2/store/user";
 import { Sort } from "v2/store/controls";
 import { UserTokenData } from "picklefinance-core/lib/client/UserModel";

v2/features/farms/Pagination.tsx

@@ -1,4 +1,4 @@
-import { FC, MouseEventHandler, ReactElement } from "react";
+import { FC, MouseEventHandler } from "react";
 import { useSelector } from "react-redux";
 import { useTranslation } from "next-i18next";
 import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/solid";

v2/features/stats/ChainStats.tsx

@@ -11,13 +11,13 @@ import {
 } from "v2/features/stats/chain/BigMoverUtils";
 import { PickleModelJson } from "picklefinance-core";
 import { ChainSelectData } from "./ChainSelect";
-import { readyState } from "pages/stats";
+import { ReadyState } from "pages/stats";
 
 const ChainStats: FC<{
   core: PickleModelJson.PickleModelJson | undefined;
   chain: ChainSelectData;
   setJar: SetFunction;
-  ready: readyState;
+  ready: ReadyState;
   setReady: SetFunction;
   page: "platform" | "chain" | "jar" | undefined;
 }> = ({ core, chain, setJar, ready, setReady, page }) => {
@@ -30,7 +30,7 @@ const ChainStats: FC<{
       if (Object.keys(chain).length > 0)
         getChainData(chain.value)
           .then((data) => setChainData(data))
-          .then(() => setReady((prev: readyState) => ({ ...prev, chain: true })));
+          .then(() => setReady((prev: ReadyState) => ({ ...prev, chain: true })));
     };
     getData();
   }, [chain]);
@@ -44,7 +44,7 @@ const ChainStats: FC<{
 
   useEffect(() => {
     if (tokenPctChangeData.length > 0 && tvlChange.length > 0)
-      setReady((prev: readyState) => ({ ...prev, chain: true }));
+      setReady((prev: ReadyState) => ({ ...prev, chain: true }));
   }, [tokenPctChangeData, tvlChange]);
 
   tokenPctChangeData.sort((a, b) => (a.tokenPriceChange || 0) - (b.tokenPriceChange || 0));

v2/features/stats/JarStats.tsx

@@ -9,51 +9,114 @@ import DocContainer from "v2/features/stats/jar/DocContainer";
 import RevTableContainer from "v2/features/stats/jar/RevTableContainer";
 import FarmsTable from "v2/features/farms/FarmsTable";
 import { JarSelectData } from "./JarSelect";
-import { readyState } from "pages/stats";
+import { ReadyState } from "pages/stats";
+import { JarDefinition } from "picklefinance-core/lib/model/PickleModelJson";
+import { useTranslation } from "next-i18next";
+import TxHistoryContainer from "./jar/userHistory/TxHistoryContainer";
+import { UserJarHistoryPnlGenerator } from "picklefinance-core";
+import {
+  PnlTransactionWrapper,
+  UserJarHistory,
+} from "picklefinance-core/lib/client/pnl/UserHistoryInterfaces";
+import RelatedTokens from "./jar/RelatedTokens";
+import { useAccount } from "v2/hooks";
 
 const JarStats: FC<{
   core: PickleModelJson.PickleModelJson | undefined;
   jar: JarSelectData;
-  ready: readyState;
+  ready: ReadyState;
   setReady: SetFunction;
   page: "platform" | "chain" | "jar" | undefined;
 }> = ({ core, jar, ready, setReady, page }) => {
+  const { t } = useTranslation("common");
+  const account = useAccount();
+  //const account = "0xfeedc450742ac0d9bb38341d9939449e3270f76f";
   let assets = useSelector(CoreSelectors.makeAssetsSelector({ filtered: false, paginated: false }));
 
   const [jarData, setJarData] = useState<JarChartData>({} as JarChartData);
+  const [userHistory, setUserHistory] = useState<UserJarHistory>();
+  const [userPnl, setUserPnl] = useState<PnlTransactionWrapper[]>();
 
   let asset: AssetWithData | undefined = {} as AssetWithData;
+  let assetJar: JarDefinition | undefined = {} as JarDefinition;
+
   if (jar && jar.value)
     asset = assets.find((a) => a.details.apiKey.toLowerCase() === jar.value.toLowerCase());
+  if (asset) assetJar = core?.assets.jars.find((j) => j.contract == asset?.contract);
+
+  const addrs = Object.fromEntries(
+    Object.entries({
+      User: account ? account.toLowerCase() : "account not found",
+      Jar: assetJar ? assetJar.contract.toLowerCase() : "jar not found",
+      Farm: assetJar && assetJar.farm ? assetJar.farm.farmAddress.toLowerCase() : "farm not found",
+      Null: "0x0000000000000000000000000000000000000000",
+    }).map(([key, value]) => [value, key]),
+  );
+
+  const chain = core?.chains.filter((c) => c.network === String(assetJar?.chain))[0];
+  addrs["chain_native"] = chain
+    ? `${chain.gasToken[0].toUpperCase()}${chain.gasTokenSymbol.slice(1)}`
+    : "chain native";
 
+  // fetch jar documentation
   useEffect(() => {
     const getData = async (): Promise<void> => {
       if (Object.keys(jar).length > 0)
         getJarData(jar.value)
           .then((data) => setJarData(data))
-          .then(() => setReady((prev: readyState) => ({ ...prev, jar: true })));
+          .then(() => setReady((prev: ReadyState) => ({ ...prev, jar: true })));
     };
     getData();
-  }, [jar]);
+  }, [jar]); // eslint-disable-line
+
+  // fetch all user txn history if there is any
+  useEffect(() => {
+    const getUserHistory = async (account: string | null | undefined): Promise<void> => {
+      account &&
+        (await fetch(`https://api.pickle.finance/prod/protocol/userhistory/${account}`)
+          .then((resp) => resp.json())
+          .then((jsonResp) => {
+            if (!JSON.stringify(jsonResp).toLowerCase().includes("invalid wallet"))
+              setUserHistory(jsonResp);
+            else console.info(jsonResp);
+          }));
+    };
+    getUserHistory(account);
+  }, [account]);
+
+  // generate pnl report for one jar from user history if/when it loads
+  useEffect(() => {
+    if (account && userHistory && userHistory[jar.value]) {
+      let pnl = new UserJarHistoryPnlGenerator(account, userHistory[jar.value]).generatePnL();
+      DEBUG_OUT(pnl);
+      setUserPnl(pnl);
+    }
+  }, [userHistory]); // eslint-disable-line
 
   if (asset && page === "jar" && ready[page])
     return (
       <>
-        <div className="mb-3">
-          {asset && asset.depositTokensInJar && (
-            <FarmsTable singleAsset={asset} hideDescription={true} />
-          )}
+        <div className="mb-3 min-w-min">
+          {asset.depositTokensInJar && <FarmsTable singleAsset={asset} hideDescription={true} />}
         </div>
+        {userPnl && userPnl.length > 0 && core && assetJar && (
+          <TxHistoryContainer userPnl={userPnl} core={core} addrs={addrs} jar={assetJar} />
+        )}
         <ChartContainer jarData={jarData} />
         {jarData && jarData.documentation && <DocContainer docs={jarData.documentation} />}
-        {jarData &&
-          jarData.revenueExpenses &&
-          jarData.revenueExpenses.recentHarvests.length > 0 && (
-            <RevTableContainer
-              revs={jarData.revenueExpenses}
-              pfCore={core ? core : ({} as PickleModelJson.PickleModelJson)}
-            />
+        <div>
+          {jarData && jarData.documentation && (
+            <RelatedTokens componentTokens={jarData.documentation.componentTokens} t={t} />
           )}
+          {jarData &&
+            jarData.revenueExpenses &&
+            jarData.revenueExpenses.recentHarvests.length > 0 && (
+              <RevTableContainer
+                revs={jarData.revenueExpenses}
+                pfCore={core ? core : ({} as PickleModelJson.PickleModelJson)}
+              />
+            )}
+        </div>
       </>
     );
   return null;
@@ -68,4 +131,9 @@ const getJarData = async (jarKey: string): Promise<JarChartData> => {
   return data;
 };
 
+const DEBUG_OUT = (msg: any) => {
+  if (GLOBAL_DEBUG) console.log(msg);
+};
+const GLOBAL_DEBUG = true;
+
 export default JarStats;

v2/features/stats/PlatformStats.tsx

@@ -3,13 +3,13 @@ import { FC, useEffect, useState } from "react";
 import { PlatformData, SetFunction } from "v2/types";
 import ChainTableContainer from "./platform/ChainTableContainer";
 import ChartContainer from "./shared/ChartContainer";
-import { readyState } from "pages/stats";
+import { ReadyState } from "pages/stats";
 import PlatformHeader from "./platform/PlatformHeader";
 
 const PlatformStats: FC<{
   setChain: SetFunction;
   core: PickleModelJson.PickleModelJson | undefined;
-  ready: readyState;
+  ready: ReadyState;
   setReady: SetFunction;
   page: "platform" | "chain" | "jar" | undefined;
 }> = ({ setChain, core, ready, setReady, page }) => {
@@ -18,7 +18,7 @@ const PlatformStats: FC<{
     const getData = async (): Promise<void> => {
       getPlatformData()
         .then((platformData) => setDataSeries(platformData))
-        .then(() => setReady((prev: readyState) => ({ ...prev, platform: true })));
+        .then(() => setReady((prev: ReadyState) => ({ ...prev, platform: true })));
     };
     getData();
   }, []);