Merge remote-tracking branch 'origin/main' into nexus

README.md

@@ -18,7 +18,12 @@ See [CUSTOMIZE.md](./CUSTOMIZE.md) for details about adjusting the tokens and br
 
 ### Setup
 
+#### Configure
+
+You need a `projectId` from the WalletConnect Cloud to run the Hyperlane Warp Route UI. Sign up to [WalletConnect Cloud](https://cloud.walletconnect.com) to create a new project.
+
 #### Build
+
 ```sh
 # Install dependencies
 yarn
@@ -27,22 +32,14 @@ yarn
 yarn build
 ```
 
-#### Configure
-
-You need a `projectId` from the WalletConnect Cloud to run the Hyperlane Warp Route UI successfully. 
-Sign up to [WalletConnect Cloud](https://cloud.walletconnect.com/), create 
-new project with AppKit and Next.js and copy the `projectId` from there.
-
 ### Run
 
 You can add `.env.local` file next to `.env.example` where you set `projectId` copied from WalletConnect Cloud.
+
 ```sh
 # Start the Next dev server
 yarn dev
-```
-
-Or you can set the WalletConnect Cloud `projectId` to use as follows:
-```
+# Or with a custom projectId
 NEXT_PUBLIC_WALLET_CONNECT_ID=<projectId> yarn dev
 ```
 

eslint.config.mjs

@@ -56,12 +56,18 @@ export default [
     },
 
     rules: {
+      'camelcase': ['error'],
+      'guard-for-in': ['error'],
+      'import/no-cycle': ['error'],
+      'import/no-self-import': ['error'],
       'no-console': ['warn'],
       'no-eval': ['error'],
       'no-ex-assign': ['error'],
       'no-extra-boolean-cast': ['error'],
       'no-constant-condition': ['off'],
-      'guard-for-in': ['error'],
+      'no-multiple-empty-lines': ['error'],
+      'jsx-a11y/alt-text': ['off'],
+
       '@typescript-eslint/ban-ts-comment': ['off'],
       '@typescript-eslint/explicit-module-boundary-types': ['off'],
       '@typescript-eslint/no-explicit-any': ['off'],
@@ -77,7 +83,6 @@ export default [
         },
       ],
 
-      'jsx-a11y/alt-text': ['off'],
       '@next/next/no-img-element': ['off'],
     },
   },

package.json

@@ -22,7 +22,6 @@
     "@hyperlane-xyz/utils": "7.1.0",
     "@hyperlane-xyz/widgets": "7.1.0",
     "@interchain-ui/react": "^1.23.28",
-    "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",
     "@rainbow-me/rainbowkit": "^2.2.0",

src/consts/app.ts

@@ -1,7 +1,7 @@
-import { Space_Grotesk } from 'next/font/google';
+import { Space_Grotesk as SpaceGrotesk } from 'next/font/google';
 import { Color } from '../styles/Color';
 
-export const MAIN_FONT = Space_Grotesk({
+export const MAIN_FONT = SpaceGrotesk({
   subsets: ['latin'],
   variable: '--font-main',
   preload: true,

src/consts/config.ts

@@ -4,41 +4,38 @@ import { ADDRESS_BLACKLIST } from './blacklist';
 const isDevMode = process?.env?.NODE_ENV === 'development';
 const version = process?.env?.NEXT_PUBLIC_VERSION || '0.0.0';
 const registryUrl = process?.env?.NEXT_PUBLIC_REGISTRY_URL || undefined;
+const registryBranch = process?.env?.NEXT_PUBLIC_REGISTRY_BRANCH || undefined;
 const registryProxyUrl = process?.env?.NEXT_PUBLIC_GITHUB_PROXY || 'https://proxy.hyperlane.xyz';
-const explorerApiKeys = JSON.parse(process?.env?.EXPLORER_API_KEYS || '{}');
 const walletConnectProjectId = process?.env?.NEXT_PUBLIC_WALLET_CONNECT_ID || '';
-const withdrawalWhitelist = process?.env?.NEXT_PUBLIC_BLOCK_WITHDRAWAL_WHITELIST || '';
 const transferBlacklist = process?.env?.NEXT_PUBLIC_TRANSFER_BLACKLIST || '';
 const chainWalletWhitelists = JSON.parse(process?.env?.NEXT_PUBLIC_CHAIN_WALLET_WHITELISTS || '{}');
 
 interface Config {
   addressBlacklist: string[]; // A list of addresses that are blacklisted and cannot be used in the app
   chainWalletWhitelists: ChainMap<string[]>; // A map of chain names to a list of wallet names that work for it
   enableExplorerLink: boolean; // Include a link to the hyperlane explorer in the transfer modal
-  explorerApiKeys: Record<string, string>; // Optional map of API keys for block explorer
   isDevMode: boolean; // Enables some debug features in the app
   registryUrl: string | undefined; // Optional URL to use a custom registry instead of the published canonical version
+  registryBranch?: string | undefined; // Optional customization of the registry branch instead of main
   registryProxyUrl?: string; // Optional URL to use a custom proxy for the GithubRegistry
   showDisabledTokens: boolean; // Show/Hide invalid token options in the selection modal
   showTipBox: boolean; // Show/Hide the blue tip box above the transfer form
   transferBlacklist: string; // comma-separated list of routes between which transfers are disabled. Expects Caip2Id-Caip2Id (e.g. ethereum:1-sealevel:1399811149)
   version: string; // Matches version number in package.json
   walletConnectProjectId: string; // Project ID provided by walletconnect
-  withdrawalWhitelist: string; // comma-separated list of CAIP2 chain IDs to which transfers are supported
 }
 
 export const config: Config = Object.freeze({
   addressBlacklist: ADDRESS_BLACKLIST.map((address) => address.toLowerCase()),
   chainWalletWhitelists,
   enableExplorerLink: false,
-  explorerApiKeys,
   isDevMode,
   registryUrl,
+  registryBranch,
   registryProxyUrl,
   showDisabledTokens: false,
   showTipBox: false,
   version,
   transferBlacklist,
   walletConnectProjectId,
-  withdrawalWhitelist,
 });

src/features/chains/utils.ts

@@ -25,14 +25,6 @@ export function hasPermissionlessChain(multiProvider: MultiProtocolProvider, ids
   return !ids.every((c) => !isPermissionlessChain(multiProvider, c));
 }
 
-export function getChainByRpcUrl(multiProvider: MultiProtocolProvider, url?: string) {
-  if (!url) return undefined;
-  const allMetadata = Object.values(multiProvider.metadata);
-  return allMetadata.find(
-    (m) => !!m.rpcUrls.find((rpc) => rpc.http.toLowerCase().includes(url.toLowerCase())),
-  );
-}
-
 /**
  * Returns an object that contains the amount of
  * routes from a single chain to every other chain

src/features/store.ts

@@ -66,7 +66,11 @@ export const useStore = create<AppState>()(
         set({ chainMetadataOverrides: filtered, multiProvider });
       },
       multiProvider: new MultiProtocolProvider({}),
-      registry: new GithubRegistry({ uri: config.registryUrl, proxyUrl: config.registryProxyUrl }),
+      registry: new GithubRegistry({
+        uri: config.registryUrl,
+        branch: config.registryBranch,
+        proxyUrl: config.registryProxyUrl,
+      }),
       warpCore: new WarpCore(new MultiProtocolProvider({}), []),
       setWarpContext: ({ registry, chainMetadata, multiProvider, warpCore }) => {
         logger.debug('Setting warp context in store');

src/features/transfer/TransfersDetailsModal.tsx

@@ -20,16 +20,16 @@ import { Color } from '../../styles/Color';
 import { formatTimestamp } from '../../utils/date';
 import { getHypExplorerLink } from '../../utils/links';
 import { logger } from '../../utils/logger';
+import { useMultiProvider } from '../chains/hooks';
+import { getChainDisplayName, hasPermissionlessChain } from '../chains/utils';
+import { tryFindToken, useWarpCore } from '../tokens/hooks';
+import { TransferContext, TransferStatus } from './types';
 import {
   getIconByTransferStatus,
   getTransferStatusLabel,
   isTransferFailed,
   isTransferSent,
-} from '../../utils/transfer';
-import { useMultiProvider } from '../chains/hooks';
-import { getChainDisplayName, hasPermissionlessChain } from '../chains/utils';
-import { tryFindToken, useWarpCore } from '../tokens/hooks';
-import { TransferContext, TransferStatus } from './types';
+} from './utils';
 
 export function TransfersDetailsModal({
   isOpen,

src/features/transfer/utils.ts

@@ -1,3 +1,69 @@
+import ConfirmedIcon from '../../images/icons/confirmed-icon.svg';
+import DeliveredIcon from '../../images/icons/delivered-icon.svg';
+import ErrorCircleIcon from '../../images/icons/error-circle.svg';
+import { FinalTransferStatuses, SentTransferStatuses, TransferStatus } from './types';
+
+export function getTransferStatusLabel(
+  status: TransferStatus,
+  connectorName: string,
+  isPermissionlessRoute: boolean,
+  isAccountReady: boolean,
+) {
+  let statusDescription = '...';
+  if (!isAccountReady && !FinalTransferStatuses.includes(status))
+    statusDescription = 'Please connect wallet to continue';
+  else if (status === TransferStatus.Preparing)
+    statusDescription = 'Preparing for token transfer...';
+  else if (status === TransferStatus.CreatingTxs) statusDescription = 'Creating transactions...';
+  else if (status === TransferStatus.SigningApprove)
+    statusDescription = `Sign approve transaction in ${connectorName} to continue.`;
+  else if (status === TransferStatus.ConfirmingApprove)
+    statusDescription = 'Confirming approve transaction...';
+  else if (status === TransferStatus.SigningTransfer)
+    statusDescription = `Sign transfer transaction in ${connectorName} to continue.`;
+  else if (status === TransferStatus.ConfirmingTransfer)
+    statusDescription = 'Confirming transfer transaction...';
+  else if (status === TransferStatus.ConfirmedTransfer)
+    if (!isPermissionlessRoute)
+      statusDescription = 'Transfer transaction confirmed, delivering message...';
+    else
+      statusDescription =
+        'Transfer confirmed, the funds will arrive when the message is delivered.';
+  else if (status === TransferStatus.Delivered)
+    statusDescription = 'Delivery complete, transfer successful!';
+  else if (status === TransferStatus.Failed)
+    statusDescription = 'Transfer failed, please try again.';
+
+  return statusDescription;
+}
+
+export function isTransferSent(status: TransferStatus) {
+  return SentTransferStatuses.includes(status);
+}
+
+export function isTransferFailed(status: TransferStatus) {
+  return status === TransferStatus.Failed;
+}
+
+export const STATUSES_WITH_ICON = [
+  TransferStatus.Delivered,
+  TransferStatus.ConfirmedTransfer,
+  TransferStatus.Failed,
+];
+
+export function getIconByTransferStatus(status: TransferStatus) {
+  switch (status) {
+    case TransferStatus.Delivered:
+      return DeliveredIcon;
+    case TransferStatus.ConfirmedTransfer:
+      return ConfirmedIcon;
+    case TransferStatus.Failed:
+      return ErrorCircleIcon;
+    default:
+      return ErrorCircleIcon;
+  }
+}
+
 import {
   ChainMap,
   CoreAddresses,

src/features/wallet/SideBarMenu.tsx

@@ -6,13 +6,13 @@ import { ChainLogo } from '../../components/icons/ChainLogo';
 import ArrowRightIcon from '../../images/icons/arrow-right.svg';
 import CollapseIcon from '../../images/icons/collapse-icon.svg';
 import ResetIcon from '../../images/icons/reset-icon.svg';
-import { getIconByTransferStatus, STATUSES_WITH_ICON } from '../../utils/transfer';
 import { useMultiProvider } from '../chains/hooks';
 import { getChainDisplayName } from '../chains/utils';
 import { useStore } from '../store';
 import { tryFindToken, useWarpCore } from '../tokens/hooks';
 import { TransfersDetailsModal } from '../transfer/TransfersDetailsModal';
 import { TransferContext } from '../transfer/types';
+import { getIconByTransferStatus, STATUSES_WITH_ICON } from '../transfer/utils';
 
 export function SideBarMenu({
   onClickConnectWallet,