Migrate improvements and features for Neutron upstream (#77)

Includes support for IBC routes, fixes for cosmos, and some minor UX improvements.
hyperlane-xyz · Nov 9, 2023 · ea2479e · ea2479e · vercel · Nov 9, 2023
1 parent 024dc5e
commit ea2479e
Show file tree

Hide file tree

Showing 61 changed files with 1,192 additions and 615 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hyperlane-xyz/warp-ui-template",
   "description": "A web app template for building Hyperlane Warp Route UIs",
-  "version": "1.5.3",
+  "version": "3.1.0-beta3",
   "author": "J M Rossy",
   "dependencies": {
     "@chakra-ui/next-js": "^2.1.5",
@@ -11,12 +11,13 @@
     "@cosmos-kit/core": "^2.7.2",
     "@cosmos-kit/cosmostation": "^2.4.4",
     "@cosmos-kit/keplr": "^2.4.4",
+    "@cosmos-kit/leap": "^2.4.3",
     "@cosmos-kit/react": "^2.5.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.14",
-    "@hyperlane-xyz/sdk": "^3.1.0-beta0",
-    "@hyperlane-xyz/utils": "^3.1.0-beta0",
+    "@hyperlane-xyz/sdk": "^3.1.0-beta3",
+    "@hyperlane-xyz/utils": "^3.1.0-beta3",
     "@hyperlane-xyz/widgets": "^1.5.0",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
     "@rainbow-me/rainbowkit": "0.12.16",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/background-texture.png b/public/background-texture.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/src/components/buttons/CopyButton.tsx b/src/components/buttons/CopyButton.tsx
@@ -9,7 +9,7 @@ interface Props {
   width: number;
   height: number;
   copyValue: string;
-  classes: string;
+  classes?: string;
 }
 
 export function CopyButton({ width, height, copyValue, classes }: Props) {

diff --git a/src/components/buttons/SolidButton.tsx b/src/components/buttons/SolidButton.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren, ReactElement } from 'react';
 
 interface ButtonProps {
   type?: 'submit' | 'reset' | 'button';
-  color?: 'white' | 'blue' | 'green' | 'red' | 'gray' | 'pink'; // defaults to blue
+  color?: 'white' | 'blue' | 'green' | 'red' | 'gray' | 'pink' | 'mint'; // defaults to blue
   bold?: boolean;
   classes?: string;
   icon?: ReactElement;
@@ -38,6 +38,10 @@ export function SolidButton(
     baseColors = 'bg-green-500 text-white';
     onHover = 'hover:bg-green-600';
     onActive = 'active:bg-green-700';
+  } else if (color === 'mint') {
+    baseColors = 'bg-mint-500 text-white';
+    onHover = 'hover:bg-mint-600';
+    onActive = 'active:bg-mint-700';
   } else if (color === 'red') {
     baseColors = 'bg-red-600 text-white';
     onHover = 'hover:bg-red-500';

diff --git a/src/components/icons/WideChevron.tsx b/src/components/icons/WideChevron.tsx
@@ -0,0 +1,16 @@
+import { WideChevron as WideChevronInner } from '@hyperlane-xyz/widgets';
+
+import { Color } from '../../styles/Color';
+
+export function WideChevron({ classes }: { classes?: string }) {
+  return (
+    <WideChevronInner
+      width="17"
+      height="100%"
+      direction="e"
+      color={Color.lightGray}
+      classes={classes}
+      rounded={true}
+    />
+  );
+}
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
@@ -13,7 +13,7 @@ export function AppLayout({ children }: PropsWithChildren) {
       <Head>
         {/* https://nextjs.org/docs/messages/no-document-viewport-meta */}
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Hyperlane Warp Route Template UI</title>
+        <title>Hyperlane Nexus Bridge</title>
       </Head>
       <div
         style={styles.container}
@@ -24,10 +24,10 @@ export function AppLayout({ children }: PropsWithChildren) {
           <Image src={Planet1} alt="Planet 1" width={200} priority={false} quality={50}></Image>
         </div>
         <div className="hidden md:flex absolute right-[8%] bottom-1/4">
-          <Image src={Planet2} alt="Planet 2" width={300} priority={false} quality={50}></Image>
+          <Image src={Planet2} alt="Planet 2" width={220} priority={false} quality={50}></Image>
         </div>
         <Header />
-        <div className="px-4 mx-auto grow flex items-center max-w-screen-xl">
+        <div className="sm:px-4 mx-auto grow flex items-center max-w-screen-xl">
           <main className="w-full flex-1 my-4 flex items-center justify-center">{children}</main>
         </div>
         <Footer />
@@ -41,6 +41,6 @@ const styles = {
     backgroundImage: 'url(/backgrounds/lines-bg-top.svg)',
     backgroundSize: '94vw',
     backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center 60px',
+    backgroundPosition: 'center 80px',
   },
 };
diff --git a/src/components/layout/Card.tsx b/src/components/layout/Card.tsx
@@ -7,7 +7,7 @@ interface Props {
 export function Card({ className, children }: PropsWithChildren<Props>) {
   return (
     <div
-      className={`p-3 md:p-3.5 relative bg-white ring ring-blue-300 rounded-3xl overflow-auto ${className}`}
+      className={`p-1.5 sm:p-3 md:p-3.5 relative bg-white ring ring-blue-300 rounded-3xl overflow-auto ${className}`}
     >
       {children}
     </div>

diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx
@@ -49,7 +49,7 @@ export function Modal({
               <Dialog.Panel
                 className={`w-full ${
                   width || 'max-w-xs'
-                } max-h-[90vh] transform overflow-auto rounded-md bg-white ${
+                } max-h-[90vh] transform overflow-auto rounded-2xl bg-white ${
                   padding || 'px-4 py-4'
                 } text-left shadow-lg transition-all`}
               >

diff --git a/src/components/toast/IgpDetailsToast.tsx b/src/components/toast/IgpDetailsToast.tsx
@@ -2,17 +2,17 @@ import { toast } from 'react-toastify';
 
 import { links } from '../../consts/links';
 
-export function toastIgpDetails() {
-  toast.error(<IgpDetailsToast />, {
+export function toastIgpDetails(igpFee: number, tokenName = 'native token') {
+  toast.error(<IgpDetailsToast tokenName={tokenName} igpFee={igpFee} />, {
     autoClose: 5000,
   });
 }
 
-export function IgpDetailsToast() {
+export function IgpDetailsToast({ tokenName, igpFee }) {
   return (
     <div>
-      Cross-chain transfers require a small amount of extra gas to fund delivery. Your native token
-      balance is insufficient.{' '}
+      Cross-chain transfers require a small fee of {igpFee} {tokenName} to fund delivery transaction
+      costs. Your {tokenName} balance is insufficient.{' '}
       <a className="underline" href={links.gasDocs} target="_blank" rel="noopener noreferrer">
         Learn More
       </a>

diff --git a/src/consts/config.ts b/src/consts/config.ts
@@ -14,6 +14,8 @@ interface Config {
   walletConnectProjectId: string; // Project ID provided by walletconnect
   withdrawalWhitelist: string; // comma-separated list of CAIP2 chain IDs to which transfers are supported
   transferBlacklist: string; // comma-separated list of routes between which transfers are disabled. Expects Caip2Id-Caip2Id (e.g. ethereum:1-sealevel:1399811149)
+  enableExplorerLink: boolean; // Include a link to the hyperlane explorer in the transfer modal
+  enableAutoTokenSelection: boolean; // Automatically select the first valid for the token field
 }
 
 export const config: Config = Object.freeze({
@@ -25,4 +27,6 @@ export const config: Config = Object.freeze({
   walletConnectProjectId,
   withdrawalWhitelist,
   transferBlacklist,
+  enableExplorerLink: false,
+  enableAutoTokenSelection: false,
 });
diff --git a/src/consts/ibcRoutes.ts b/src/consts/ibcRoutes.ts
@@ -0,0 +1,4 @@
+import { IbcRoute, IbcToWarpRoute } from '../features/tokens/routes/types';
+
+// Configs for manually-defined IBC-only routes
+export const ibcRoutes: Array<IbcRoute | IbcToWarpRoute> = [];
diff --git a/src/consts/values.ts b/src/consts/values.ts
@@ -6,4 +6,6 @@ export const COSMOS_ZERO_ADDRESS = 'cosmos10000000000000000000000000000000000000
 // Strangely, this is not included in any of the Solana packages
 export const SOL_SPL_NOOP_ADDRESS = 'noopb9bkMVfRPU8AsbpTUg8AQkHtKwMYZiFUjNRtMmV';
 export const SOL_IGP_QUOTE = '10000';
-export const COSM_IGP_QUOTE = '100';
+export const COSM_IGP_QUOTE = '270000';
+// Placeholder chain for use with cosmos-kit wallet hooks that require a chain name
+export const PLACEHOLDER_COSMOS_CHAIN = 'cosmoshub';
diff --git a/src/features/caip/chains.ts b/src/features/caip/chains.ts
@@ -30,7 +30,7 @@ export function parseCaip2Id(id: ChainCaip2Id) {
   return { protocol, reference };
 }
 
-export function tryParseCaip2Id(id: ChainCaip2Id) {
+export function tryParseCaip2Id(id?: ChainCaip2Id) {
   if (!id) return undefined;
   try {
     return parseCaip2Id(id);
@@ -45,7 +45,7 @@ export function getProtocolType(id: ChainCaip2Id) {
   return protocol;
 }
 
-export function tryGetProtocolType(id: ChainCaip2Id) {
+export function tryGetProtocolType(id?: ChainCaip2Id) {
   return tryParseCaip2Id(id)?.protocol;
 }
 
@@ -54,7 +54,7 @@ export function getChainReference(id: ChainCaip2Id) {
   return reference;
 }
 
-export function tryGetChainReference(id: ChainCaip2Id) {
+export function tryGetChainReference(id?: ChainCaip2Id) {
   return tryParseCaip2Id(id)?.reference;
 }
 

diff --git a/src/features/caip/tokens.ts b/src/features/caip/tokens.ts
@@ -51,7 +51,7 @@ export function parseCaip19Id(id: TokenCaip19Id) {
   }
 }
 
-export function tryParseCaip19Id(id: TokenCaip19Id) {
+export function tryParseCaip19Id(id?: TokenCaip19Id) {
   if (!id) return undefined;
   try {
     return parseCaip19Id(id);
@@ -65,7 +65,7 @@ export function getChainIdFromToken(id: TokenCaip19Id): ChainCaip2Id {
   return parseCaip19Id(id).chainCaip2Id;
 }
 
-export function tryGetChainIdFromToken(id: TokenCaip19Id): ChainCaip2Id | undefined {
+export function tryGetChainIdFromToken(id?: TokenCaip19Id): ChainCaip2Id | undefined {
   return tryParseCaip19Id(id)?.chainCaip2Id;
 }
 

diff --git a/src/features/chains/ChainSelectField.tsx b/src/features/chains/ChainSelectField.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { useState } from 'react';
 
 import { ChainLogo } from '../../components/icons/ChainLogo';
+import { config } from '../../consts/config';
 import ChevronIcon from '../../images/icons/chevron-down.svg';
 import { TransferFormValues } from '../transfer/types';
 
@@ -24,9 +25,9 @@ export function ChainSelectField({ name, label, chainCaip2Ids, onChange, disable
   const handleChange = (newChainId: ChainCaip2Id) => {
     helpers.setValue(newChainId);
     // Reset other fields on chain change
-    setFieldValue('tokenCaip19Id', '');
     setFieldValue('recipientAddress', '');
     setFieldValue('amount', '');
+    if (!config.enableAutoTokenSelection) setFieldValue('tokenCaip19Id', '');
     if (onChange) onChange(newChainId);
   };
 

diff --git a/src/features/chains/metadata.ts b/src/features/chains/metadata.ts
@@ -6,6 +6,7 @@ import {
   ChainMap,
   ChainMetadata,
   ChainMetadataSchema,
+  ChainName,
   chainMetadata,
   chainMetadataToWagmiChain,
 } from '@hyperlane-xyz/sdk';
@@ -129,13 +130,8 @@ export function getCosmosKitConfig(): { chains: CosmosChain[]; assets: AssetList
   return { chains, assets };
 }
 
-// TODO this assumes a single cosmos chain per app instance.
-// This is useful because the wallet hooks currently assume one connection per wallet
-// but in Cosmos-land connections are per-chain.
-let cosmosChainName: string;
-export function getCosmosChainName() {
-  if (!cosmosChainName) {
-    cosmosChainName = getCosmosKitConfig()?.chains?.[0]?.chain_name || 'cosmoshub';
-  }
-  return cosmosChainName;
+export function getCosmosChainNames(): ChainName[] {
+  return Object.values(getChainConfigs())
+    .filter((c) => c.protocol === ProtocolType.Cosmos)
+    .map((c) => c.name);
 }