Merge branch 'main' into readme-sam

package.json

@@ -51,9 +51,6 @@
     "@agoric/xsnap@npm:^0.14.2": "patch:@agoric/xsnap@npm%3A0.14.3-u14.0#~/.yarn/patches/@agoric-xsnap-npm-0.14.3-u14.0-768ce73dba.patch"
   },
   "ava": {
-    "files": [
-      "packages/*/test/**/test-*.js"
-    ],
     "timeout": "30m"
   }
 }

packages/react-components/README.md

@@ -13,28 +13,42 @@ Getting set up is as easy as using the `AgoricProvider`. Under the hood, it uses
 ```tsx
 import { AgoricProvider, ConnectWalletButton } from '@agoric/react-components';
 import { wallets } from 'cosmos-kit';
-// Only needed if customizing the wallet connection modal, or if using `NetworkDropdown`.
 import { ThemeProvider, useTheme } from '@interchain-ui/react';
 import '@agoric/react-components/dist/style.css';
 
+const localnet = {
+  testChain: {
+    chainId: 'agoriclocal',
+    chainName: 'agoric-local',
+  },
+  apis: {
+    rest: ['http://localhost:1317'],
+    rpc: ['http://localhost:26657'],
+    iconUrl: '/agoriclocal.svg', // Optional icon for Network Dropdown component
+  },
+};
+
+// Omit "testChain" to specify the apis for Agoric Mainnet.
+const mainnet = {
+  apis: {
+    rest: ['https://main.api.agoric.net'],
+    rpc: ['https://main.rpc.agoric.net'],
+  },
+};
+
 const App = () => {
   const { themeClass } = useTheme();
   return (
     <ThemeProvider>
       <div className={themeClass}>
         <AgoricProvider
           wallets={wallets.extension}
-          defaultNetworkConfig={{
-            // testChain is optional, defaulting to Agoric mainnet otherwise.
-            testChain: {
-              chainId: 'agoriclocal',
-              chainName: 'agoric-local',
-            },
-            apis: {
-              rest: ['http://localhost:1317'],
-              rpc: ['http://localhost:26657'],
-            },
-          }}
+          agoricNetworkConfigs={[localnet, mainnet]}
+          /**
+           * If unspecified, connects to Agoric Mainnet by default.
+           * See "Network Dropdown" below to see how to switch between Agoric testnets.
+           */
+          defaultChainName="agoric-local"
         >
           <ConnectWalletButton />
         </AgoricProvider>
@@ -90,7 +104,7 @@ which helps convert between input strings and denominated `BigInt` values.
 
 ## Node Selector
 
-To let a user choose their own API endpoints, separate from those provided in `defaultNetworkConfig`, the `NodeSelectorModal` can be provided:
+To let a user choose their own API endpoints, separate from those provided in `agoricNetworkConfigs`, the `NodeSelectorModal` can be provided:
 
 ```tsx
 import { useState } from 'react';
@@ -110,38 +124,26 @@ const NodeSelector = () => {
 };
 ```
 
-The modal will persist the user's chosen API endpoints in local storage, and override whichever endpoints are in `defaultNetworkConfig`.
+The modal will persist the user's chosen API endpoints in local storage, and override whichever endpoints are specified for the current network in `agoricNetworkConfigs`.
 
 ## Network Dropdown
 
 To support multiple Agoric test networks, the `NetworkDropdown` component can
-be used. Under the hood, it uses the `interchain-ui`
+be used. It will let the user choose between the networks provided in `agoricNetworkConfigs`, save their choice to local storage, and override `defaultChainName` when choosing the network to connect to. It uses the `interchain-ui`
 [`ChangeChainCombobox`](https://cosmology.zone/components?id=change-chain-combobox)
 and requires the `ThemeProvider` (see [Integrating](#integrating) above):
 
 ```tsx
 import { NetworkDropdown } from '@agoric/react-components';
 
-const localnet = {
-  testChain: {
-    chainId: 'agoriclocal',
-    chainName: 'agoric-local',
-  },
-  apis: {
-    rest: ['http://localhost:1317'],
-    rpc: ['http://localhost:26657'],
-    iconUrl: '/agoriclocal.svg', // Optional icon for dropdown display
-  },
-};
-const mainnet = {
-  apis: {
-    rest: ['https://main.api.agoric.net'],
-    rpc: ['https://main.rpc.agoric.net'],
-  },
-};
-
-const NetworkSelect = () => {
-  return <NetworkDropdown networkConfigs={[mainnet, localnet]} />;
+const MyNetworkSelect = () => {
+  return (
+    <NetworkDropdown
+      appearance="minimal"
+      size="sm"
+      label="Switch Agoric Networks"
+    />
+  );
 };
 ```
 

packages/react-components/src/lib/components/NetworkDropdown.tsx

@@ -5,7 +5,6 @@ import { ChangeChainCombobox } from '@interchain-ui/react';
 import { useState } from 'react';
 
 export type NetworkDropdownProps = {
-  networkConfigs: NetworkConfig[];
   label?: ChangeChainCombobox['label'];
   size?: ChangeChainCombobox['size'];
   appearance?: ChangeChainCombobox['appearance'];
@@ -28,13 +27,13 @@ const iconForNetwork = (network: NetworkConfig) => {
 };
 
 export const NetworkDropdown = ({
-  networkConfigs,
   label,
   maxHeight,
   size = 'md',
   appearance = 'bold',
 }: NetworkDropdownProps) => {
-  const { networkConfig, setNetworkConfig } = useAgoricNetwork();
+  const { networkConfig, setNetworkConfig, agoricNetworkConfigs } =
+    useAgoricNetwork();
   assert(
     networkConfig && setNetworkConfig,
     'NetworkDropdown error, NetworkContext missing',
@@ -50,13 +49,14 @@ export const NetworkDropdown = ({
     iconUrl: iconForNetwork(networkConfig),
   });
 
-  const dropdownList = networkConfigs.map(config => {
-    return {
-      value: nameForNetwork(config),
-      label: prettyTestChainName(nameForNetwork(config)),
-      iconUrl: iconForNetwork(config),
-    };
-  });
+  const dropdownList =
+    agoricNetworkConfigs?.map(config => {
+      return {
+        value: nameForNetwork(config),
+        label: prettyTestChainName(nameForNetwork(config)),
+        iconUrl: iconForNetwork(config),
+      };
+    }) ?? [];
 
   return (
     <ChangeChainCombobox
@@ -69,7 +69,7 @@ export const NetworkDropdown = ({
       appearance={appearance}
       onItemSelected={item => {
         if (!item) return;
-        const selectedNetworkConfig = networkConfigs.find(network => {
+        const selectedNetworkConfig = agoricNetworkConfigs?.find(network => {
           return nameForNetwork(network) === item?.value;
         });
         assert(

packages/react-components/src/lib/context/AgoricProvider.tsx

@@ -12,15 +12,20 @@ import '@interchain-ui/react/styles';
 
 export type AgoricProviderProps = PropsWithChildren<{
   wallets: MainWalletBase[];
-  defaultNetworkConfig: NetworkConfig;
+  agoricNetworkConfigs: NetworkConfig[];
+  defaultChainName?: string;
   walletConnectOptions?: WalletConnectOptions;
   onConnectionError?: (e: unknown) => void;
   provisionNoticeContent?: ProvisionNoticeProps['mainContent'];
 }>;
 
 export const AgoricProvider = (props: AgoricProviderProps) => {
+  const { defaultChainName, agoricNetworkConfigs } = props;
   return (
-    <NetworkProvider defaultNetworkConfig={props.defaultNetworkConfig}>
+    <NetworkProvider
+      defaultChainName={defaultChainName}
+      agoricNetworkConfigs={agoricNetworkConfigs}
+    >
       <AgoricProviderInner {...props} />
     </NetworkProvider>
   );

packages/react-components/src/lib/context/NetworkContext.tsx

@@ -13,4 +13,5 @@ export type NetworkConfig = {
 export const NetworkContext = createContext<{
   networkConfig?: NetworkConfig;
   setNetworkConfig?: (config: NetworkConfig) => void;
+  agoricNetworkConfigs?: NetworkConfig[];
 }>({});

packages/react-components/src/lib/context/NetworkProvider.tsx

@@ -2,7 +2,10 @@ import { NetworkContext } from './NetworkContext';
 import { PropsWithChildren, useState } from 'react';
 import type { NetworkConfig } from './NetworkContext';
 
-type Props = { defaultNetworkConfig: NetworkConfig };
+type Props = {
+  agoricNetworkConfigs: NetworkConfig[];
+  defaultChainName?: string;
+};
 
 const storageKey = 'agoric-saved-network-config';
 
@@ -17,9 +20,17 @@ const writeToStorage = (networkConfig: NetworkConfig) => {
 };
 
 export const NetworkProvider = ({
-  defaultNetworkConfig,
+  agoricNetworkConfigs,
+  defaultChainName,
   children,
 }: PropsWithChildren<Props>) => {
+  const defaultNetworkConfig =
+    defaultChainName !== 'agoric'
+      ? agoricNetworkConfigs.find(
+          config => config.testChain?.chainName === defaultChainName,
+        )
+      : agoricNetworkConfigs.find(config => config.testChain === undefined);
+
   const [networkConfig] = useState(readFromStorage() ?? defaultNetworkConfig);
 
   const setNetworkConfig = (newConfig: NetworkConfig) => {
@@ -28,7 +39,9 @@ export const NetworkProvider = ({
   };
 
   return (
-    <NetworkContext.Provider value={{ networkConfig, setNetworkConfig }}>
+    <NetworkContext.Provider
+      value={{ networkConfig, setNetworkConfig, agoricNetworkConfigs }}
+    >
       {children}
     </NetworkContext.Provider>
   );