Skip to content

Commit 184a6c1

Browse files
jmrossyjmrossy
authoredOct 14, 2024··
chore: Auto-format tailwind classes (#119)
- Upgrade yarn, prettier - Setup react-query lint rules - Enable formatting of tailwind classes
1 parent 8da2ad6 commit 184a6c1

36 files changed

+2514
-2435
lines changed
 

‎.eslintrc

+3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"extends": [
1616
"eslint:recommended",
1717
"plugin:@typescript-eslint/recommended",
18+
"plugin:@tanstack/eslint-plugin-query/recommended",
1819
"next",
1920
"next/core-web-vitals",
2021
"prettier"
@@ -23,7 +24,9 @@
2324
"no-console": ["warn"],
2425
"no-eval": ["error"],
2526
"no-ex-assign": ["error"],
27+
"no-extra-boolean-cast": ["error"],
2628
"no-constant-condition": ["off"],
29+
"guard-for-in": ["error"],
2730
"@typescript-eslint/ban-ts-comment": ["off"],
2831
"@typescript-eslint/explicit-module-boundary-types": ["off"],
2932
"@typescript-eslint/no-explicit-any": ["off"],

‎.prettierrc

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"printWidth": 100,
44
"singleQuote": true,
55
"trailingComma": "all",
6-
"importOrder": ["^@hyperlane-xyz/(.*)$", "^../(.*)$", "^./(.*)$"],
7-
"importOrderSeparation": true,
8-
"importOrderSortSpecifiers": true
6+
"plugins": [
7+
"prettier-plugin-organize-imports",
8+
"prettier-plugin-tailwindcss"
9+
],
10+
"tailwindFunctions": ["clsx"]
911
}

‎.vscode/settings.json

+1
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,5 @@
3838
},
3939
"editor.tabSize": 2,
4040
"editor.detectIndentation": false,
41+
"tailwindCSS.experimental.classRegex": [["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]]
4142
}

‎.yarn/releases/yarn-4.0.1.cjs

-893
This file was deleted.

‎.yarn/releases/yarn-4.5.0.cjs

+925
Large diffs are not rendered by default.

‎.yarnrc.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ plugins:
1010
- path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
1111
spec: "https://mskelton.dev/yarn-outdated/v3"
1212

13-
yarnPath: .yarn/releases/yarn-4.0.1.cjs
13+
yarnPath: .yarn/releases/yarn-4.5.0.cjs

‎package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"zustand": "^4.5.5"
2929
},
3030
"devDependencies": {
31-
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
31+
"@tanstack/eslint-plugin-query": "^5.28.6",
3232
"@types/jest": "^29.5.3",
3333
"@types/node": "^18.11.18",
3434
"@types/react": "^18.0.27",
@@ -41,15 +41,17 @@
4141
"eslint-config-prettier": "^8.8.0",
4242
"jest": "^29.6.3",
4343
"postcss": "^8.4.21",
44-
"prettier": "^2.8.4",
44+
"prettier": "^3.2.5",
45+
"prettier-plugin-organize-imports": "^4.1.0",
46+
"prettier-plugin-tailwindcss": "^0.6.8",
4547
"tailwindcss": "^3.4.13",
4648
"ts-node": "^10.9.1",
4749
"typescript": "^5.5.4"
4850
},
4951
"homepage": "https://www.hyperlane.xyz",
5052
"license": "Apache-2.0",
5153
"main": "dist/src/index.js",
52-
"packageManager": "yarn@4.0.1",
54+
"packageManager": "yarn@4.5.0",
5355
"private": true,
5456
"repository": {
5557
"type": "git",

‎src/AppLayout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
2020
</Head>
2121
<div
2222
style={styles.container}
23-
className="relative w-full min-w-screen h-full min-h-screen flex flex-col justify-between bg-blue-500"
23+
className="min-w-screen relative flex h-full min-h-screen w-full flex-col justify-between bg-blue-500"
2424
>
2525
{/* <InfoBanner /> */}
2626
<Header pathName={pathName} />
27-
<div className="max-w-5xl mx-auto grow">
27+
<div className="mx-auto max-w-5xl grow">
2828
<main style={styles.main} className="relative min-h-full pt-3">
2929
{children}
3030
</main>

‎src/components/buttons/RadioButtons.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface Props {
99

1010
export function RadioButtons({ options, selected, onChange, label }: Props) {
1111
return (
12-
<div className="rounded border border-gray-200 overflow-hidden">
12+
<div className="overflow-hidden rounded border border-gray-200">
1313
<RadioGroup value={selected} onChange={onChange}>
1414
{label && <RadioGroup.Label className="sr-only">{label}</RadioGroup.Label>}
1515
<div className="flex items-center divide-x">
@@ -18,8 +18,7 @@ export function RadioButtons({ options, selected, onChange, label }: Props) {
1818
key={o.value}
1919
value={o.value}
2020
className={({ checked }) =>
21-
`${checked ? 'bg-blue-500 hover:bg-blue-400' : 'bg-white hover:bg-gray-100'}
22-
relative flex cursor-pointer px-2 py-1.5 outline-none`
21+
`${checked ? 'bg-blue-500 hover:bg-blue-400' : 'bg-white hover:bg-gray-100'} relative flex cursor-pointer px-2 py-1.5 outline-none`
2322
}
2423
>
2524
{({ checked }) => (

‎src/components/errors/ErrorBoundary.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class ErrorBoundary extends Component<any, ErrorBoundaryState> {
2929
if (errorInfo) {
3030
const details = errorInfo.message || JSON.stringify(errorInfo);
3131
return (
32-
<div className="w-screen h-screen flex items-center justify-center bg-gray-50">
32+
<div className="flex h-screen w-screen items-center justify-center bg-gray-50">
3333
<div className="flex flex-col items-center">
3434
<Image src={ErrorIcon} width={80} height={80} alt="" />
3535
<h1 className="mt-5 text-lg">Fatal Error Occurred</h1>

‎src/components/icons/HelpIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function _HelpIcon({ text, size = 16 }: { text: string; size?: number }) {
1616
title="Help"
1717
width={size}
1818
height={size}
19-
className="border border-gray-400 rounded-full p-px"
19+
className="rounded-full border border-gray-400 p-px"
2020
{...tooltipProps}
2121
>
2222
<QuestionMarkIcon height={size} width={size} color={Color.lightGray} className="opacity-50" />

‎src/components/input/SelectField.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function SelectField(props: Props) {
1919

2020
return (
2121
<select
22-
className={`px-2 py-1 text-sm font-light border border-gray-400 rounded bg-transparent invalid:text-gray-400 ${
22+
className={`rounded border border-gray-400 bg-transparent px-2 py-1 text-sm font-light invalid:text-gray-400 ${
2323
classes || ''
2424
}`}
2525
{...passThruProps}

‎src/components/layout/Card.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@ interface Props {
77

88
export function Card({ className, padding = 'p-4 sm:p-5', children }: PropsWithChildren<Props>) {
99
return (
10-
<div className={`bg-white rounded-xl overflow-auto ${padding} ${className}`}>{children}</div>
10+
<div className={`overflow-auto rounded-xl bg-white ${padding} ${className}`}>{children}</div>
1111
);
1212
}

‎src/components/layout/HrDivider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ interface Props {
44

55
export function HrDivider(props: Props) {
66
const { classes } = props;
7-
return <hr className={`w-full h-px border-none bg-gray-300 ${classes}`} />;
7+
return <hr className={`h-px w-full border-none bg-gray-300 ${classes}`} />;
88
}

‎src/components/nav/Footer.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ const footerLinks3 = [
3333

3434
export function Footer() {
3535
return (
36-
<footer className="text-white px-8 pt-14 pb-5 bg-gradient-to-b from-transparent to-black/40">
37-
<div className="flex flex-col sm:flex-row gap-10 items-center justify-between">
36+
<footer className="bg-gradient-to-b from-transparent to-black/40 px-8 pb-5 pt-14 text-white">
37+
<div className="flex flex-col items-center justify-between gap-10 sm:flex-row">
3838
<div className="flex items-center justify-center">
39-
<div className="ml-2 w-12 sm:w-14 h-12 sm:h-14">
39+
<div className="ml-2 h-12 w-12 sm:h-14 sm:w-14">
4040
<HyperlaneLogo color={Color.white} />
4141
</div>
42-
<div className="text-lg sm:text-xl font-medium ml-6 space-y-1 ">
42+
<div className="ml-6 space-y-1 text-lg font-medium sm:text-xl">
4343
<div>Go interchain</div>
4444
<div>with Hyperlane</div>
4545
</div>
@@ -58,7 +58,7 @@ export function Footer() {
5858
</li>
5959
))}
6060
</ul>
61-
<ul className={`${styles.linkCol} mr-14`}>
61+
<ul className={`${styles.linkCol} mr-14`}>
6262
{footerLinks2.map((item) => (
6363
<li key={item.title}>
6464
<Link

‎src/components/nav/Header.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,24 @@ export function Header({ pathName }: { pathName: string }) {
2525

2626
return (
2727
<header
28-
className={`z-10 sticky top-0 px-2 sm:px-6 lg:px-12 w-full bg-blue-500 transition-all ease-in-out duration-200 ${
29-
animateHeader ? 'py-1 border-b border-white' : 'py-4 sm:py-5'
28+
className={`sticky top-0 z-10 w-full bg-blue-500 px-2 transition-all duration-200 ease-in-out sm:px-6 lg:px-12 ${
29+
animateHeader ? 'border-b border-white py-1' : 'py-4 sm:py-5'
3030
}`}
3131
>
3232
<div className="flex items-center justify-between">
3333
<Link href="/" className="flex items-center">
3434
<div
3535
className={`flex items-center ${
3636
animateHeader && 'scale-90'
37-
} transition-all ease-in-out duration-500`}
37+
} transition-all duration-500 ease-in-out`}
3838
>
39-
<Image src={Logo} alt="" className="h-7 sm:h-8 w-auto" />
40-
<Image src={Name} alt="Hyperlane" className="hidden sm:block h-6 w-auto mt-1 ml-3" />
41-
<Image src={Explorer} alt="Explorer" className="h-5 sm:h-6 w-auto mt-1 ml-2.5" />
39+
<Image src={Logo} alt="" className="h-7 w-auto sm:h-8" />
40+
<Image src={Name} alt="Hyperlane" className="ml-3 mt-1 hidden h-6 w-auto sm:block" />
41+
<Image src={Explorer} alt="Explorer" className="ml-2.5 mt-1 h-5 w-auto sm:h-6" />
4242
</div>
4343
</Link>
4444
<nav
45-
className={`hidden sm:flex sm:space-x-8 sm:items-center ${
45+
className={`hidden sm:flex sm:items-center sm:space-x-8 ${
4646
!showSearch ? 'md:space-x-10' : ''
4747
}`}
4848
>
@@ -66,7 +66,7 @@ export function Header({ pathName }: { pathName: string }) {
6666
{showSearch && <MiniSearchBar />}
6767
</nav>
6868
{/* Dropdown menu, used on mobile */}
69-
<div className="relative flex item-center sm:hidden mr-2">
69+
<div className="item-center relative mr-2 flex sm:hidden">
7070
<DropdownMenu
7171
button={<DropdownButton />}
7272
buttonClassname="hover:opacity-80 active:opacity-70 transition-all"
@@ -102,7 +102,7 @@ export function Header({ pathName }: { pathName: string }) {
102102

103103
function DropdownButton() {
104104
return (
105-
<div className="px-4 py-1 flex flex-col items-center border border-white bg-pink-500 rounded-lg">
105+
<div className="flex flex-col items-center rounded-lg border border-white bg-pink-500 px-4 py-1">
106106
<WideChevron
107107
width={10}
108108
height={14}
@@ -137,12 +137,12 @@ function MobileNavLink({
137137
return (
138138
<Link
139139
href={href}
140-
className="py-4 pl-3 flex items-center cursor-pointer hover:underline active:opacity-80 decoration-4 decoration-pink-500 underline-offset-[2px] transition-all"
140+
className="flex cursor-pointer items-center py-4 pl-3 decoration-pink-500 decoration-4 underline-offset-[2px] transition-all hover:underline active:opacity-80"
141141
onClick={closeDropdown}
142142
rel={isExternal ? 'noopener noreferrer' : undefined}
143143
target={isExternal ? '_blank' : undefined}
144144
>
145-
<span className="text-xl font-medium text-white capitalize">{children}</span>
145+
<span className="text-xl font-medium capitalize text-white">{children}</span>
146146
</Link>
147147
);
148148
}

‎src/components/nav/InfoBanner.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export function InfoBanner() {
44
href="https://explorer-v2.hyperlane.xyz"
55
target="_blank"
66
rel="noopener noreferrer"
7-
className="block py-1.5 w-full text-white text-center text-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-800 transition-all duration-300"
7+
className="block w-full bg-blue-600 py-1.5 text-center text-sm text-white transition-all duration-300 hover:bg-blue-700 active:bg-blue-800"
88
>
99
This is the explorer for Hyperlane version 3.{' '}
1010
<span className="underline underline-offset-2">Use version 2</span>

‎src/components/search/MiniSearchBar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ export function MiniSearchBar() {
2323
return (
2424
<Formik<FormValues> initialValues={initialValues} onSubmit={onSubmit}>
2525
<Form>
26-
<div className="p-1 flex items-center bg-white rounded-full transition-all">
26+
<div className="flex items-center rounded-full bg-white p-1 transition-all">
2727
<Field
2828
id="search"
2929
name="search"
3030
type="search"
3131
placeholder="Hash or address"
32-
className="w-32 focus:w-64 py-2 px-2.5 h-8 text-sm font-light placeholder:text-gray-600 rounded-full focus:outline-none transition-[width] ease-in-out duration-500"
32+
className="h-8 w-32 rounded-full px-2.5 py-2 text-sm font-light transition-[width] duration-500 ease-in-out placeholder:text-gray-600 focus:w-64 focus:outline-none"
3333
/>
34-
<div className="h-8 w-8 flex items-center justify-center rounded-full bg-pink-500">
34+
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-500">
3535
<IconButton type="submit" title="Search">
3636
<SearchIcon width={14} height={14} color={Color.white} />
3737
</IconButton>

‎src/components/search/SearchBar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro
2020
};
2121

2222
return (
23-
<div className="p-1 flex items-center bg-white w-full rounded-full transition-all duration-500">
23+
<div className="flex w-full items-center rounded-full bg-white p-1 transition-all duration-500">
2424
<input
2525
value={value}
2626
onChange={onChange}
2727
type="search"
2828
placeholder={placeholder}
29-
className="p-1 sm:px-4 md:px-5 flex-1 h-10 sm:h-12 font-light rounded-full placeholder:text-gray-600 focus:outline-none"
29+
className="h-10 flex-1 rounded-full p-1 font-light placeholder:text-gray-600 focus:outline-none sm:h-12 sm:px-4 md:px-5"
3030
/>
31-
<div className="h-10 sm:h-12 w-10 sm:w-12 flex items-center justify-center rounded-full bg-pink-500">
31+
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500 sm:h-12 sm:w-12">
3232
{isFetching && (
3333
<div className="scale-[30%] sm:scale-[35%]">
3434
<Spinner classes="invert" />

‎src/components/search/SearchFilterBar.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ function ChainSelector({
8282
<button
8383
type="button"
8484
className={clsx(
85-
'text-sm sm:min-w-[5.8rem] px-1.5 sm:px-2.5 py-1 flex items-center justify-center font-medium rounded-lg border border-pink-500 hover:opacity-80 active:opacity-70 transition-all',
86-
value ? 'bg-pink-500 text-white pr-7 sm:pr-8' : 'text-pink-500',
85+
'flex items-center justify-center rounded-lg border border-pink-500 px-1.5 py-1 text-sm font-medium transition-all hover:opacity-80 active:opacity-70 sm:min-w-[5.8rem] sm:px-2.5',
86+
value ? 'bg-pink-500 pr-7 text-white sm:pr-8' : 'text-pink-500',
8787
)}
8888
onClick={open}
8989
>
@@ -156,25 +156,25 @@ function DatetimeSelector({
156156
</>
157157
}
158158
buttonClassname={clsx(
159-
'text-sm px-2 sm:px-3 py-1 flex items-center justify-center font-medium border border-pink-500 rounded-lg hover:opacity-80 active:opacity-70 transition-all',
160-
hasValue ? ' bg-pink-500 text-white pr-7 sm:pr-8' : 'text-pink-500',
159+
'flex items-center justify-center rounded-lg border border-pink-500 px-2 py-1 text-sm font-medium transition-all hover:opacity-80 active:opacity-70 sm:px-3',
160+
hasValue ? 'bg-pink-500 pr-7 text-white sm:pr-8' : 'text-pink-500',
161161
)}
162162
panelClassname="w-60"
163163
>
164164
{({ close }) => (
165165
<div className="p-4" key="date-time-selector">
166166
<div className="flex items-center justify-between">
167-
<h3 className="text-blue-500 font-medium">Time Range</h3>
167+
<h3 className="font-medium text-blue-500">Time Range</h3>
168168
<div className="flex pt-1">
169169
<TextButton classes="text-sm font-medium text-pink-500" onClick={onClickClear}>
170170
Clear
171171
</TextButton>
172172
</div>
173173
</div>
174174
<div className="flex flex-col">
175-
<h4 className="mt-3 mb-1 text-gray-500 text-sm font-medium">Start Time</h4>
175+
<h4 className="mb-1 mt-3 text-sm font-medium text-gray-500">Start Time</h4>
176176
<DatetimeField timestamp={startTime} onChange={setStartTime} />
177-
<h4 className="mt-3 mb-1 text-gray-500 text-sm font-medium">End Time</h4>
177+
<h4 className="mb-1 mt-3 text-sm font-medium text-gray-500">End Time</h4>
178178
<DatetimeField timestamp={endTime} onChange={setEndTime} />
179179
</div>
180180
<SolidButton
@@ -194,7 +194,7 @@ function DatetimeSelector({
194194
function ClearButton({ onClick }: { onClick: () => void }) {
195195
return (
196196
<div className="absolute right-1.5 top-1/2 -translate-y-1/2">
197-
<IconButton onClick={onClick} className="bg-pink-300 p-1.5 rounded-full">
197+
<IconButton onClick={onClick} className="rounded-full bg-pink-300 p-1.5">
198198
<XIcon color="white" height={9} width={9} />
199199
</IconButton>
200200
</div>

‎src/components/search/SearchStates.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ export function SearchFetching({ show, isPiFetching }: { show: boolean; isPiFetc
1212
// Absolute position for overlaying cross-fade
1313
<div className="absolute left-0 right-0 top-10">
1414
<Fade show={show}>
15-
<div className="flex justify-center my-10">
16-
<div className="flex flex-col items-center justify-center max-w-md px-3 py-5">
17-
<div className="flex items-center justify-center scale-90">
15+
<div className="my-10 flex justify-center">
16+
<div className="flex max-w-md flex-col items-center justify-center px-3 py-5">
17+
<div className="flex scale-90 items-center justify-center">
1818
<Spinner />
1919
</div>
2020
<div className="mt-4 text-center font-light leading-loose text-gray-700">
@@ -42,8 +42,8 @@ export function SearchError({
4242
// Absolute position for overlaying cross-fade
4343
<div className="absolute left-0 right-0 top-10">
4444
<Fade show={show}>
45-
<div className="flex justify-center my-10">
46-
<div className="flex flex-col items-center justify-center max-w-md px-3 py-5">
45+
<div className="my-10 flex justify-center">
46+
<div className="flex max-w-md flex-col items-center justify-center px-3 py-5">
4747
<Image src={imgSrc} width={imgWidth} className="opacity-80" alt="" />
4848
<div className="mt-4 text-center font-light leading-loose text-gray-700">{text}</div>
4949
</div>

‎src/features/chains/MissingChainConfigToast.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export function MissingChainConfigToast({
88
const errorDesc = chainId
99
? `chain ID: ${chainId}`
1010
: domainId
11-
? `domain ID: ${domainId}`
12-
: 'unknown message chain';
11+
? `domain ID: ${domainId}`
12+
: 'unknown message chain';
1313
return (
1414
<div>
1515
<span>{`No chain config found for ${errorDesc}. You can add a config in the origin/destination chain selector.`}</span>

‎src/features/deliveryStatus/useMessageDeliveryStatus.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function useMessageDeliveryStatus({
2525
const registry = useRegistry();
2626

2727
const { data, error, isFetching } = useQuery({
28-
queryKey: ['messageDeliveryStatus', message, !!multiProvider],
28+
queryKey: ['messageDeliveryStatus', message, !!multiProvider, registry, chainMetadataOverrides],
2929
queryFn: async () => {
3030
if (!multiProvider || message.status == MessageStatus.Delivered) {
3131
return { message };

‎src/features/messages/MessageDetails.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
9999

100100
return (
101101
<>
102-
<Card className="flex items-center justify-between px-1 rounded-full">
103-
<h2 className="text-blue-500 font-medium">{`${
102+
<Card className="flex items-center justify-between rounded-full px-1">
103+
<h2 className="font-medium text-blue-500">{`${
104104
isIcaMsg ? 'ICA ' : ''
105105
} Message ${trimToLength(msgId, 6)} to ${getChainDisplayName(
106106
multiProvider,
@@ -113,7 +113,7 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
113113
isError={isError}
114114
/>
115115
</Card>
116-
<div className="flex flex-wrap items-stretch justify-between mt-3 md:mt-4 gap-3 md:gap-4">
116+
<div className="mt-3 flex flex-wrap items-stretch justify-between gap-3 md:mt-4 md:gap-4">
117117
<OriginTransactionCard
118118
chainId={originChainId}
119119
domainId={originDomainId}
@@ -170,7 +170,7 @@ function StatusHeader({
170170
let icon: React.ReactNode;
171171
if (isFetching) {
172172
icon = (
173-
<div className="w-7 h-7 overflow-hidden flex items-center justify-center">
173+
<div className="flex h-7 w-7 items-center justify-center overflow-hidden">
174174
<div className="scale-[35%]">
175175
<Spinner />
176176
</div>
@@ -185,7 +185,7 @@ function StatusHeader({
185185

186186
return (
187187
<div className="flex items-center">
188-
<h3 className="text-blue-500 font-medium lg mr-3">{text}</h3>
188+
<h3 className="lg mr-3 font-medium text-blue-500">{text}</h3>
189189
{icon}
190190
</div>
191191
);

‎src/features/messages/MessageSearch.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@ export function MessageSearch() {
8080
isFetching={isAnyFetching}
8181
placeholder="Search by address, hash, or message id"
8282
/>
83-
<Card className="relative w-full min-h-[38rem] mt-4" padding="">
84-
<div className="px-2 pt-3.5 pb-3 sm:px-4 md:px-5 flex items-center justify-between">
85-
<h2 className="w-min sm:w-fit pl-0.5 text-blue-500 font-medium">
83+
<Card className="relative mt-4 min-h-[38rem] w-full" padding="">
84+
<div className="flex items-center justify-between px-2 pb-3 pt-3.5 sm:px-4 md:px-5">
85+
<h2 className="w-min pl-0.5 font-medium text-blue-500 sm:w-fit">
8686
{!hasInput ? 'Latest Messages' : 'Search Results'}
8787
</h2>
8888
<SearchFilterBar

‎src/features/messages/MessageTable.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ export function MessageTable({
2525
const multiProvider = useMultiProvider();
2626

2727
return (
28-
<table className="w-full mb-1">
28+
<table className="mb-1 w-full">
2929
<thead>
3030
<tr className="border-b border-gray-100">
31-
<th className={`${styles.header} xs:text-left pl-3 sm:pl-6`}>Origin</th>
32-
<th className={`${styles.header} xs:text-left pl-1 sm:pl-2`}>Destination</th>
31+
<th className={`${styles.header} pl-3 xs:text-left sm:pl-6`}>Origin</th>
32+
<th className={`${styles.header} pl-1 xs:text-left sm:pl-2`}>Destination</th>
3333
<th className={`${styles.header} hidden sm:table-cell`}>Sender</th>
3434
<th className={`${styles.header} hidden sm:table-cell`}>Recipient</th>
3535
<th className={`${styles.header} hidden lg:table-cell`}>Origin Tx</th>
@@ -40,7 +40,7 @@ export function MessageTable({
4040
{messageList.map((m) => (
4141
<tr
4242
key={`message-${m.id}`}
43-
className={`relative cursor-pointer hover:bg-pink-50 active:bg-pink-100 border-b border-blue-50 last:border-0 ${
43+
className={`relative cursor-pointer border-b border-blue-50 last:border-0 hover:bg-pink-50 active:bg-pink-100 ${
4444
isFetching && 'blur-xs'
4545
} transition-all duration-500`}
4646
>
@@ -96,7 +96,7 @@ export function MessageSummaryRow({ message, mp }: { message: MessageStub; mp: M
9696
</LinkCell>
9797
{statusIcon && (
9898
<LinkCell id={msgId} base64={base64} tdClasses="w-0">
99-
<span className="absolute right-4 top-1/2 transform -translate-y-1/2">
99+
<span className="absolute right-4 top-1/2 -translate-y-1/2 transform">
100100
<Image
101101
src={statusIcon}
102102
width={18}

‎src/features/messages/cards/CodeBlock.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function LabelAndCodeBlock({ label, value }: { label: string; value: stri
1111

1212
export function CodeBlock({ value }: { value: string }) {
1313
return (
14-
<div className="relative max-w-full break-words py-2 pl-2 pr-9 mt-2 min-h-[2rem] bg-gray-100 text-sm font-mono rounded">
14+
<div className="relative mt-2 min-h-[2rem] max-w-full break-words rounded bg-gray-100 py-2 pl-2 pr-9 font-mono text-sm">
1515
{value}
1616
<CopyButton
1717
copyValue={value}

‎src/features/messages/cards/ContentDetailsCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export function ContentDetailsCard({
7272
<div className="flex items-center justify-between">
7373
<Image src={EnvelopeInfo} width={28} height={28} alt="" className="opacity-80" />
7474
<div className="flex items-center pb-1">
75-
<h3 className="text-blue-500 font-medium text-md mr-2">Message Details</h3>
75+
<h3 className="mr-2 text-md font-medium text-blue-500">Message Details</h3>
7676
<HelpIcon text="Immutable information about the message itself such as its contents." />
7777
</div>
7878
</div>

‎src/features/messages/cards/GasDetailsCard.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,11 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
7070
}, [decimals, message, igpPayments]);
7171

7272
return (
73-
<Card className="w-full space-y-4 relative">
73+
<Card className="relative w-full space-y-4">
7474
<div className="flex items-center justify-between">
7575
<Image src={FuelPump} width={24} height={24} alt="" className="opacity-80" />
7676
<div className="flex items-center pb-1">
77-
<h3 className="text-blue-500 font-medium text-md mr-2">Interchain Gas Payments</h3>
77+
<h3 className="mr-2 text-md font-medium text-blue-500">Interchain Gas Payments</h3>
7878
<HelpIcon text="Amounts paid to the Interchain Gas Paymaster for message delivery." />
7979
</div>
8080
</div>
@@ -84,12 +84,12 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
8484
href={docLinks.gas}
8585
target="_blank"
8686
rel="noopener noreferrer"
87-
className="cursor-pointer text-blue-500 hover:text-blue-400 active:text-blue-300 transition-all"
87+
className="cursor-pointer text-blue-500 transition-all hover:text-blue-400 active:text-blue-300"
8888
>
8989
Learn more about gas on Hyperlane.
9090
</a>
9191
</p>
92-
<div className="flex flex-wrap gap-x-4 gap-y-4 mr-36">
92+
<div className="mr-36 flex flex-wrap gap-x-4 gap-y-4">
9393
<KeyValueRow
9494
label="Payment count:"
9595
labelWidth="w-28"
@@ -124,11 +124,11 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
124124
/>
125125
</div>
126126
{!!paymentsWithAddr.length && (
127-
<div className="md:pt-2 pb-8 md:pb-6">
127+
<div className="pb-8 md:pb-6 md:pt-2">
128128
<IgpPaymentsTable payments={paymentsWithAddr} />
129129
</div>
130130
)}
131-
<div className="absolute right-2 bottom-2">
131+
<div className="absolute bottom-2 right-2">
132132
<RadioButtons
133133
options={unitOptions}
134134
selected={decimals}
@@ -142,7 +142,7 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
142142

143143
function IgpPaymentsTable({ payments }: { payments: Array<GasPayment & { contract: Address }> }) {
144144
return (
145-
<table className="rounded border-collapse overflow-hidden">
145+
<table className="border-collapse overflow-hidden rounded">
146146
<thead>
147147
<tr>
148148
<th className={style.th}>IGP Address</th>

‎src/features/messages/cards/IcaDetailsCard.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
2626
return (
2727
<Card className="w-full space-y-4">
2828
<div className="flex items-center justify-between">
29-
<div className="relative -top-px -left-0.5">
29+
<div className="relative -left-0.5 -top-px">
3030
<Image src={AccountStar} width={28} height={28} alt="" className="opacity-80" />
3131
</div>
3232
<div className="flex items-center pb-1">
33-
<h3 className="text-blue-500 font-medium text-md mr-2">ICA Details</h3>
33+
<h3 className="mr-2 text-md font-medium text-blue-500">ICA Details</h3>
3434
<HelpIcon text="Extra information for messages from/to Interchain Accounts." />
3535
</div>
3636
</div>
@@ -51,10 +51,10 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
5151
icaAddress
5252
? icaAddress
5353
: isFetching
54-
? 'Finding address...'
55-
: isError
56-
? 'Error finding address'
57-
: 'Unknown address'
54+
? 'Finding address...'
55+
: isError
56+
? 'Error finding address'
57+
: 'Unknown address'
5858
}
5959
displayWidth="w-60 sm:w-80"
6060
showCopy={true}
@@ -66,7 +66,7 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
6666
<label className="text-sm text-gray-500">{`Function call ${i + 1} of ${
6767
decodeResult.calls.length
6868
}:`}</label>
69-
<div className="mt-2 pl-4 border-l-2 border-gray-400 space-y-2.5">
69+
<div className="mt-2 space-y-2.5 border-l-2 border-gray-400 pl-4">
7070
<KeyValueRow
7171
label="Destination address:"
7272
labelWidth="w-32"
@@ -94,7 +94,7 @@ export function IcaDetailsCard({ message: { originDomainId, body }, blur }: Prop
9494
)}
9595
</>
9696
) : (
97-
<div className="py-4 text-red-500 italic">
97+
<div className="py-4 italic text-red-500">
9898
Unable to decode ICA message body, no details currently available.
9999
</div>
100100
)}

‎src/features/messages/cards/IsmDetailsCard.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ interface Props {
1717

1818
export function IsmDetailsCard({ ismDetails, blur }: Props) {
1919
return (
20-
<Card className="w-full space-y-4 relative">
20+
<Card className="relative w-full space-y-4">
2121
<div className="flex items-center justify-between">
2222
<Image src={ShieldLock} width={24} height={24} alt="" className="opacity-80" />
2323
<div className="flex items-center pb-1">
24-
<h3 className="text-blue-500 font-medium text-md mr-2">Interchain Security Modules</h3>
24+
<h3 className="mr-2 text-md font-medium text-blue-500">Interchain Security Modules</h3>
2525
<HelpIcon text="Details about the Interchain Security Modules (ISM) that must verify this message." />
2626
</div>
2727
</div>
@@ -31,7 +31,7 @@ export function IsmDetailsCard({ ismDetails, blur }: Props) {
3131
href={docLinks.ism}
3232
target="_blank"
3333
rel="noopener noreferrer"
34-
className="cursor-pointer text-blue-500 hover:text-blue-400 active:text-blue-300 transition-all"
34+
className="cursor-pointer text-blue-500 transition-all hover:text-blue-400 active:text-blue-300"
3535
>
3636
Learn more about ISMs.
3737
</a>

‎src/features/messages/cards/KeyValueRow.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ export function KeyValueRow({
2929
return (
3030
<div className={`flex items-center pl-px font-light ${classes}`}>
3131
<label className={`text-sm text-gray-500 ${labelWidth}`}>{label}</label>
32-
<div className={`text-sm ml-1 truncate ${displayWidth || ''} ${blurValue && 'blur-xs'}`}>
32+
<div className={`ml-1 truncate text-sm ${displayWidth || ''} ${blurValue && 'blur-xs'}`}>
3333
<span>{!useFallbackVal ? display : 'Unknown'}</span>
34-
{subDisplay && !useFallbackVal && <span className="text-xs ml-2">{subDisplay}</span>}
34+
{subDisplay && !useFallbackVal && <span className="ml-2 text-xs">{subDisplay}</span>}
3535
</div>
3636
{showCopy && !useFallbackVal && (
3737
<CopyButton copyValue={display} width={13} height={13} classes="ml-1.5" />

‎src/features/messages/cards/TimelineCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function TimelineCard({ message, blur }: Props) {
1818
<h3 className="text-gray-500 font-medium text-md mr-2">Delivery Timeline</h3>
1919
<HelpIcon size={16} text="A breakdown of the stages for delivering a message" />
2020
</div> */}
21-
<div className={`-mx-2 sm:mx-0 -my-2 font-light ${blur && 'blur-xs'}`}>
21+
<div className={`-mx-2 -my-2 font-light sm:mx-0 ${blur && 'blur-xs'}`}>
2222
<MessageTimeline status={message.status} stage={stage} timings={timings} />
2323
</div>
2424
</Card>

‎src/features/messages/cards/TransactionCard.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,11 @@ export function DestinationTransactionCard({
9393
} else if (status === MessageStatus.Failing) {
9494
content = (
9595
<DeliveryStatus>
96-
<div className="text-sm text-gray-800 leading-relaxed">{`Delivery to destination chain seems to be failing ${
96+
<div className="text-sm leading-relaxed text-gray-800">{`Delivery to destination chain seems to be failing ${
9797
debugResult ? ': ' + debugStatusToDesc[debugResult.status] : ''
9898
}`}</div>
9999
{!!debugResult?.description && (
100-
<div className="mt-5 text-sm text-gray-800 text-center leading-relaxed break-words">
100+
<div className="mt-5 break-words text-center text-sm leading-relaxed text-gray-800">
101101
{debugResult.description}
102102
</div>
103103
)}
@@ -110,10 +110,10 @@ export function DestinationTransactionCard({
110110
<DeliveryStatus>
111111
<div className="flex flex-col items-center">
112112
<div>Delivery status is unknown.</div>
113-
<div className="mt-2 text-sm max-w-xs">
113+
<div className="mt-2 max-w-xs text-sm">
114114
Permissionless Interoperability (PI) chains require a config.
115115
</div>
116-
<div className="mt-2 mb-6 text-sm max-w-xs">
116+
<div className="mb-6 mt-2 max-w-xs text-sm">
117117
Please{' '}
118118
<button className="underline underline-offset-2" onClick={open}>
119119
add metadata
@@ -133,7 +133,7 @@ export function DestinationTransactionCard({
133133
<div className="flex flex-col items-center">
134134
<div>Delivery to destination chain still in progress.</div>
135135
{isPiMsg && (
136-
<div className="mt-2 text-sm max-w-xs">
136+
<div className="mt-2 max-w-xs text-sm">
137137
Please ensure a relayer is running for this chain.
138138
</div>
139139
)}
@@ -146,7 +146,7 @@ export function DestinationTransactionCard({
146146
content = (
147147
<DeliveryStatus>
148148
<div>Delivery to status is currently unknown.</div>
149-
<div className="mt-2 text-sm pb-4">
149+
<div className="mt-2 pb-4 text-sm">
150150
{isPiMsg
151151
? 'Please ensure your chain config is correct and check back later.'
152152
: 'Please check again later'}
@@ -173,13 +173,13 @@ function TransactionCard({
173173
children,
174174
}: PropsWithChildren<{ chainId: ChainId; title: string; helpText: string }>) {
175175
return (
176-
<Card className="flex flex-col flex-1 min-w-fit space-y-3">
176+
<Card className="flex min-w-fit flex-1 flex-col space-y-3">
177177
<div className="flex items-center justify-between">
178-
<div className="relative -top-px -left-0.5">
178+
<div className="relative -left-0.5 -top-px">
179179
<ChainLogo chainId={chainId} />
180180
</div>
181181
<div className="flex items-center pb-1">
182-
<h3 className="text-blue-500 font-medium text-md mr-2">{title}</h3>
182+
<h3 className="mr-2 text-md font-medium text-blue-500">{title}</h3>
183183
<HelpIcon text={helpText} />
184184
</div>
185185
</div>
@@ -289,7 +289,7 @@ function TransactionDetails({
289289
function DeliveryStatus({ children }: PropsWithChildren<unknown>) {
290290
return (
291291
<>
292-
<div className="pb-2 flex-1 flex flex-col items-center justify-center text-gray-700 font-light text-center">
292+
<div className="flex flex-1 flex-col items-center justify-center pb-2 text-center font-light text-gray-700">
293293
<div className="max-w-sm">{children}</div>
294294
</div>
295295
</>

‎src/pages/api-docs.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { Card } from '../components/layout/Card';
44

55
const ApiDocs: NextPage = () => {
66
return (
7-
<div className="mt-4 mb-2 px-2 sm:px-6 lg:pr-14 w-full">
7+
<div className="mb-2 mt-4 w-full px-2 sm:px-6 lg:pr-14">
88
<Card>
9-
<h2 className="mt-1 text-lg text-blue-500 font-medium">
9+
<h2 className="mt-1 text-lg font-medium text-blue-500">
1010
Explorer APIs - Overview and documentation
1111
</h2>
1212
<p className="mt-3 font-light">
@@ -16,14 +16,14 @@ const ApiDocs: NextPage = () => {
1616
The APIs are currently available free of charge and without authentication required.
1717
</p>
1818

19-
<h3 className="mt-5 text-blue-500 font-medium">Example Request</h3>
20-
<div className="mt-2 bg-gray-50 rounded-xl p-2.5 text-sm overflow-auto">
19+
<h3 className="mt-5 font-medium text-blue-500">Example Request</h3>
20+
<div className="mt-2 overflow-auto rounded-xl bg-gray-50 p-2.5 text-sm">
2121
<pre>
2222
<code>{exampleRequest}</code>
2323
</pre>
2424
</div>
25-
<h3 className="mt-5 text-blue-500 font-medium">Example Response</h3>
26-
<div className="mt-2 bg-gray-50 rounded-xl p-2.5 text-sm overflow-auto">
25+
<h3 className="mt-5 font-medium text-blue-500">Example Response</h3>
26+
<div className="mt-2 overflow-auto rounded-xl bg-gray-50 p-2.5 text-sm">
2727
<pre>
2828
<code>{exampleResponse}</code>
2929
</pre>
@@ -53,7 +53,7 @@ const ApiDocs: NextPage = () => {
5353
Action:<code className="ml-2">get-status</code>, Parameter (1 required):
5454
</h5>
5555
<ul className="mt-1 pl-3">
56-
<div className="text-gray-500 italic">Same as get-messages above</div>
56+
<div className="italic text-gray-500">Same as get-messages above</div>
5757
</ul>
5858
<h5 className="mt-2 text-gray-600">
5959
Action:<code className="ml-2">search-messages</code>, Parameter (1 required):

‎yarn.lock

+1,473-1,433
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.