Rename CAIP var names for clarity (#50)

hyperlane-xyz · Aug 21, 2023 · 0faea83 · 0faea83 · vercel · Aug 21, 2023
1 parent 1361883
commit 0faea83
Show file tree

Hide file tree

Showing 29 changed files with 291 additions and 250 deletions.
diff --git a/src/components/buttons/ConnectAwareSubmitButton.tsx b/src/components/buttons/ConnectAwareSubmitButton.tsx
@@ -10,17 +10,17 @@ import { useTimeout } from '../../utils/timeout';
 import { SolidButton } from './SolidButton';
 
 interface Props {
-  caip2Id: Caip2Id;
+  chainCaip2Id: ChainCaip2Id;
   text: string;
   classes?: string;
 }
 
-export function ConnectAwareSubmitButton<FormValues = any>({ caip2Id, text, classes }: Props) {
-  const protocol = tryGetProtocolType(caip2Id) || ProtocolType.Ethereum;
+export function ConnectAwareSubmitButton<FormValues = any>({ chainCaip2Id, text, classes }: Props) {
+  const protocol = tryGetProtocolType(chainCaip2Id) || ProtocolType.Ethereum;
   const connectFns = useConnectFns();
   const connectFn = connectFns[protocol];
 
-  const account = useAccountForChain(caip2Id);
+  const account = useAccountForChain(chainCaip2Id);
   const isAccountReady = account?.isReady;
 
   const { errors, setErrors, touched, setTouched } = useFormikContext<FormValues>();

diff --git a/src/components/icons/ChainLogo.tsx b/src/components/icons/ChainLogo.tsx
@@ -10,17 +10,17 @@ import { logger } from '../../utils/logger';
 import { isNumeric } from '../../utils/string';
 
 type Props = Omit<ComponentProps<typeof ChainLogoInner>, 'chainId' | 'chainName'> & {
-  caip2Id?: Caip2Id;
+  chainCaip2Id?: ChainCaip2Id;
 };
 
 export function ChainLogo(props: Props) {
-  const { caip2Id, ...rest } = props;
+  const { chainCaip2Id, ...rest } = props;
   const { chainId, chainName, icon } = useMemo(() => {
-    if (!caip2Id) return {};
+    if (!chainCaip2Id) return {};
     try {
-      const { reference } = parseCaip2Id(caip2Id);
+      const { reference } = parseCaip2Id(chainCaip2Id);
       const chainId = isNumeric(reference) ? parseInt(reference, 10) : undefined;
-      const chainName = getChainDisplayName(caip2Id);
+      const chainName = getChainDisplayName(chainCaip2Id);
       const logoUri = getMultiProvider().tryGetChainMetadata(reference)?.logoURI;
       const icon = logoUri
         ? (props: { width: number; height: number; title?: string }) => (
@@ -36,7 +36,7 @@ export function ChainLogo(props: Props) {
       logger.error('Failed to parse caip2 id', error);
       return {};
     }
-  }, [caip2Id]);
+  }, [chainCaip2Id]);
 
   return <ChainLogoInner {...rest} chainId={chainId} chainName={chainName} icon={icon} />;
 }
diff --git a/src/components/icons/TokenIcon.tsx b/src/components/icons/TokenIcon.tsx
@@ -20,7 +20,9 @@ function _TokenIcon({ token, size = 32 }: Props) {
   const fontSize = Math.floor(size / 2);
 
   const bgColorSeed =
-    token && !imageSrc ? (Buffer.from(getTokenAddress(token.caip19Id)).at(0) || 0) % 5 : undefined;
+    token && !imageSrc
+      ? (Buffer.from(getTokenAddress(token.tokenCaip19Id)).at(0) || 0) % 5
+      : undefined;
 
   return (
     <Circle size={size} bgColorSeed={bgColorSeed} title={title}>

diff --git a/src/components/toast/TxSuccessToast.tsx b/src/components/toast/TxSuccessToast.tsx
@@ -4,25 +4,25 @@ import { toast } from 'react-toastify';
 import { parseCaip2Id } from '../../features/caip/chains';
 import { getMultiProvider } from '../../features/multiProvider';
 
-export function toastTxSuccess(msg: string, txHash: string, caip2Id: Caip2Id) {
-  toast.success(<TxSuccessToast msg={msg} txHash={txHash} caip2Id={caip2Id} />, {
+export function toastTxSuccess(msg: string, txHash: string, chainCaip2Id: ChainCaip2Id) {
+  toast.success(<TxSuccessToast msg={msg} txHash={txHash} chainCaip2Id={chainCaip2Id} />, {
     autoClose: 12000,
   });
 }
 
 export function TxSuccessToast({
   msg,
   txHash,
-  caip2Id,
+  chainCaip2Id,
 }: {
   msg: string;
   txHash: string;
-  caip2Id: Caip2Id;
+  chainCaip2Id: ChainCaip2Id;
 }) {
   const url = useMemo(() => {
-    const { reference } = parseCaip2Id(caip2Id);
+    const { reference } = parseCaip2Id(chainCaip2Id);
     return getMultiProvider().tryGetExplorerTxUrl(reference, { hash: txHash });
-  }, [caip2Id, txHash]);
+  }, [chainCaip2Id, txHash]);
 
   return (
     <div>

diff --git a/src/features/caip/chains.ts b/src/features/caip/chains.ts
@@ -4,7 +4,7 @@ import { logger } from '../../utils/logger';
 
 // Based mostly on https://chainagnostic.org/CAIPs/caip-2
 // But uses different naming for the protocol
-export function getCaip2Id(protocol: ProtocolType, reference: string | number): Caip2Id {
+export function getCaip2Id(protocol: ProtocolType, reference: string | number): ChainCaip2Id {
   if (!Object.values(ProtocolType).includes(protocol)) {
     throw new Error(`Invalid chain environment: ${protocol}`);
   }
@@ -14,7 +14,7 @@ export function getCaip2Id(protocol: ProtocolType, reference: string | number):
   return `${protocol}:${reference}`;
 }
 
-export function parseCaip2Id(id: Caip2Id) {
+export function parseCaip2Id(id: ChainCaip2Id) {
   const [_protocol, reference] = id.split(':');
   const protocol = _protocol as ProtocolType;
   if (!Object.values(ProtocolType).includes(protocol)) {
@@ -26,7 +26,7 @@ export function parseCaip2Id(id: Caip2Id) {
   return { protocol, reference };
 }
 
-export function tryParseCaip2Id(id: Caip2Id) {
+export function tryParseCaip2Id(id: ChainCaip2Id) {
   if (!id) return undefined;
   try {
     return parseCaip2Id(id);
@@ -36,25 +36,25 @@ export function tryParseCaip2Id(id: Caip2Id) {
   }
 }
 
-export function getProtocolType(id: Caip2Id) {
+export function getProtocolType(id: ChainCaip2Id) {
   const { protocol } = parseCaip2Id(id);
   return protocol;
 }
 
-export function tryGetProtocolType(id: Caip2Id) {
+export function tryGetProtocolType(id: ChainCaip2Id) {
   return tryParseCaip2Id(id)?.protocol;
 }
 
-export function getChainReference(id: Caip2Id) {
+export function getChainReference(id: ChainCaip2Id) {
   const { reference } = parseCaip2Id(id);
   return reference;
 }
 
-export function tryGetChainReference(id: Caip2Id) {
+export function tryGetChainReference(id: ChainCaip2Id) {
   return tryParseCaip2Id(id)?.reference;
 }
 
-export function getEthereumChainId(id: Caip2Id): number {
+export function getEthereumChainId(id: ChainCaip2Id): number {
   const { protocol, reference } = parseCaip2Id(id);
   if (protocol !== ProtocolType.Ethereum) {
     throw new Error(`Protocol type must be ethereum: ${id}`);

diff --git a/src/features/caip/tokens.ts b/src/features/caip/tokens.ts
@@ -17,36 +17,36 @@ export enum AssetNamespace {
 // Based mostly on https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-19.md
 // But uses simpler asset namespace naming for native tokens
 export function getCaip19Id(
-  caip2Id: Caip2Id,
+  chainCaip2Id: ChainCaip2Id,
   namespace: AssetNamespace,
   address: Address,
   tokenId?: string | number,
-): Caip19Id {
+): TokenCaip19Id {
   if (!Object.values(AssetNamespace).includes(namespace)) {
     throw new Error(`Invalid asset namespace: ${namespace}`);
   }
   if (!isValidAddress(address)) {
     throw new Error(`Invalid address: ${address}`);
   }
-  return `${caip2Id}/${namespace}:${address}${tokenId ? `/${tokenId}` : ''}`;
+  return `${chainCaip2Id}/${namespace}:${address}${tokenId ? `/${tokenId}` : ''}`;
 }
 
-export function parseCaip19Id(id: Caip19Id) {
+export function parseCaip19Id(id: TokenCaip19Id) {
   const segments = id.split('/');
   if (segments.length >= 2) {
-    const caip2Id = segments[0] as Caip2Id;
+    const chainCaip2Id = segments[0] as ChainCaip2Id;
     const [namespace, address] = segments[1].split(':') as [AssetNamespace, Address];
-    if (!caip2Id || !namespace || !address) {
+    if (!chainCaip2Id || !namespace || !address) {
       throw new Error(`Invalid caip19 id: ${id}`);
     }
     const tokenId = segments.length > 2 ? segments[2] : undefined;
-    return { caip2Id, namespace, address, tokenId };
+    return { chainCaip2Id, namespace, address, tokenId };
   } else {
     throw new Error(`Invalid caip19 id: ${id}`);
   }
 }
 
-export function tryParseCaip19Id(id: Caip19Id) {
+export function tryParseCaip19Id(id: TokenCaip19Id) {
   if (!id) return undefined;
   try {
     return parseCaip19Id(id);
@@ -56,23 +56,23 @@ export function tryParseCaip19Id(id: Caip19Id) {
   }
 }
 
-export function getCaip2FromToken(id: Caip19Id): Caip2Id {
-  return parseCaip19Id(id).caip2Id;
+export function getChainIdFromToken(id: TokenCaip19Id): ChainCaip2Id {
+  return parseCaip19Id(id).chainCaip2Id;
 }
 
-export function tryGetCaip2FromToken(id: Caip19Id): Caip2Id | undefined {
-  return tryParseCaip19Id(id)?.caip2Id;
+export function tryGetChainIdFromToken(id: TokenCaip19Id): ChainCaip2Id | undefined {
+  return tryParseCaip19Id(id)?.chainCaip2Id;
 }
 
-export function getAssetNamespace(id: Caip19Id): AssetNamespace {
+export function getAssetNamespace(id: TokenCaip19Id): AssetNamespace {
   return parseCaip19Id(id).namespace as AssetNamespace;
 }
 
-export function getTokenAddress(id: Caip19Id): Address {
+export function getTokenAddress(id: TokenCaip19Id): Address {
   return parseCaip19Id(id).address;
 }
 
-export function isNativeToken(id: Caip19Id): boolean {
+export function isNativeToken(id: TokenCaip19Id): boolean {
   const { namespace } = parseCaip19Id(id);
   return namespace === AssetNamespace.native;
 }
@@ -87,7 +87,7 @@ export function getNativeTokenAddress(protocol: ProtocolType): Address {
   }
 }
 
-export function isNonFungibleToken(id: Caip19Id): boolean {
+export function isNonFungibleToken(id: TokenCaip19Id): boolean {
   const { namespace } = parseCaip19Id(id);
   return namespace === AssetNamespace.erc721;
 }

diff --git a/src/features/chains/ChainSelectField.tsx b/src/features/chains/ChainSelectField.tsx
@@ -12,16 +12,16 @@ import { getChainDisplayName } from './utils';
 type Props = {
   name: string;
   label: string;
-  caip2Ids: Caip2Id[];
-  onChange?: (id: Caip2Id) => void;
+  chainCaip2Ids: ChainCaip2Id[];
+  onChange?: (id: ChainCaip2Id) => void;
   disabled?: boolean;
 };
 
-export function ChainSelectField({ name, label, caip2Ids, onChange, disabled }: Props) {
-  const [field, , helpers] = useField<Caip2Id>(name);
+export function ChainSelectField({ name, label, chainCaip2Ids, onChange, disabled }: Props) {
+  const [field, , helpers] = useField<ChainCaip2Id>(name);
   const { setFieldValue } = useFormikContext<TransferFormValues>();
 
-  const handleChange = (newChainId: Caip2Id) => {
+  const handleChange = (newChainId: ChainCaip2Id) => {
     helpers.setValue(newChainId);
     // Reset other fields on chain change
     setFieldValue('tokenCaip19Id', '');
@@ -40,7 +40,7 @@ export function ChainSelectField({ name, label, caip2Ids, onChange, disabled }:
     <div className="flex flex-col items-center">
       <div className="flex flex-col items-center justify-center rounded-full bg-gray-100 h-[5.5rem] w-[5.5rem] p-1.5">
         <div className="flex items-end h-11">
-          <ChainLogo caip2Id={field.value} size={34} />
+          <ChainLogo chainCaip2Id={field.value} size={34} />
         </div>
         <label htmlFor={name} className="mt-2 mb-1 text-sm text-gray-500 uppercase">
           {label}
@@ -53,15 +53,15 @@ export function ChainSelectField({ name, label, caip2Ids, onChange, disabled }:
         onClick={onClick}
       >
         <div className="flex items-center">
-          <ChainLogo caip2Id={field.value} size={14} />
+          <ChainLogo chainCaip2Id={field.value} size={14} />
           <span className="ml-2">{getChainDisplayName(field.value, true)}</span>
         </div>
         <Image src={ChevronIcon} width={12} height={8} alt="" />
       </button>
       <ChainSelectListModal
         isOpen={isModalOpen}
         close={() => setIsModalOpen(false)}
-        caip2Ids={caip2Ids}
+        chainCaip2Ids={chainCaip2Ids}
         onSelect={handleChange}
       />
     </div>

diff --git a/src/features/chains/ChainSelectModal.tsx b/src/features/chains/ChainSelectModal.tsx
@@ -6,31 +6,31 @@ import { getChainDisplayName } from './utils';
 export function ChainSelectListModal({
   isOpen,
   close,
-  caip2Ids,
+  chainCaip2Ids,
   onSelect,
 }: {
   isOpen: boolean;
   close: () => void;
-  caip2Ids: Caip2Id[];
-  onSelect: (caip2Id: Caip2Id) => void;
+  chainCaip2Ids: ChainCaip2Id[];
+  onSelect: (chainCaip2Id: ChainCaip2Id) => void;
 }) {
-  const onSelectChain = (caip2Id: Caip2Id) => {
+  const onSelectChain = (chainCaip2Id: ChainCaip2Id) => {
     return () => {
-      onSelect(caip2Id);
+      onSelect(chainCaip2Id);
       close();
     };
   };
 
   return (
     <Modal isOpen={isOpen} title="Select Chain" close={close}>
       <div className="mt-2 flex flex-col space-y-1">
-        {caip2Ids.map((c) => (
+        {chainCaip2Ids.map((c) => (
           <button
             key={c}
             className="py-1.5 px-2 text-sm flex items-center rounded hover:bg-gray-100 active:bg-gray-200 transition-all duration-200"
             onClick={onSelectChain(c)}
           >
-            <ChainLogo caip2Id={c} size={16} background={false} />
+            <ChainLogo chainCaip2Id={c} size={16} background={false} />
             <span className="ml-2">{getChainDisplayName(c, true)}</span>
           </button>
         ))}

diff --git a/src/features/chains/utils.ts b/src/features/chains/utils.ts
@@ -4,7 +4,7 @@ import { toTitleCase } from '../../utils/string';
 import { parseCaip2Id } from '../caip/chains';
 import { getMultiProvider } from '../multiProvider';
 
-export function getChainDisplayName(id: Caip2Id, shortName = false) {
+export function getChainDisplayName(id: ChainCaip2Id, shortName = false) {
   if (!id) return 'Unknown';
   const { reference } = parseCaip2Id(id);
   const metadata = getMultiProvider().tryGetChainMetadata(reference || 0);
@@ -13,13 +13,13 @@ export function getChainDisplayName(id: Caip2Id, shortName = false) {
   return toTitleCase(displayName || metadata.displayName || metadata.name);
 }
 
-export function isPermissionlessChain(id: Caip2Id) {
+export function isPermissionlessChain(id: ChainCaip2Id) {
   if (!id) return true;
   const { protocol, reference } = parseCaip2Id(id);
   return protocol !== ProtocolType.Ethereum || !chainIdToMetadata[reference];
 }
 
-export function hasPermissionlessChain(ids: Caip2Id[]) {
+export function hasPermissionlessChain(ids: ChainCaip2Id[]) {
   return !ids.every((c) => !isPermissionlessChain(c));
 }
 

diff --git a/src/features/multiProvider.ts b/src/features/multiProvider.ts
@@ -88,7 +88,7 @@ export function getMultiProvider() {
   return multiProvider;
 }
 
-export function getProvider(id: Caip2Id) {
+export function getProvider(id: ChainCaip2Id) {
   const { reference } = parseCaip2Id(id);
   return getMultiProvider().getProvider(reference);
 }
diff --git a/src/features/tokens/SelectOrInputTokenIds.tsx b/src/features/tokens/SelectOrInputTokenIds.tsx
@@ -23,7 +23,7 @@ export function SelectOrInputTokenIds({
 
   const route = getTokenRoute(originCaip2Id, destinationCaip2Id, tokenCaip19Id, tokenRoutes);
 
-  let activeToken = '' as Caip19Id;
+  let activeToken = '' as TokenCaip19Id;
   if (route?.type === RouteType.BaseToSynthetic) {
     // If the origin is the base chain, use the collateralized token for balance checking
     activeToken = tokenCaip19Id;
@@ -43,17 +43,23 @@ export function SelectOrInputTokenIds({
   );
 
   return isContractAllowToGetTokenIds ? (
-    <SelectTokenIdField name="amount" disabled={disabled} caip19Id={activeToken} />
+    <SelectTokenIdField name="amount" disabled={disabled} tokenCaip19Id={activeToken} />
   ) : (
-    <InputTokenId disabled={disabled} caip19Id={activeToken} />
+    <InputTokenId disabled={disabled} tokenCaip19Id={activeToken} />
   );
 }
 
-function InputTokenId({ disabled, caip19Id }: { disabled: boolean; caip19Id: Caip19Id }) {
+function InputTokenId({
+  disabled,
+  tokenCaip19Id,
+}: {
+  disabled: boolean;
+  tokenCaip19Id: TokenCaip19Id;
+}) {
   const {
     values: { amount },
   } = useFormikContext<TransferFormValues>();
-  useIsSenderNftOwner(caip19Id, amount);
+  useIsSenderNftOwner(tokenCaip19Id, amount);
 
   return (
     <div className="relative w-full">