refactor(coinmarket): buy/sell/exchange detail

packages/suite/src/hooks/wallet/coinmarket/useCoinmarketDetail.ts

@@ -0,0 +1,130 @@
+import { useSelector } from 'src/hooks/suite';
+import invityAPI from 'src/services/suite/invityAPI';
+import { createContext, useContext } from 'react';
+import {
+    CoinmarketDetailContextValues,
+    CoinmarketGetDetailDataOutputProps,
+    CoinmarketGetDetailDataProps,
+    CoinmarketGetTypedInfoTradeProps,
+    CoinmarketGetTypedTradeProps,
+    CoinmarketTradeInfoMapProps,
+    CoinmarketTradeMapProps,
+    CoinmarketTradeType,
+    CoinmarketUseDetailOutputProps,
+    CoinmarketUseDetailProps,
+} from 'src/types/coinmarket/coinmarketDetail';
+import { useCoinmarketWatchTrade } from './useCoinmarketWatchTrade';
+import { Trade, TradeBuy } from 'src/types/wallet/coinmarketCommonTypes';
+
+const isBuyTrade = (trade: Trade): trade is TradeBuy => trade.tradeType === 'buy';
+
+const getTypedTrade = <T extends CoinmarketTradeType>({
+    trades,
+    tradeType,
+    transactionId,
+}: CoinmarketGetTypedTradeProps): CoinmarketTradeMapProps[T] | undefined => {
+    const trade = trades.find(
+        trade =>
+            trade.tradeType === tradeType &&
+            (trade.key == transactionId ||
+                (isBuyTrade(trade) && trade.data?.originalPaymentId === transactionId)),
+    );
+
+    if (!trade) {
+        return undefined;
+    }
+
+    return trade as CoinmarketTradeMapProps[T];
+};
+
+const getTypedInfoTrade = <T extends keyof CoinmarketTradeMapProps>({
+    coinmarket,
+    tradeType,
+}: CoinmarketGetTypedInfoTradeProps): CoinmarketTradeInfoMapProps[T] => {
+    switch (tradeType) {
+        case 'sell': {
+            const { sellInfo } = coinmarket.sell;
+
+            return sellInfo as CoinmarketTradeInfoMapProps[T];
+        }
+        case 'exchange': {
+            const { exchangeInfo } = coinmarket.exchange;
+
+            return exchangeInfo as CoinmarketTradeInfoMapProps[T];
+        }
+        default: {
+            const { buyInfo } = coinmarket.buy;
+
+            return buyInfo as CoinmarketTradeInfoMapProps[T];
+        }
+    }
+};
+
+const getCoinmarketDetailData = <T extends CoinmarketTradeType>({
+    coinmarket,
+    tradeType,
+}: CoinmarketGetDetailDataProps): CoinmarketGetDetailDataOutputProps<T> => {
+    // will not be further used
+    if (tradeType === 'savings' || tradeType === 'spend') return {};
+
+    const { trades } = coinmarket;
+    const { transactionId } = coinmarket[tradeType];
+    const trade = getTypedTrade<T>({
+        trades,
+        tradeType,
+        transactionId,
+    });
+    const info = getTypedInfoTrade<T>({
+        coinmarket,
+        tradeType,
+    });
+
+    return {
+        transactionId,
+        info,
+        trade,
+    };
+};
+
+const useServerEnvironment = () => {
+    const invityServerEnvironment = useSelector(
+        state => state.suite.settings.debug.invityServerEnvironment,
+    );
+    if (invityServerEnvironment) {
+        invityAPI.setInvityServersEnvironment(invityServerEnvironment);
+    }
+};
+
+export const useCoinmarketDetail = <T extends CoinmarketTradeType>({
+    selectedAccount,
+    tradeType,
+}: CoinmarketUseDetailProps): CoinmarketUseDetailOutputProps<T> => {
+    const coinmarket = useSelector(state => state.wallet.coinmarket);
+    const { account } = selectedAccount;
+    const { info, transactionId, trade } = getCoinmarketDetailData<T>({
+        coinmarket,
+        tradeType,
+    });
+
+    useServerEnvironment();
+    useCoinmarketWatchTrade({ account, trade });
+
+    return {
+        account,
+        trade,
+        transactionId,
+        info,
+    };
+};
+
+export const CoinmarketDetailContext = createContext<CoinmarketDetailContextValues<any> | null>(
+    null,
+);
+CoinmarketDetailContext.displayName = 'CoinmarketDetailContext';
+
+export const useCoinmarketDetailContext = <T extends CoinmarketTradeType>() => {
+    const context = useContext<CoinmarketDetailContextValues<T> | null>(CoinmarketDetailContext);
+    if (context === null) throw Error('CoinmarketDetailContext used without Context');
+
+    return context;
+};

packages/suite/src/hooks/wallet/coinmarket/useCoinmarketWatchTrade.ts

@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTimeoutFn, useUnmount } from 'react-use';
+import { Trade } from 'src/types/wallet/coinmarketCommonTypes';
+import { useFormDraft } from '../useFormDraft';
+import invityAPI from 'src/services/suite/invityAPI';
+import { saveTrade as saveBuyTrade } from 'src/actions/wallet/coinmarketBuyActions';
+import { saveTrade as saveExchangeTrade } from 'src/actions/wallet/coinmarketExchangeActions';
+import { saveTrade as saveSellTrade } from 'src/actions/wallet/coinmarketSellActions';
+import {
+    WatchBuyTradeResponse,
+    WatchExchangeTradeResponse,
+    WatchSellTradeResponse,
+} from 'invity-api';
+import {
+    CoinmarketTradeStatusType,
+    CoinmarketTradeType,
+    CoinmarketUseWatchTradeProps,
+    CoinmarketWatchTradeProps,
+} from 'src/types/coinmarket/coinmarketDetail';
+
+export const getTradeFinalStatuses = (tradeType: string): Partial<CoinmarketTradeStatusType>[] => {
+    if (tradeType === 'buy') {
+        return ['SUCCESS', 'ERROR', 'BLOCKED'];
+    }
+
+    if (tradeType === 'sell') {
+        return ['SUCCESS', 'ERROR', 'BLOCKED', 'CANCELLED', 'REFUNDED'];
+    }
+
+    if (tradeType === 'exchange') {
+        return ['SUCCESS', 'ERROR', 'KYC'];
+    }
+
+    return [];
+};
+
+const shouldRefreshTrade = (trade: Trade | undefined) =>
+    trade &&
+    trade.data.status &&
+    !getTradeFinalStatuses(trade.tradeType).includes(trade.data.status);
+
+const coinmarketWatchTrade = async <T extends CoinmarketTradeType>({
+    trade,
+    account,
+    refreshCount,
+    dispatch,
+    removeDraft,
+}: CoinmarketWatchTradeProps<T>) => {
+    const response = await invityAPI.watchTrade<T>(trade.data, trade.tradeType, refreshCount);
+    if (!response) return;
+    if (response.status && response.status !== trade.data.status) {
+        const newDate = new Date().toISOString();
+
+        if (trade.tradeType === 'buy') {
+            const buyResponse = response as WatchBuyTradeResponse;
+            const tradeData = {
+                ...trade.data,
+                status: buyResponse.status,
+                error: buyResponse.error,
+            };
+
+            dispatch(saveBuyTrade(tradeData, account, newDate));
+        }
+
+        if (trade.tradeType === 'sell') {
+            const sellResponse = response as WatchSellTradeResponse;
+            const tradeData = {
+                ...trade.data,
+                status: sellResponse.status,
+                error: sellResponse.error,
+            };
+
+            if (sellResponse.destinationAddress) {
+                tradeData.destinationAddress = sellResponse.destinationAddress;
+                tradeData.destinationPaymentExtraId = sellResponse.destinationPaymentExtraId;
+            }
+
+            dispatch(saveSellTrade(tradeData, account, newDate));
+        }
+
+        if (trade.tradeType === 'exchange') {
+            const exchangeResponse = response as WatchExchangeTradeResponse;
+            const tradeData = {
+                ...trade.data,
+                status: exchangeResponse.status,
+                error: exchangeResponse.error,
+            };
+
+            dispatch(saveExchangeTrade(tradeData, account, newDate));
+        }
+    }
+
+    if (response.status && getTradeFinalStatuses(trade.tradeType).includes(response.status)) {
+        removeDraft(account.key);
+    }
+};
+
+export const useCoinmarketWatchTrade = <T extends CoinmarketTradeType>({
+    account,
+    trade,
+}: CoinmarketUseWatchTradeProps<T>) => {
+    const REFRESH_SECONDS = 30;
+    const dispatch = useDispatch();
+    const [refreshCount, setRefreshCount] = useState(0);
+    const invokeRefresh = () => {
+        if (shouldRefreshTrade(trade)) {
+            setRefreshCount(prevValue => prevValue + 1);
+        }
+    };
+    const [, cancelRefresh, resetRefresh] = useTimeoutFn(invokeRefresh, REFRESH_SECONDS * 1000);
+
+    useUnmount(() => {
+        cancelRefresh();
+    });
+
+    const { removeDraft } = useFormDraft(`coinmarket-${trade?.tradeType ?? 'buy'}`);
+
+    useEffect(() => {
+        if (!trade || !account) return;
+
+        if (shouldRefreshTrade(trade)) {
+            cancelRefresh();
+            invityAPI.createInvityAPIKey(account.descriptor);
+            coinmarketWatchTrade<T>({ trade, account, refreshCount, dispatch, removeDraft });
+
+            resetRefresh();
+        }
+    }, [account, trade, refreshCount, cancelRefresh, dispatch, removeDraft, resetRefresh]);
+};