Injective rebrand

pull/128/head
J M Rossy 9 months ago
parent cf94b87372
commit 70ccaa5821
  1. 4
      .github/workflows/ci.yml
  2. 2
      CUSTOMIZE.md
  3. BIN
      public/android-chrome-192x192.png
  4. BIN
      public/android-chrome-512x512.png
  5. BIN
      public/apple-touch-icon.png
  6. 1
      public/backgrounds/lines-bg-top.svg
  7. BIN
      public/bg-home.jpg
  8. 2
      public/browserconfig.xml
  9. BIN
      public/favicon-16x16.png
  10. BIN
      public/favicon-32x32.png
  11. BIN
      public/favicon.ico
  12. BIN
      public/icon.png
  13. BIN
      public/logo-with-text.png
  14. BIN
      public/logo.png
  15. 1
      public/logo.svg
  16. BIN
      public/mstile-144x144.png
  17. BIN
      public/mstile-150x150.png
  18. BIN
      public/mstile-310x150.png
  19. BIN
      public/mstile-310x310.png
  20. BIN
      public/mstile-70x70.png
  21. 55
      public/safari-pinned-tab.svg
  22. 2
      src/components/buttons/ConnectAwareSubmitButton.tsx
  23. 21
      src/components/layout/AppLayout.tsx
  24. 2
      src/components/layout/Card.tsx
  25. 68
      src/components/nav/Footer.tsx
  26. 6
      src/components/nav/Header.tsx
  27. 6
      src/consts/app.ts
  28. 24
      src/consts/chains.ts
  29. 2
      src/consts/config.ts
  30. 4
      src/consts/igpQuotes.ts
  31. 11
      src/consts/links.ts
  32. 24
      src/consts/tokens.ts
  33. 2
      src/features/chains/utils.ts
  34. 16
      src/features/transfer/TransferTokenCard.tsx
  35. 2
      src/features/transfer/TransferTokenForm.tsx
  36. 2
      src/features/wallet/WalletControlBar.tsx
  37. 2
      src/images/backgrounds/footer-bg.svg
  38. 2
      src/images/logos/app-logo.svg
  39. 2
      src/images/logos/app-name.svg
  40. 31
      src/pages/_document.tsx
  41. 2
      src/styles/Color.ts
  42. 9
      src/styles/globals.css
  43. 30
      tailwind.config.js

@ -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:

@ -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:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

@ -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>

Before

Width:  |  Height:  |  Size: 278 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 760 B

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

@ -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>

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

@ -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>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -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;

@ -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',
},
};

@ -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>

@ -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',
};

@ -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 />

@ -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';

@ -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: [
{

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

@ -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
},
};

@ -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',
};

@ -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',

@ -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) {

@ -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>
);
}

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

@ -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>

@ -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>

Before

Width:  |  Height:  |  Size: 583 B

After

Width:  |  Height:  |  Size: 583 B

@ -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>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

@ -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 />

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

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

@ -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',

Loading…
Cancel
Save