feat: network dropdown

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

@@ -0,0 +1,85 @@
+import { type NetworkConfig } from '../context/NetworkContext.js';
+import { useAgoricNetwork } from '../hooks/network.js';
+import { agoricChain, prettyTestChainName } from '../config/index.js';
+import { ChangeChainCombobox } from '@interchain-ui/react';
+import { useState } from 'react';
+
+type Props = {
+  networkConfigs: NetworkConfig[];
+  label?: ChangeChainCombobox['label'];
+  size?: ChangeChainCombobox['size'];
+  appearance?: ChangeChainCombobox['appearance'];
+  maxHeight?: ChangeChainCombobox['maxHeight'];
+};
+
+const nameForNetwork = (network: NetworkConfig) => {
+  const name = network.testChain?.chainName ?? agoricChain?.chain_name;
+  assert(
+    name,
+    'Cannot find default Agoric chain in registry, testChain must be provided.',
+  );
+  return name;
+};
+
+const iconForNetwork = (network: NetworkConfig) => {
+  return network.testChain === undefined
+    ? agoricChain?.images?.[0].svg
+    : network.testChain.iconUrl;
+};
+
+export const NetworkDropdown = ({
+  networkConfigs,
+  label,
+  maxHeight,
+  size = 'md',
+  appearance = 'bold',
+}: Props) => {
+  const { networkConfig, setNetworkConfig } = useAgoricNetwork();
+  assert(
+    networkConfig && setNetworkConfig,
+    'NetworkDropdown error, NetworkContext missing',
+  );
+
+  const [selectedChain, setSelectedChain] = useState<{
+    label: string;
+    value: string;
+    iconUrl?: string;
+  }>({
+    value: nameForNetwork(networkConfig),
+    label: prettyTestChainName(nameForNetwork(networkConfig)),
+    iconUrl: iconForNetwork(networkConfig),
+  });
+
+  const dropdownList = networkConfigs.map(config => {
+    return {
+      value: nameForNetwork(config),
+      label: prettyTestChainName(nameForNetwork(config)),
+      iconUrl: iconForNetwork(config),
+    };
+  });
+
+  return (
+    <ChangeChainCombobox
+      maxHeight={maxHeight}
+      label={label}
+      isClearable={false}
+      defaultSelected={selectedChain}
+      size={size}
+      valueItem={selectedChain}
+      appearance={appearance}
+      onItemSelected={item => {
+        if (!item) return;
+        const selectedNetworkConfig = networkConfigs.find(network => {
+          return nameForNetwork(network) === item?.value;
+        });
+        assert(
+          selectedNetworkConfig,
+          'Selected chain missing from networkConfigs',
+        );
+        setSelectedChain(item);
+        setNetworkConfig(selectedNetworkConfig);
+      }}
+      options={dropdownList}
+    />
+  );
+};

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

@@ -1,18 +1,17 @@
 import { Dialog, Transition } from '@headlessui/react';
-import { Fragment, useContext, useState } from 'react';
+import { Fragment, useState } from 'react';
 import clsx from 'clsx';
-import { NetworkContext } from '../context';
+import { useAgoricNetwork } from '../hooks';
 import BldIcon from '../icons/Bld';
 import type { ChangeEvent } from 'react';
 
 type Props = {
-  isChainIdEditable?: boolean;
   isOpen?: boolean;
   onClose: () => void;
 };
 
 export const NodeSelectorModal = ({ onClose, isOpen = false }: Props) => {
-  const { networkConfig, setNetworkConfig } = useContext(NetworkContext);
+  const { networkConfig, setNetworkConfig } = useAgoricNetwork();
   const defaultRest = networkConfig?.apis?.rest?.at(0);
   const defaultRpc = networkConfig?.apis?.rpc?.at(0);
   assert(
@@ -103,7 +102,7 @@ export const NodeSelectorModal = ({ onClose, isOpen = false }: Props) => {
                 <div className="pt-10 pb-6 px-8">
                   <div className="flex justify-end gap-6">
                     <button
-                      className="text-gray-500 bg-gray-100 hover:bg-gray-200 transition-colors"
+                      className="cursor-pointer transition text-btn-xs text-gray-500 rounded-md border-transparent py-3 px-7 font-bold bg-gray-500 bg-opacity-10 hover:bg-opacity-20 active:bg-opacity-30"
                       onClick={cancel}
                     >
                       Cancel
@@ -114,7 +113,7 @@ export const NodeSelectorModal = ({ onClose, isOpen = false }: Props) => {
                         'transition text-btn-xs flex justify-center rounded border border-transparent text-white px-16 py-3',
                         isNetworkUnchanged
                           ? 'bg-gray-300 cursor-not-allowed'
-                          : 'bg-[#BB2D40] hover:opacity-80 active:opacity-60',
+                          : 'bg-[#BB2D40] hover:opacity-80 active:opacity-60 cursor-pointer',
                       )}
                       onClick={save}
                     >

packages/react-components/src/lib/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ConnectWalletButton';
 export * from './NodeSelectorModal';
 export * from './AmountInput';
+export * from './NetworkDropdown';

packages/react-components/src/lib/config/index.ts

@@ -4,15 +4,15 @@ import type { Endpoints } from '@cosmos-kit/core';
 
 export type ChainConfig = { chains: Chain[]; assetLists: AssetList[] };
 
-const prettyTestChainName = (name: string) =>
+export const prettyTestChainName = (name: string) =>
   name
     .split('-')
     .map(s => s[0].toUpperCase() + s.slice(1))
     .join(' ');
 
-const agoricChain = chains.find((chain: Chain) => {
+export const agoricChain = chains.find((chain: Chain) => {
   return chain.chain_name === 'agoric';
-});
+}) as Chain | undefined;
 
 export const makeChainInfo = (
   chainName: string,

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

@@ -6,6 +6,7 @@ export type NetworkConfig = {
   testChain?: {
     chainId: string;
     chainName: string;
+    iconUrl?: string;
   };
 };
 

packages/react-components/src/lib/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './agoric.js';
 export * from './amountInput.js';
+export * from './network.js';

packages/react-components/src/lib/hooks/network.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { NetworkContext } from '../context';
+
+export const useAgoricNetwork = () => useContext(NetworkContext);