diff --git a/src/components/evm/assets.jsx b/src/components/evm/assets.jsx
index d5c8d2077..37b8bb9e9 100644
--- a/src/components/evm/assets.jsx
+++ b/src/components/evm/assets.jsx
@@ -12,7 +12,12 @@ const COLUMNS = [
{ id: "chain", title: "Chain" },
{ id: "denom", title: "Denom" },
{ id: "contract_address", title: "Contract address" },
- { id: "add_token", title: "", headerClassName: "text-right", className: "text-right" },
+ {
+ id: "add_token",
+ title: "",
+ headerClassName: "text-right",
+ className: "text-right",
+ },
];
export default ({ environment = "mainnet" }) => {
@@ -20,14 +25,27 @@ export default ({ environment = "mainnet" }) => {
const _evm_assets = evm_assets?.[environment] || [];
const [chainData, setChainData] = useState(null);
- const [assetData, setAssetData] = useState(_evm_assets.find(a => a?.id === (environment === "testnet" ? "uausdc" : "uusdc")));
+ const [assetData, setAssetData] = useState(
+ _evm_assets.find(
+ (a) => a?.id === (environment === "testnet" ? "uausdc" : "uusdc")
+ )
+ );
- const assets = _evm_assets.filter(a => !assetData || a?.id === assetData.id).flatMap(a => a?.contracts?.map(c => {
- return {
- ...a,
- ...c,
- };
- }).filter(a => !chainData || equals_ignore_case(a.chain, chainData.id)) || []);
+ const assets = _evm_assets
+ .filter((a) => !assetData || a?.id === assetData.id)
+ .flatMap(
+ (a) =>
+ a?.contracts
+ ?.map((c) => {
+ return {
+ ...a,
+ ...c,
+ };
+ })
+ .filter(
+ (a) => !chainData || equals_ignore_case(a.chain, chainData.id)
+ ) || []
+ );
return (
@@ -39,9 +57,16 @@ export default ({ environment = "mainnet" }) => {
hasAllOptions={true}
allOptionsName="All Chains"
defaultSelectedKey={chainData?.id || ""}
- onSelect={c => {
+ onSelect={(c) => {
setChainData(c);
- if (c && _evm_assets.findIndex(a => (!assetData || a?.id === assetData.id) && a?.contracts?.findIndex(_c => _c?.chain === c?.id) > -1) < 0) {
+ if (
+ c &&
+ _evm_assets.findIndex(
+ (a) =>
+ (!assetData || a?.id === assetData.id) &&
+ a?.contracts?.findIndex((_c) => _c?.chain === c?.id) > -1
+ ) < 0
+ ) {
setAssetData("");
}
}}
@@ -54,64 +79,68 @@ export default ({ environment = "mainnet" }) => {
hasAllOptions={true}
allOptionsName="All Assets"
defaultSelectedKey={assetData?.id || ""}
- onSelect={a => setAssetData(a)}
+ onSelect={(a) => setAssetData(a)}
/>
-
-
-
- {COLUMNS.map((c, i) => (
- |
- {c.title}
- |
- ))}
-
-
-
- {assets.map((a, i) => {
- const {
- id,
- address,
- symbol,
- image,
- chain,
- } = { ...a };
-
- const chain_data = _evm_chains.find(c => c?.id === chain);
- const explorer_url = chain_data?.provider_params?.[0]?.blockExplorerUrls?.[0];
-
- return (
-
- {COLUMNS.map((c, j) => (
-
- {c.id === "asset" ?
-
- {image && (
- 
- )}
-
- {symbol}
-
-
+
+
+
+ {COLUMNS.map((c, i) => (
+ |
+ {c.title}
+ |
+ ))}
+
+
+
+ {assets.map((a, i) => {
+ const { id, address, symbol, image, chain } = { ...a };
+ const chain_data = _evm_chains.find((c) => c?.id === chain);
+ const explorer_url =
+ chain_data?.provider_params?.[0]?.blockExplorerUrls?.[0];
+ return (
+
+ {COLUMNS.map((c, j) => (
+
+ {c.id === "asset" ? (
+
+ {image && (
+
+ )}
+
+ {symbol}
+
+
{chain_data?.image && (
![]() {
-
- {id}
+ ) : c.id === "denom" ? (
+
+
+ {id}
+
+
+ ) : c.id === "contract_address" ? (
+ :
- c.id === "contract_address" ?
-
- :
- c.id === "add_token" ?
-
- :
- null
- }
- |
- ))}
-
- );
- })}
-
-
+ )}
+ {address && (
+
+ )}
+ |
+ ))}
+
+ );
+ })}
+
+
+
);
-};
\ No newline at end of file
+};
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 078e19127..bd001dc47 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -132,27 +132,28 @@ const shownDescription = description || 'The Axelar Documentation tells you how
Empowering developers to build scalable, interchain dApps
-
-
-
© 2023 Axelar Network. All Rights Reserved.
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
index b1614d762..84f8aad2b 100644
--- a/src/styles/dark.scss
+++ b/src/styles/dark.scss
@@ -62,8 +62,10 @@ html.dark body {
tr {
border-bottom: 2px solid rgb(48, 48, 49);
}
-
- tr:nth-child(2n + 2) {
+ tr:nth-child(2n + 1) td {
+ background-color: #111111;
+ }
+ tr:nth-child(2n + 2) td {
background-color: #1d1f22;
}
}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e7e2e64e4..be7be8118 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -107,15 +107,25 @@ ul {
footer {
padding: 64px 0;
background-color: rgb(243, 244, 246);
-}
-footer .columns {
- display: flex;
- justify-content: space-around;
- max-width: $page-width;
- margin: 0px auto;
-}
-footer > div {
- padding: 16px;
+
+ .columns {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 16px;
+ max-width: $page-width;
+ margin: 0px auto;
+ }
+ & > div {
+ padding: 16px;
+ }
+ & .footer-links {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+ max-width: 800px;
+ flex: 1;
+ }
}
main {
@@ -293,7 +303,7 @@ table {
border-bottom: 2px solid rgb(229, 231, 235);
}
- tr:nth-child(2n + 2) {
+ tr:nth-child(2n + 2) td {
background-color: rgb(249, 250, 251);
}
}
@@ -324,12 +334,6 @@ astro-island button {
.resources td > div {
}
-.ibc-channels {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 1rem;
- grid-auto-flow: row;
- display: grid;
-}
.ibc-channels .border {
border: 1px solid rgb(229, 231, 235);
border-radius: 8px;
@@ -383,12 +387,28 @@ astro-island button {
padding: 6px;
border-radius: 8px;
}
-.resource-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
+.resource-grid,
+.ibc-channels {
+ display: flex;
+ flex-wrap: wrap;
gap: 1rem;
- grid-auto-flow: row;
- display: grid;
}
+.resource-grid > div,
+.ibc-channels > div {
+ flex: 1 1 320px;
+}
+.asset-table {
+ overflow-x: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+.sticky-col {
+ position: -webkit-sticky;
+ position: sticky;
+ left: 0;
+}
+
.colored-svg {
color: black;
}
@@ -412,6 +432,9 @@ astro-island button {
.items-center {
align-items: center;
}
+.border-none {
+ border: none;
+}
/* End temporary tailwind CSS */
@@ -449,6 +472,13 @@ astro-island button {
.ais-SearchBox-input {
width: calc(100% - 16px);
}
+.asset-icon {
+ flex-wrap: wrap;
+}
+.chain-icon {
+ flex-wrap: wrap;
+}
+
.chain-icon img,
.asset-icon img {
margin-right: 4px;
@@ -538,6 +568,10 @@ astro-island button {
&:hover {
background-color: rgb(229, 231, 235);
}
+ & img {
+ min-width: 12px;
+ min-height: 12px;
+ }
}
.keplr-button {