useSolanaClient

app/src/components/CreateEscrowForm.tsx

@@ -3,8 +3,6 @@
 import { useState } from 'react'
 import { YStack, XStack, Text, Button, Input, Spinner } from 'tamagui'
 import {
-  createSolanaRpc,
-  createSolanaRpcSubscriptions,
   pipe,
   createTransactionMessage,
   setTransactionMessageFeePayerSigner,
@@ -16,7 +14,7 @@ import {
   getSignatureFromTransaction,
   address as kitAddress,
 } from '@solana/kit'
-import { useKitTransactionSigner, useWallet, useCluster } from '@solana/connector/react'
+import { useKitTransactionSigner, useWallet, useCluster, useSolanaClient } from '@solana/connector/react'
 import { getCreateEscrowInstructionAsync } from '@descro/sdk'
 import type { Address } from '@descro/sdk'
 
@@ -36,8 +34,7 @@ interface CreateEscrowFormProps {
 export function CreateEscrowForm({ onCreated }: CreateEscrowFormProps) {
   const { signer } = useKitTransactionSigner()
   const { account: address } = useWallet()
-  const { cluster } = useCluster()
-  const rpcUrl = cluster?.url ?? null
+  const { client } = useSolanaClient()
 
   const [buyer, setBuyer] = useState('')
   const [amountSol, setAmountSol] = useState('')
@@ -51,7 +48,7 @@ export function CreateEscrowForm({ onCreated }: CreateEscrowFormProps) {
     setError(null)
     setSuccess(null)
 
-    if (!signer || !address || !rpcUrl) {
+    if (!signer || !address || !client) {
       setError('Connect your wallet first.')
       return
     }
@@ -83,8 +80,7 @@ export function CreateEscrowForm({ onCreated }: CreateEscrowFormProps) {
 
     setLoading(true)
     try {
-      const rpc = createSolanaRpc(rpcUrl)
-      const rpcSubscriptions = createSolanaRpcSubscriptions(rpcUrl.replace('http', 'ws'))
+      const { rpc, rpcSubscriptions } = client
       const escrowId = getNextEscrowId(address)
 
       const ix = await getCreateEscrowInstructionAsync({

app/src/components/EscrowDetail.tsx

@@ -3,8 +3,6 @@
 import { useState } from 'react'
 import { YStack, XStack, Text, Button, Spinner, Separator } from 'tamagui'
 import {
-  createSolanaRpc,
-  createSolanaRpcSubscriptions,
   pipe,
   createTransactionMessage,
   setTransactionMessageFeePayerSigner,
@@ -16,7 +14,7 @@ import {
   getSignatureFromTransaction,
   isSome,
 } from '@solana/kit'
-import { useKitTransactionSigner, useWallet, useCluster } from '@solana/connector/react'
+import { useKitTransactionSigner, useWallet, useSolanaClient } from '@solana/connector/react'
 import { StatusBadge } from './StatusBadge'
 import {
   isAwaitingDeposit,
@@ -46,8 +44,7 @@ export function EscrowDetail({ item, onAction }: EscrowDetailProps) {
 
   const { signer } = useKitTransactionSigner()
   const { account: address } = useWallet()
-  const { cluster } = useCluster()
-  const rpcUrl = cluster?.url ?? null
+  const { client } = useSolanaClient()
 
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -60,7 +57,7 @@ export function EscrowDetail({ item, onAction }: EscrowDetailProps) {
   const isResolver = address != null && resolverAddr != null && address === resolverAddr
 
   async function runTx(buildIx: () => Promise<unknown>) {
-    if (!signer || !address || !rpcUrl) {
+    if (!signer || !address || !client) {
       setError('Connect your wallet first.')
       return
     }
@@ -68,8 +65,7 @@ export function EscrowDetail({ item, onAction }: EscrowDetailProps) {
     setError(null)
     setSuccess(null)
     try {
-      const rpc = createSolanaRpc(rpcUrl)
-      const rpcSubscriptions = createSolanaRpcSubscriptions(rpcUrl.replace('http', 'ws'))
+      const { rpc, rpcSubscriptions } = client
       const ix = await buildIx()
       const { value: latestBlockhash } = await rpc.getLatestBlockhash().send()
       const txMsg = pipe(

app/src/components/ResolverPanel.tsx

@@ -3,8 +3,6 @@
 import React, { useState, useEffect } from 'react'
 import { YStack, XStack, Text, Button, Input, Spinner, Separator } from 'tamagui'
 import {
-  createSolanaRpc,
-  createSolanaRpcSubscriptions,
   pipe,
   createTransactionMessage,
   setTransactionMessageFeePayerSigner,
@@ -16,7 +14,7 @@ import {
   getSignatureFromTransaction,
   address as kitAddress,
 } from '@solana/kit'
-import { useKitTransactionSigner, useWallet, useCluster } from '@solana/connector/react'
+import { useKitTransactionSigner, useWallet, useSolanaClient } from '@solana/connector/react'
 import {
   fetchAllResolvers,
   getRegisterResolverInstructionAsync,
@@ -40,8 +38,7 @@ function truncAddr(addr: string): string {
 export function ResolverPanel() {
   const { signer } = useKitTransactionSigner()
   const { account: address } = useWallet()
-  const { cluster } = useCluster()
-  const rpcUrl = cluster?.url ?? null
+  const { client } = useSolanaClient()
 
   const [resolvers, setResolvers] = useState<ResolverEntryWithPda[]>([])
   const [resolversLoading, setResolversLoading] = useState(false)
@@ -58,11 +55,10 @@ export function ResolverPanel() {
   const [success, setSuccess] = useState<string | null>(null)
 
   async function loadResolvers() {
-    if (!rpcUrl) return
+    if (!client) return
     setResolversLoading(true)
     try {
-      const rpc = createSolanaRpc(rpcUrl)
-      const all = await fetchAllResolvers(rpc)
+      const all = await fetchAllResolvers(client.rpc)
       setResolvers(all)
     } catch (err) {
       console.error('Failed to load resolvers', err)
@@ -74,14 +70,14 @@ export function ResolverPanel() {
   useEffect(() => {
     loadResolvers()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rpcUrl])
+  }, [client])
 
   async function handleRegister(e: React.FormEvent) {
     e.preventDefault()
     setError(null)
     setSuccess(null)
 
-    if (!signer || !address || !rpcUrl) {
+    if (!signer || !address || !client) {
       setError('Connect your wallet first.')
       return
     }
@@ -108,8 +104,7 @@ export function ResolverPanel() {
 
     setFormLoading(true)
     try {
-      const rpc = createSolanaRpc(rpcUrl)
-      const rpcSubscriptions = createSolanaRpcSubscriptions(rpcUrl.replace('http', 'ws'))
+      const { rpc, rpcSubscriptions } = client
       const resolverType = RESOLVER_TYPE_OPTIONS[resolverTypeIdx].value
 
       const ix = await getRegisterResolverInstructionAsync({

app/src/hooks/useEscrowDetail.ts

@@ -1,28 +1,26 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { createSolanaRpc, createSolanaRpcSubscriptions } from '@solana/kit'
-import { useCluster } from '@solana/connector/react'
+import { useSolanaClient } from '@solana/connector/react'
 import { fetchMaybeEscrowAccount, subscribeEscrow } from '@descro/sdk'
 import type { Address, EscrowAccount } from '@descro/sdk'
 
 export function useEscrowDetail(pda: Address | null) {
-  const { cluster } = useCluster()
-  const rpcUrl = cluster?.url ?? null
+  const { client } = useSolanaClient()
 
   const [account, setAccount] = useState<EscrowAccount | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
-    if (!pda || !rpcUrl) {
+    if (!pda || !client) {
       setAccount(null)
       return
     }
 
     let cancelled = false
     setLoading(true)
-    const rpc = createSolanaRpc(rpcUrl)
+    const { rpc, rpcSubscriptions } = client
 
     fetchMaybeEscrowAccount(rpc, pda)
       .then((maybeAcc) => {
@@ -38,8 +36,6 @@ export function useEscrowDetail(pda: Address | null) {
         if (!cancelled) setLoading(false)
       })
 
-    const wsUrl = rpcUrl.replace('http', 'ws')
-    const rpcSubscriptions = createSolanaRpcSubscriptions(wsUrl)
     const unsub = subscribeEscrow(rpcSubscriptions, pda, (updated) => {
       if (!cancelled) setAccount(updated)
     })
@@ -48,7 +44,7 @@ export function useEscrowDetail(pda: Address | null) {
       cancelled = true
       unsub()
     }
-  }, [pda, rpcUrl])
+  }, [pda, client])
 
   return { account, loading, error }
 }