prevent max amount from overshooting when selecting ETH. Prevent page…

… from crashing on network switch

src/components/rtoken-selector/atoms.ts

@@ -31,7 +31,7 @@ const availableTokensAtom = atom((get) => {
   }
 
   for (const token of owned) {
-    if (!tokenList[token.address]) {
+    if (tokenList[token.address] == null) {
       tokenList[token.address] = {
         address: token.address,
         symbol: token.symbol,

src/state/chain/atoms/chainAtoms.ts

@@ -5,7 +5,6 @@ import { blockDuration } from 'utils/constants'
 import { formatEther } from 'viem'
 import { Address, PublicClient, WalletClient } from 'wagmi'
 import rtokens from '@lc-labs/rtokens'
-
 /**
  * #########################
  * Chain state related atoms

src/state/updater.tsx

@@ -1,22 +1,46 @@
+import { Component } from 'react'
 import RpayFeed from './rpay/RpayFeed'
 import RTokenUpdater from './rtoken/updater'
 import CollateralYieldUpdater from './updaters/CollateralYieldUpdater'
 import PricesUpdater from './updaters/PriceUpdater'
 import AccountUpdater from './wallet/updaters/AccountUpdater'
 import { TokenBalancesUpdater } from './wallet/updaters/TokenBalancesUpdater'
+import { useChainId } from 'wagmi'
 
+class CatchErrors extends Component<{ children: any }> {
+  state = {
+    hasError: false,
+  }
+  constructor(props: any) {
+    super(props)
+  }
+  componentDidCatch() {
+    this.setState({ hasError: true })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+    return <>{this.props.children}</>
+  }
+}
 /**
  * Updater
  */
-const Updater = () => (
-  <>
-    <PricesUpdater />
-    <AccountUpdater />
-    <RpayFeed />
-    <RTokenUpdater />
-    <CollateralYieldUpdater />
-    <TokenBalancesUpdater />
-  </>
-)
+const Updater = () => {
+  const id = useChainId()
+
+  return (
+    <CatchErrors key={id}>
+      <PricesUpdater />
+      <AccountUpdater />
+      <RpayFeed />
+      <RTokenUpdater />
+      <CollateralYieldUpdater />
+      <TokenBalancesUpdater />
+    </CatchErrors>
+  )
+}
 
 export default Updater

src/state/wallet/updaters/TokenBalancesUpdater.tsx

@@ -25,24 +25,23 @@ const balancesCallAtom = atom((get) => {
     return undefined
   }
 
-
   const tokens: [Address, number][] = [
     [rToken.address, rToken.decimals],
     [RSR_ADDRESS[chainId], 18],
     ...rToken.collaterals.map((token): [Address, number] => [
       token.address,
       token.decimals,
     ]),
-    ...zapTokens.map(i => ([i.address.address as Address, i.decimals] as [Address, number]))
+    ...(zapTokens?.map(i => ([i.address.address as Address, i.decimals] as [Address, number]))??[])
   ];
 
   if (rToken.stToken) {
     tokens.push([rToken.stToken.address, rToken.stToken.decimals])
   }
 
   return {
-    tokens,
-    calls: tokens.map(([address]) => ({
+    tokens: tokens??[],
+    calls: (tokens??[]).map(([address]) => ({
       address,
       abi: ERC20,
       functionName: 'balanceOf',
@@ -51,6 +50,7 @@ const balancesCallAtom = atom((get) => {
   }
 })
 
+
 export const TokenBalancesUpdater = () => {
   const { tokens, calls } = useAtomValue(balancesCallAtom) ?? {}
   const setBalances = useSetAtom(balancesAtom)

src/views/issuance/components/zap/components/ConfirmZap.tsx

@@ -8,7 +8,6 @@ import { Divider } from 'theme-ui'
 import {
   approvalPending,
   selectedZapTokenAtom,
-  zapInputString,
   zapTxHash,
 } from '../state/atoms'
 import { approvalTxFeeAtom, ui, zapTxFeeAtom } from '../state/ui-atoms'

src/views/issuance/components/zap/components/ZapButton.tsx

@@ -11,7 +11,6 @@ const ZapButton = (props: Partial<LoadingButtonProps>) => {
   useEffect(() => {
 
     if (ttx != null) {
-      console.log("Setting previous")
       setPrevious(ttx)
     }
 

src/views/issuance/components/zap/components/ZapInput.tsx

@@ -33,7 +33,6 @@ const ZapDust = () => {
   if (total.amount < 10000n) {
     str = '*'
   }
-  console.log(total.amount)
 
   return (
     <span

src/views/issuance/components/zap/index.tsx

@@ -1,7 +1,7 @@
 import useRToken from 'hooks/useRToken'
 import { useAtomValue } from 'jotai'
 import mixpanel from 'mixpanel-browser'
-import { Suspense, useEffect, useState } from 'react'
+import { Component, Suspense, useEffect, useState } from 'react'
 import { blockAtom, gasFeeAtom } from 'state/atoms'
 import { Card } from 'theme-ui'
 import ConfirmZap from './components/ConfirmZap'
@@ -23,6 +23,25 @@ const UpdateBlockAndGas = () => {
   return null
 }
 
+class CatchErrors extends Component<{children: any}> {
+  state = {
+    hasError: false
+  }
+  constructor(props: any) {
+    super(props)
+  }
+  componentDidCatch() {
+    this.setState({ hasError: true })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+    return <>{this.props.children}</>
+  }
+}
+
 /**
  * Zap widget
  */
@@ -40,7 +59,7 @@ const Zap = () => {
 
 
   return (
-    <>
+    <CatchErrors>
       <Suspense fallback={<></>}>
         <UpdateBlockAndGas />
       </Suspense>
@@ -49,7 +68,7 @@ const Zap = () => {
         <ZapButton onClick={handleClick} />
       </Card>
       {isZapping && <ConfirmZap onClose={() => setZapping(false)} />}
-    </>
+    </CatchErrors>
   )
 }
 

src/views/issuance/components/zap/state/atoms.ts

@@ -28,6 +28,7 @@ import {
 import { resolvedZapState, zappableTokens } from './zapper'
 import { type SearcherResult } from '@reserve-protocol/token-zapper/types/searcher/SearcherResult'
 import { type ZapTransaction } from '@reserve-protocol/token-zapper/types/searcher/ZapTransaction'
+import { parseEther } from 'viem'
 
 /**
  * I've tried to keep react effects to a minimum so most async code is triggered via some signal
@@ -179,19 +180,43 @@ export const zapQuotePromise = loadable(
     a.catch((e) => console.log(e.message))
 
     const out = await a
-    console.log(out)
     return out
   })
 )
 
 export const zapQuote = simplifyLoadable(zapQuotePromise)
 
-export const selectedZapTokenBalance = onlyNonNullAtom((get) => {
+
+const approximateGasUsage: Record<string, bigint> = {
+  '0xa0d69e286b938e21cbf7e51d71f6a4c8918f482f': 3_000_000n,
+  '0xe72b141df173b999ae7c1adcbf60cc9833ce56a8': 3_000_000n,
+  '0xacdf0dba4b9839b96221a8487e9ca660a48212be': 6_000_000n,
+  '0xf2098092a5b9d25a3cc7ddc76a0553c9922eea9e': 3_000_000n,
+  '0x9b451beb49a03586e6995e5a93b9c745d068581e': 3_000_000n,
+  '0xfc0b1eef20e4c68b3dcf36c4537cfa7ce46ca70b': 3_000_000n,
+  '0x50249c768a6d3cb4b6565c0a2bfbdb62be94915c': 3_000_000n,
+  '0xcc7ff230365bd730ee4b352cc2492cedac49383e': 6_000_000n
+}
+export const selectedZapTokenBalance = atom((get) => {
   const token = get(selectedZapTokenAtom)
+  if (token == null) {
+    return null
+  }
+  const zapState = get(resolvedZapState)
+  if (zapState == null) {
+    return null
+  }
+  const rtoken = get(rTokenAtom)
+  const zapTransaction = get(resolvedZapTransaction)
   const quantities = get(balancesAtom) ?? {}
-  const bal = quantities[token.address.address as any]?.balance ?? 0n
-
-  return token.from(bal)
+  const fr = quantities[token.address.address as any]?.balance ?? "0"
+  let bal = token.from(fr)
+  if (token.address.address === '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE') {
+    const a = zapState.gasPrice * (zapTransaction?.transaction.gasEstimate ?? approximateGasUsage[rtoken?.address.toLowerCase() ?? ""] ?? 2_500_000n);
+    bal = bal.sub(token.from(a))
+    bal = bal.amount < 0n ? token.zero : bal
+  }
+  return bal
 })
 
 export const approvalNeededAtom = loadable(
@@ -307,9 +332,9 @@ const zapTxAtom = atom(async (get) => {
     permit2 =
       signature != null && permit != null
         ? {
-            permit: permit.permit,
-            signature,
-          }
+          permit: permit.permit,
+          signature,
+        }
         : undefined
   }
   const tx = await result.toTransaction({

src/views/issuance/components/zap/state/ui-atoms.ts

@@ -176,7 +176,6 @@ export const zapOutputValue = onlyNonNullAtom((get) => {
 const state = atom((get) => {
   const quotePromise = get(zapQuotePromise)
   const approvePromise = get(approvalNeededAtom)
-  const prev = get(previousZapTransaction)
   const tx = get(zapTransaction)
   const units = get(zapTransactionGasEstimateUnits)
   const balances = get(hasSufficientGasTokenAndERC20TokenBalance)
@@ -243,7 +242,13 @@ const loadingStates = new Set<UIState>([
   // 'approval_sent_loading',
   'signature_loading',
 ])
-const buttonEnabled = atom((get) => buttonEnabledStates.has(get(state)) || get(previousZapTransaction) != null)
+const buttonEnabled = atom((get) => {
+  const s = get(state);
+  if (s === 'insufficient_gas_balance' || s === 'insufficient_token_balance') {
+    return false
+  }
+  return buttonEnabledStates.has(s) || get(previousZapTransaction) != null
+})
 const buttonIsLoading = atom((get) => loadingStates.has(get(state)))
 const buttonLabel = atom((get) => {
   if (get(zapSender) == null) {
@@ -253,16 +258,18 @@ const buttonLabel = atom((get) => {
   if (loadedState == null) {
     return '+ Zap'
   }
+  const s = get(state)
 
-  if (get(previousZapTransaction) != null) {
-    return `+ Mint ${loadedState.rToken.symbol}`
-  }
-
-  switch (get(state)) {
+  switch (s) {
     case 'insufficient_gas_balance':
       return 'Insufficient ETH balance'
     case 'insufficient_token_balance':
       return `Insufficient ${loadedState.tokenToZap.symbol} balance`
+  }
+  if (get(previousZapTransaction) != null) {
+    return `+ Mint ${loadedState.rToken.symbol}`
+  }
+  switch (s) {
     case 'quote_error':
       return 'Failed to find zap'
     case 'approval_error':

src/views/issuance/components/zap/state/zapper.ts

@@ -3,9 +3,10 @@ import { atom } from 'jotai'
 import { loadable } from 'jotai/utils'
 import { onlyNonNullAtom, simplifyLoadable } from 'utils/atoms/utils'
 import { createProxiedOneInchAggregator } from './createProxiedOneInchAggregator'
-import { clientAtom } from 'state/atoms'
-import { Web3Provider } from "@ethersproject/providers"
+import { chainIdAtom, clientAtom } from 'state/atoms'
+import { Provider, Web3Provider } from "@ethersproject/providers"
 import { PublicClient } from 'viem'
+import { ChainId } from 'utils/chains'
 
 export function publicClientToProvider(publicClient: PublicClient) {
   const { chain } = publicClient
@@ -22,12 +23,12 @@ export function publicClientToProvider(publicClient: PublicClient) {
   }, network)
 }
 
-const providerAtom = atom<any>(get => {
+const providerAtom = atom(get => {
   const cli = get(clientAtom)
   if (cli == null) {
     return null
   }
-  return publicClientToProvider(cli as any)
+  return publicClientToProvider(cli as any) as Web3Provider
 })
 
 
@@ -51,6 +52,7 @@ const ONE_INCH_PROXIES = [
 
 export const zapperState = loadable(
   atom(async (get) => {
+    get(chainIdAtom)
     const provider = get(providerAtom)
 
     // To inject register data into the zapper initialize code, it's probably best to load it all here.
@@ -59,10 +61,11 @@ export const zapperState = loadable(
     if (provider == null) {
       return null
     }
+    provider.on('error', () => {})
 
     try {
 
-      const chainIdToConfig: Record<number, {config: any, setup: (uni: Universe<any>) => Promise<any>}> = {
+      const chainIdToConfig: Record<number, { config: any, setup: (uni: Universe<any>) => Promise<any> }> = {
         1: {
           config: ethereumConfig,
           setup: setupEthereumZapper
@@ -72,26 +75,22 @@ export const zapperState = loadable(
           setup: setupBaseZapper
         }
       }
-      
+
       const universe = await Universe.createWithConfig(
         provider,
         chainIdToConfig[provider.network.chainId].config,
         chainIdToConfig[provider.network.chainId].setup
       )
-      try {
-        if (ONE_INCH_PROXIES.length !== 0) {
-          universe.dexAggregators.push(
-            createProxiedOneInchAggregator(universe, ONE_INCH_PROXIES)
-          )
-        }
-      } catch (e) {
-        console.log(e)
+      if (ONE_INCH_PROXIES.length !== 0) {
+        universe.dexAggregators.push(
+          createProxiedOneInchAggregator(universe, ONE_INCH_PROXIES)
+        )
       }
-
       return universe
+
     } catch (e) {
       console.log(e)
-      throw e
+      return null
     }
   })
 )
@@ -106,7 +105,7 @@ export const zapperLoaded = atom(async (get) => {
   return true
 })
 
-export const zappableTokens = atom(async(get) => {
+export const zappableTokens = atom(async (get) => {
   const uni = get(resolvedZapState)
   if (uni == null) {
     return []