Skip to content

Commit 69f300d

Browse files
DeiadaraDeiadara
authored
feat: add cosmos chains and remove unused ones (#1435)
1 parent d1f1632 commit 69f300d

6 files changed

Lines changed: 198 additions & 134 deletions

File tree

‎public/images/chains/bitsong.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/evm/chains.jsx‎

Lines changed: 142 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,56 @@ import Copy from "../copy";
66
import { ChainCardSkeleton, ErrorMessage } from "../loading-skeleton";
77
import AddChain from "../web3";
88

9+
const CHAIN_TYPE_STYLES = {
10+
evm: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
11+
amplifier: "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300",
12+
cosmos: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
13+
};
14+
15+
const CHAIN_TYPE_DISPLAY = {
16+
evm: "EVM",
17+
amplifier: "Amplifier",
18+
cosmos: "Cosmos",
19+
};
20+
21+
// Non-EVM chains where MetaMask doesn't work.
22+
const HIDE_METAMASK_CHAINS = ["stellar", "sui", "xrpl"];
23+
24+
// Non-EVM native chains where the EVM ITS contract address doesn't apply.
25+
const NON_EVM_ITS_CHAINS = ["stellar", "sui", "xrpl"];
26+
27+
function AddressRow({ label, address, explorerLink, suiObjectPath }) {
28+
const link = explorerLink?.(address, suiObjectPath);
29+
return (
30+
<div className="flex flex-col flex-wrap justify-between">
31+
<span className="whitespace-nowrap text-sm text-foreground">{label}:</span>
32+
<div className="flex items-center text-sm space-x-1">
33+
{address ? (
34+
link ? (
35+
<a
36+
href={link}
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
className="no-underline text-primary font-clash font-semibold"
40+
>
41+
{ellipse(address, 14)}
42+
</a>
43+
) : (
44+
<span className="font-clash font-semibold">
45+
{ellipse(address, 14)}
46+
</span>
47+
)
48+
) : (
49+
<span className="text-foreground font-semibold">-</span>
50+
)}
51+
{address && <Copy size={18} hide={true} value={address} />}
52+
</div>
53+
</div>
54+
);
55+
}
56+
957
export default ({ environment = "mainnet" }) => {
10-
const { chains, gateways, gasServices, loading, error } =
58+
const { chains, gateways, gasServices, itsAddress, loading, error } =
1159
useChainData(environment);
1260

1361
if (loading) return <ChainCardSkeleton count={8} />;
@@ -16,9 +64,9 @@ export default ({ environment = "mainnet" }) => {
1664
return (
1765
<div className="grid lg:grid-cols-2 gap-5 not-prose">
1866
{chains
19-
.filter((c) => !c?.is_staging)
67+
.filter((c) => !c?.is_staging && !c?.deprecated)
2068
.map((c, i) => {
21-
const { id, chain_id, network_id, name, provider_params, image } = {
69+
const { id, chain_id, network_id, name, chain_type, provider_params, image } = {
2270
...c,
2371
};
2472

@@ -42,8 +90,11 @@ export default ({ environment = "mainnet" }) => {
4290
return `${explorer_url}${path.replace("{address}", addr)}`;
4391
};
4492

45-
// Sui contracts are objects, not accounts — use /object/ path
4693
const suiObjectPath = id === "sui" ? "/object/{address}" : null;
94+
const showMetaMask = chain_type !== "cosmos" && !HIDE_METAMASK_CHAINS.includes(id);
95+
const isCosmos = chain_type === "cosmos";
96+
const prefix = c.prefix_address;
97+
const lcdEndpoint = c.endpoints?.lcd?.[0];
4798

4899
return (
49100
<div key={i} className="bg-background-neutral-dark rounded-xl p-5">
@@ -59,146 +110,112 @@ export default ({ environment = "mainnet" }) => {
59110
/>
60111
)}
61112
<div className="flex flex-col">
62-
<span className="text-base font-semibold font-clash">
63-
{name}
64-
</span>
65-
<span className="text-foreground text-sm font-medium">
66-
Chain ID: {chain_id}
67-
</span>
113+
<div className="flex items-center gap-2">
114+
<span className="text-base font-semibold font-clash">
115+
{name}
116+
</span>
117+
{chain_type && (
118+
<span className={`text-xs font-medium px-1.5 py-0.5 rounded uppercase ${
119+
CHAIN_TYPE_STYLES[chain_type] || ""
120+
}`}>
121+
{CHAIN_TYPE_DISPLAY[chain_type] || chain_type}
122+
</span>
123+
)}
124+
</div>
125+
{chain_id && (
126+
<span className="text-foreground text-sm font-medium">
127+
Chain ID: {chain_id}
128+
</span>
129+
)}
68130
</div>
69131
</div>
70-
<AddChain
71-
environment={environment}
72-
chain={id}
73-
chainData={c}
74-
/>
132+
{showMetaMask && (
133+
<AddChain
134+
environment={environment}
135+
chain={id}
136+
chainData={c}
137+
/>
138+
)}
75139
</div>
76140
<div className="flex flex-col gap-2.5">
77-
<div className="flex flex-col pt-5 flex-wrap justify-between">
141+
<div className="flex flex-col pt-5 flex-wrap justify-between">
78142
<span className="whitespace-nowrap text-sm text-foreground">
79143
Chain Name:
80144
</span>
81145
<div className="flex items-center text-sm space-x-1">
82146
<Copy size={18} title={network_id} value={network_id} />
83147
</div>
84148
</div>
85-
<div className="flex flex-col flex-wrap justify-between">
86-
<span className="whitespace-nowrap text-sm text-foreground">
87-
Gateway Contract:
88-
</span>
89-
<div className="flex items-center text-sm space-x-1">
90-
{gateway_contract_address ? (
91-
explorerLink(gateway_contract_address, suiObjectPath) ? (
92-
<a
93-
href={explorerLink(gateway_contract_address, suiObjectPath)}
94-
target="_blank"
95-
rel="noopener noreferrer"
96-
className="no-underline text-primary font-clash font-semibold"
97-
>
98-
{ellipse(gateway_contract_address, 14)}
99-
</a>
100-
) : (
101-
<span className="font-clash font-semibold">
102-
{ellipse(gateway_contract_address, 14)}
103-
</span>
104-
)
105-
) : (
106-
<span className="text-foreground font-semibold">-</span>
149+
{!isCosmos && (
150+
<>
151+
<AddressRow
152+
label="Gateway Contract"
153+
address={gateway_contract_address}
154+
explorerLink={explorerLink}
155+
suiObjectPath={suiObjectPath}
156+
/>
157+
{id === "sui" && gateway_object_id && (
158+
<AddressRow
159+
label="Gateway Object ID"
160+
address={gateway_object_id}
161+
explorerLink={explorerLink}
162+
suiObjectPath={suiObjectPath}
163+
/>
107164
)}
108-
{gateway_contract_address && (
109-
<Copy
110-
size={18}
111-
hide={true}
112-
value={gateway_contract_address}
165+
<AddressRow
166+
label="Gas Service Contract"
167+
address={gas_service_address}
168+
explorerLink={explorerLink}
169+
suiObjectPath={suiObjectPath}
170+
/>
171+
{id === "sui" && gas_service_object_id && (
172+
<AddressRow
173+
label="Gas Service Object ID"
174+
address={gas_service_object_id}
175+
explorerLink={explorerLink}
176+
suiObjectPath={suiObjectPath}
113177
/>
114178
)}
115-
</div>
116-
</div>
117-
{id === "sui" && gateway_object_id && (
118-
<div className="flex flex-col flex-wrap justify-between">
119-
<span className="whitespace-nowrap text-sm text-foreground">
120-
Gateway Object ID:
121-
</span>
122-
<div className="flex items-center text-sm space-x-1">
123-
{explorerLink(gateway_object_id, suiObjectPath) ? (
124-
<a
125-
href={explorerLink(gateway_object_id, suiObjectPath)}
126-
target="_blank"
127-
rel="noopener noreferrer"
128-
className="no-underline text-primary font-clash font-semibold"
129-
>
130-
{ellipse(gateway_object_id, 14)}
131-
</a>
132-
) : (
133-
<span className="font-clash font-semibold">
134-
{ellipse(gateway_object_id, 14)}
135-
</span>
136-
)}
137-
<Copy
138-
size={18}
139-
hide={true}
140-
value={gateway_object_id}
179+
{itsAddress && !NON_EVM_ITS_CHAINS.includes(id) && (
180+
<AddressRow
181+
label="ITS Contract"
182+
address={itsAddress}
183+
explorerLink={explorerLink}
141184
/>
142-
</div>
143-
</div>
185+
)}
186+
</>
144187
)}
145-
<div className="flex flex-col flex-wrap justify-between">
146-
<span className="whitespace-nowrap text-sm text-foreground">
147-
Gas Service Contract:
148-
</span>
149-
<div className="flex items-center text-sm space-x-1">
150-
{gas_service_address ? (
151-
explorerLink(gas_service_address, suiObjectPath) ? (
152-
<a
153-
href={explorerLink(gas_service_address, suiObjectPath)}
154-
target="_blank"
155-
rel="noopener noreferrer"
156-
className="no-underline text-primary font-clash font-semibold"
157-
>
158-
{ellipse(gas_service_address, 14)}
159-
</a>
160-
) : (
161-
<span className="font-clash font-semibold">
162-
{ellipse(gas_service_address, 14)}
188+
{isCosmos && (
189+
<>
190+
{prefix && (
191+
<div className="flex flex-col flex-wrap justify-between">
192+
<span className="whitespace-nowrap text-sm text-foreground">
193+
Address Prefix:
163194
</span>
164-
)
165-
) : (
166-
<span className="text-gray-500 dark:text-white font-semibold">
167-
-
168-
</span>
169-
)}
170-
{gas_service_address && (
171-
<Copy size={18} hide={true} value={gas_service_address} />
195+
<div className="flex items-center text-sm space-x-1">
196+
<Copy size={18} title={prefix} value={prefix} />
197+
</div>
198+
</div>
172199
)}
173-
</div>
174-
</div>
175-
{id === "sui" && gas_service_object_id && (
176-
<div className="flex flex-col flex-wrap justify-between">
177-
<span className="whitespace-nowrap text-sm text-foreground">
178-
Gas Service Object ID:
179-
</span>
180-
<div className="flex items-center text-sm space-x-1">
181-
{explorerLink(gas_service_object_id, suiObjectPath) ? (
182-
<a
183-
href={explorerLink(gas_service_object_id, suiObjectPath)}
184-
target="_blank"
185-
rel="noopener noreferrer"
186-
className="no-underline text-primary font-clash font-semibold"
187-
>
188-
{ellipse(gas_service_object_id, 14)}
189-
</a>
190-
) : (
191-
<span className="font-clash font-semibold">
192-
{ellipse(gas_service_object_id, 14)}
200+
{lcdEndpoint && (
201+
<div className="flex flex-col flex-wrap justify-between">
202+
<span className="whitespace-nowrap text-sm text-foreground">
203+
LCD Endpoint:
193204
</span>
194-
)}
195-
<Copy
196-
size={18}
197-
hide={true}
198-
value={gas_service_object_id}
199-
/>
200-
</div>
201-
</div>
205+
<div className="flex items-center text-sm space-x-1">
206+
<a
207+
href={lcdEndpoint}
208+
target="_blank"
209+
rel="noopener noreferrer"
210+
className="no-underline text-primary font-clash font-semibold"
211+
>
212+
{ellipse(lcdEndpoint, 20)}
213+
</a>
214+
<Copy size={18} hide={true} value={lcdEndpoint} />
215+
</div>
216+
</div>
217+
)}
218+
</>
202219
)}
203220
</div>
204221
</div>

‎src/data/cosmos_chains.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,18 @@
239239
"name": "XPLA",
240240
"network_id": "xpla",
241241
"image": "/images/chains/xpla.svg"
242+
},
243+
{
244+
"id": "mantra",
245+
"name": "Mantra",
246+
"network_id": "mantra",
247+
"image": "/images/chains/mantra.svg"
248+
},
249+
{
250+
"id": "babylon",
251+
"name": "Babylon",
252+
"network_id": "babylon",
253+
"image": "/images/chains/babylon.svg"
242254
}
243255
],
244256
"testnet": [

‎src/hooks/useAxelarscanData.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
transformChains,
99
transformGateways,
1010
transformGasServices,
11+
transformITSAddress,
1112
transformEvmAssets,
1213
} from "../lib/transform-api-data";
1314

@@ -63,6 +64,7 @@ export function useChainData(environment = "mainnet") {
6364
chains: transformChains(chainsResponse),
6465
gateways: transformGateways(chainsResponse),
6566
gasServices: transformGasServices(contractsResponse),
67+
itsAddress: transformITSAddress(contractsResponse),
6668
};
6769
setCache(cacheKey, result);
6870
setData(result);
@@ -85,6 +87,7 @@ export function useChainData(environment = "mainnet") {
8587
chains: data?.chains || [],
8688
gateways: data?.gateways || [],
8789
gasServices: data?.gasServices || [],
90+
itsAddress: data?.itsAddress || null,
8891
loading,
8992
error,
9093
};

0 commit comments

Comments
 (0)