TO
@@ -461,7 +484,7 @@ export default async function handler(req: NextRequest) {
@@ -490,7 +513,13 @@ export default async function handler(req: NextRequest) {
style={{ height: '64px' }}
/>
)}
-
+
{warpTransfer.amount} {sanitizeSymbol(warpTransfer.token.symbol)}
@@ -502,17 +531,17 @@ export default async function handler(req: NextRequest) {
style={{
display: 'flex',
justifyContent: 'space-between',
- alignItems: 'flex-end',
+ alignItems: 'center',
marginTop: '24px',
- paddingTop: '20px',
- borderTop: '1px solid rgba(95, 138, 250, 0.2)',
}}
>
-
{/* Top decorative line */}
@@ -593,22 +646,12 @@ function DefaultOGImage({ origin }: { origin: string }) {
left: 0,
right: 0,
height: '4px',
- background: 'linear-gradient(90deg, #2362C1 0%, #5F8AFA 50%, #2362C1 100%)',
+ background: 'linear-gradient(90deg, #4C52FF 0%, #9A0DFF 50%, #4C52FF 100%)',
}}
/>
-
-
-
- {APP_NAME}
-
+
+
{APP_DESCRIPTION}
diff --git a/src/styles/Color.ts b/src/styles/Color.ts
index bf4db16d..31268525 100644
--- a/src/styles/Color.ts
+++ b/src/styles/Color.ts
@@ -8,8 +8,10 @@ export const Color = {
white: themeColors.white,
gray: themeColors.gray[500],
lightGray: themeColors.gray[200],
- primary: themeColors.blue[500],
- accent: themeColors.pink[500],
+ primary: themeColors.primary[500],
+ primaryDark: themeColors.primary[950],
+ accent: themeColors.accent[500],
+ accentDark: themeColors.accent[600],
blue: themeColors.blue[500],
pink: themeColors.pink[500],
red: themeColors.red[500],
diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
deleted file mode 100644
index 60c537b4..00000000
--- a/src/styles/fonts.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Space_Grotesk as SpaceGrostek } from 'next/font/google';
-
-export const MAIN_FONT = SpaceGrostek({
- subsets: ['latin'],
- variable: '--font-main',
- preload: true,
- fallback: ['sans-serif'],
-});
diff --git a/src/styles/global.css b/src/styles/global.css
index 1dccd443..d8c98c52 100755
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,30 @@
@tailwind components;
@tailwind utilities;
+/*
+Custom Fonts (falls back to system fonts if not available)
+Place font files in public/fonts/ directory
+===========================================================
+*/
+
+/* PP Valve - Primary font (variable) */
+@font-face {
+ font-family: 'PP Valve';
+ src: url('/fonts/PPValve-PlainVariable.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* PP Fraktion Mono - Secondary/Mono font (variable) */
+@font-face {
+ font-family: 'PP Fraktion Mono';
+ src: url('/fonts/PPFraktionMono-Variable.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+
/*
Normalization
=============
@@ -43,7 +67,7 @@ Background
==========
*/
body {
- background-color: #f3f4f6;
+ background-color: #f8f8ff;
}
/*
@@ -63,6 +87,24 @@ Scrollbar Overrides
body {
scroll-behavior: smooth;
scrollbar-width: thin;
+ scrollbar-color: #e8caff transparent;
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #e8caff;
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #d4a3ff;
}
/* phones */
@@ -172,7 +214,7 @@ Toasts
======
*/
:root {
- --toastify-color-light: #ffffff;
+ --toastify-color-light: #f8f8ff;
--toastify-color-dark: #2e3338;
--toastify-color-info: #3498db;
--toastify-color-success: #35d07f;
@@ -218,3 +260,146 @@ Toasts
--toastify-color-progress-warning: var(--toastify-color-warning);
--toastify-color-progress-error: var(--toastify-color-error);
}
+
+/*
+Hyperlane Widget Overrides
+==========================
+*/
+
+/* Timeline stages - deeper purple to match dark bg */
+[class*='htw-bg-blue-'] {
+ background-color: #4c1d95 !important;
+}
+
+/* Override widget icon SVG fills - blue to purple */
+svg path[fill='#2764C1'],
+svg path[fill='#2362C1'],
+svg path[fill='#2764c1'],
+svg path[fill='#2362c1'],
+svg path[fill='rgb(39, 100, 193)'] {
+ fill: #4c1d95 !important;
+}
+
+/* Override widget icon SVG strokes - blue to purple */
+svg path[stroke='#2764C1'],
+svg path[stroke='#2362C1'],
+svg path[stroke='#2764c1'],
+svg path[stroke='#2362c1'],
+svg [stroke='#2764C1'],
+svg [stroke='#2764c1'] {
+ stroke: #4c1d95 !important;
+}
+
+/* Chevron polygon fills */
+svg polygon[fill='#2764C1'],
+svg polygon[fill='#2764c1'] {
+ fill: #4c1d95 !important;
+}
+
+/* White chevrons - cream to blend with card bg */
+svg path[fill='#ffffff'],
+svg path[fill='#FFFFFF'],
+svg path[fill='white'] {
+ fill: #f8f8ff !important;
+}
+
+/* Timeline hole elements - off-white for visibility */
+.htw-rounded-full.htw-bg-white {
+ background-color: #f8f8ff !important;
+}
+
+/* Widget text styling - default to primary font */
+[class*='htw-'] {
+ font-family: 'PP Fraktion Mono', system-ui, sans-serif;
+}
+
+/* Chain picker subtitles (Mainnet/Testnet labels) - mono */
+.htw-text-gray-500.htw-text-xs {
+ font-family: 'PP Fraktion Mono', system-ui, monospace !important;
+}
+
+/* Explicitly set mono for technical content */
+.htw-font-mono,
+[class*='htw-'] input,
+[class*='htw-'] textarea,
+[class*='htw-'] a[href^='http'],
+[class*='htw-'] a[href^='https'] {
+ font-family: 'PP Fraktion Mono', system-ui, monospace !important;
+}
+
+/* Modal and panel backgrounds - cream instead of pure white */
+.htw-bg-white {
+ background-color: #f8f8ff !important;
+}
+
+/* Input backgrounds in widgets */
+[class*='htw-'] input {
+ background-color: #f8f8ff !important;
+}
+
+/* Modal backdrop - darker fade and proper z-index */
+.htw-bg-black\/25 {
+ background-color: rgba(0, 0, 0, 0.5) !important;
+ z-index: 30 !important;
+}
+
+/* Modal panel container - above backdrop */
+.htw-z-20 {
+ z-index: 40 !important;
+}
+
+/* Widget gray backgrounds - match cream white */
+.htw-bg-gray-100 {
+ background-color: #f8f8ff !important; /* same as our white */
+}
+
+/* Widget hover states - match message table accent colors */
+[class*='htw-']:hover.hover\:htw-bg-gray-100,
+.hover\:htw-bg-gray-100:hover {
+ background-color: #e8caff !important; /* accent-50 */
+}
+
+[class*='htw-']:hover.hover\:htw-bg-gray-200,
+.hover\:htw-bg-gray-200:hover {
+ background-color: #d9a4ff !important; /* accent-100 */
+}
+
+/* Tooltip popups - darker background for contrast against header */
+.react-tooltip {
+ background-color: #1a1a2e !important;
+ color: #e2e8f0 !important;
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
+ opacity: 1 !important;
+}
+
+/* Tooltip trigger icons - slightly darker for readability */
+a[data-tooltip-id] .htw-bg-gray-200 {
+ background-color: #d1d5db !important;
+}
+
+a[data-tooltip-id] .htw-border-gray-300 {
+ border-color: #9ca3af !important;
+}
+
+/* Chain metadata modal - make dark chain logos visible */
+.htw-space-y-4 img[alt] {
+ filter: saturate(1.2) brightness(1.1);
+}
+
+/* RPC/Explorer status circles - brighter, more vivid colors */
+.htw-bg-green-500 {
+ background-color: #4ade80 !important;
+}
+
+.htw-bg-red-500 {
+ background-color: #f87171 !important;
+}
+
+.htw-bg-gray-400 {
+ background-color: #a1a1aa !important;
+}
+
+/* Add connection plus icon - dimmed so it doesn't look like a status indicator */
+.htw-space-y-1\.5 > button:last-child svg {
+ opacity: 0.35;
+}
diff --git a/src/utils/string.ts b/src/utils/string.ts
index 98cad8fe..16848a3d 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -28,3 +28,8 @@ export function isWarpRouteIdFormat(input: string): boolean {
const slashCount = (trimmed.match(/\//g) || []).length;
return slashCount === 1;
}
+
+export function truncateString(str: string, startChars = 15, endChars = 15) {
+ if (!str || str.length <= startChars + endChars + 3) return str;
+ return `${str.slice(0, startChars)}...${str.slice(-endChars)}`;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index f4cd6b4e..18c10350 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,36 +1,92 @@
/** @type {import('tailwindcss').Config} */
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require('tailwindcss/defaultTheme');
+const defaultColors = require('tailwindcss/colors');
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
fontFamily: {
- sans: ['var(--font-main)'],
- serif: ['Garamond', 'serif'],
- mono: ['Courier New', 'monospace'],
+ sans: ['PP Fraktion Mono', 'system-ui', 'sans-serif'],
+ mono: ['PP Fraktion Mono', 'system-ui', 'monospace'],
+ secondary: ['PP Fraktion Mono', 'system-ui', 'sans-serif'],
},
screens: {
all: '1px',
xs: '480px',
...defaultTheme.screens,
},
+ borderRadius: {
+ none: '0',
+ sm: '1px',
+ DEFAULT: '2px',
+ md: '3px',
+ lg: '4px',
+ xl: '6px',
+ '2xl': '8px',
+ '3xl': '10px',
+ full: '9999px',
+ },
extend: {
colors: {
- black: '#010101',
- white: '#ffffff',
- gray: {...defaultTheme.colors.gray, 150: '#EBEDF0', 250: '#404040', 350: '#6B6B6B'},
+ black: '#3d304c',
+ white: '#f8f8ff',
+ cream: {
+ 100: '#FDFBFF',
+ 200: '#FCF9FE',
+ 300: '#F8F8FF',
+ },
+ gray: {
+ ...defaultColors.gray,
+ 150: '#EBEDF0',
+ 250: '#404040',
+ 300: '#D9D9D9',
+ 350: '#6B6B6B',
+ 400: '#BFBFBF',
+ 450: '#B6B6B6',
+ 900: '#332840',
+ 950: '#221A2D',
+ },
+ primary: {
+ 25: '#E2C4FC',
+ 50: '#E8CAFF',
+ 100: '#D9A4FF',
+ 200: '#C97EFF',
+ 300: '#B959FF',
+ 400: '#AA33FF',
+ 500: '#9A0DFF',
+ 600: '#860FDC',
+ 700: '#7211B9',
+ 800: '#5E1396',
+ 900: '#4A1673',
+ 950: '#1a0a28',
+ },
+ accent: {
+ 25: '#F8F0FF',
+ 50: '#E8CAFF',
+ 100: '#D9A4FF',
+ 200: '#C97EFF',
+ 300: '#B959FF',
+ 400: '#AA33FF',
+ 500: '#9A0DFF',
+ 600: '#860FDC',
+ 700: '#7211B9',
+ 800: '#5E1396',
+ 900: '#4A1673',
+ },
blue: {
- 50: '#E6EDF9',
- 100: '#CDDCF4',
- 200: '#A7C2EC',
- 300: '#82A8E4',
- 400: '#5385D2',
- 500: '#2764c1',
- 600: '#1D4685',
- 700: '#162A4A',
- 800: '#11213B',
- 900: '#0D192C',
+ 25: '#F8F0FF',
+ 50: '#DBD6FF',
+ 100: '#BFBBFF',
+ 200: '#A2A1FF',
+ 300: '#8687FF',
+ 400: '#696DFF',
+ 500: '#4C52FF',
+ 600: '#4549DC',
+ 700: '#3E40B9',
+ 800: '#373696',
+ 900: '#302D73',
+ 950: '#292350',
},
beige: {
100: '#F6F4F1',
@@ -67,7 +123,7 @@ module.exports = {
900: '#390806',
},
green: {
- 50: '#D3E3DB',
+ 50: '#00C467',
100: '#BED5C9',
200: '#93BAA6',
300: '#679F82',
@@ -92,6 +148,9 @@ module.exports = {
},
},
fontSize: {
+ xxs: '0.7rem',
+ xs: '0.775rem',
+ sm: '0.85rem',
md: '0.95rem',
},
spacing: {
@@ -101,17 +160,34 @@ module.exports = {
128: '32rem',
144: '36rem',
},
- borderRadius: {
- none: '0',
- sm: '0.2rem',
- DEFAULT: '0.3rem',
- md: '0.4rem',
- lg: '0.5rem',
- full: '9999px',
- },
blur: {
xs: '3px',
},
+ animation: {
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;',
+ },
+ backgroundImage: ({ theme }) => ({
+ 'app-gradient': `radial-gradient(81.94% 51.02% at 50% 100%, ${theme('colors.primary.100')} 0%, ${theme('colors.cream.300')} 100%)`,
+ 'accent-gradient': `radial-gradient(61.48% 118.8% at 50.08% 92%, ${theme('colors.primary.200')} 0%, ${theme('colors.primary.500')} 100%)`,
+ 'card-gradient': `linear-gradient(180deg, ${theme('colors.white')} 0%, ${theme('colors.cream.200')} 100%)`,
+ 'brand-gradient': `radial-gradient(ellipse 200% 150% at 50% 100%, ${theme('colors.primary.800')} 0%, ${theme('colors.primary.950')} 40%, #0d0612 100%)`,
+ }),
+ boxShadow: ({ theme }) => ({
+ 'accent-glow': `inset 0 0 20px 0 rgba(154, 13, 255, 0.35)`,
+ card: `0px 4px 6px ${theme('colors.gray.950')}1A`,
+ button: `0 4px 6px ${theme('colors.gray.950')}1A`,
+ input: `0 0 4px ${theme('colors.gray.400')}4D`,
+ }),
+ dropShadow: ({ theme }) => ({
+ button: `0 4px 6px ${theme('colors.gray.950')}0D`,
+ }),
+ transitionProperty: {
+ height: 'height, max-height',
+ spacing: 'margin, padding',
+ },
+ maxWidth: {
+ 'xl-1': '39.5rem',
+ },
},
},
plugins: [],