Merge pull request #29 from hyperlane-xyz/pi-support

- Add PI support for configuring and searching custom chains
- Update SDK 1.2.1 and use latest metadata schema
- Use MultiProvider for provider / chain metadata management
- Update theme colors
- Create tests for PI chain searching
- Improve ChainLogo component

.eslintignore

@@ -3,4 +3,5 @@ dist
 build
 coverage
 next.config.js
-tailwind.config.js
+tailwind.config.js
+jest.config.js

.github/workflows/ci.yml

@@ -14,10 +14,14 @@ jobs:
   install:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v3
+
+      - name: yarn-cache
+        uses: actions/cache@v3
         with:
-          path: .//node_modules
+          path: |
+            **/node_modules
+            .yarn/cache
           key: ${{ runner.os }}-yarn-cache-${{ hashFiles('./yarn.lock') }}
 
       - name: yarn-install
@@ -36,31 +40,31 @@ jobs:
     runs-on: ubuntu-latest
     needs: [install]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: yarn-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
-          path: .//node_modules
+          path: |
+            **/node_modules
+            .yarn/cache
           key: ${{ runner.os }}-yarn-cache-${{ hashFiles('./yarn.lock') }}
 
-      - name: build-cache
-        uses: actions/cache@v2
-        with:
-          path: ./*
-          key: ${{ github.sha }}
-
       - name: build
         run: yarn run build
 
   prettier:
     runs-on: ubuntu-latest
     needs: [install]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v3
+
+      - name: yarn-cache
+        uses: actions/cache@v3
         with:
-          path: .//node_modules
+          path: |
+            **/node_modules
+            .yarn/cache
           key: ${{ runner.os }}-yarn-cache-${{ hashFiles('./yarn.lock') }}
 
       - name: prettier
@@ -76,24 +80,15 @@ jobs:
     runs-on: ubuntu-latest
     needs: [install]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v3
+
+      - name: yarn-cache
+        uses: actions/cache@v3
         with:
-          path: .//node_modules
+          path: |
+            **/node_modules
+            .yarn/cache
           key: ${{ runner.os }}-yarn-cache-${{ hashFiles('./yarn.lock') }}
 
       - name: lint 
-        run: yarn run lint
-
-  # test:
-  #   runs-on: ubuntu-latest
-  #   needs: [build]
-  #   steps:
-  #     - uses: actions/checkout@v2
-  #     - uses: actions/cache@v2
-  #       with:
-  #         path: ./*
-  #         key: ${{ github.sha }}
-
-  #     - name: test
-  #       run: yarn run test
+        run: yarn run lint

jest.config.js

@@ -0,0 +1,16 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

package.json

@@ -4,39 +4,42 @@
   "version": "1.0.0",
   "author": "J M Rossy",
   "dependencies": {
-    "@hyperlane-xyz/sdk": "^1.1.3",
-    "@hyperlane-xyz/widgets": "^1.0.0",
+    "@headlessui/react": "^1.7.11",
+    "@hyperlane-xyz/sdk": "1.2.1",
+    "@hyperlane-xyz/widgets": "1.2.2-beta0",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
-    "@rainbow-me/rainbowkit": "^0.8.1",
-    "@tanstack/react-query": "^4.24.4",
+    "@rainbow-me/rainbowkit": "^0.11.0",
+    "@tanstack/react-query": "^4.24.10",
     "buffer": "^6.0.3",
     "ethers": "^5.7.2",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
-    "next": "^13.1.6",
+    "next": "^13.2.0",
     "nextjs-cors": "latest",
     "react": "^18.2.0",
-    "react-accessible-dropdown-menu-hook": "^3.2.0",
     "react-dom": "^18.2.0",
     "react-toastify": "^9.1.1",
     "urql": "^3.0.3",
-    "wagmi": "^0.11.2",
-    "zustand": "^4.3.2"
+    "wagmi": "^0.11.6",
+    "zod": "^3.21.2",
+    "zustand": "^4.3.3"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
+    "@types/jest": "^29.4.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.33.0",
-    "eslint-config-next": "^13.1.6",
+    "eslint": "^8.34.0",
+    "eslint-config-next": "^13.2.0",
     "eslint-config-prettier": "^8.6.0",
+    "jest": "^29.4.3",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.3",
-    "tailwindcss": "^3.2.4",
+    "prettier": "^2.8.4",
+    "tailwindcss": "^3.2.7",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5"
   },
@@ -56,10 +59,12 @@
     "typecheck": "tsc",
     "lint": "next lint",
     "start": "next start",
+    "test": "jest",
     "prettier": "prettier --write ./src"
   },
   "types": "dist/src/index.d.ts",
   "resolutions": {
-    "ethers": "^5.7"
+    "ethers": "^5.7",
+    "zustand": "^4.3.3"
   }
 }

public/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#025aa1</TileColor>
+            <TileColor>#2362C1</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

src/components/buttons/BorderedButton.tsx

@@ -8,10 +8,11 @@ interface ButtonProps {
   disabled?: boolean;
   icon?: ReactElement;
   title?: string;
+  passThruProps?: any;
 }
 
 export function BorderedButton(props: PropsWithChildren<ButtonProps>) {
-  const { type, onClick, classes, bold, icon, disabled, title } = props;
+  const { type, onClick, classes, bold, icon, disabled, title, passThruProps } = props;
 
   const base = 'border border-black rounded transition-all';
   const onHover = 'hover:border-gray-500 hover:text-gray-500';
@@ -27,6 +28,7 @@ export function BorderedButton(props: PropsWithChildren<ButtonProps>) {
       disabled={disabled ?? false}
       title={title}
       className={allClasses}
+      {...passThruProps}
     >
       {icon ? (
         <div className="flex items-center">

src/components/buttons/SolidButton.tsx

@@ -1,10 +1,9 @@
 import { PropsWithChildren, ReactElement } from 'react';
 
 interface ButtonProps {
-  size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+  color?: 'white' | 'blue' | 'green' | 'red'; // defaults to blue
   type?: 'submit' | 'reset' | 'button';
   onClick?: () => void;
-  color?: 'white' | 'blue' | 'green' | 'red'; // defaults to blue
   classes?: string;
   bold?: boolean;
   disabled?: boolean;
@@ -15,7 +14,6 @@ interface ButtonProps {
 
 export function SolidButton(props: PropsWithChildren<ButtonProps>) {
   const {
-    size,
     type,
     onClick,
     color: _color,
@@ -28,8 +26,7 @@ export function SolidButton(props: PropsWithChildren<ButtonProps>) {
   } = props;
   const color = _color ?? 'blue';
 
-  const base = 'flex items-center justify-center rounded-full transition-all duration-1000';
-  const sizing = sizeToClasses(size);
+  const base = 'flex items-center justify-center rounded transition-all duration-500';
   let baseColors, onHover, onActive;
   if (color === 'blue') {
     baseColors = 'bg-blue-500 text-white';
@@ -50,7 +47,7 @@ export function SolidButton(props: PropsWithChildren<ButtonProps>) {
   }
   const onDisabled = 'disabled:bg-gray-300 disabled:text-gray-500';
   const weight = bold ? 'font-semibold' : '';
-  const allClasses = `${base} ${sizing} ${baseColors} ${onHover} ${onDisabled} ${onActive} ${weight} ${classes}`;
+  const allClasses = `${base} ${baseColors} ${onHover} ${onDisabled} ${onActive} ${weight} ${classes}`;
 
   return (
     <button
@@ -72,11 +69,3 @@ export function SolidButton(props: PropsWithChildren<ButtonProps>) {
     </button>
   );
 }
-
-function sizeToClasses(size?: string) {
-  if (size === 'xs') return 'h-7 px-4 py-1';
-  if (size === 's') return 'h-7 px-4 py-1';
-  if (size === 'l') return 'h-10 px-5 py-1 text-lg';
-  if (size === 'xl') return 'w-40 h-11 px-5 py-1.5 text-xl';
-  return 'px-5 py-1 h-9';
-}

src/components/buttons/XIconButton.tsx

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+
+import X from '../../images/icons/x.svg';
+
+import { IconButton } from './IconButton';
+
+function _XIconButton({
+  onClick,
+  title,
+  size = 20,
+}: {
+  onClick: () => void;
+  title?: string;
+  size?: number;
+}) {
+  return (
+    <IconButton imgSrc={X} title={title || 'Close'} width={size} height={size} onClick={onClick} />
+  );
+}
+
+export const XIconButton = memo(_XIconButton);

src/components/icons/ChainLogo.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+
+import { ChainLogo as ChainLogoInner } from '@hyperlane-xyz/widgets';
+
+import { getChainName } from '../../features/chains/utils';
+
+export function ChainLogo(props: ComponentProps<typeof ChainLogoInner>) {
+  const { chainName, ...rest } = props;
+  const name = chainName || getChainName(props.chainId);
+  return <ChainLogoInner {...rest} chainName={name} />;
+}

src/components/icons/ChainToChain.tsx

@@ -1,11 +1,11 @@
 import Image from 'next/image';
 import { memo } from 'react';
 
-import { ChainLogo } from '@hyperlane-xyz/widgets';
-
 import ArrowRightIcon from '../../images/icons/arrow-right-short.svg';
 import { useIsMobile } from '../../styles/mediaQueries';
 
+import { ChainLogo } from './ChainLogo';
+
 function _ChainToChain({
   originChainId,
   destinationChainId,

src/components/input/Checkbox.module.css

@@ -20,7 +20,7 @@
   border-radius: 0.2rem;
   transform: scale(0);
   transition: 200ms all ease-in-out;
-  background-color: #025aa1;
+  background-color: #2362c1;
 }
 
 .checkbox:checked::before {

src/components/layout/AppLayout.tsx

@@ -4,7 +4,6 @@ import { PropsWithChildren } from 'react';
 import { toTitleCase } from '../../utils/string';
 import { Footer } from '../nav/Footer';
 import { Header } from '../nav/Header';
-import { InfoBanner } from '../nav/InfoBanner';
 
 interface Props {
   pathName: string;
@@ -19,7 +18,7 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
         <title>{`Hyperlane Explorer | ${getHeadTitle(pathName)}`}</title>
       </Head>
       <div id="app-content" className="h-full min-h-screen w-full min-w-screen">
-        <InfoBanner />
+        {/* <InfoBanner /> */}
         <div className="max-w-5xl mx-auto flex flex-col justify-between min-h-screen">
           <Header pathName={pathName} />
           <main className="w-full grow">{children}</main>