Handling invalid values for transfer/swap widgets

[kahkeng]

For some FE widgets, like transfer and swap, if the backend happens to return a widget command with invalid inputs, it would be good if the FE can detect and warn.

For example, if I type "transfer" in the current dev, the BE returns this <|display-transfer(token,amount,address)|>, we will get the following error:

We'll be trying hard on the BE not to have such widgets be returned, but it is hard to guarantee, and it would also be good if the FE client didn't become stuck when something invalid does come up.

In the old code, I started adding something like the following to guard against unrecognized tokens, but this doesn't handle non-numeric amounts or invalid address strings, etc. And also the new code looks different so wasn't able to easily find how to add these equivalently.

--- a/src/components/widgets/Transfer.tsx
+++ b/src/components/widgets/Transfer.tsx
@@ -105,7 +105,11 @@ export const TransferWidget = ({
     >
       <div className="flex w-[100%] justify-end">
         <ConnectFirst>
-          <TransferButton {...{ amount, receiver, token: token! }} />
+          {token ? (
+            <TransferButton {...{ amount, receiver, token: token! }} />
+          ) : (
+            <div>Unrecognized token</div>
+          )}
         </ConnectFirst>
       </div>
     </ActionPanel>
diff --git a/src/components/widgets/swap/Swap.tsx b/src/components/widgets/swap/Swap.tsx
index 88ae415..3793628 100644
--- a/src/components/widgets/swap/Swap.tsx
+++ b/src/components/widgets/swap/Swap.tsx
@@ -107,6 +107,12 @@ const Swap = ({ tokenInSymbol, tokenOutSymbol, amountIn }: SwapProps) => {
   const { isSuccess, isError, isLoading, submitTx, isPrepared, error, hash, isPendingConfirm } =
     useSubmitTx(swapConfig.request);

+  if (!tokenIn) {
+    return <div>{`Unrecognized token: ${tokenInSymbol}`}</div>;
+  }
+  if (!tokenOutChecked) {
+    return <div>{`Unrecognized token: ${tokenOutSymbol}`}</div>;
+  }
   return (
     <div className="grid w-full gap-2 self-center xl:max-w-4xl">
       <div className="grid gap-2 xl:flex">