feat: use batch client for wallet connection

package.json

@@ -14,13 +14,13 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@agoric/ertp": "^0.15.4-dev-1adb7a2.0",
-    "@agoric/inter-protocol": "^0.13.2-dev-95a7fa5.0",
-    "@agoric/smart-wallet": "^0.4.3-dev-8cbf697.0",
-    "@agoric/ui-components": "^0.3.4-dev-1adb7a2.0",
-    "@agoric/wallet": "^0.17.1-dev-1adb7a2.0",
-    "@agoric/web-components": "^0.5.1-dev-1adb7a2.0",
-    "@agoric/zoe": "^0.25.4-dev-1adb7a2.0",
+    "@agoric/ertp": "^0.16.3-dev-f581a7e.0",
+    "@agoric/inter-protocol": "^0.16.2-dev-f581a7e.0",
+    "@agoric/smart-wallet": "^0.5.4-dev-f581a7e.0",
+    "@agoric/ui-components": "^0.3.9-dev-39b1586.0",
+    "@agoric/wallet": "^0.18.4-dev-f581a7e.0",
+    "@agoric/web-components": "0.6.4-dev-933b31c.0",
+    "@agoric/zoe": "^0.26.3-dev-f581a7e.0",
     "@endo/eventual-send": "^0.17.2",
     "@endo/init": "^0.5.56",
     "@endo/marshal": "^0.8.5",

src/App.tsx

@@ -20,7 +20,7 @@ import { secondsSinceEpoch } from 'utils/date';
 import { vaultStoreAtom } from 'store/vaults';
 import AppVersionDialog from 'components/AppVersionDialog';
 import { currentlyVisitedHash, ipfsHashLength } from 'utils/ipfs';
-import { fetchRPCAddr } from 'utils/rpc';
+import { fetchChainInfo } from 'utils/rpc';
 import { makeAgoricChainStorageWatcher } from 'rpc';
 
 import 'react-toastify/dist/ReactToastify.css';
@@ -93,18 +93,20 @@ const App = () => {
     if (chainStorageWatcher) return;
     const startWatching = async () => {
       try {
-        const rpcAddr = await fetchRPCAddr(netConfig.url);
+        const { rpc, chainName } = await fetchChainInfo(netConfig.url);
         if (isCancelled) return;
         setChainStorageWatcher(
           makeAgoricChainStorageWatcher(
-            rpcAddr,
+            rpc,
+            chainName,
             importContext.fromBoard.unserialize,
             e => {
               setError(e);
               throw e;
             },
           ),
         );
+
         watchVbank();
       } catch (e) {
         if (isCancelled) return;

src/components/ConnectWalletButton.tsx

@@ -4,6 +4,7 @@ import { Oval } from 'react-loader-spinner';
 import {
   ChainConnection,
   chainConnectionAtom,
+  chainStorageWatcherAtom,
   isWalletConnectionInProgressAtom,
   localStorageStore,
   networkConfigAtom,
@@ -18,6 +19,7 @@ const truncatedAddress = (chainConnection: ChainConnection) =>
 
 const ConnectWalletButton = () => {
   const walletService = useAtomValue(walletServiceAtom);
+  const chainStorageWatcher = useAtomValue(chainStorageWatcherAtom);
   const isConnectionInProgress = useAtomValue(isWalletConnectionInProgressAtom);
   const chainConnection = useAtomValue(chainConnectionAtom);
   const { url } = useAtomValue(networkConfigAtom);
@@ -26,17 +28,19 @@ const ConnectWalletButton = () => {
   // Automatically connect if the user has previously connected.
   useEffect(() => {
     if (
+      chainStorageWatcher &&
       hasWalletPreviouslyConnected &&
       !(isConnectionInProgress || chainConnection)
     ) {
-      walletService.connect(url);
+      walletService.connect();
     }
   }, [
     chainConnection,
     hasWalletPreviouslyConnected,
     isConnectionInProgress,
     url,
     walletService,
+    chainStorageWatcher,
   ]);
 
   const status = (() => {
@@ -57,7 +61,7 @@ const ConnectWalletButton = () => {
           !chainConnection &&
           'hover:bg-black hover:bg-opacity-5',
       )}
-      onClick={() => walletService.connect(url)}
+      onClick={() => walletService.connect()}
     >
       <>
         {status}

src/components/DisclaimerDialog.tsx

@@ -3,7 +3,6 @@ import {
   isDisclaimerDialogShowingAtom,
   latestDisclaimerIndex,
   localStorageStore,
-  networkConfigAtom,
   walletServiceAtom,
 } from 'store/app';
 import { useAtom, useAtomValue } from 'jotai';
@@ -13,7 +12,6 @@ import { disclaimerHref } from 'config';
 
 const DisclaimerDialog = () => {
   const walletService = useAtomValue(walletServiceAtom);
-  const { url } = useAtomValue(networkConfigAtom);
   const { setlatestDisclaimerAgreedIndex } = useStore(localStorageStore);
   const [isDisclaimerDialogShowing, setIsDisclaimerDialogShowing] = useAtom(
     isDisclaimerDialogShowingAtom,
@@ -23,7 +21,7 @@ const DisclaimerDialog = () => {
   const proceed = () => {
     setlatestDisclaimerAgreedIndex(latestDisclaimerIndex);
     setIsDisclaimerDialogShowing(false);
-    walletService.connect(url, false);
+    walletService.connect(false);
   };
 
   const body = (

src/components/OfferSignerBridge.tsx

@@ -9,6 +9,7 @@ import {
   bridgeHrefAtom,
   walletUiHrefAtom,
   setIsDappApprovedAtom,
+  chainStorageWatcherAtom,
 } from 'store/app';
 import type { OfferConfig } from 'store/app';
 import { signerTarget } from 'config';
@@ -52,6 +53,7 @@ const WalletBridge = () => {
   const toastId = useRef<Id | null>(null);
   const bridgeHref = useAtomValue(bridgeHrefAtom);
   const walletUiHref = useAtomValue(walletUiHrefAtom);
+  const watcher = useAtomValue(chainStorageWatcherAtom);
 
   const clearCurrentToast = () =>
     toastId.current && toast.dismiss(toastId.current);
@@ -142,14 +144,14 @@ const WalletBridge = () => {
 
   return (
     <div className="hidden">
-      {chainConnection && (
+      {chainConnection && watcher && (
         <DappWalletBridge
           bridgeHref={bridgeHref}
           onBridgeMessage={onBridgeMessage}
           onBridgeReady={onBridgeReady}
           onError={onError}
           address={chainConnection.address}
-          chainId={chainConnection.chainId}
+          chainId={watcher.chainId}
         />
       )}
     </div>

src/rpc/src/chainStorageWatcher.ts

@@ -34,11 +34,13 @@ const makePathSubscriber = <T>(
  * requests for efficiency.
  *
  * @param rpcAddr RPC server URL
+ * @param chainId the chain id to use
  * @param unserialize CapData unserializer to use
  * @returns
  */
 export const makeAgoricChainStorageWatcher = (
   rpcAddr: string,
+  chainId: string,
   unserialize: FromCapData<string>,
   onError?: (e: Error) => void,
   newPathQueryDelayMs = defaults.newPathQueryDelayMs,
@@ -189,5 +191,7 @@ export const makeAgoricChainStorageWatcher = (
 
   return {
     watchLatest,
+    chainId,
+    rpcAddr,
   };
 };

src/rpc/test/chainStorageWatcher.test.ts

@@ -7,14 +7,19 @@ global.fetch = fetch;
 global.harden = val => val;
 
 const fakeRpcAddr = 'https://agoric-rpc.vitest-nodes.com:443';
+const fakeChainId = 'agoric-unit-test-1';
 const serialize = (val: unknown) => val;
 const unserialize = (val: unknown) => val;
 
 let watcher: ReturnType<typeof makeAgoricChainStorageWatcher>;
 
 describe('makeAgoricChainStorageWatcher', () => {
   beforeEach(() => {
-    watcher = makeAgoricChainStorageWatcher(fakeRpcAddr, unserialize);
+    watcher = makeAgoricChainStorageWatcher(
+      fakeRpcAddr,
+      fakeChainId,
+      unserialize,
+    );
     vi.useFakeTimers();
   });
 

src/service/wallet.ts

@@ -9,7 +9,7 @@ import {
 import { toast } from 'react-toastify';
 import SmartWalletNotFoundToast from 'components/SmartWalletNotFoundToast';
 import {
-  makeAgoricKeplrConnection,
+  makeAgoricWalletConnection,
   AgoricKeplrConnectionErrors as Errors,
 } from '@agoric/web-components';
 import type { Id as ToastId, ToastContent, ToastOptions } from 'react-toastify';
@@ -85,12 +85,12 @@ export const makeWalletService = () => {
     toastId = toast.error(content, options);
   };
 
-  const connect = async (
-    networkConfigUrl: string,
-    shouldCheckDisclaimer = true,
-  ) => {
-    const { isWalletConnectionInProgress, chainConnection, importContext } =
-      appStore.getState();
+  const connect = async (shouldCheckDisclaimer = true) => {
+    const {
+      isWalletConnectionInProgress,
+      chainConnection,
+      chainStorageWatcher,
+    } = appStore.getState();
 
     if (isWalletConnectionInProgress || chainConnection) return;
 
@@ -105,10 +105,7 @@ export const makeWalletService = () => {
 
     appStore.setState({ isWalletConnectionInProgress: true });
     try {
-      const connection = await makeAgoricKeplrConnection(
-        networkConfigUrl,
-        importContext,
-      );
+      const connection = await makeAgoricWalletConnection(chainStorageWatcher);
       appStore.setState({ chainConnection: connection });
       stopWatchingPurses = watchPurses(connection);
       stopWatchingPublicSubscribers = watchPublicSubscribers(connection);

src/utils/rpc.ts

@@ -1,8 +1,11 @@
-export const fetchRPCAddr = async (netconfigURL: string) => {
+export const fetchChainInfo = async (netconfigURL: string) => {
   const response = await fetch(netconfigURL, {
     headers: { accept: 'application/json' },
   });
-  const { rpcAddrs } = await response.json();
+  const { rpcAddrs, chainName } = await response.json();
 
-  return rpcAddrs[Math.floor(Math.random() * rpcAddrs.length)];
+  return {
+    rpc: rpcAddrs[Math.floor(Math.random() * rpcAddrs.length)],
+    chainName,
+  };
 };

src/vite-env.d.ts

@@ -9,7 +9,7 @@ declare module '@agoric/ui-components' {
 
 // UNTIL https://github.com/Agoric/agoric-sdk/issues/6591
 declare module '@agoric/web-components' {
-  export const makeAgoricKeplrConnection;
+  export const makeAgoricWalletConnection;
   export const AgoricKeplrConnectionErrors;
   export const BridgeProtocol;
 }