[chore] add new async hook logic for modals (#92)

* add first untested PoC for new async hook

* reset unwanted changes

* fix modals that were not working with new logic

* fix stuff that was not even working before new hook + small improvements

* rome

* MR amends and other small improvements

* MR amends

* remove null defaultValue

* remove unnecessary undefined type

* add default values if escrowData already available

* adjust claim to make it work with new TableRow component

* fix arbitrate modal for when data is not yet loaded

* improve forbidden for arbitrate

* improve forbidden logic for settlement offer

* add more modal actions, prevent modals from auto-closing

* move logic for forbidden into ScopedModal

* remove unneeded imports, pass modalActions to ScopedModal

* remove ModalBodySkeleton from modals

* fix modals after merge

* more changes, remove logs

* more changes, remove logs

* revert unnecessary changes

* revert unnecessary changes

* replace boring spinner with unicrow loader

* add fallback if no loading message

* add unicrow loading icon, fix autofocus + multiclaim when [] + disabled button state when loading

* WIP

* fix the unsolvable!

* fix console errors

* fix all open issues found while testing with thiago

* fix no-op, improve forbidden

* fix no-op, improve forbidden

* changes according to session with Tomas

* change formatting of time also for CP extension

* fix claims worklow

* cleanup & cosmetics

* more cleanups

* add forbidden condition for settlement offer + change so modalactions can only be set once

* add missing else + rome

* re-add yarn.lock due to building issues

* fix claim modal

src/core/internal/errorHandler.ts

@@ -47,16 +47,12 @@ const ERRORS = {
   "2-007": "You are not approving this arbitrator fee",
   "2-008": "You are not approving this arbitrator address",
 };
-
 type ErrorCode = keyof typeof ERRORS;
-
 // Metamask Provider Errors
 const METAMASK_ERRORS = {
   ACTION_REJECTED: "User rejected the request",
 };
-
 type ErrorCodeMetaMask = keyof typeof METAMASK_ERRORS;
-
 interface IMMError {
   action: string;
   code: ErrorCodeMetaMask;
@@ -87,6 +83,5 @@ export const errorHandler = (error: any) => {
     const errorCode = message.split("revert ")[1] as ErrorCode;
     errorMessage = ERRORS[errorCode] || errorMessage;
   }
-
   return errorMessage;
 };

src/helpers/getExchangeRates.ts

@@ -53,6 +53,7 @@ export const getExchangeRates = async (
     }
 
     uniqueTokenSymbols.forEach((symbol) => {
+      if (!symbol) return;
       const upperCaseSymbol = symbol.toUpperCase();
       if (STABLE_COINS.includes(upperCaseSymbol)) {
         // 1 to 1 conversion for stable coins against USD

src/ui/internal/components/BalancesTable.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import {
+  displayDecimals,
+  formatAmountToUSD,
+  getExchangeRates,
+} from "../../../helpers";
+import { IBalanceDetailed } from "../../../typing";
+import { TokenSymbol } from ".";
+import { useAsync } from "../hooks/useAsync";
+import Skeleton from "@material-ui/lab/Skeleton";
+import styled from "styled-components";
+import type * as CSS from "csstype";
+import { BigCheckIcon } from "../assets/BigCheckIcon";
+import { Table } from "../components";
+import { STABLE_COINS } from "helpers/getExchangeRates";
+
+interface IBalanceWithTokenUSD extends IBalanceDetailed {
+  amountInUSD?: string;
+}
+
+const wrapperStyles: CSS.Properties = {
+  margin: "0 auto",
+  textAlign: "center",
+  fontWeight: 500,
+};
+
+const ClaimSuccessful = (amount) => {
+  return (
+    <div style={wrapperStyles}>
+      <BigCheckIcon />
+      <p>{amount === 1 ? "Payment" : "All balances"} claimed!</p>
+    </div>
+  );
+};
+
+export const BalancesTable = ({
+  balances,
+  onModalClose,
+  setIsLoading,
+  success,
+}) => {
+  return (
+    <>
+      {success && <ClaimSuccessful amount={balances.length} />}
+      {!success && (
+        <Table>
+          <thead>
+            <tr>
+              <th>Currency</th>
+              <th>USD Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {balances.map((balance: IBalanceWithTokenUSD) =>
+              TableRow(balance, onModalClose, setIsLoading),
+            )}
+          </tbody>
+        </Table>
+      )}
+    </>
+  );
+};
+
+const TableRow = (
+  balance: IBalanceWithTokenUSD,
+  onModalClose,
+  setIsLoading,
+) => {
+  const isStableCoin = STABLE_COINS.includes(balance?.token?.symbol);
+
+  const [formattedAmountInUSD, setFormattedAmountInUSD] =
+    React.useState<string>(
+      isStableCoin && balance.amountBN.toNumber().toFixed(2),
+    );
+
+  const [exchangeValues, , errorExchange] = useAsync(
+    [balance?.token?.symbol],
+    isStableCoin ? null : getExchangeRates,
+    onModalClose,
+  );
+
+  React.useEffect(() => {
+    if (balance && isStableCoin) {
+      setIsLoading(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (exchangeValues) {
+      const exchangeValue = exchangeValues[balance.token.symbol];
+      setIsLoading(false);
+
+      if (exchangeValue) {
+        setFormattedAmountInUSD(
+          formatAmountToUSD(balance.amountBN, exchangeValue),
+        );
+      }
+    }
+    return () => {
+      setFormattedAmountInUSD("");
+    };
+  }, [exchangeValues]);
+
+  React.useEffect(() => {
+    if (errorExchange) {
+      setIsLoading(false);
+      setFormattedAmountInUSD("n/a (error)");
+    }
+  }, [errorExchange]);
+
+  return (
+    <tr key={`balance-${balance.token.address}`}>
+      {balance.token.symbol && (
+        <>
+          <td>
+            {balance.amountBN
+              .toNumber()
+              .toFixed(displayDecimals(balance.token.symbol))}{" "}
+            <TokenSymbol>{balance.token.symbol}</TokenSymbol>
+          </td>
+          <td>
+            <ExchangeCell>
+              {"$"}
+              {formattedAmountInUSD ? (
+                formattedAmountInUSD
+              ) : (
+                <>
+                  {" "}
+                  <Skeleton width={80} height={25} />
+                </>
+              )}
+            </ExchangeCell>
+          </td>
+        </>
+      )}
+    </tr>
+  );
+};
+
+const ExchangeCell = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: right;
+`;

src/ui/internal/components/Forbidden.tsx

@@ -41,7 +41,7 @@ const ButtonContainer = styled.div`
 export const Forbidden = ({
   onClose,
   title = "Action Forbidden",
-  description = " You are neither buyer nor seller in this payment",
+  description = "You are neither buyer nor seller in this payment",
 }: IForbiddenProps) => {
   return (
     <Container>