handle errors better

README.md

@@ -22,12 +22,6 @@ To access the Uniswap Interface, use an IPFS gateway link from the
 [latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
 or visit [app.uniswap.org](https://app.uniswap.org).
 
-## Listing a token
-
-Please see the
-[@uniswap/default-token-list](https://github.com/uniswap/default-token-list)
-repository.
-
 ## Development
 
 ### Install Dependencies

src/components/ErrorBoundary/index.tsx

@@ -1,4 +1,5 @@
 import React, { ErrorInfo } from 'react'
+import store, { AppState } from '../../state'
 import { ExternalLink, ThemedBackground, TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
 import styled from 'styled-components'
@@ -114,26 +115,45 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
   }
 }
 
+function getRelevantState(): null | keyof AppState {
+  const path = window.location.hash
+  if (!path.startsWith('#/')) {
+    return null
+  }
+  const pieces = path.substring(2).split(/[\/\\?]/)
+  switch (pieces[0]) {
+    case 'swap':
+      return 'swap'
+    case 'add':
+      if (pieces[1] === 'v2') return 'mint'
+      else return 'mintV3'
+    case 'remove':
+      if (pieces[1] === 'v2') return 'burn'
+      else return 'burnV3'
+  }
+  return null
+}
+
 function issueBody(error: Error): string {
-  if (!error) throw new Error('no error to report')
+  const relevantState = getRelevantState()
   const deviceData = getUserAgent()
-  return `**Bug Description**
+  return `## URL
   
-App crashed
-
-**Steps to Reproduce**
-
-1. Go to ...
-2. Click on ...
-   ...
-
-**URL**
-
 ${window.location.href}
 
+${
+  relevantState
+    ? `## \`${relevantState}\` state
+    
+\`\`\`json
+${JSON.stringify(store.getState()[relevantState], null, 2)}
+\`\`\`
+`
+    : ''
+}
 ${
   error.name &&
-  `**Error**
+  `## Error
 
 \`\`\`
 ${error.name}${error.message && `: ${error.message}`}
@@ -142,7 +162,7 @@ ${error.name}${error.message && `: ${error.message}`}
 }
 ${
   error.stack &&
-  `**Stacktrace**
+  `## Stacktrace
 
 \`\`\`
 ${error.stack}
@@ -151,9 +171,9 @@ ${error.stack}
 }
 ${
   deviceData &&
-  `**Device data**
+  `## Device data
 
-\`\`\`json5
+\`\`\`json
 ${JSON.stringify(deviceData, null, 2)}
 \`\`\`
 `

src/hooks/useSwapCallback.ts

@@ -133,6 +133,26 @@ function useSwapCallArguments(
   }, [account, allowedSlippage, chainId, deadline, library, recipient, routerContract, signatureData, trade])
 }
 
+export function swapErrorToUserReadableMessage(error: { reason: string }): string {
+  switch (error.reason) {
+    case 'UniswapV2Router: EXPIRED':
+      return 'The transaction could not be sent because the deadline has passed. Please check that your transaction deadline is not too low.'
+    case 'UniswapV2Router: INSUFFICIENT_OUTPUT_AMOUNT':
+    case 'UniswapV2Router: EXCESSIVE_INPUT_AMOUNT':
+      return 'This transaction will not succeed either due to price movement or fee on transfer. Try increasing your slippage tolerance.'
+    case 'UniswapV2: TRANSFER_FAILED':
+      return 'The token could not be transferred. There may be an issue with the token.'
+    case 'UniswapV2: K':
+      return 'The Uniswap invariant x*y=k was not satisfied by the swap. This usually means one of the tokens you are swapping incorporates custom behavior on transfer.'
+    case 'Too little received':
+    case 'Too much requested':
+    case 'STF':
+      return 'This transaction will not succeed due to price movement. Try increasing your slippage tolerance.'
+    default:
+      return 'Unknown error. Please join the Discord to get help.'
+  }
+}
+
 // returns a function that will execute a swap, if the parameters are all valid
 // and the user has approved the slippage adjusted input amount for the trade
 export function useSwapCallback(
@@ -198,28 +218,7 @@ export function useSwapCallback(
                   })
                   .catch((callError) => {
                     console.debug('Call threw error', call, callError)
-                    let errorMessage: string
-                    switch (callError.reason) {
-                      case 'UniswapV2Router: EXPIRED':
-                        errorMessage =
-                          'The transaction could not be sent because the deadline has passed. Please check that your transaction deadline is not too low.'
-                        break
-                      case 'UniswapV2Router: INSUFFICIENT_OUTPUT_AMOUNT':
-                      case 'UniswapV2Router: EXCESSIVE_INPUT_AMOUNT':
-                        errorMessage =
-                          'This transaction will not succeed either due to price movement or fee on transfer. Try increasing your slippage tolerance.'
-                        break
-                      case 'UniswapV2: TRANSFER_FAILED':
-                        errorMessage = 'The token could not be transferred. There may be an issue with the token.'
-                        break
-                      case 'UniswapV2: K':
-                        errorMessage =
-                          'The Uniswap invariant x*y=k was not satisfied by the swap. This usually means one of the tokens you are swapping incorporates custom behavior on transfer.'
-                        break
-                      default:
-                        return { call }
-                    }
-                    return { call, error: new Error(errorMessage) }
+                    return { call, error: new Error(swapErrorToUserReadableMessage(callError)) }
                   })
               })
           })
@@ -289,7 +288,10 @@ export function useSwapCallback(
             } else {
               // otherwise, the error was unexpected and we need to convey that
               console.error(`Swap failed`, error, address, calldata, value)
-              throw new Error(`Swap failed: ${error.message}`)
+
+              throw new Error(
+                `Swap failed: ${'reason' in error ? swapErrorToUserReadableMessage(error) : error.message}`
+              )
             }
           })
       },

src/utils/formatTokenAmount.ts

@@ -14,7 +14,7 @@ export function formatTokenAmount(amount: CurrencyAmount<Currency> | undefined,
     return '<0.00001'
   }
 
-  return amount.toSignificant(Math.min(sigFigs, amount.currency.decimals))
+  return amount.toSignificant(sigFigs)
 }
 
 export function formatPrice(price: Price<Currency, Currency> | undefined, sigFigs: number) {