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/backgrounds/lines-bg-top.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="2 39 882.5 72"><path d="M783.5 40.2C622 124.6 158.7 96.4 8 40.2" style="fill:none;stroke:#fff;stroke-width:2px;"/><path d="M884.5 39C586 166.9 152.9 96.9 2 39" style="fill:none;stroke:#fff;stroke-width:4px;"/></svg>

public/browserconfig.xml

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

public/logo.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 301 324"><path d="M166.2 1h61.2A20 20 0 0 1 246 14L300 158.3a5 5 0 0 1 0 3.4l-.3.9L246 309.8a20 20 0 0 1-18.8 13.2H166a5 5 0 0 1-4.7-6.6l55.2-158.1-55-150.6a5 5 0 0 1 4.7-6.7Z" fill="#010101"/><path d="M6.3 1h61.3a20 20 0 0 1 18.7 13L140 158.3a5 5 0 0 1 0 3.4l-.3.9-53.5 147.2A20 20 0 0 1 67.4 323H6.2a5 5 0 0 1-4.7-6.6l55.2-158.1L1.7 7.7A5 5 0 0 1 6.2 1Z" fill="#010101"/><path d="m216.5 158.3-55-150.6a5 5 0 0 1 4.7-6.7h61.2A20 20 0 0 1 246 14L300 158.3a5 5 0 0 1 0 3.4L246 309.8a20 20 0 0 1-18.8 13.2H166a5 5 0 0 1-4.7-6.6l26.4-75.8 28.8-82.3Zm0 0-55 158a5 5 0 0 0 4.7 6.7h61m-10.7-164.7-55-150.5a5 5 0 0 1 4.7-6.8h61.2m-10.9 157.3-55.2 158a5 5 0 0 0 4.7 6.7h61.3m-10.8-164.7-55-150.6a5 5 0 0 1 4.7-6.7h61.2m0 0A20 20 0 0 1 246 14L300 158.3m0 0a5 5 0 0 1 0 3.4m0-3.4v2.5a5 5 0 0 1-.3 1.8m.3-.9L246 309.8m53.8-148-.3.8M246 309.8a20 20 0 0 1-18.8 13.2m18.8-13.2 53.5-147.2m-243-4.3-55.1 158a5 5 0 0 0 4.7 6.7h61.2a20 20 0 0 0 18.8-13.2l53.5-147.2.4-.9a5 5 0 0 0 0-3.4L86.2 14A20 20 0 0 0 67.6 1H6.3a5 5 0 0 0-4.7 6.7l55 150.6Z" stroke="#010101"/><path d="M204.5 124.5H128v70h76.5l12.5-36-12.5-34Z" fill="#010101" stroke="#010101"/></svg>

public/safari-pinned-tab.svg

@@ -2,23 +2,52 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
  preserveAspectRatio="xMidYMid meet">
 <metadata>
 Created by potrace 1.14, written by Peter Selinger 2001-2017
 </metadata>
-<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
-<path d="M0 5000 l0 -5000 5000 0 5000 0 0 5000 0 5000 -5000 0 -5000 0 0
--5000z m4016 2455 c67 -20 140 -70 172 -118 15 -22 185 -436 379 -921 l352
--881 630 -3 630 -2 -14 32 c-7 18 -171 437 -364 930 -316 807 -349 899 -340
-926 5 16 21 34 35 41 18 8 181 11 558 11 582 0 585 0 678 -59 26 -17 60 -48
-76 -70 23 -32 477 -1153 867 -2143 l66 -167 -446 -1147 c-245 -631 -455 -1164
--465 -1184 -26 -51 -110 -124 -168 -146 -43 -17 -93 -19 -600 -22 l-553 -3
--29 30 c-17 16 -30 36 -30 43 0 11 603 1636 675 1821 l15 37 -623 0 -622 0
--334 -863 c-184 -474 -344 -881 -357 -903 -30 -54 -84 -101 -154 -133 l-55
--26 -540 -3 c-297 -2 -550 0 -562 3 -29 7 -63 44 -63 68 0 11 205 568 455
-1237 l455 1218 -456 1163 c-338 864 -453 1170 -449 1189 3 14 16 33 28 42 20
-16 66 18 563 18 448 0 549 -3 590 -15z"/>
+<path d="M3269 6996 c-2 -2 -42 -7 -89 -10 -47 -3 -98 -8 -115 -11 -31 -5 -67
+-10 -149 -21 -47 -7 -47 -18 0 -27 11 -2 26 -6 34 -9 8 -3 89 -30 180 -59 307
+-98 568 -216 740 -331 114 -76 264 -191 370 -282 44 -38 205 -199 245 -246
+151 -174 267 -395 320 -609 80 -323 43 -635 -126 -1051 -108 -264 -318 -612
+-695 -1150 -213 -306 -276 -414 -338 -587 -102 -288 -123 -586 -59 -873 9 -41
+17 -77 18 -80 12 -66 100 -258 160 -352 227 -351 579 -586 995 -663 72 -14
+354 -13 438 0 346 57 675 242 895 504 40 48 77 92 84 99 83 87 277 371 375
+547 61 108 161 314 173 355 4 14 11 30 15 35 16 20 115 317 145 435 16 63 19
+74 30 123 14 60 55 299 60 352 4 33 9 71 11 85 3 14 6 140 8 280 3 232 -6 420
+-29 556 -3 21 -8 54 -11 72 -7 54 -44 231 -65 312 -87 331 -226 662 -395 938
+-38 62 -74 122 -80 133 -6 10 -18 27 -27 37 -10 10 -17 23 -17 29 0 6 -3 13
+-7 15 -5 2 -28 30 -52 63 -222 301 -439 512 -705 687 l-91 59 95 -88 c481
+-446 686 -776 824 -1328 19 -77 37 -153 39 -170 3 -16 8 -50 12 -75 4 -25 9
+-56 12 -70 10 -48 12 -455 3 -530 -5 -41 -12 -97 -15 -125 -31 -260 -128 -643
+-238 -945 -155 -425 -365 -836 -554 -1088 -228 -303 -523 -443 -789 -376 -196
+49 -352 212 -400 419 -49 213 9 426 181 660 288 392 562 873 736 1290 91 219
+170 452 205 605 4 19 8 37 9 40 49 204 64 345 60 560 -2 147 -7 206 -25 285
+-73 326 -250 624 -555 931 -153 154 -281 261 -450 376 -193 131 -221 145 -356
+177 -125 30 -328 66 -429 76 -30 3 -71 8 -90 11 -40 5 -516 15 -521 10z"/>
+<path d="M1957 6384 c-1 -1 -33 -5 -72 -8 -379 -32 -727 -220 -1000 -540 -163
+-191 -320 -412 -428 -602 -59 -105 -149 -286 -172 -350 -10 -27 -21 -53 -25
+-59 -31 -46 -160 -464 -184 -600 -24 -132 -34 -190 -42 -244 -3 -25 -8 -57
+-10 -71 -19 -119 -26 -559 -11 -705 3 -38 9 -97 12 -130 10 -101 44 -283 80
+-430 149 -610 458 -1165 902 -1621 111 -114 190 -180 323 -270 102 -69 178
+-114 137 -81 -149 121 -385 368 -508 532 -183 245 -333 577 -394 878 -2 9 -6
+20 -8 25 -3 4 -8 24 -11 44 -3 21 -11 59 -17 85 -26 115 -37 273 -34 473 2
+113 6 216 8 230 3 14 8 50 12 80 15 120 23 177 30 200 2 8 6 33 10 55 3 22 12
+67 20 100 9 33 17 70 20 82 34 160 142 491 229 705 151 373 363 761 521 953
+118 145 272 262 405 310 55 20 54 20 110 28 90 14 123 14 196 2 278 -49 474
+-311 457 -613 -8 -152 -68 -298 -194 -473 -456 -636 -776 -1271 -929 -1844
+-29 -107 -34 -133 -46 -205 -3 -19 -10 -54 -15 -77 -17 -80 -24 -188 -23 -363
+1 -137 6 -197 23 -277 55 -263 178 -506 385 -763 71 -87 269 -288 341 -345 27
+-22 59 -48 70 -59 59 -54 327 -240 410 -284 22 -11 56 -25 75 -31 41 -12 225
+-52 257 -56 11 -2 29 -6 40 -9 10 -3 41 -8 68 -11 28 -3 61 -7 75 -10 175 -35
+698 -41 880 -11 14 3 45 7 70 11 94 12 125 17 128 20 2 1 -43 17 -100 35 -424
+131 -689 245 -903 389 -384 257 -663 540 -809 821 -52 101 -119 279 -131 353
+-3 18 -7 39 -10 47 -14 54 -22 297 -11 370 2 14 6 50 10 80 37 283 219 715
+454 1080 66 104 323 485 403 600 44 63 110 159 145 212 134 201 232 456 260
+678 3 25 7 51 10 58 6 21 5 281 -1 332 -46 338 -172 596 -405 830 -58 59 -132
+126 -165 151 -253 190 -526 284 -848 292 -38 1 -69 1 -70 1z"/>
 </g>
 </svg>

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,48 +1,42 @@
-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
@@ -50,7 +44,20 @@ export function Footer() {
                     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',

src/features/chains/utils.ts

@@ -10,7 +10,7 @@ export function getChainDisplayName(id: ChainCaip2Id, shortName = false) {
   const metadata = getMultiProvider().tryGetChainMetadata(reference || 0);
   if (!metadata) return 'Unknown';
   const displayName = shortName ? metadata.displayNameShort : metadata.displayName;
-  return toTitleCase(displayName || metadata.displayName || metadata.name);
+  return displayName || metadata.displayName || toTitleCase(metadata.name);
 }
 
 export function isPermissionlessChain(id: ChainCaip2Id) {

src/features/transfer/TransferTokenCard.tsx

@@ -1,26 +1,12 @@
-import { WideChevron } from '@hyperlane-xyz/widgets';
-
 import { Card } from '../../components/layout/Card';
 import { getWarpContext } from '../../context/context';
-import { Color } from '../../styles/Color';
 
 import { TransferTokenForm } from './TransferTokenForm';
 
 export function TransferTokenCard() {
   return (
     <Card className="w-100 sm:w-[31rem]">
-      <>
-        <div className="absolute left-0 right-0 -top-36 xs:-top-[6.5rem] flex justify-center overflow-hidden z-10">
-          <WideChevron
-            direction="s"
-            height="100%"
-            width="100"
-            rounded={true}
-            color={Color.primaryBlue}
-          />
-        </div>
-        <TransferTokenForm tokenRoutes={getWarpContext().routes} />
-      </>
+      <TransferTokenForm tokenRoutes={getWarpContext().routes} />
     </Card>
   );
 }

src/features/transfer/TransferTokenForm.tsx

@@ -322,7 +322,7 @@ function ButtonSection({
       </SolidButton>
       <SolidButton
         type="button"
-        color="pink"
+        color="blue"
         onClick={triggerTransactionsHandler}
         classes="flex-1 px-3 py-1.5"
       >

src/features/wallet/WalletControlBar.tsx

@@ -64,7 +64,7 @@ export function WalletControlBar() {
             <div className="flex items-center justify-center">
               <div
                 style={{ height: 26, width: 26 }}
-                className="bg-pink-500 text-white flex items-center justify-center rounded-full"
+                className="bg-blue-500 text-white flex items-center justify-center rounded-full"
               >
                 {numReady}
               </div>

src/images/backgrounds/footer-bg.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 1430 135.87"><defs><style>.cls-1{stroke-width:8px;}.cls-1,.cls-2{fill:none;stroke:#fff;}.cls-3{fill:#d631b9;}.cls-2{stroke-width:4px;}</style></defs><path class="cls-3" d="m3.23,20.37l83.5,24.75,127.5,27.5,140.5,23,190,19.5,185,6.75h119l111.5-4,145-10.25,139-15.5,137-21.75,61.98-12.2v77.69H3.23V20.37Z"/><path class="cls-2" d="m1449.18,1.9c-28.89,9.34-56.79,16.73-56.79,16.73C859.76,144.83,458.49,146.53,5.87,20.51"/><path class="cls-1" d="m1449.99,56.89c-2.24.46-4.47.92-6.71,1.37C911.32,166.5,318.58,125.03,1.27,18.54"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 1430 135.87"><defs><style>.cls-1{stroke-width:8px;}.cls-1,.cls-2{fill:none;stroke:#fff;}.cls-3{fill:#0082FA;}.cls-2{stroke-width:4px;}</style></defs><path class="cls-3" d="m3.23,20.37l83.5,24.75,127.5,27.5,140.5,23,190,19.5,185,6.75h119l111.5-4,145-10.25,139-15.5,137-21.75,61.98-12.2v77.69H3.23V20.37Z"/><path class="cls-2" d="m1449.18,1.9c-28.89,9.34-56.79,16.73-56.79,16.73C859.76,144.83,458.49,146.53,5.87,20.51"/><path class="cls-1" d="m1449.99,56.89c-2.24.46-4.47.92-6.71,1.37C911.32,166.5,318.58,125.03,1.27,18.54"/></svg>

src/images/logos/app-logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="550" height="494" fill="none"><path fill="#D631B9" d="M270.65 0h100.47c13.7 0 25.97 7.96 30.75 19.96l88.19 221.19a7.2 7.2 0 0 1 .02 5.3l-.5 1.26v.02l-87.81 225.8c-4.72 12.12-17.04 20.19-30.85 20.19H270.47c-5.65 0-9.6-5.21-7.75-10.2l90.55-242.37L262.95 10.3c-1.96-5 2-10.3 7.7-10.3Z"/><path fill="#D631B9" d="M8.4 0h100.46c13.7 0 25.97 7.96 30.75 19.96l88.19 221.19a7.2 7.2 0 0 1 .02 5.3l-.5 1.26v.02l-87.81 225.8c-4.72 12.12-17.04 20.19-30.85 20.19H8.21c-5.65 0-9.6-5.21-7.74-10.2L91 241.15.7 10.3c-1.96-5 2-10.3 7.7-10.3Z"/><path fill="#D631B9" d="M338.83 194H197v107h141.83L362 245.97 338.83 194Z"/><path fill="#fff" d="M328.65 0h100.47c13.7 0 25.97 7.96 30.75 19.96l88.19 221.19a7.2 7.2 0 0 1 .02 5.3l-.5 1.26v.02l-87.81 225.8c-4.72 12.12-17.04 20.19-30.85 20.19H328.47c-5.65 0-9.6-5.21-7.75-10.2l90.55-242.37L320.95 10.3c-1.96-5 2-10.3 7.7-10.3Z"/><path fill="#fff" d="M66.4 0h100.46c13.7 0 25.97 7.96 30.75 19.96l88.19 221.19a7.2 7.2 0 0 1 .02 5.3l-.5 1.26v.02l-87.81 225.8c-4.72 12.12-17.04 20.19-30.85 20.19H66.21c-5.65 0-9.6-5.21-7.74-10.2L149 241.15 58.7 10.3c-1.96-5 2-10.3 7.7-10.3Z"/><path fill="#fff" d="M396.83 194H255v107h141.83L420 245.97 396.83 194Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-32" data-icon="logo" data-prefix="fab" viewBox="0 0 33.36 33.36"><path fill="url(#a)" d="M4.04 5.76 4.7 5l.04-.03.08-.06.02-.03c.15-.14.31-.29.5-.42a6.73 6.73 0 0 1 9.04.47c2.84 2.66 2.59 6.95.32 9.8-2.86 4.25-7.8 10.18-.97 15.5 1.23.95 2.13 1.74 6 2.86-2.53.46-4.87.32-7.48-.35-1.84-1.04-4.74-3.27-5.73-6.28-1.5-4.57 2.63-11.39 4.61-14.02 2.74-3.64-1.69-7.57-4.94-3.18-1.7 2.3-4.68 8.78-3.64 13.59.6 2.73 1.4 4.71 4.6 7.44-.59-.35-1.16-.74-1.72-1.19A16.86 16.86 0 0 1 4.04 5.76Z"/><path fill="url(#b)" d="m29.32 27.6-.65.76-.04.02-.07.07-.02.02a7.52 7.52 0 0 1-2.59 1.57 6.73 6.73 0 0 1-6.96-1.6c-2.84-2.67-2.59-6.96-.32-9.81 2.87-4.25 7.8-10.18.97-15.5-1.23-.95-2.14-1.74-6-2.86 2.53-.46 4.87-.32 7.48.35 1.84 1.04 4.74 3.27 5.73 6.28 1.5 4.56-2.63 11.39-4.61 14.02-2.74 3.63 1.68 7.57 4.94 3.17 1.7-2.29 4.67-8.77 3.64-13.58-.6-2.73-1.4-4.72-4.6-7.45.59.35 1.16.75 1.72 1.2a16.86 16.86 0 0 1 1.38 23.34Z"/><defs><linearGradient id="a" x1="0" x2="33.36" y1="18.15" y2="18.15" gradientUnits="userSpaceOnUse"><stop stop-color="#0082FA"/><stop offset="1" stop-color="#00F2FE"/></linearGradient><linearGradient id="b" x1="0" x2="33.36" y1="15.21" y2="15.21" gradientUnits="userSpaceOnUse"><stop stop-color="#0082FA"/><stop offset="1" stop-color="#00F2FE"/></linearGradient></defs></svg>

src/pages/_document.tsx

@@ -1,5 +1,7 @@
 import { Head, Html, Main, NextScript } from 'next/document';
 
+import { APP_DESCRIPTION, APP_NAME, APP_URL } from '../consts/app';
+
 export default function Document() {
   return (
     <Html>
@@ -10,33 +12,24 @@ export default function Document() {
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
-        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#025aa1" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
         <link rel="shortcut icon" href="/favicon.ico" />
-        <meta name="msapplication-TileColor" content="#025aa1" />
+        <meta name="msapplication-TileColor" content="#ffffff" />
         <meta name="theme-color" content="#ffffff" />
 
-        <meta name="application-name" content="Hyperlane Warp Template UI" />
-        <meta
-          name="keywords"
-          content="Hyperlane Warp Route Template UI Token Bridge Interchain App"
-        />
-        <meta
-          name="description"
-          content="A web app template for building Hyperlane Warp Route UIs"
-        />
+        <meta name="application-name" content={APP_NAME} />
+        <meta name="keywords" content={APP_NAME + ' Hyperlane Token Bridge Interchain App'} />
+        <meta name="description" content={APP_DESCRIPTION} />
 
         <meta name="HandheldFriendly" content="true" />
-        <meta name="apple-mobile-web-app-title" content="Hyperlane Warp Template UI" />
+        <meta name="apple-mobile-web-app-title" content={APP_NAME} />
         <meta name="apple-mobile-web-app-capable" content="yes" />
 
-        <meta property="og:url" content="https://hyperlane.xyz" />
-        <meta property="og:title" content="Hyperlane Warp Template UI" />
+        <meta property="og:url" content={APP_URL} />
+        <meta property="og:title" content={APP_NAME} />
         <meta property="og:type" content="website" />
-        <meta property="og:image" content="https://hyperlane.xyz/logo.png" />
-        <meta
-          property="og:description"
-          content="A web app template for building Hyperlane Warp Route UIs"
-        />
+        <meta property="og:image" content={`${APP_URL}/logo.png`} />
+        <meta property="og:description" content={APP_DESCRIPTION} />
       </Head>
       <body className="text-black">
         <Main />

src/styles/Color.ts

@@ -4,7 +4,7 @@ export enum Color {
   primaryWhite = '#FFFFFF',
   primaryGray = '#6B7280',
   lightGray = '#D0D4DB',
-  primaryBlue = '#025AA1',
+  primaryBlue = '#0082FA',
   primaryPink = '#D631B9',
   primaryBeige = '#F1EDE9',
   primaryRed = '#BF1B15',

src/styles/globals.css

@@ -34,6 +34,15 @@ select:focus {
   outline: none;
 }
 
+/* 
+Backgrounds
+============
+*/
+
+#app-content {
+ background: url("/bg-home.jpg") no-repeat top;
+}
+
 /*
 Text and shadows
 ================

tailwind.config.js

@@ -22,15 +22,15 @@ module.exports = {
         gray: {...defaultTheme.colors.gray, 150: '#EBEDF0', 250: '#404040', 350: '#6B6B6B'},
         blue: {
           50: '#E6EDF9',
-          100: '#CDDCF4',
-          200: '#A7C2EC',
-          300: '#82A8E4',
-          400: '#5385D2',
-          500: '#2362C0',
-          600: '#1D4685',
-          700: '#162A4A',
-          800: '#11213B',
-          900: '#0D192C',
+          100: '#CCE6FE',
+          200: '#99CDFD',
+          300: '#66B4FC',
+          400: '#339BFB',
+          500: '#0082FA',
+          600: '#006FD6',
+          700: '#005CB2',
+          800: '#004A8E',
+          900: '#00376B',
         },
         red: {
           100: '#EBBAB8',
@@ -67,18 +67,6 @@ module.exports = {
           800: '#6B185C',
           900: '#400E37',
         },
-        // Neutron mint/teal
-        mint: {
-          50: '#e5faf4',
-          100: '#b3f1e0',
-          200: '#88e9ce',
-          300: '#5ce1bc',
-          400: '#47ddb3',
-          500: '#31D99C',
-          600: '#25cb9d',
-          700: '#21b68c',
-          800: '#1ea07b'
-        }
       },
       fontSize: {
         md: '0.95rem',