add error reporting component, INTEGRATION ERROR type, and Missing pr…

…ovider error (#3107)

src/lib/components/Error/ErrorDialog.tsx

@@ -117,7 +117,9 @@ export default function ErrorDialog({ header, error, action, onAction }: ErrorDi
         <Rule />
         <ErrorColumn>
           <Column gap={0.5} ref={setDetails} css={scrollbar}>
-            <ThemedText.Code>{error.message}</ThemedText.Code>
+            <ThemedText.Code>
+              {error.name}: {error.message}
+            </ThemedText.Code>
           </Column>
         </ErrorColumn>
         <ActionButton onClick={onAction}>{action}</ActionButton>

src/lib/components/Error/ErrorReporter.tsx

@@ -0,0 +1,23 @@
+import { useAtomValue } from 'jotai/utils'
+import { providerAtom } from 'lib/state/web3'
+import { useEffect } from 'react'
+import { EMPTY } from 'widgets-web3-react/empty'
+
+class IntegrationError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'INTEGRATION ERROR'
+  }
+}
+
+const missingProviderError = new IntegrationError('Missing provider')
+
+export default function ErrorReporter() {
+  const [connector] = useAtomValue(providerAtom)
+  useEffect(() => {
+    if (connector === EMPTY) {
+      throw missingProviderError
+    }
+  }, [connector])
+  return null
+}

src/lib/components/Widget.tsx

@@ -8,6 +8,7 @@ import { Provider as EthProvider } from 'widgets-web3-react/types'
 
 import { Provider as DialogProvider } from './Dialog'
 import ErrorBoundary, { ErrorHandler } from './Error/ErrorBoundary'
+import ErrorReporter from './Error/ErrorReporter'
 import Web3Provider from './Web3Provider'
 
 const slideDown = keyframes`
@@ -100,6 +101,7 @@ export default function Widget({
               <ErrorBoundary onError={onError}>
                 <AtomProvider>
                   <Web3Provider provider={provider} jsonRpcEndpoint={jsonRpcEndpoint}>
+                    <ErrorReporter />
                     {children}
                   </Web3Provider>
                 </AtomProvider>

src/lib/hooks/useEnsureCorrectProps.ts

@@ -0,0 +1,11 @@
+import { WidgetProps } from 'lib/components/Widget'
+import { missingProviderError } from 'lib/errors'
+import { useEffect } from 'react'
+
+export function useEnsureCorrectProps(props: WidgetProps) {
+  useEffect(() => {
+    if (!props.provider) {
+      throw missingProviderError
+    }
+  }, [props])
+}

src/lib/index.tsx

@@ -3,7 +3,7 @@ import Widget, { WidgetProps } from './components/Widget'
 
 export type SwapWidgetProps = WidgetProps<typeof Swap>
 
-export function SwapWidget({ ...props }: SwapWidgetProps) {
+export function SwapWidget(props: SwapWidgetProps) {
   return (
     <Widget {...props}>
       <Swap {...props} />

src/lib/state/web3.ts

@@ -1,4 +1,5 @@
 import { createMulticall } from '@uniswap/redux-multicall'
+import { atom } from 'jotai'
 import { atomWithStore } from 'jotai/redux'
 import { atomWithDefault } from 'jotai/utils'
 import { createStore } from 'redux'
@@ -12,6 +13,7 @@ export type Web3ReactState = [Connector, Web3ReactHooks]
 
 export const urlAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)
 export const injectedAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)
+export const providerAtom = atom((get) => get(injectedAtom) || get(urlAtom))
 
 export const multicall = createMulticall()
 const multicallStore = createStore(multicall.reducer)