Use ibc registry (#951)

.changeset/sour-singers-breathe.md

@@ -0,0 +1,7 @@
+---
+'@penumbra-zone/constants': major
+'chrome-extension': minor
+'minifront': minor
+---
+
+Using external registry for ibc chains

apps/extension/package.json

@@ -13,7 +13,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@penumbra-labs/registry": "^2.0.0",
+    "@penumbra-labs/registry": "^3.0.0",
     "@penumbra-zone/bech32": "workspace:*",
     "@penumbra-zone/client": "workspace:*",
     "@penumbra-zone/constants": "workspace:*",

apps/minifront/package.json

@@ -12,6 +12,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@penumbra-labs/registry": "^3.0.0",
     "@penumbra-zone/bech32": "workspace:*",
     "@penumbra-zone/client": "workspace:*",
     "@penumbra-zone/constants": "workspace:*",

apps/minifront/src/components/ibc/chain-selector.tsx

@@ -7,35 +7,38 @@ import {
 } from '@penumbra-zone/ui/components/ui/select';
 import { cn } from '@penumbra-zone/ui/lib/utils';
 import { useState } from 'react';
-import { testnetIbcChains } from '@penumbra-zone/constants/src/chains';
 import { useStore } from '../../state';
 import { ibcSelector } from '../../state/ibc';
+import { useLoaderData } from 'react-router-dom';
+import { IbcLoaderResponse } from './ibc-loader';
+import { Chain } from '@penumbra-labs/registry';
 
 export const ChainSelector = () => {
   const { chain, setChain } = useStore(ibcSelector);
+  const { chains: ibcConnections } = useLoaderData() as IbcLoaderResponse;
   const [openSelect, setOpenSelect] = useState(false);
 
   return (
     <div className='flex flex-col gap-3 rounded-lg border bg-background px-4 pb-5 pt-3'>
       <p className='text-base font-bold'>Chain</p>
       <Select
         value={chain?.displayName ?? ''}
-        onValueChange={v => setChain(testnetIbcChains.find(i => i.displayName === v))}
+        onValueChange={v => setChain(ibcConnections.find(i => i.displayName === v))}
         open={openSelect}
         onOpenChange={open => setOpenSelect(open)}
       >
         <SelectTrigger open={openSelect}>
           <SelectValue placeholder='Select chain'>
             {chain && (
               <div className='flex gap-2'>
-                <img src={chain.iconUrl} alt='Chain' className='size-5' />
+                <ChainIcon chain={chain} />
                 <p className='mt-[2px] text-muted-foreground'>{chain.displayName}</p>
               </div>
             )}
           </SelectValue>
         </SelectTrigger>
         <SelectContent className='left-[-17px]'>
-          {testnetIbcChains.map((i, index) => (
+          {ibcConnections.map((i, index) => (
             <SelectItem
               key={index}
               value={i.displayName}
@@ -45,7 +48,7 @@ export const ChainSelector = () => {
               )}
             >
               <div className='flex gap-2'>
-                <img src={i.iconUrl} alt='Chain' className='size-5' />
+                <ChainIcon chain={i} />
                 <p className='mt-[2px]'>{i.displayName}</p>
               </div>
             </SelectItem>
@@ -55,3 +58,17 @@ export const ChainSelector = () => {
     </div>
   );
 };
+
+const ChainIcon = ({ chain }: { chain: Chain }) => {
+  const imgUrl = getChainImgUrl(chain);
+  if (!imgUrl) return undefined;
+
+  return <img src={imgUrl} alt='Chain' className='size-5' />;
+};
+
+const getChainImgUrl = (chain?: Chain) => {
+  const chainImgObj = chain?.images[0];
+  if (!chainImgObj) return undefined;
+
+  return chainImgObj.png ?? chainImgObj.svg;
+};

apps/minifront/src/components/ibc/ibc-loader.ts

@@ -1,17 +1,31 @@
 import { LoaderFunction } from 'react-router-dom';
-import { testnetIbcChains } from '@penumbra-zone/constants/src/chains';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import { getBalances } from '../../fetchers/balances';
 import { useStore } from '../../state';
 import { filterBalancesPerChain } from '../../state/ibc';
+import { getChainId } from '../../fetchers/chain-id';
+import { Chain, ChainRegistryClient } from '@penumbra-labs/registry';
 
-export type IbcLoaderResponse = BalancesResponse[];
+export interface IbcLoaderResponse {
+  balances: BalancesResponse[];
+  chains: Chain[];
+}
+
+const getIbcConnections = async () => {
+  const chainId = await getChainId();
+  if (!chainId) throw new Error('Could not fetch chain id');
+
+  const registryClient = new ChainRegistryClient();
+  const { ibcConnections } = await registryClient.get(chainId);
+  return ibcConnections;
+};
 
 export const IbcLoader: LoaderFunction = async (): Promise<IbcLoaderResponse> => {
   const assetBalances = await getBalances();
+  const ibcConnections = await getIbcConnections();
 
   if (assetBalances[0]) {
-    const initialChain = testnetIbcChains[0];
+    const initialChain = ibcConnections[0];
     const initialSelection = filterBalancesPerChain(assetBalances, initialChain)[0];
 
     // set initial account if accounts exist and asset if account has asset list
@@ -21,5 +35,5 @@ export const IbcLoader: LoaderFunction = async (): Promise<IbcLoaderResponse> =>
     });
   }
 
-  return assetBalances;
+  return { balances: assetBalances, chains: ibcConnections };
 };

apps/minifront/src/components/ibc/ibc-out-form.tsx

@@ -9,7 +9,7 @@ import { InputBlock } from '../shared/input-block';
 import { IbcLoaderResponse } from './ibc-loader';
 
 export const IbcOutForm = () => {
-  const assetBalances = useLoaderData() as IbcLoaderResponse;
+  const { balances } = useLoaderData() as IbcLoaderResponse;
   const {
     sendIbcWithdraw,
     destinationChainAddress,
@@ -20,7 +20,7 @@ export const IbcOutForm = () => {
     setSelection,
     chain,
   } = useStore(ibcSelector);
-  const filteredBalances = filterBalancesPerChain(assetBalances, chain);
+  const filteredBalances = filterBalancesPerChain(balances, chain);
   const validationErrors = useStore(ibcValidationErrors);
 
   return (

apps/minifront/src/state/ibc.test.ts

@@ -1,7 +1,6 @@
 import { beforeEach, describe, expect, test } from 'vitest';
 import { create, StoreApi, UseBoundStore } from 'zustand';
 import { AllSlices, initializeStore } from '.';
-import { Chain } from '@penumbra-zone/constants/src/chains';
 import {
   Metadata,
   ValueView,
@@ -12,6 +11,7 @@ import { AddressView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/co
 import { produce } from 'immer';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import { bech32ToAddress } from '@penumbra-zone/bech32/src/address';
+import { Chain } from '@penumbra-labs/registry';
 
 describe.skip('IBC Slice', () => {
   const selectionExample = new BalancesResponse({
@@ -91,7 +91,7 @@ describe.skip('IBC Slice', () => {
         displayName: 'Osmosis',
         chainId: 'osmosis-test-5',
         ibcChannel: 'channel-0',
-        iconUrl: '/test.svg',
+        images: [{ svg: '/test.svg' }],
         addressPrefix: 'osmo',
       } satisfies Chain;
 

apps/minifront/src/state/ibc.ts

@@ -7,7 +7,6 @@ import { BigNumber } from 'bignumber.js';
 import { ClientState } from '@buf/cosmos_ibc.bufbuild_es/ibc/lightclients/tendermint/v1/tendermint_pb';
 import { Height } from '@buf/cosmos_ibc.bufbuild_es/ibc/core/client/v1/client_pb';
 import { ibcClient, viewClient } from '../clients';
-import { Chain } from '@penumbra-zone/constants/src/chains';
 import {
   getDisplayDenomExponentFromValueView,
   getMetadata,
@@ -17,7 +16,6 @@ import { typeRegistry } from '@penumbra-zone/types/src/registry';
 import { toBaseUnit } from '@penumbra-zone/types/src/lo-hi';
 import { planBuildBroadcast } from './helpers';
 import { amountMoreThanBalance } from './send';
-import { IbcLoaderResponse } from '../components/ibc/ibc-loader';
 import { getAssetId } from '@penumbra-zone/getters/src/metadata';
 import {
   assetPatterns,
@@ -26,6 +24,7 @@ import {
 } from '@penumbra-zone/constants/src/assets';
 import { bech32IsValid } from '@penumbra-zone/bech32/src/validate';
 import { errorToast } from '@penumbra-zone/ui/lib/toast/presets';
+import { Chain } from '@penumbra-labs/registry';
 
 export interface IbcSendSlice {
   selection: BalancesResponse | undefined;
@@ -182,7 +181,7 @@ const validateAddress = (chain: Chain | undefined, address: string): boolean =>
  * we need to ensure ics20 withdraws match these conditions.
  */
 export const filterBalancesPerChain = (
-  allBalances: IbcLoaderResponse,
+  allBalances: BalancesResponse[],
   chain: Chain | undefined,
 ): BalancesResponse[] => {
   const penumbraAssetId = getAssetId(STAKING_TOKEN_METADATA);

packages/constants/vite.config.ts

@@ -6,7 +6,6 @@ export default defineConfig({
     lib: {
       entry: {
         assets: './src/assets.ts',
-        chains: './src/chains.ts',
       },
       formats: ['es'],
     },