Merge pull request #408 from hyperlane-xyz/main-to-injective

Main to injective

.github/workflows/ci.yml

@@ -3,9 +3,9 @@ name: ci
 on:
   # Triggers the workflow on push or pull request events but only for the main branch
   push:
-    branches: [main, nautilus, nexus, injective, ezeth]
+    branches: [main, nautilus, nexus, injective, ezeth, trump]
   pull_request:
-    branches: [main, nautilus, nexus, injective, ezeth]
+    branches: [main, nautilus, nexus, injective, ezeth, trump]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.github/workflows/create-merge-prs.yaml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        name: [ezeth, injective, nexus]
+        name: [ezeth, injective, nexus, trump]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

CUSTOMIZE.md

@@ -48,7 +48,7 @@ The logo images you should change are:
 - `./src/images/logos/app-name.svg`
 - `./src/images/logos/app-title.svg`
 
-These are images are primarily used in the header and footer files:
+These images are primarily used in the header and footer files:
 
 - `./src/components/nav/Header.tsx`
 - `./src/components/nav/Footer.tsx`

README.md

@@ -1,6 +1,6 @@
 # Hyperlane Warp Route UI Template
 
-This repo contains an example web interface for interchain tokens built with [Hyperlane Warp Route](https://docs.hyperlane.xyz/docs/reference/applications/warp-routes). Warp is a framework to permisionlessly bridge tokens to any chain.
+This repo contains an example web interface for interchain tokens built with [Hyperlane Warp Route](https://docs.hyperlane.xyz/docs/reference/applications/warp-routes). Warp is a framework to permissionlessly bridge tokens to any chain.
 
 ## Architecture
 
@@ -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

@@ -1,7 +1,7 @@
 {
   "name": "@hyperlane-xyz/warp-ui-template",
   "description": "A web app template for building Hyperlane Warp Route UIs",
-  "version": "7.1.0",
+  "version": "8.5.0",
   "author": "J M Rossy",
   "dependencies": {
     "@chakra-ui/next-js": "^2.4.2",
@@ -17,12 +17,11 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^2.2.0",
-    "@hyperlane-xyz/registry": "6.10.0",
-    "@hyperlane-xyz/sdk": "7.1.0",
-    "@hyperlane-xyz/utils": "7.1.0",
-    "@hyperlane-xyz/widgets": "7.1.0",
+    "@hyperlane-xyz/registry": "7.2.2",
+    "@hyperlane-xyz/sdk": "8.5.0",
+    "@hyperlane-xyz/utils": "8.5.0",
+    "@hyperlane-xyz/widgets": "8.5.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",
@@ -70,6 +69,8 @@
     "tailwindcss": "^3.4.15",
     "ts-node": "^10.9.2",
     "typescript": "5.6.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.3",
     "yaml": "^2.6.0",
     "yaml-loader": "^0.8.1"
   },
@@ -89,7 +90,7 @@
     "typecheck": "tsc",
     "lint": "next lint",
     "start": "next start",
-    "test": "echo 'No tests'",
+    "test": "vitest --watch false",
     "prettier": "prettier --write ./src"
   },
   "types": "dist/src/index.d.ts",

src/components/buttons/ConnectAwareSubmitButton.tsx

@@ -40,7 +40,7 @@ export function ConnectAwareSubmitButton<FormValues = any>({ chainName, text, cl
   useTimeout(clearErrors, 3500);
 
   return (
-    <SolidButton type={type} color={color} onClick={onClick} classes={classes}>
+    <SolidButton type={type} color={color} onClick={onClick} className={classes}>
       {content}
     </SolidButton>
   );

src/components/buttons/SolidButton.tsx

@@ -4,7 +4,7 @@ interface ButtonProps {
   type?: 'submit' | 'reset' | 'button';
   color?: 'white' | 'primary' | 'accent' | 'green' | 'red' | 'gray'; // defaults to primary
   bold?: boolean;
-  classes?: string;
+  className?: string;
   icon?: ReactElement;
 }
 
@@ -15,7 +15,7 @@ export function SolidButton(
     type,
     onClick,
     color: _color,
-    classes,
+    className,
     bold,
     icon,
     disabled,
@@ -48,7 +48,7 @@ export function SolidButton(
   }
   const onDisabled = 'disabled:bg-gray-300 disabled:text-gray-500';
   const weight = bold ? 'font-semibold' : '';
-  const allClasses = `${base} ${baseColors} ${onHover} ${onDisabled} ${weight} ${classes}`;
+  const allClasses = `${base} ${baseColors} ${onHover} ${onDisabled} ${weight} ${className}`;
 
   return (
     <button

src/consts/app.ts

@@ -11,6 +11,6 @@ export const MAIN_FONT = Inter({
 export const APP_NAME = 'Injective Token Bridge';
 export const APP_DESCRIPTION = 'A token bridge for Injective powered by Hyperlane';
 export const APP_URL = 'https://inevmbridge.com';
-export const BRAND_COLOR = Color.primary;
-export const BACKGROUND_COLOR = Color.primary;
+export const BRAND_COLOR = Color.primary['500'];
+export const BACKGROUND_COLOR = Color.primary['500'];
 export const BACKGROUND_IMAGE = 'url(/backgrounds/main.svg)';

src/consts/args.ts

@@ -0,0 +1,5 @@
+export enum WARP_QUERY_PARAMS {
+  ORIGIN = 'origin',
+  DESTINATION = 'destination',
+  TOKEN = 'token',
+}

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/consts/links.ts

@@ -11,7 +11,7 @@ export const links = {
   chains: 'https://docs.hyperlane.xyz/docs/resources/domains',
   discord: 'https://discord.gg/hyperlane',
   github: 'https://github.com/hyperlane-xyz/hyperlane-warp-ui-template',
-  twitter: 'https://twitter.com/hyperlane',
+  twitter: 'https://x.com/hyperlane',
   blog: 'https://medium.com/hyperlane',
   caldera: 'https://www.caldera.xyz',
   tos: 'https://hyperlane.xyz/terms-of-service',

src/consts/warpRouteWhitelist.test.ts

@@ -0,0 +1,10 @@
+import { warpRouteConfigs } from '@hyperlane-xyz/registry';
+import { assert, test } from 'vitest';
+import { warpRouteWhitelist } from './warpRouteWhitelist';
+
+test('warpRouteWhitelist', () => {
+  if (!warpRouteWhitelist) return;
+  for (const id of warpRouteWhitelist) {
+    assert(warpRouteConfigs[id], `No route with id ${id} found in registry.`);
+  }
+});

src/features/chains/ChainSelectField.tsx

@@ -9,7 +9,7 @@ import { useChainDisplayName } from './hooks';
 type Props = {
   name: string;
   label: string;
-  onChange?: (id: ChainName) => void;
+  onChange?: (id: ChainName, fieldName: string) => void;
   disabled?: boolean;
   customListItemField: ChainSearchMenuProps['customListItemField'];
 };
@@ -25,8 +25,7 @@ export function ChainSelectField({ name, label, onChange, disabled, customListIt
     // Reset other fields on chain change
     setFieldValue('recipient', '');
     setFieldValue('amount', '');
-    setFieldValue('tokenIndex', undefined);
-    if (onChange) onChange(chainName);
+    if (onChange) onChange(chainName, name);
   };
 
   const [isModalOpen, setIsModalOpen] = useState(false);

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
@@ -70,3 +62,13 @@ export function getNumRoutesWithSelectedChain(
     data,
   };
 }
+
+/**
+ * Return given chainName if it is valid, otherwise return undefined
+ */
+export function tryGetValidChainName(
+  chainName: string | null,
+  multiProvider: MultiProtocolProvider,
+): string | undefined {
+  return chainName && multiProvider.tryGetChainName(chainName) ? chainName : undefined;
+}

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');