Injective rebrand

.github/workflows/ci.yml

@@ -3,9 +3,9 @@ name: ci
 on:
   # Triggers the workflow on push or pull request events but only for the main branch
   push:
-    branches: [main, nautilus, nexus]
+    branches: [main, nautilus, nexus, injective]
   pull_request:
-    branches: [main, nautilus, nexus]
+    branches: [main, nautilus, nexus, injective]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

CUSTOMIZE.md

@@ -33,7 +33,7 @@ The logo images you should change are:
 
 - `./src/images/logos/app-logo.svg`
 - `./src/images/logos/app-name.svg`
-- `./src/images/logos/app-title.png`
+- `./src/images/logos/app-title.svg`
 
 These are images are primarily used in the header and footer files:
 

public/browserconfig.xml

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

src/components/buttons/ConnectAwareSubmitButton.tsx

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

src/components/layout/AppLayout.tsx

@@ -1,9 +1,6 @@
 import Head from 'next/head';
-import Image from 'next/image';
 import { PropsWithChildren } from 'react';
 
-import Planet1 from '../../images/planets/planet-1.webp';
-import Planet2 from '../../images/planets/planet-2.webp';
 import { Footer } from '../nav/Footer';
 import { Header } from '../nav/Header';
 
@@ -16,16 +13,9 @@ export function AppLayout({ children }: PropsWithChildren) {
         <title>Hyperlane Nexus Bridge</title>
       </Head>
       <div
-        style={styles.container}
         id="app-content"
-        className="relative flex flex-col justify-between h-full min-h-screen w-full min-w-screen bg-blue-500"
+        className="relative flex flex-col justify-between h-full min-h-screen w-full min-w-screen"
       >
-        <div className="hidden md:flex absolute left-[8%] top-[15%]">
-          <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={220} priority={false} quality={50}></Image>
-        </div>
         <Header />
         <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>
@@ -35,12 +25,3 @@ export function AppLayout({ children }: PropsWithChildren) {
     </>
   );
 }
-
-const styles = {
-  container: {
-    backgroundImage: 'url(/backgrounds/lines-bg-top.svg)',
-    backgroundSize: '94vw',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center 80px',
-  },
-};

src/components/layout/Card.tsx

@@ -7,7 +7,7 @@ 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 ring ring-blue-300 rounded-3xl overflow-auto ${className}`}
+      className={`p-1.5 sm:p-3 md:p-3.5 relative bg-white rounded-3xl overflow-auto ${className}`}
     >
       {children}
     </div>

src/components/nav/Footer.tsx

@@ -1,56 +1,63 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
 import { links } from '../../consts/links';
-import FooterBg from '../../images/backgrounds/footer-bg.svg';
-import { Color } from '../../styles/Color';
 import { Discord } from '../icons/Discord';
 import { Github } from '../icons/Github';
-import { HyperlaneLogo } from '../icons/HyperlaneLogo';
-import { Medium } from '../icons/Medium';
 import { Twitter } from '../icons/Twitter';
 
 const footerLinks1 = [
-  { title: 'Docs', url: links.docs, external: true },
   { title: 'Homepage', url: links.home, external: true },
-  { title: 'Explorer', url: links.explorer, external: true },
-  { title: 'Chains', url: links.chains, external: true },
+  { title: 'INJ Explorer', url: links.explorerInj, external: true },
+  { title: 'inEVM Explorer', url: links.explorerInEvm, external: true },
+];
+
+const footerLinks2 = [
+  { title: 'Support', url: links.support, external: true },
+  { title: 'About', url: links.about, external: true },
+  { title: 'Docs', url: links.docs, external: true },
 ];
 
 const footerLinks3 = [
-  { title: 'Twitter', url: links.twitter, external: true, icon: <Twitter fill="#fff" /> },
-  { title: 'Discord', url: links.discord, external: true, icon: <Discord fill="#fff" /> },
-  { title: 'Github', url: links.github, external: true, icon: <Github fill="#fff" /> },
-  { title: 'Blog', url: links.blog, external: true, icon: <Medium fill="#fff" /> },
+  { title: 'Twitter', url: links.twitter, external: true, icon: <Twitter fill="#111" /> },
+  { title: 'Discord', url: links.discord, external: true, icon: <Discord fill="#111" /> },
+  { title: 'Github', url: links.github, external: true, icon: <Github fill="#111" /> },
 ];
 
 export function Footer() {
   return (
-    <footer className="text-white relative">
-      <div className="relative w-full">
+    <footer className="text-gray-800 opacity-90 relative">
+      {/* <div className="relative w-full">
         <Image className="z-0 w-full" src={FooterBg} alt="" />
-      </div>
-      <div className="relative z-10 px-8 pb-5 pt-2 sm:pt-0 bg-pink-500">
-        <div className="flex flex-col sm:flex-row gap-8 sm:gap-10 items-center justify-between">
-          <div className="flex items-center justify-center">
-            <div className="ml-2 w-12 sm:w-16 h-12 sm:h-16">
-              <HyperlaneLogo fill={Color.primaryWhite} />
-            </div>
-            <div className="text-lg sm:text-xl font-medium ml-6 space-y-1 ">
-              <div>Go Interchain</div>
-              <div>With Hyperlane</div>
-            </div>
+      </div> */}
+      <div className="relative z-10 px-8 pb-3 pt-2 sm:pt-0">
+        <div className="flex flex-col sm:flex-row gap-8 sm:gap-10 items-end justify-between">
+          <div className="py-1 flex items-center justify-center space-x-2">
+            {/* <Image src={AppLogo} alt="" width={30} height={30} /> */}
+            <div className="font-medium">Built with Hyperlane and Caldera</div>
           </div>
-          <nav className="flex text-md font-medium">
-            <ul className={`${styles.linkCol} mr-14`}>
+          <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="">{item.title}</div>
+                    <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>
               ))}
@@ -63,8 +70,7 @@ export function Footer() {
                     target={item.external ? '_blank' : '_self'}
                     href={item.url}
                   >
-                    {item?.icon && <div className="mr-4 w-6">{item?.icon}</div>}
-                    <div className="">{item.title}</div>
+                    {item?.icon && <div className="mt-1 mr-3 w-4">{item?.icon}</div>}
                   </Link>
                 </li>
               ))}
@@ -77,6 +83,6 @@ export function Footer() {
 }
 
 const styles = {
-  linkCol: 'flex flex-col gap-2',
+  linkCol: 'flex flex-col gap-1.5',
   linkItem: 'flex items-center capitalize text-decoration-none hover:underline underline-offset-2',
 };

src/components/nav/Header.tsx

@@ -2,18 +2,14 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import { WalletControlBar } from '../../features/wallet/WalletControlBar';
-import Logo from '../../images/logos/app-logo.svg';
 import Name from '../../images/logos/app-name.svg';
-import Title from '../../images/logos/app-title.svg';
 
 export function Header() {
   return (
     <header className="px-2 sm:px-6 lg:px-12 pt-3 pb-2 w-full">
       <div className="flex items-start justify-between">
         <Link href="/" className="py-2 flex items-center">
-          <Image src={Logo} width={24} alt="" />
-          <Image src={Name} width={130} alt="" className="hidden sm:block mt-0.5 ml-2" />
-          <Image src={Title} width={210} alt="" className="mt-0.5 ml-2 pb-px" />
+          <Image src={Name} width={180} alt="" className="mt-0.5" />
         </Link>
         <div className="flex flex-col items-end md:flex-row-reverse md:items-start gap-2">
           <WalletControlBar />

src/consts/app.ts

@@ -1,3 +1,3 @@
-export const APP_NAME = 'Hyperlane Warp UI Template';
-export const APP_DESCRIPTION = 'A DApp for Hyperlane Warp Route transfers';
-export const APP_URL = 'hyperlane-warp-template.vercel.app';
+export const APP_NAME = 'Injective Token Bridge';
+export const APP_DESCRIPTION = 'A token bridge for Injective powered by Hyperlane';
+export const APP_URL = 'https://injective.com';

src/consts/chains.ts

@@ -6,30 +6,6 @@ import { ProtocolType } from '@hyperlane-xyz/utils';
 // 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 }> = {
-  // mycustomchain: {
-  //   protocol: ProtocolType.Ethereum,
-  //   chainId: 123123,
-  //   domainId: 123123,
-  //   name: 'mycustomchain',
-  //   displayName: 'My Chain',
-  //   nativeToken: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-  //   rpcUrls: [{ http: 'https://mycustomchain-rpc.com' }],
-  //   blockExplorers: [
-  //     {
-  //       name: 'MyCustomScan',
-  //       url: 'https://mycustomchain-scan.com',
-  //       apiUrl: 'https://api.mycustomchain-scan.com/api',
-  //       family: ExplorerFamily.Etherscan,
-  //     },
-  //   ],
-  //   blocks: {
-  //     confirmations: 1,
-  //     reorgPeriod: 1,
-  //     estimateBlockTime: 10,
-  //   },
-  //   logoURI: '/logo.svg',
-  // },
-
   inevm: {
     blockExplorers: [
       {

src/consts/config.ts

@@ -24,7 +24,7 @@ export const config: Config = Object.freeze({
   isDevMode,
   version,
   explorerApiKeys,
-  showTipBox: true,
+  showTipBox: false,
   showDisabledTokens: true,
   walletConnectProjectId,
   withdrawalWhitelist,

src/consts/igpQuotes.ts

@@ -8,7 +8,7 @@ export const DEFAULT_IGP_QUOTES: Partial<
 > = {
   [ProtocolType.Sealevel]: '10000',
   [ProtocolType.Cosmos]: {
-    'neutron-1': '270000',
-    'injective-1': '10000000000000000',
+    'neutron-1': '270000', // 0.27 TIA
+    'injective-1': '30000000000000000', // 0.03 INJ
   },
 };

src/consts/links.ts

@@ -1,11 +1,14 @@
 export const links = {
-  home: 'https://www.hyperlane.xyz',
+  home: 'https://injective.com',
+  explorerInj: 'https://explorer.injective.network',
+  explorerInEvm: 'https://inevm.calderaexplorer.xyz',
   explorer: 'https://explorer.hyperlane.xyz',
-  discord: 'https://discord.gg/VK9ZUy3aTV',
-  github: 'https://github.com/hyperlane-xyz/hyperlane-warp-ui-template',
   docs: 'https://docs.hyperlane.xyz',
+  about: 'https://www.hyperlane.xyz',
+  support: 'https://discord.gg/hyperlane',
   gasDocs: 'https://docs.hyperlane.xyz/docs/reference/hooks/interchain-gas',
   chains: 'https://docs.hyperlane.xyz/docs/resources/domains',
+  discord: 'https://discord.gg/hyperlane',
+  github: 'https://github.com/hyperlane-xyz/hyperlane-warp-ui-template',
   twitter: 'https://twitter.com/hyperlane_xyz',
-  blog: 'https://medium.com/hyperlane',
 };

src/consts/tokens.ts

@@ -4,30 +4,6 @@ import { WarpTokenConfig } from '../features/tokens/types';
 // Tokens can be defined here, in tokens.json, or in tokens.yaml
 // The input here is typically the output of the Hyperlane CLI warp deploy command
 export const tokenList: WarpTokenConfig = [
-  // Example collateral token for an EVM chain
-  // {
-  //   type: 'collateral',
-  //   chainId: 5,
-  //   address: '0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6',
-  //   hypCollateralAddress: '0x145de8760021c4ac6676376691b78038d3DE9097',
-  //   name: 'Weth',
-  //   symbol: 'WETH',
-  //   decimals: 18,
-  //   logoURI: '/logos/weth.png', // See public/logos/
-  // },
-
-  // Example NFT (ERC721) token for an EVM chain
-  // {
-  //   chainId: 5,
-  //   name: 'Test721',
-  //   symbol: 'TEST721',
-  //   decimals: 0,
-  //   type: 'collateral',
-  //   address: '0x77566D540d1E207dFf8DA205ed78750F9a1e7c55',
-  //   hypCollateralAddress: '0xDcbc0faAA269Cf649AC8950838664BB7B355BD6B',
-  //   isNft: true,
-  // },
-
   {
     type: 'native',
     chainId: 'injective-1',