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

Main to injective

CUSTOMIZE.md

@@ -27,10 +27,15 @@ Or it can be hidden entirely with the `showTipBox` setting in `./src/consts/conf
 
 ## Branding
 
-## App name
+## App name and description
 
 The values to describe the app itself (e.g. to WalletConnect) are in `./src/consts/app.ts`
 
+### Color Scheme
+
+To update the color scheme, make changes in the Tailwind config file at `./tailwind.config.js`
+To modify just the background color, that can be changed in `./src/consts/app.ts`
+
 ### Metadata
 
 The HTML metadata tags are located in `./src/pages/_document.tsx`
@@ -55,15 +60,3 @@ The links used in the footer can be found here: `./src/consts/links.ts`
 ### Public assets / Favicons
 
 The images and manifest files under `./public` should also be updated.
-
-### Fonts
-
-The web-formatted font files are located in `./public/fonts`
-And the CSS to configure them is in `./src/styles/fonts.css`
-
-### Color Scheme
-
-To update the color scheme, make changes in the Tailwind config and Color consts file:
-
-- `./tailwind.config.js`
-- `./src/styles/Color.ts`

package.json

@@ -18,9 +18,9 @@
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^1.7.14",
     "@hyperlane-xyz/registry": "4.3.6",
-    "@hyperlane-xyz/sdk": "5.2.1",
-    "@hyperlane-xyz/utils": "5.2.1",
-    "@hyperlane-xyz/widgets": "5.2.1",
+    "@hyperlane-xyz/sdk": "5.3.0",
+    "@hyperlane-xyz/utils": "5.3.0",
+    "@hyperlane-xyz/widgets": "5.3.0",
     "@interchain-ui/react": "^1.23.28",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
     "@metamask/post-message-stream": "6.1.2",

src/components/banner/FormWarningBanner.tsx

@@ -1,12 +1,12 @@
 import { ComponentProps } from 'react';
 
 import { WarningBanner } from '../../components/banner/WarningBanner';
+import { cardStyles } from '../layout/Card';
 
 export function FormWarningBanner({ className, ...props }: ComponentProps<typeof WarningBanner>) {
   return (
     <WarningBanner
-      // The margins here should be the inverse of those in Card.tsx
-      className={`z-20 -m-1.5 mb-0 sm:-m-3 sm:mb-0 md:-m-3.5 md:mb-0 ${className}`}
+      className={`z-20 ${cardStyles.inverseMargin} mb-0 sm:mb-0 md:mb-0 ${className}`}
       {...props}
     />
   );

src/components/buttons/ConnectAwareSubmitButton.tsx

@@ -28,8 +28,8 @@ export function ConnectAwareSubmitButton<FormValues = any>({ chainName, text, cl
   const hasError = Object.keys(touched).length > 0 && Object.keys(errors).length > 0;
   const firstError = `${Object.values(errors)[0]}` || 'Unknown error';
 
-  const color = hasError ? 'red' : 'blue';
-  const content = hasError ? firstError : isAccountReady ? text : 'Connect Wallet';
+  const color = hasError ? 'red' : 'primary';
+  const content = hasError ? firstError : isAccountReady ? text : 'Connect wallet';
   const type = isAccountReady ? 'submit' : 'button';
   const onClick = isAccountReady ? undefined : connectFn;
 

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' | 'mint'; // defaults to blue
+  color?: 'white' | 'primary' | 'accent' | 'green' | 'red' | 'gray'; // defaults to primary
   bold?: boolean;
   classes?: string;
   icon?: ReactElement;
@@ -22,42 +22,33 @@ export function SolidButton(
     title,
     ...passThruProps
   } = props;
-  const color = _color ?? 'blue';
+  const color = _color ?? 'primary';
 
-  const base = 'flex items-center justify-center rounded-full transition-all duration-500';
-  let baseColors, onHover, onActive;
-  if (color === 'blue') {
-    baseColors = 'bg-blue-500 text-white';
-    onHover = 'hover:bg-blue-600';
-    onActive = 'active:bg-blue-700';
-  } else if (color === 'pink') {
-    baseColors = 'bg-pink-500 text-white';
-    onHover = 'hover:bg-pink-600';
-    onActive = 'active:bg-pink-700';
+  const base =
+    'flex items-center justify-center rounded-lg transition-all duration-500 active:scale-95';
+  let baseColors, onHover;
+  if (color === 'primary') {
+    baseColors = 'bg-primary-500 text-white';
+    onHover = 'hover:bg-primary-600';
+  } else if (color === 'accent') {
+    baseColors = 'bg-accent-500 text-white';
+    onHover = 'hover:bg-accent-600';
   } else if (color === 'green') {
     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';
-    onActive = 'active:bg-red-400';
   } else if (color === 'white') {
     baseColors = 'bg-white text-black';
-    onHover = 'hover:bg-blue-100';
-    onActive = 'active:bg-blue-200';
+    onHover = 'hover:bg-primary-100';
   } else if (color === 'gray') {
-    baseColors = 'bg-gray-100 text-blue-500';
+    baseColors = 'bg-gray-100 text-primary-500';
     onHover = 'hover:bg-gray-200';
-    onActive = 'active:bg-gray-300';
   }
   const onDisabled = 'disabled:bg-gray-300 disabled:text-gray-500';
   const weight = bold ? 'font-semibold' : '';
-  const allClasses = `${base} ${baseColors} ${onHover} ${onDisabled} ${onActive} ${weight} ${classes}`;
+  const allClasses = `${base} ${baseColors} ${onHover} ${onDisabled} ${weight} ${classes}`;
 
   return (
     <button

src/components/icons/Chevron.tsx

@@ -40,7 +40,7 @@ function _ChevronIcon({ width, height, direction, color, classes }: Props) {
       <path
         d="M1 1l6 6 6-6"
         strokeWidth="2"
-        stroke={color || Color.primaryBlack}
+        stroke={color || Color.black}
         fill="none"
         fillRule="evenodd"
         strokeLinecap="round"

src/components/icons/Identicon.tsx

@@ -21,7 +21,7 @@ function _Identicon({ address, size: _size }: Props) {
 
   // TODO better handling of non-evm addresses here
   if (!address || !isValidAddressEvm(address)) {
-    return <Circle size={size} classes="bg-blue-500" title="" />;
+    return <Circle size={size} classes="bg-primary-500" title="" />;
   }
 
   const jazziconResult = jazzicon(size, addressToSeed(address));

src/components/icons/WideChevron.tsx

@@ -5,7 +5,7 @@ import { Color } from '../../styles/Color';
 export function WideChevron({ classes }: { classes?: string }) {
   return (
     <WideChevronInner
-      width="17"
+      width="16"
       height="100%"
       direction="e"
       color={Color.lightGray}

src/components/input/TextField.tsx

@@ -26,4 +26,4 @@ export function TextInput({ onChange, classes, ...props }: InputProps) {
 }
 
 const defaultInputClasses =
-  'mt-1.5 px-2.5 py-2 text-sm rounded-full border border-blue-300 focus:border-blue-500 disabled:bg-gray-150 outline-none transition-all duration-300';
+  'mt-1.5 px-2.5 py-2.5 text-sm rounded-lg border border-primary-300 focus:border-primary-500 disabled:bg-gray-150 outline-none transition-all duration-300';

src/components/layout/AppLayout.tsx

@@ -26,3 +26,13 @@ export function AppLayout({ children }: PropsWithChildren) {
     </>
   );
 }
+
+// const styles = {
+//   container: {
+//     backgroundColor: BACKGROUND_COLOR,
+//     backgroundImage: BACKGROUND_IMAGE,
+//     backgroundSize: 'cover',
+//     backgroundRepeat: 'no-repeat',
+//     backgroundPosition: 'center',
+//   },
+// };

src/components/layout/Card.tsx

@@ -7,9 +7,16 @@ interface Props {
 export function Card({ className, children }: PropsWithChildren<Props>) {
   return (
     <div
-      className={`p-1.5 sm:p-3 md:p-3.5 relative bg-white rounded-3xl overflow-auto ${className}`}
+      className={`${cardStyles.padding} relative bg-white rounded-2xl overflow-auto ${className}`}
     >
       {children}
     </div>
   );
 }
+
+export const cardStyles = {
+  padding: 'p-1.5 xs:p-2 sm:p-3 md:p-4',
+  // Should be inverse of cardPadding, used when something
+  // should be flush with card edge
+  inverseMargin: '-m-1.5 xs:-m-2 sm:-m-3 md:-m-4',
+};

src/components/nav/Footer.tsx

@@ -30,67 +30,79 @@ export function Footer() {
     <footer className="text-gray-800 opacity-90 relative">
       <div className="relative z-10 px-8 pb-3 pt-2 sm:pt-0">
         <div className="flex flex-col sm:flex-row gap-6 sm:gap-10 items-center sm:items-end justify-between">
-          <div className="py-1 flex items-center justify-center space-x-2">
-            <div className="flex items-center font-medium space-x-1">
-              <span>Built with</span>
-              <Link href={links.about} className="flex items-center space-x-1" target="_blank">
-                <Image src={HyperlaneLogo} alt="" width={17} height={17} />
-                <span>Hyperlane</span>
-              </Link>
-              <span>and</span>
-              <Link href={links.caldera} className="flex items-center space-x-1" target="_blank">
-                <Image src="/logos/caldera.png" alt="" width={24} height={18} />
-                <span>Caldera</span>
-              </Link>
-            </div>
-          </div>
-          <nav className="flex text-md font-medium space-x-10">
-            <ul className={`${styles.linkCol}`}>
-              {footerLinks1.map((item) => (
-                <li className="" key={item.title}>
-                  <Link
-                    className={styles.linkItem}
-                    target={item.external ? '_blank' : '_self'}
-                    href={item.url}
-                  >
-                    <div className="text-sm">{item.title}</div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            <ul className={`${styles.linkCol}`}>
-              {footerLinks2.map((item) => (
-                <li className="" key={item.title}>
-                  <Link
-                    className={styles.linkItem}
-                    target={item.external ? '_blank' : '_self'}
-                    href={item.url}
-                  >
-                    <div className="text-sm">{item.title}</div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            <ul className={`${styles.linkCol}`}>
-              {footerLinks3.map((item) => (
-                <li key={item.title}>
-                  <Link
-                    className={styles.linkItem}
-                    target={item.external ? '_blank' : '_self'}
-                    href={item.url}
-                  >
-                    {item?.icon && <div className="mt-1 mr-3 w-4">{item?.icon}</div>}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </nav>
+          <FooterLogo />
+          <FooterNav />
         </div>
       </div>
     </footer>
   );
 }
 
+function FooterLogo() {
+  return (
+    <div className="py-1 flex items-center justify-center space-x-2">
+      <div className="flex items-center font-medium space-x-1">
+        <span>Built with</span>
+        <Link href={links.about} className="flex items-center space-x-1" target="_blank">
+          <Image src={HyperlaneLogo} alt="" width={17} height={17} />
+          <span>Hyperlane</span>
+        </Link>
+        <span>and</span>
+        <Link href={links.caldera} className="flex items-center space-x-1" target="_blank">
+          <Image src="/logos/caldera.png" alt="" width={24} height={18} />
+          <span>Caldera</span>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function FooterNav() {
+  return (
+    <nav className="flex text-md font-medium space-x-10">
+      <ul className={`${styles.linkCol}`}>
+        {footerLinks1.map((item) => (
+          <li className="" key={item.title}>
+            <Link
+              className={styles.linkItem}
+              target={item.external ? '_blank' : '_self'}
+              href={item.url}
+            >
+              <div className="text-sm">{item.title}</div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <ul className={`${styles.linkCol}`}>
+        {footerLinks2.map((item) => (
+          <li className="" key={item.title}>
+            <Link
+              className={styles.linkItem}
+              target={item.external ? '_blank' : '_self'}
+              href={item.url}
+            >
+              <div className="text-sm">{item.title}</div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <ul className={`${styles.linkCol}`}>
+        {footerLinks3.map((item) => (
+          <li key={item.title}>
+            <Link
+              className={styles.linkItem}
+              target={item.external ? '_blank' : '_self'}
+              href={item.url}
+            >
+              {item?.icon && <div className="mt-1 mr-3 w-4">{item?.icon}</div>}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
 const styles = {
   linkCol: 'flex flex-col gap-1.5',
   linkItem: 'flex items-center capitalize text-decoration-none hover:underline underline-offset-2',

src/components/tip/TipCard.tsx

@@ -12,21 +12,21 @@ export function TipCard() {
   const [show, setShow] = useState(config.showTipBox);
   if (!show) return null;
   return (
-    <Card className="w-100 sm:w-[31rem]">
-      <h2 className="text-blue-500 sm:text-lg">Bridge Tokens with Hyperlane Warp Routes!</h2>
+    <Card className="w-100 sm:w-[31rem] p-2">
+      <h2 className="text-primary-500">Bridge Tokens with Hyperlane Warp Routes!</h2>
       <div className="flex items-end justify-between">
-        <p className="mt-1 text-xs sm:text-sm max-w-[70%]">
+        <p className="mt-1 text-xs max-w-[75%]">
           Warp Routes make it easy to permissionlessly take your tokens interchain. Fork this
           template to get started!
         </p>
         <a
           href={links.github}
           target="_blank"
           rel="noopener noreferrer"
-          className="ml-2 px-3 py-1.5 flex items-center bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-xs sm:text-sm text-blue-500 rounded-full transition-all"
+          className="ml-2 px-3 py-1.5 flex items-center bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-xs sm:text-sm text-primary-500 rounded-lg transition-all"
         >
-          <Image src={InfoCircle} width={16} alt="" />
-          <span className="ml-1.5">Learn More</span>
+          <Image src={InfoCircle} width={12} alt="" />
+          <span className="hidden sm:inline ml-1.5 text-sm">More</span>
         </a>
       </div>
       <div className="absolute right-3 top-3">

src/consts/app.ts

@@ -1,5 +1,17 @@
+import { Inter } from 'next/font/google';
+
+import { Color } from '../styles/Color';
+
+export const MAIN_FONT = Inter({
+  subsets: ['latin'],
+  variable: '--font-main',
+  preload: true,
+  fallback: ['sans-serif'],
+});
 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 APP_BRAND_COLOR = '#0082FA';
+export const BRAND_COLOR = Color.primary;
+export const BACKGROUND_COLOR = Color.primary;
+export const BACKGROUND_IMAGE = 'url(/backgrounds/main.svg)';
 export const PROXY_DEPLOYED_URL = 'https://proxy.hyperlane.xyz';