feat: Update branding and replace chain picker (#114)

- Update to latest branding / styles
- Replace chain picker with new one from widgets lib
- De-dupe code with widgets lib
- Update packages to 5.4.0
- Fix #112 
- Upgrade headless and tailwind libs

Corresponds with monorepo PR:
hyperlane-xyz/hyperlane-monorepo#4486

.eslintrc

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

package.json

@@ -1,18 +1,18 @@
 {
   "name": "@hyperlane-xyz/explorer",
   "description": "An interchain explorer for the Hyperlane protocol and network.",
-  "version": "3.13.0",
+  "version": "5.4.0",
   "author": "J M Rossy",
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
-    "@hyperlane-xyz/registry": "4.3.6",
-    "@hyperlane-xyz/sdk": "5.2.1",
-    "@hyperlane-xyz/utils": "5.2.1",
-    "@hyperlane-xyz/widgets": "5.2.1",
-    "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
+    "@headlessui/react": "^2.1.8",
+    "@hyperlane-xyz/registry": "4.6.0",
+    "@hyperlane-xyz/sdk": "5.5.0",
+    "@hyperlane-xyz/utils": "5.5.0",
+    "@hyperlane-xyz/widgets": "5.5.0",
     "@tanstack/react-query": "^5.35.5",
     "bignumber.js": "^9.1.2",
     "buffer": "^6.0.3",
+    "clsx": "^2.1.1",
     "ethers": "^5.7.2",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
@@ -23,9 +23,9 @@
     "react-toastify": "^9.1.1",
     "react-tooltip": "^5.26.3",
     "urql": "^3.0.3",
-    "yaml": "^2.4.2",
+    "yaml": "^2.4.5",
     "zod": "^3.21.2",
-    "zustand": "4.3.8"
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
@@ -42,7 +42,7 @@
     "jest": "^29.6.3",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.13",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.4"
   },

src/components/layout/AppLayout.tsx → src/AppLayout.tsx

@@ -3,8 +3,8 @@ import { PropsWithChildren } from 'react';
 
 import { toTitleCase } from '@hyperlane-xyz/utils';
 
-import { Footer } from '../nav/Footer';
-import { Header } from '../nav/Header';
+import { Footer } from './components/nav/Footer';
+import { Header } from './components/nav/Header';
 
 interface Props {
   pathName: string;
@@ -25,7 +25,7 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
         {/* <InfoBanner /> */}
         <Header pathName={pathName} />
         <div className="max-w-5xl mx-auto grow">
-          <main style={styles.main} className="relative min-h-full pt-3 z-20">
+          <main style={styles.main} className="relative min-h-full pt-3">
             {children}
           </main>
         </div>
@@ -43,10 +43,10 @@ function getHeadTitle(pathName: string) {
 
 const styles = {
   container: {
-    backgroundImage: 'url(/images/lines-bg-top.svg)',
-    backgroundSize: '94vw',
+    backgroundImage: 'url(/images/background.svg)',
+    backgroundSize: 'cover',
     backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center 80px',
+    backgroundPosition: 'center',
   },
   main: {
     width: 'min(900px,96vw)',

src/components/icons/HelpIcon.tsx

@@ -1,22 +1,26 @@
 import { memo } from 'react';
 
-import Question from '../../images/icons/question-circle.svg';
-import { IconButton } from '../buttons/IconButton';
+import { IconButton, QuestionMarkIcon } from '@hyperlane-xyz/widgets';
 
-function _HelpIcon({ text, size = 20 }: { text: string; size?: number }) {
+import { Color } from '../../styles/Color';
+
+function _HelpIcon({ text, size = 16 }: { text: string; size?: number }) {
+  const tooltipProps = {
+    'data-tooltip-content': text,
+    'data-tooltip-id': 'root-tooltip',
+    'data-tooltip-place': 'top-start',
+  };
   return (
+    // @ts-ignore allow pass-thru tooltip props
     <IconButton
-      imgSrc={Question}
       title="Help"
       width={size}
       height={size}
-      classes="opacity-50"
-      passThruProps={{
-        'data-tooltip-content': text,
-        'data-tooltip-id': 'root-tooltip',
-        'data-tooltip-place': 'top-start',
-      }}
-    />
+      className="border border-gray-400 rounded-full p-px"
+      {...tooltipProps}
+    >
+      <QuestionMarkIcon height={size} width={size} color={Color.lightGray} className="opacity-50" />
+    </IconButton>
   );
 }