diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5c20f92..b66082a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -153,12 +153,19 @@ export default function HomePage(): ReactElement {
{Object.entries((addresses as any)[networkName]).map(
- ([key, value]) =>
+ ([key, value]: [
+ key: string,
+ value: string | { [key: number]: string }
+ ]) =>
key !== 'chainId' &&
key !== 'startBlock' && (
-
-
{key}
:{' '}
- {JSON.stringify(value)}
+ {key}
+
+ {typeof value === 'string'
+ ? value
+ : JSON.stringify(value, null, 2)}
+
)
)}
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index e6f06d6..6f3d2ae 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -47,7 +47,9 @@
.networkName {
margin-top: calc(var(--spacer) * 3);
+ margin-bottom: var(--spacer);
text-transform: capitalize;
+ line-height: 1;
}
.card {
@@ -155,17 +157,47 @@
.contracts {
margin-top: var(--spacer);
- margin-left: 1rem;
}
.contracts summary {
- margin-left: -1rem;
cursor: pointer;
}
.contracts .titleComponent {
display: inline-block;
width: auto;
+ margin-bottom: calc(var(--spacer) / 2);
+}
+
+.contracts li {
+ padding: calc(var(--spacer) / 6) calc(var(--spacer) / 2);
+ border-top: 1px solid var(--border-color);
+}
+
+.contracts li:hover {
+ background: var(--background-highlight);
+}
+
+.contracts li:last-child {
+ border-bottom: 1px solid var(--border-color);
+}
+
+.contracts li code {
+ display: block;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+}
+
+@media screen and (min-width: 55rem) {
+ .contracts li {
+ display: grid;
+ grid-template-columns: 2fr 4fr;
+ }
+}
+
+.contracts .key {
+ font-weight: var(--font-weight-bold);
}
.loading {
@@ -174,7 +206,7 @@
}
.date {
- display: inline-block;
+ display: inline;
margin-left: calc(var(--spacer) / 4);
font-size: var(--font-size-small);
color: var(--color-secondary);