Wasm Calculations

.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

components/TradeTimeline/TimelineItem.tsx

@@ -1,7 +1,7 @@
 import { Card, Collapse, Divider, Elevation, Intent, Tag } from "@blueprintjs/core";
 import classes from './TradeTimeline.module.scss';
 import classnames from 'classnames';
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { EXCHANGES, IHoldings, ITrade } from "@types";
 import keyByValue from '../../src/utils/keyByValue';
 
@@ -22,7 +22,7 @@ const getCurrencyHolding = (holdings: IHoldings, currency: string): number => {
     return totalHoldings;
 };
 
-export const TimelineItem = ({trade, holdings, left, defaultExpanded}: ITimelineItem): JSX.Element => {
+export const TimelineItem = ({trade, holdings, left, defaultExpanded}: ITimelineItem): ReactElement => {
     const [isOpen, setIsOpen] = useState(defaultExpanded);
 
     useEffect(() => setIsOpen(defaultExpanded), [defaultExpanded])

components/TradeTimeline/index.tsx

@@ -18,6 +18,7 @@ export interface ITradeTimelineProp {
 
 export interface ITradeTimelineState {
     page: number;
+    timelineItems: JSX.Element[]
 }
 
 const tradesPerPage =  50;
@@ -27,7 +28,10 @@ export default class TradeTimeline extends React.Component<ITradeTimelineProp, I
         super(props);
         this.state = {
             page: 0,
+            timelineItems: [],
         };
+
+        this.createTimeLine();
     }
 
     public moreTrades = (page: number): void => {
@@ -36,50 +40,56 @@ export default class TradeTimeline extends React.Component<ITradeTimelineProp, I
         });
     }
 
-    public createTimeLine = (): React.ReactNode[] => {
+    public createTimeLine = async (): Promise<void> => {
         let holdings = {};
         let trades =  Array.from(this.props.trades);
         const maxPages = Math.ceil(this.props.trades.length / tradesPerPage);
         if (maxPages > this.state.page + 1) {
             const trade = this.props.trades.slice(0,
                 this.props.trades.length - (this.state.page + 1) * tradesPerPage,
             );
-            holdings = calculateGains(
+            holdings = (await calculateGains(
                 {},
                 trade,
                 this.props.savedData.incomes,
                 this.props.fiatCurrency,
                 this.props.gainCalculationMethod,
-            ).newHoldings;
+            )).newHoldings;
         }
 
         if (maxPages > this.state.page) {
             trades = trades.slice(this.props.trades.length - this.state.page * tradesPerPage);
         }
 
         const incomes = clone(this.props.savedData.incomes);
-        return (trades.map((trade, index): React.ReactNode => {
+
+        const timelineItems = [];
+        for (let index = 0; index < trades.length; index++) {
             const incomesToApply: IIncomeWithFiatRate[] = [];
-            while (incomes.length && trade.date > incomes[0].date) {
+            while (incomes.length && trades[index].date > incomes[0].date) {
                 incomesToApply.push(incomes.shift() as IIncomeWithFiatRate);
             }
 
-            holdings = calculateGains(
+            holdings = (await calculateGains(
                 holdings,
-                [trade],
+                [trades[index]],
                 incomesToApply, // probably should use real incomes here
                 this.props.fiatCurrency,
                 this.props.gainCalculationMethod,
-            ).newHoldings;
-            return (
+            )).newHoldings;
+
+
+            timelineItems.push(
                 <TimelineItem
                     left={index % 2 === 0}
-                    trade={trade}
+                    trade={trades[index]}
                     holdings={holdings}
                     defaultExpanded={this.props.defaultExpanded}
                 />
             );
-        })).reverse();
+        }
+
+        this.setState({timelineItems: timelineItems.reverse()});
     }
 
     public render(): React.ReactNode {
@@ -91,7 +101,7 @@ export default class TradeTimeline extends React.Component<ITradeTimelineProp, I
                     hasMore={this.state.page * tradesPerPage <= this.props.trades.length}
                     loader={<Spinner key={this.state.page}/>}
                 >
-                    {this.createTimeLine()}
+                    {this.state.timelineItems}
                 </InfiniteScroll>
             </div>
         );

next.config.js

@@ -2,4 +2,9 @@ const withTM = require('next-transpile-modules')(['@koale/useworker']);
 
 module.exports = withTM({
     assetPrefix: ".",
+    webpack: function (config, options) {
+        config.experiments = { syncWebAssembly: true };
+
+        return config;
+    },
 });

package.json

@@ -90,6 +90,7 @@
         "axios": "^0.21.1",
         "classnames": "^2.2.6",
         "clone": "^2.1.2",
+        "cryptotithe-wasm": "0.0.4",
         "file-saver": "^2.0.5",
         "font-awesome": "^4.7.0",
         "is-electron": "2.2.1",

pages/_app.tsx

@@ -24,7 +24,7 @@ function MyApp({ Component, pageProps }: AppProps): ReactNode {
 
 
   const updateSaveData = async (data: IPartialSavedData, shouldDownload = true): Promise<boolean> => {
-    const newSavedData = save(data, savedData);
+    const newSavedData = await save(data, savedData);
 
     if (shouldDownload) {
       downloadFile(JSON.stringify(newSavedData), 'data.json');

pages/gains.tsx

@@ -11,7 +11,7 @@ import { IHoldings, ISavedData, ITrade, ITradeWithGains, ITradeWithFiatRate, IIn
 import { Button, Dialog, Divider, Intent } from '@blueprintjs/core';
 import downloadFile from '@utils/downloadFile';
 
-function recalculate(
+async function recalculate(
     trades: ITradeWithFiatRate[],
     incomes: IIncomeWithFiatRate[],
     fiatCurrnecy: string,
@@ -27,7 +27,7 @@ function recalculate(
             const pastIncomes = incomes.filter(
                 (income) => new Date(income.date).getFullYear() === parseInt(years[index], 10),
             );
-            const result = calculateGains(newHoldings, pastTrades, pastIncomes, fiatCurrnecy, yearCalculationMethod[years[index]]);
+            const result = await calculateGains(newHoldings, pastTrades, pastIncomes, fiatCurrnecy, yearCalculationMethod[years[index]]);
             newHoldings = result.newHoldings;
         }
     }
@@ -157,14 +157,14 @@ const Gains = (): ReactNode => {
     );
 }
 
-const downloadOutput = (savedData: ISavedData, yearCalculationMethod: IYearCalculationMethod) => {
-    const result = recalculate(
+const downloadOutput = async (savedData: ISavedData, yearCalculationMethod: IYearCalculationMethod) => {
+    const result = await recalculate(
         savedData.trades,
         savedData.incomes,
         savedData.settings.fiatCurrency,
         yearCalculationMethod,
     );
-    const data = generateForm8949(
+    const data = await generateForm8949(
         result.holdings,
         result.trades,
         result.incomes,
@@ -189,7 +189,7 @@ const calculateWhatIfTrade = async (
         savedData.settings.fiatRateMethod,
     );
 
-    const data = calculateGainPerTrade(
+    const data = await calculateGainPerTrade(
         holdings,
         tradeWithFiatRate,
         [],
@@ -210,14 +210,14 @@ const calculateGainsForTable = async (
     setShowCustomizeModal: (showCustomizeModal: boolean) => void,
     setYearCalculationMethod: (yearCalculationMethod: IYearCalculationMethod) => void,
 ) => {
-    const result = recalculate(
+    const result = await recalculate(
         savedData.trades,
         savedData.incomes,
         savedData.settings.fiatCurrency,
         yearCalculationMethod,
     );
 
-    const data = calculateGainPerTrade(
+    const data = await calculateGainPerTrade(
         result.holdings,
         result.trades,
         result.incomes,

pages/index.tsx

@@ -18,23 +18,23 @@ const Index = ({ updateSaveData }: IIndexProps): ReactNode => {
     const [shouldOpenFileBrowse, setShouldOpenFileBrowse] = useState(false);
     const router = useRouter();
 
-    const loadData = (savedData: ISavedData) => {
+    const loadData = async (savedData: ISavedData) => {
         setShouldOpenFileBrowse(false);
         if (isSavedDataLoaded(savedData)) {
             if ('integrity' in savedData && integrityCheck(savedData) !== savedData.integrity) {
                 alert('Integrity Check Failed. Your save file might be corrupt or tampered with.');
             }
-            const shouldSave = savedDataConverter(savedData);
+            const shouldSave = await savedDataConverter(savedData);
             updateSaveData(savedData, shouldSave);
             setShowLoadDataPopup(false);
         }
       }
-
-      const onDataLoaded = (data: string) => {
+    
+      const onDataLoaded = async (data: string) => {
         if (data !== '') {
           try {
               const parsedData: ISavedData = JSON.parse(data);
-              loadData(parsedData);
+              await loadData(parsedData);
               router.push(Pages.portfolio);
           } catch (ex) {
               setShouldOpenFileBrowse(false);

pages/portfolio.tsx

@@ -101,14 +101,14 @@ const calculatePortfolioData = async (
     }
 }
 
-const recalculateHoldings = (savedData: ISavedData, save: (data: IPartialSavedData) => Promise<boolean>) => {
-    const holdings = calculateGains(
+const recalculateHoldings = async (savedData: ISavedData, save: (data: IPartialSavedData) => Promise<boolean>) => {
+    const holdings = (await calculateGains(
         {},
         savedData.trades,
         savedData.incomes,
         savedData.settings.fiatCurrency,
         savedData.settings.gainCalculationMethod,
-    ).newHoldings;
+    )).newHoldings;
 
     save({
         holdings,

src/output/Form8949/index.ts

@@ -12,15 +12,15 @@ const headers = [
     'Gain or Loss',
 ].join(',');
 
-export default function outputForm8949(
+export default async function outputForm8949(
     holdings: IHoldings,
     trades: ITradeWithFiatRate[],
     incomes: IIncomeWithFiatRate[],
     fiatCurrency: string,
     method: METHOD,
-): string {
-    const result = calculateGainsPerHoldings(holdings, trades, incomes, fiatCurrency, method);
-    let csvData: unknown[] = [
+): Promise<string> {
+    const result = await calculateGainsPerHoldings(holdings, trades, incomes, fiatCurrency, method);
+    let csvData: string[] = [
         'Form 8949 Statement',
         '',
         'Part 1 (Short-Term)',

src/processing/CalculateDailyBalance/index.ts

@@ -28,7 +28,7 @@ export async function calculateDailyBalance(
             trade.exchange === location &&
             new Date(trade.date).getFullYear() < year,
         );
-        holdings = calculateGains(holdings, priorTrades, [], savedData.settings.fiatCurrency).newHoldings;
+        holdings = (await calculateGains(holdings, priorTrades, [], savedData.settings.fiatCurrency)).newHoldings;
 
         const priorTransactions = savedData.transactions.filter((transaction) =>
             transaction.date < startingDate && transaction.from === location,
@@ -41,7 +41,7 @@ export async function calculateDailyBalance(
     for (let index = startingDate; index < endingDate; index += 86400000) {
         updateProgress(totalDays, Math.abs((index - endingDate) / 86400000));
         const tradesOfDay = sortedTrades.filter((trade) => trade.date <= index + 86400000 && trade.date >= index);
-        holdings = calculateGains(holdings, tradesOfDay, [], savedData.settings.fiatCurrency).newHoldings;
+        holdings = (await calculateGains(holdings, tradesOfDay, [], savedData.settings.fiatCurrency)).newHoldings;
 
         const dayTransactions = getDayTransactions(new Date(index), savedData.transactions);
         holdings = processTransactions(dayTransactions, holdings);