Injective warp core

.eslintrc

@@ -29,6 +29,14 @@
     "@typescript-eslint/no-explicit-any": ["off"],
     "@typescript-eslint/no-non-null-assertion": ["off"],
     "@typescript-eslint/no-require-imports": ["warn"],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
     "jsx-a11y/alt-text": ["off"]
   }
 }

.vscode/settings.json

@@ -16,14 +16,14 @@
   "[typescript]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -38,9 +38,4 @@
   },
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
-  "[typescript][typescriptreact]": {
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": "explicit"
-    }
-  },
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hyperlane-xyz/warp-ui-template",
   "description": "A web app template for building Hyperlane Warp Route UIs",
-  "version": "3.6.1",
+  "version": "3.8.0",
   "author": "J M Rossy",
   "dependencies": {
     "@chakra-ui/next-js": "^2.1.5",
@@ -16,9 +16,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.14",
-    "@hyperlane-xyz/sdk": "^3.6.1",
-    "@hyperlane-xyz/utils": "^3.6.1",
-    "@hyperlane-xyz/widgets": "^3.1.4",
+    "@hyperlane-xyz/sdk": "^3.8.0",
+    "@hyperlane-xyz/utils": "^3.8.0",
+    "@hyperlane-xyz/widgets": "^3.8.0",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
     "@rainbow-me/rainbowkit": "1.3.0",
     "@sentry/nextjs": "^7.93.0",
@@ -78,13 +78,12 @@
   },
   "scripts": {
     "clean": "rm -rf dist cache .next",
-    "dev": "yarn build:configs && next dev",
-    "build": "yarn build:configs && next build",
-    "build:configs": "./src/scripts/buildConfigs/build.sh",
+    "dev": "next dev",
+    "build": "next build",
     "typecheck": "tsc",
     "lint": "next lint",
     "start": "next start",
-    "test": "yarn build:configs && jest",
+    "test": "jest --passWithNoTests",
     "prettier": "prettier --write ./src"
   },
   "types": "dist/src/index.d.ts",
@@ -95,6 +94,7 @@
     "cosmjs-types": "0.9",
     "ethers": "^5.7",
     "lit-html": "2.8.0",
+    "react-fast-compare": "^3.2",
     "viem": "1.20.0",
     "zustand": "^4.4"
   }

src/components/animation/SmallSpinner.tsx

@@ -1,9 +1,9 @@
 import { memo } from 'react';
 
-function _SmallSpinner() {
+function _SmallSpinner({ className }: { className?: string }) {
   return (
     <svg
-      className="animate-spin -ml-1 mr-3 h-5 w-5 text-black"
+      className={`animate-spin h-5 w-5 text-black ${className}`}
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"

src/components/buttons/ConnectAwareSubmitButton.tsx

@@ -3,24 +3,24 @@ import { useCallback } from 'react';
 
 import { ProtocolType } from '@hyperlane-xyz/utils';
 
-import { tryGetProtocolType } from '../../features/caip/chains';
+import { tryGetChainProtocol } from '../../features/chains/utils';
 import { useAccountForChain, useConnectFns } from '../../features/wallet/hooks/multiProtocol';
 import { useTimeout } from '../../utils/timeout';
 
 import { SolidButton } from './SolidButton';
 
 interface Props {
-  chainCaip2Id: ChainCaip2Id;
+  chainName: ChainName;
   text: string;
   classes?: string;
 }
 
-export function ConnectAwareSubmitButton<FormValues = any>({ chainCaip2Id, text, classes }: Props) {
-  const protocol = tryGetProtocolType(chainCaip2Id) || ProtocolType.Ethereum;
+export function ConnectAwareSubmitButton<FormValues = any>({ chainName, text, classes }: Props) {
+  const protocol = tryGetChainProtocol(chainName) || ProtocolType.Ethereum;
   const connectFns = useConnectFns();
   const connectFn = connectFns[protocol];
 
-  const account = useAccountForChain(chainCaip2Id);
+  const account = useAccountForChain(chainName);
   const isAccountReady = account?.isReady;
 
   const { errors, setErrors, touched, setTouched } = useFormikContext<FormValues>();

src/components/icons/ChainLogo.tsx

@@ -1,42 +1,29 @@
 import Image from 'next/image';
 import { ComponentProps, useMemo } from 'react';
 
-import { isNumeric } from '@hyperlane-xyz/utils';
 import { ChainLogo as ChainLogoInner } from '@hyperlane-xyz/widgets';
 
-import { parseCaip2Id } from '../../features/caip/chains';
-import { getChainDisplayName } from '../../features/chains/utils';
-import { getMultiProvider } from '../../features/multiProvider';
-import { logger } from '../../utils/logger';
+import { getChainDisplayName, tryGetChainMetadata } from '../../features/chains/utils';
 
-type Props = Omit<ComponentProps<typeof ChainLogoInner>, 'chainId' | 'chainName'> & {
-  chainCaip2Id?: ChainCaip2Id;
-};
+export function ChainLogo(props: ComponentProps<typeof ChainLogoInner>) {
+  const { chainName, ...rest } = props;
+  const { chainId, chainDisplayName, icon } = useMemo(() => {
+    if (!chainName) return {};
+    const chainDisplayName = getChainDisplayName(chainName);
+    const chainMetadata = tryGetChainMetadata(chainName);
+    const chainId = chainMetadata?.chainId;
+    const logoUri = chainMetadata?.logoURI;
+    const icon = logoUri
+      ? (props: { width: number; height: number; title?: string }) => (
+          <Image src={logoUri} alt="" {...props} />
+        )
+      : undefined;
+    return {
+      chainId,
+      chainDisplayName,
+      icon,
+    };
+  }, [chainName]);
 
-export function ChainLogo(props: Props) {
-  const { chainCaip2Id, ...rest } = props;
-  const { chainId, chainName, icon } = useMemo(() => {
-    if (!chainCaip2Id) return {};
-    try {
-      const { reference } = parseCaip2Id(chainCaip2Id);
-      const chainId = isNumeric(reference) ? parseInt(reference, 10) : undefined;
-      const chainName = getChainDisplayName(chainCaip2Id);
-      const logoUri = getMultiProvider().tryGetChainMetadata(reference)?.logoURI;
-      const icon = logoUri
-        ? (props: { width: number; height: number; title?: string }) => (
-            <Image src={logoUri} alt="" {...props} />
-          )
-        : undefined;
-      return {
-        chainId,
-        chainName,
-        icon,
-      };
-    } catch (error) {
-      logger.error('Failed to parse caip2 id', error);
-      return {};
-    }
-  }, [chainCaip2Id]);
-
-  return <ChainLogoInner {...rest} chainId={chainId} chainName={chainName} icon={icon} />;
+  return <ChainLogoInner {...rest} chainId={chainId} chainName={chainDisplayName} icon={icon} />;
 }

src/components/icons/TokenIcon.tsx

@@ -1,15 +1,14 @@
 import Image from 'next/image';
 import { memo } from 'react';
 
+import { IToken } from '@hyperlane-xyz/sdk';
 import { Circle } from '@hyperlane-xyz/widgets';
 
-import { getTokenAddress } from '../../features/caip/tokens';
-import { TokenMetadata } from '../../features/tokens/types';
 import { isValidUrl } from '../../utils/url';
 import { ErrorBoundary } from '../errors/ErrorBoundary';
 
 interface Props {
-  token?: TokenMetadata;
+  token?: IToken | null;
   size?: number;
 }
 
@@ -20,9 +19,7 @@ function _TokenIcon({ token, size = 32 }: Props) {
   const fontSize = Math.floor(size / 2);
 
   const bgColorSeed =
-    token && !imageSrc
-      ? (Buffer.from(getTokenAddress(token.tokenCaip19Id)).at(0) || 0) % 5
-      : undefined;
+    token && !imageSrc ? (Buffer.from(token.addressOrDenom).at(0) || 0) % 5 : undefined;
 
   return (
     <Circle size={size} bgColorSeed={bgColorSeed} title={title}>

src/components/toast/TxSuccessToast.tsx

@@ -1,28 +1,26 @@
 import { useMemo } from 'react';
 import { toast } from 'react-toastify';
 
-import { parseCaip2Id } from '../../features/caip/chains';
-import { getMultiProvider } from '../../features/multiProvider';
+import { getMultiProvider } from '../../context/context';
 
-export function toastTxSuccess(msg: string, txHash: string, chainCaip2Id: ChainCaip2Id) {
-  toast.success(<TxSuccessToast msg={msg} txHash={txHash} chainCaip2Id={chainCaip2Id} />, {
+export function toastTxSuccess(msg: string, txHash: string, chain: ChainName) {
+  toast.success(<TxSuccessToast msg={msg} txHash={txHash} chain={chain} />, {
     autoClose: 12000,
   });
 }
 
 export function TxSuccessToast({
   msg,
   txHash,
-  chainCaip2Id,
+  chain,
 }: {
   msg: string;
   txHash: string;
-  chainCaip2Id: ChainCaip2Id;
+  chain: ChainName;
 }) {
   const url = useMemo(() => {
-    const { reference } = parseCaip2Id(chainCaip2Id);
-    return getMultiProvider().tryGetExplorerTxUrl(reference, { hash: txHash });
-  }, [chainCaip2Id, txHash]);
+    return getMultiProvider().tryGetExplorerTxUrl(chain, { hash: txHash });
+  }, [chain, txHash]);
 
   return (
     <div>

src/consts/chains.ts

@@ -1,63 +1,7 @@
-import { ChainMap, ChainMetadata, ExplorerFamily } from '@hyperlane-xyz/sdk';
-import { ProtocolType } from '@hyperlane-xyz/utils';
+import { ChainMap, ChainMetadata } from '@hyperlane-xyz/sdk';
 
 // A map of chain names to ChainMetadata
 // Chains can be defined here, in chains.json, or in chains.yaml
 // Chains already in the SDK need not be included here unless you want to override some fields
 // Schema here: https://github.com/hyperlane-xyz/hyperlane-monorepo/blob/main/typescript/sdk/src/metadata/chainMetadataTypes.ts
-export const chains: ChainMap<ChainMetadata & { mailbox?: Address }> = {
-  inevm: {
-    blockExplorers: [
-      {
-        apiUrl: 'https://inevm.calderaexplorer.xyz/api',
-        family: ExplorerFamily.Blockscout,
-        name: 'Caldera inEVM Explorer',
-        url: 'https://inevm.calderaexplorer.xyz',
-      },
-    ],
-    blocks: {
-      confirmations: 1,
-      estimateBlockTime: 3,
-      reorgPeriod: 0,
-    },
-    chainId: 2525,
-    domainId: 2525,
-    displayName: 'Injective EVM',
-    displayNameShort: 'inEVM',
-    name: 'inevm',
-    nativeToken: {
-      decimals: 18,
-      name: 'Injective',
-      symbol: 'INJ',
-    },
-    protocol: ProtocolType.Ethereum,
-    rpcUrls: [{ http: 'https://inevm.calderachain.xyz/http' }],
-    logoURI: '/logos/inevm.svg',
-  },
-
-  injective: {
-    blockExplorers: [],
-    blocks: {
-      confirmations: 1,
-      estimateBlockTime: 3,
-      reorgPeriod: 1,
-    },
-    chainId: 'injective-1',
-    domainId: 6909546,
-    displayName: 'Injective',
-    displayNameShort: 'Injective',
-    name: 'injective',
-    nativeToken: {
-      decimals: 18,
-      name: 'Injective',
-      symbol: 'INJ',
-    },
-    protocol: ProtocolType.Cosmos,
-    slip44: 118,
-    bech32Prefix: 'inj',
-    grpcUrls: [{ http: 'sentry.chain.grpc.injective.network:443' }],
-    rpcUrls: [{ http: 'https://sentry.tm.injective.network:443' }],
-    restUrls: [{ http: '	https://sentry.lcd.injective.network:443' }],
-    logoURI: '/logos/injective.svg',
-  },
-};
+export const chains: ChainMap<ChainMetadata & { mailbox?: Address }> = {};

src/consts/tokens.json

@@ -1 +1,4 @@
-[]
+{
+  "tokens": [],
+  "options": {}
+}