Enhance network switching and error handling in LaserEyes app

 - Add `NetworkType` and `useEffect` for network management
 - Implement network switching logic in `App` component
 - Improve error handling with `toast` notifications
 - Update UtxoProvider to derive network from `useLaserEyes`
 - Refactor provider classes to handle unsupported networks
 - Adjust network constants and helper functions
 - Update package dependencies to use workspace versions

Author: hathbanger

apps/demo.lasereyes.build/app/page.tsx

@@ -3,14 +3,15 @@ import {
   FRACTAL_MAINNET,
   FRACTAL_TESTNET,
   MAINNET,
+  NetworkType,
   SIGNET,
   TESTNET,
   TESTNET4,
 } from '@omnisat/lasereyes'
 import dynamic from 'next/dynamic'
 
 import App from '@/components/App'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { UtxoProvider } from '@/hooks/useUtxos'
 
 const DynamicLasereyesProvider = dynamic(
@@ -19,18 +20,41 @@ const DynamicLasereyesProvider = dynamic(
 )
 
 export default function Home() {
-  const [network] = useState<
+  const [network, setNetwork] = useState<
     | typeof MAINNET
     | typeof TESTNET
     | typeof TESTNET4
     | typeof SIGNET
     | typeof FRACTAL_MAINNET
     | typeof FRACTAL_TESTNET
   >(MAINNET)
+
+  const [mounted, setMounted] = useState(false)
+
+  const switchNet = (net: NetworkType) => {
+    if (network === MAINNET) {
+      setNetwork(TESTNET4)
+    } else {
+      setNetwork(MAINNET)
+    }
+  }
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
   return (
-    <DynamicLasereyesProvider config={{ network }}>
+    <DynamicLasereyesProvider
+      config={{
+        network: network,
+      }}
+    >
       <UtxoProvider network={network}>
-        <App />
+        <App setNetwork={switchNet} />
       </UtxoProvider>
     </DynamicLasereyesProvider>
   )

apps/demo.lasereyes.build/components/App.tsx

@@ -3,20 +3,13 @@ import WalletCard from '@/components/WalletCard'
 import { useEffect, useState } from 'react'
 import { clsx } from 'clsx'
 import {
-  LEATHER,
-  MAGIC_EDEN,
-  OKX,
-  OYL,
-  PHANTOM,
-  UNISAT,
-  WIZZ,
-  ORANGE,
-  XVERSE,
+  MAINNET,
+  NetworkType,
+  ProviderType,
+  SUPPORTED_WALLETS,
+  TESTNET4,
   useLaserEyes,
   WalletIcon,
-  OP_NET,
-  SUPPORTED_WALLETS,
-  ProviderType,
 } from '@omnisat/lasereyes'
 import { satoshisToBTC } from '@/lib/btc'
 import { cn, truncateString } from '@/lib/utils'
@@ -30,8 +23,9 @@ import { FaExternalLinkAlt } from 'react-icons/fa'
 import { RxReload } from 'react-icons/rx'
 import { ClickToCopyNpmInstallPill } from '@/components/ClickToCopyNpmInstallPill'
 import { ImNewTab } from 'react-icons/im'
+import { toast } from 'sonner'
 
-const App = () => {
+const App = ({ setNetwork }: { setNetwork: (n: NetworkType) => void }) => {
   const {
     address,
     paymentAddress,
@@ -56,6 +50,20 @@ const App = () => {
     | undefined
   >()
 
+  const switchN = () => {
+    try {
+      if (network === MAINNET) {
+        switchNetwork(TESTNET4)
+        setNetwork(TESTNET4)
+      } else {
+        switchNetwork(MAINNET)
+        setNetwork(MAINNET)
+      }
+    } catch (e) {
+      toast.error(e.message)
+    }
+  }
+
   useEffect(() => {
     getPackageVersion().then((version) => {
       setPkgVersion(version)
@@ -91,6 +99,8 @@ const App = () => {
           src={
             address ? '/lasereyes_connected.svg' : '/lasereyes_disconnected.svg'
           }
+          className={'w-auto h-auto'}
+          priority
           alt={address ? 'Laser Eyes Connected' : 'Laser Eyes Disconnected'}
           width={300}
           height={47}
@@ -132,7 +142,14 @@ const App = () => {
       <div className={'border border-[#3c393f] w-full text-xl grow pb-8'}>
         <div className={'flex flex-row items-center gap-4 '}>
           <div className={'grow'} />
-          <div className={'flex flex-col p-4 items-center'}>{network}</div>
+          <div
+            className={
+              'flex flex-col border border-[#3c393f] hover:underline cursor-pointer hover:text-orange-400 p-4 items-center'
+            }
+            onClick={() => switchN()}
+          >
+            {network}
+          </div>
         </div>
         <div
           className={'flex flex-col gap-2 text-center items-center break-all'}

apps/demo.lasereyes.build/hooks/useUtxos.tsx

@@ -19,19 +19,20 @@ type UtxoContextType = {
 const UtxoContext = createContext<UtxoContextType | undefined>(undefined)
 
 export const UtxoProvider: React.FC<{
-  network: NetworkType
   children: React.ReactNode
-}> = ({ children, network }) => {
-  const { paymentAddress } = useLaserEyes()
+}> = ({ children }) => {
+  const { paymentAddress, network } = useLaserEyes()
   const mempoolUrl = `${getMempoolSpaceUrl(network)}/api/address/${paymentAddress}/utxo`
   const [utxos, setUtxos] = useState<IMempoolUtxo[]>([])
 
   const fetcher = useCallback(async (url: string) => {
-    const response = await fetch(url)
-    if (!response.ok) {
-      throw new Error('Failed to fetch UTXOs')
-    }
-    return response.json()
+    try {
+      const response = await fetch(url)
+      if (!response.ok) {
+        throw new Error('Failed to fetch UTXOs')
+      }
+      return response.json()
+    } catch (e) {}
   }, [])
 
   const { data: utxosData, error } = useSWR<IMempoolUtxo[]>(

packages/lasereyes-core/src/client/index.ts

@@ -114,7 +114,6 @@ export class LaserEyesClient {
       await provider?.connect(defaultWallet)
       this.$store.setKey('connected', true)
     } catch (error) {
-      console.error(error)
       this.$store.setKey('isConnecting', false)
       this.disconnect()
       throw error
@@ -128,9 +127,9 @@ export class LaserEyesClient {
       throw new Error('No wallet provider connected')
     }
 
-    if (!this.$providerMap[this.$store.get().provider!]) {
-      throw new Error("The connected wallet doesn't support this method")
-    }
+    // if (!this.$providerMap[this.$store.get().provider!]) {
+    //   throw new Error("The connected wallet doesn't support request accounts")
+    // }
 
     try {
       return await this.$providerMap[
@@ -332,7 +331,7 @@ export class LaserEyesClient {
       } catch (error) {
         if (error instanceof Error) {
           if (error.message.toLowerCase().includes('not implemented')) {
-            throw new Error("The connected wallet doesn't support this method")
+            throw new Error("The connected wallet doesn't support getPublicKey")
           }
         }
         throw error
@@ -351,7 +350,7 @@ export class LaserEyesClient {
       } catch (error) {
         if (error instanceof Error) {
           if (error.message.toLowerCase().includes('not implemented')) {
-            throw new Error("The connected wallet doesn't support this method")
+            throw new Error("The connected wallet doesn't support getBalance")
           }
         }
         throw error

packages/lasereyes-core/src/client/providers/magic-eden.ts

@@ -1,30 +1,32 @@
 import * as bitcoin from 'bitcoinjs-lib'
 import {
-  GetAddressOptions,
+  BitcoinNetworkType,
   getAddress,
-  signMessage,
+  GetAddressOptions,
+  MessageSigningProtocols,
   sendBtcTransaction,
-  BitcoinNetworkType,
   SendBtcTransactionOptions,
-  MessageSigningProtocols,
+  signMessage,
   signTransaction,
 } from 'sats-connect'
 import { WalletProvider } from '.'
 import {
-  ProviderType,
-  NetworkType,
-  MAGIC_EDEN,
   getSatsConnectNetwork,
-  MAINNET,
   LaserEyesStoreType,
+  MAGIC_EDEN,
+  MAINNET,
+  NetworkType,
+  ProviderType,
 } from '../..'
 import {
   findOrdinalsAddress,
   findPaymentAddress,
-  getBTCBalance,
   getBitcoinNetwork,
+  getBTCBalance,
+  isMainnetNetwork,
+  isTestnetNetwork,
 } from '../../lib/helpers'
-import { MapStore, listenKeys } from 'nanostores'
+import { listenKeys, MapStore } from 'nanostores'
 import { persistentMap } from '@nanostores/persistent'
 import { fromOutputScript } from 'bitcoinjs-lib/src/address'
 import { keysToPersist, PersistedKey } from '../utils'
@@ -123,18 +125,27 @@ export default class MagicEdenProvider extends WalletProvider {
 
     try {
       if (address) {
-        this.restorePersistedValues()
-        getBTCBalance(paymentAddress, this.network).then((totalBalance) => {
-          this.$store.setKey('balance', totalBalance)
-        })
-        return
+        if (address.startsWith('tb1') && isMainnetNetwork(this.network)) {
+          this.disconnect()
+        } else {
+          this.restorePersistedValues()
+          getBTCBalance(paymentAddress, this.network).then((totalBalance) => {
+            this.$store.setKey('balance', totalBalance)
+          })
+          return
+        }
       }
+
+      if (isTestnetNetwork(this.network)) {
+        throw new Error(`${this.network} is not supported by ${MAGIC_EDEN}`)
+      }
+
       let magicEdenNetwork = getSatsConnectNetwork(this.network || MAINNET)
       const getAddressOptions = {
         getProvider: async () => this.library,
         payload: {
           purposes: ['ordinals', 'payment'],
-          message: 'Address for receiving Ordinals and payments',
+          message: 'Connecting with lasereyes',
           network: {
             type: magicEdenNetwork,
           },

packages/lasereyes-core/src/client/providers/oyl.ts

@@ -1,7 +1,11 @@
 import * as bitcoin from 'bitcoinjs-lib'
 import { UNSUPPORTED_PROVIDER_METHOD_ERROR, WalletProvider } from '.'
 import { ProviderType, NetworkType } from '../../types'
-import { createSendBtcPsbt, getBTCBalance } from '../../lib/helpers'
+import {
+  createSendBtcPsbt,
+  getBTCBalance,
+  isTestnetNetwork,
+} from '../../lib/helpers'
 import { OYL } from '../../constants/wallets'
 import { listenKeys, MapStore } from 'nanostores'
 import { persistentMap } from '@nanostores/persistent'
@@ -98,6 +102,10 @@ export default class OylProvider extends WalletProvider {
 
   async connect(_: ProviderType): Promise<void> {
     if (!this.library) throw new Error("Oyl isn't installed")
+    if (isTestnetNetwork(this.network)) {
+      throw new Error(`${this.network} is not supported by Oyl`)
+    }
+
     const { nativeSegwit, taproot } = await this.library.getAddresses()
     if (!nativeSegwit || !taproot) throw new Error('No accounts found')
     this.$store.setKey('address', taproot.address)

packages/lasereyes-core/src/client/providers/phantom.ts

@@ -6,6 +6,7 @@ import {
   createSendBtcPsbt,
   getBitcoinNetwork,
   getBTCBalance,
+  isTestnetNetwork,
 } from '../../lib/helpers'
 import { listenKeys } from 'nanostores'
 import { fromOutputScript } from 'bitcoinjs-lib/src/address'
@@ -73,6 +74,10 @@ export default class PhantomProvider extends WalletProvider {
 
   async connect(_: ProviderType): Promise<void> {
     if (!this.library) throw new Error("Phantom isn't installed")
+    if (isTestnetNetwork(this.network)) {
+      throw new Error(`${this.network} is not supported by ${PHANTOM}`)
+    }
+
     const phantomAccounts = await this.library.requestAccounts()
     if (!phantomAccounts) throw new Error('No accounts found')
     this.$store.setKey('accounts', phantomAccounts)

packages/lasereyes-core/src/client/providers/unisat.ts

@@ -82,7 +82,7 @@ export default class UnisatProvider extends WalletProvider {
       this.parent.disconnect()
     }
   }
-  private handleNetworkChanged(network: NetworkType) {
+  private handleNetworkChanged(network: string) {
     const foundNetwork = getNetworkForUnisat(network)
     if (this.network !== foundNetwork) {
       this.switchNetwork(foundNetwork)
@@ -94,6 +94,12 @@ export default class UnisatProvider extends WalletProvider {
     if (!this.library) throw new Error("Unisat isn't installed")
     const unisatAccounts = await this.library.requestAccounts()
     if (!unisatAccounts) throw new Error('No accounts found')
+    await this.getNetwork().then((network) => {
+      if (this.network !== network) {
+        console.log('Network changed')
+        this.switchNetwork(this.network)
+      }
+    })
     const unisatPubKey = await this.library.getPublicKey()
     if (!unisatPubKey) throw new Error('No public key found')
     this.$store.setKey('accounts', unisatAccounts)
@@ -102,12 +108,8 @@ export default class UnisatProvider extends WalletProvider {
     this.$store.setKey('publicKey', unisatPubKey)
     this.$store.setKey('paymentPublicKey', unisatPubKey)
     this.$store.setKey('provider', UNISAT)
-    await this.getNetwork().then((network) => {
-      if (this.config?.network !== network) {
-        this.switchNetwork(network)
-      }
-    })
-    // TODO: Confirm if this is necessary and why
+
+    // TODO: Confirm if this i necessary and why
     getBTCBalance(unisatAccounts[0], this.network).then((totalBalance) => {
       this.$store.setKey('balance', totalBalance)
     })
@@ -192,6 +194,5 @@ export default class UnisatProvider extends WalletProvider {
     const wantedNetwork = getUnisatNetwork(network)
     await this.library?.switchChain(wantedNetwork)
     this.$network.set(network)
-    await this.getBalance()
   }
 }