improve: add error handler for transaction (#103)

* disable stake button when unstaked balance is zero Signed-off-by: ryanwolhuter <[email protected]> * add ethers error codes list Signed-off-by: ryanwolhuter <[email protected]> * add ethers error link component Signed-off-by: ryanwolhuter <[email protected]> * open error link in new tab Signed-off-by: ryanwolhuter <[email protected]> * undo comment out Signed-off-by: ryanwolhuter <[email protected]> Signed-off-by: ryanwolhuter <[email protected]>
UMAprotocol · Nov 28, 2022 · 752eb75 · 752eb75 · vercel · Nov 28, 2022
1 parent a9d03dd
commit 752eb75
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 3 deletions.
diff --git a/components/ErrorBanner/ErrorBanner.tsx b/components/ErrorBanner/ErrorBanner.tsx
@@ -1,3 +1,4 @@
+import { EthersErrorLink } from "components";
 import { mobileAndUnder } from "constant";
 import { useErrorContext } from "hooks";
 import Close from "public/assets/icons/close.svg";
@@ -17,7 +18,9 @@ export function ErrorBanner({ errorOrigin }: { errorOrigin?: ErrorOriginT }) {
           <IconWrapper>
             <Warning />
           </IconWrapper>
-          <ErrorMessage>{message}</ErrorMessage>
+          <ErrorMessage>
+            <EthersErrorLink errorMessage={message} />
+          </ErrorMessage>
           <CloseButton onClick={() => removeErrorMessage(message)}>
             <IconWrapper>
               <CloseIcon />

diff --git a/components/EthersErrorLink/EthersErrorLink.tsx b/components/EthersErrorLink/EthersErrorLink.tsx
@@ -0,0 +1,28 @@
+import { ethersErrorCodes } from "constant";
+import NextLink from "next/link";
+import styled from "styled-components";
+
+export function EthersErrorLink({ errorMessage }: { errorMessage: string }) {
+  if (!ethersErrorCodes.some((code) => errorMessage.includes(code))) {
+    return <span>{errorMessage}</span>;
+  }
+
+  const [firstPart, secondPart] = errorMessage.split("[");
+
+  const link = secondPart.replace("See:", "").replace("]", "").trim();
+
+  return (
+    <span>
+      {firstPart}.{" "}
+      <Link href={link} target="_blank">
+        Learn more.
+      </Link>
+    </span>
+  );
+}
+
+const Link = styled(NextLink)`
+  font: inherit;
+  color: inherit;
+  text-decoration: underline;
+`;
diff --git a/components/Panel/StakeUnstakePanel/Stake.tsx b/components/Panel/StakeUnstakePanel/Stake.tsx
@@ -47,6 +47,7 @@ export function Stake({
       return false;
 
     return (
+      unstakedBalance?.eq(0) ||
       !disclaimerChecked ||
       inputAmount === "" ||
       parseEtherSafe(inputAmount).eq(0)

diff --git a/components/PanelErrorBanner/PanelErrorBanner.tsx b/components/PanelErrorBanner/PanelErrorBanner.tsx
@@ -1,3 +1,4 @@
+import { EthersErrorLink } from "components";
 import { useErrorContext } from "hooks";
 import Close from "public/assets/icons/close.svg";
 import Warning from "public/assets/icons/warning.svg";
@@ -20,7 +21,9 @@ export function PanelErrorBanner({
       </IconWrapper>
       <InnerWrapper>
         {errorMessages.map((message) => (
-          <ErrorMessage key={message?.toString()}>{message}</ErrorMessage>
+          <ErrorMessage key={message?.toString()}>
+            <EthersErrorLink errorMessage={message} />
+          </ErrorMessage>
         ))}
       </InnerWrapper>
       <CloseButton onClick={() => clearErrorMessages()}>

diff --git a/components/index.ts b/components/index.ts
@@ -12,6 +12,7 @@ export {
 } from "./DonutChart/helpers";
 export { Dropdown } from "./Dropdown/Dropdown";
 export { ErrorBanner } from "./ErrorBanner/ErrorBanner";
+export { EthersErrorLink } from "./EthersErrorLink/EthersErrorLink";
 export { GlobalStyle } from "./GlobalStyle/GlobalStyle";
 export { Header } from "./Header/Header";
 export { HowItWorks } from "./HowItWorks/HowItWorks";

diff --git a/constant/index.ts b/constant/index.ts
@@ -15,5 +15,6 @@ export * from "./voting/earlyRequestMagicNumber";
 export * from "./voting/voteTiming";
 export * from "./web3/addresses";
 export * from "./web3/deployBlocks";
+export * from "./web3/ethersErrorCodes";
 export * from "./web3/signingMessage";
 export * from "./web3/supportedChains";
diff --git a/constant/web3/ethersErrorCodes.ts b/constant/web3/ethersErrorCodes.ts
@@ -0,0 +1,10 @@
+export const ethersErrorCodes = [
+  "CALL_EXCEPTION",
+  "INSUFFICIENT_FUNDS",
+  "MISSING_NEW",
+  "NONCE_EXPIRED",
+  "NUMERIC_FAULT",
+  "REPLACEMENT_UNDERPRICED",
+  "TRANSACTION_REPLACED",
+  "UNPREDICTABLE_GAS_LIMIT",
+];
diff --git a/helpers/index.ts b/helpers/index.ts
@@ -8,12 +8,12 @@ export { handleNotifications } from "./util/handleNotifications";
 export { logTruthy } from "./util/logTruthy";
 export * from "./util/misc";
 export { unixTimestampToDate } from "./util/unixTimestampToDate";
-export * from "./voting/polymarket";
 export * from "./voting/formatVotes";
 export { getVoteMetaData } from "./voting/getVoteMetaData";
 export { makePriceRequestsByKey } from "./voting/makePriceRequestsByKey";
 export { makeUniqueKeyForVote } from "./voting/makeUniqueKeyForVote";
 export { onlyOneRequestPerAddress } from "./voting/onlyOneRequestPerAddress";
+export * from "./voting/polymarket";
 export * from "./voting/voteTiming";
 export * from "./web3/crypto";
 export { decodeHexString } from "./web3/decodeHexString";