web: initial commit
This commit is contained in:
Evan Gray
Evan Gray
parent
a7e406fd17
commit
cb7b6b4a00
|
|
@ -0,0 +1,24 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
const { ProvidePlugin } = require("webpack");
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
return {
|
||||
...config,
|
||||
module: {
|
||||
...config.module,
|
||||
rules: [
|
||||
...config.module.rules,
|
||||
{
|
||||
test: /\.js$/,
|
||||
enforce: "pre",
|
||||
use: ["source-map-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.wasm$/,
|
||||
type: "webassembly/async",
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
...config.plugins,
|
||||
new ProvidePlugin({
|
||||
Buffer: ["buffer", "Buffer"],
|
||||
process: "process/browser",
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
...config.resolve,
|
||||
fallback: {
|
||||
assert: "assert",
|
||||
buffer: "buffer",
|
||||
console: "console-browserify",
|
||||
constants: "constants-browserify",
|
||||
crypto: "crypto-browserify",
|
||||
domain: "domain-browser",
|
||||
events: "events",
|
||||
fs: false,
|
||||
http: "stream-http",
|
||||
https: "https-browserify",
|
||||
os: "os-browserify/browser",
|
||||
path: "path-browserify",
|
||||
punycode: "punycode",
|
||||
process: "process/browser",
|
||||
querystring: "querystring-es3",
|
||||
stream: "stream-browserify",
|
||||
_stream_duplex: "readable-stream/duplex",
|
||||
_stream_passthrough: "readable-stream/passthrough",
|
||||
_stream_readable: "readable-stream/readable",
|
||||
_stream_transform: "readable-stream/transform",
|
||||
_stream_writable: "readable-stream/writable",
|
||||
string_decoder: "string_decoder",
|
||||
sys: "util",
|
||||
timers: "timers-browserify",
|
||||
tty: "tty-browserify",
|
||||
url: "url",
|
||||
util: "util",
|
||||
vm: "vm-browserify",
|
||||
zlib: "browserify-zlib",
|
||||
},
|
||||
},
|
||||
experiments: {
|
||||
asyncWebAssembly: true,
|
||||
},
|
||||
ignoreWarnings: [/Failed to parse source map/],
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,81 @@
|
|||
{
|
||||
"name": "wormhole-explorer",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
"proxy": "http://localhost:4000",
|
||||
"dependencies": {
|
||||
"@certusone/wormhole-sdk": "^0.6.0",
|
||||
"@certusone/wormhole-sdk-proto-web": "^0.0.4",
|
||||
"@emotion/react": "^11.10.0",
|
||||
"@emotion/styled": "^11.10.0",
|
||||
"@metaplex/js": "^4.12.0",
|
||||
"@mui/icons-material": "^5.8.4",
|
||||
"@mui/material": "^5.9.3",
|
||||
"@tanstack/react-table": "^8.5.11",
|
||||
"@terra-money/terra.js": "^3.1.3",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^28.1.6",
|
||||
"@types/node": "^18.6.4",
|
||||
"@types/react": "^18.0.15",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"axios": "^0.27.2",
|
||||
"coingecko-api": "^1.0.10",
|
||||
"dotenv": "^16.0.2",
|
||||
"ethers": "^5.6.9",
|
||||
"long": "^5.2.0",
|
||||
"numeral": "^2.0.6",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.7.4",
|
||||
"web-vitals": "^2.1.4",
|
||||
"web3": "^1.7.5"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-app-rewired start",
|
||||
"build": "react-app-rewired build",
|
||||
"test": "react-app-rewired test",
|
||||
"eject": "react-app-rewired eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/numeral": "^2.0.2",
|
||||
"browserify-zlib": "^0.2.0",
|
||||
"buffer": "^6.0.3",
|
||||
"console-browserify": "^1.2.0",
|
||||
"constants-browserify": "^1.0.0",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"https-browserify": "^1.0.0",
|
||||
"os-browserify": "^0.3.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"prettier": "^2.3.2",
|
||||
"process": "^0.11.10",
|
||||
"react-app-rewired": "^2.2.1",
|
||||
"readable-stream": "^3.6.0",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"timers-browserify": "^2.0.12",
|
||||
"tty-browserify": "^0.0.1",
|
||||
"util": "^0.12.4",
|
||||
"vm-browserify": "^1.1.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="https://certusone.github.io/wormhole-dashboard/mstile-150x150.png"/>
|
||||
<TileColor>#da532c</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="A dashboard for monitoring Wormhole" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="%PUBLIC_URL%/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="%PUBLIC_URL%/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="%PUBLIC_URL%/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
|
||||
<link
|
||||
rel="mask-icon"
|
||||
href="%PUBLIC_URL%/safari-pinned-tab.svg"
|
||||
color="#5bbad5"
|
||||
/>
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="msapplication-TileColor" content="#da532c" />
|
||||
<meta
|
||||
name="msapplication-config"
|
||||
content="%PUBLIC_URL%/browserconfig.xml"
|
||||
/>
|
||||
<title>Wormhole Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2 5343 c0 -912 3 -1642 5 -1623 20 210 27 270 44 370 118 697 437
|
||||
1318 944 1839 536 551 1184 896 1915 1020 100 17 160 24 370 44 19 2 -711 5
|
||||
-1622 5 l-1658 2 2 -1657z"/>
|
||||
<path d="M3720 6993 c19 -1 84 -8 145 -13 566 -55 1147 -271 1620 -603 171
|
||||
-120 294 -225 476 -406 225 -226 376 -411 518 -638 l51 -83 -293 0 -292 0
|
||||
-105 106 c-207 208 -435 372 -705 504 -305 150 -565 226 -905 266 -175 20
|
||||
-515 15 -680 -11 -591 -91 -1101 -346 -1511 -755 -220 -218 -371 -428 -508
|
||||
-700 -167 -335 -255 -656 -281 -1036 l-12 -159 -86 -87 c-48 -49 -91 -88 -96
|
||||
-88 -16 0 1 432 24 582 94 624 376 1182 825 1634 434 437 985 718 1615 823
|
||||
697 117 1426 -39 2015 -431 167 -111 270 -194 425 -343 81 -78 111 -103 85
|
||||
-70 -395 503 -908 870 -1502 1075 -351 122 -666 174 -1043 173 -438 0 -808
|
||||
-69 -1200 -225 -738 -293 -1341 -866 -1705 -1620 -320 -665 -397 -1395 -223
|
||||
-2126 l32 -133 -109 -109 c-60 -61 -113 -110 -116 -110 -9 0 -63 189 -94 325
|
||||
-30 131 -62 342 -74 480 -5 60 -9 -563 -10 -1557 l-1 -1658 1658 2 c911 0
|
||||
1641 3 1622 5 -210 20 -270 27 -370 44 -526 89 -1040 308 -1466 624 -357 265
|
||||
-698 632 -922 991 l-50 81 61 7 c43 4 87 18 142 45 44 22 80 39 81 38 242
|
||||
-371 457 -612 764 -855 452 -356 1022 -591 1610 -664 139 -17 602 -17 740 0
|
||||
588 74 1114 285 1576 633 130 98 144 120 32 50 -340 -214 -709 -349 -1128
|
||||
-412 -118 -18 -191 -22 -395 -23 -334 -1 -533 25 -822 108 -252 73 -515 190
|
||||
-725 323 -249 158 -533 413 -718 643 -152 191 -301 433 -387 631 l-35 82 68
|
||||
68 c38 38 71 69 74 69 3 0 27 -52 54 -115 134 -316 335 -606 602 -865 674
|
||||
-655 1637 -906 2559 -669 347 90 717 276 1005 506 178 142 395 376 522 563
|
||||
l50 75 -43 -50 c-410 -472 -933 -743 -1558 -805 -643 -64 -1337 180 -1810 635
|
||||
-362 348 -592 795 -677 1314 l-17 103 27 26 26 26 53 -52 c51 -50 55 -58 66
|
||||
-125 106 -611 460 -1139 987 -1472 616 -390 1415 -430 2079 -105 621 303 1053
|
||||
874 1175 1553 11 61 20 123 20 138 0 25 4 28 60 37 163 29 284 140 325 297 12
|
||||
47 15 122 15 364 0 167 2 302 4 300 7 -7 46 -278 55 -384 5 -60 9 563 10 1558
|
||||
l1 1657 -1657 -2 c-912 0 -1642 -3 -1623 -5z m967 -1308 c349 -46 695 -176
|
||||
993 -374 l85 -56 -124 -3 -125 -3 -160 80 c-242 121 -476 192 -730 222 -146
|
||||
17 -473 7 -611 -20 -230 -44 -414 -106 -610 -206 -446 -229 -812 -627 -1001
|
||||
-1090 -18 -44 -37 -81 -43 -83 -5 -2 -22 3 -38 12 -16 8 -45 17 -65 21 l-37 7
|
||||
15 42 c37 96 157 329 221 426 102 154 181 250 317 385 355 353 797 569 1306
|
||||
640 135 18 462 18 607 0z m1941 -646 c62 -35 105 -96 121 -170 14 -66 15
|
||||
-1226 1 -1300 -21 -109 -97 -180 -201 -187 -78 -6 -136 16 -187 72 -22 24 -45
|
||||
61 -51 82 -7 25 -11 176 -11 404 l0 365 -1167 -1167 c-911 -911 -1178 -1172
|
||||
-1213 -1187 -55 -25 -152 -27 -206 -5 -29 11 -245 221 -802 777 l-762 762
|
||||
-758 -757 c-512 -511 -771 -763 -799 -777 -56 -28 -149 -28 -202 -2 -96 49
|
||||
-148 159 -121 258 12 45 63 99 869 906 661 662 867 863 905 882 64 32 151 34
|
||||
216 4 35 -15 218 -193 800 -774 l755 -755 1075 1075 1075 1075 -364 0 c-257 0
|
||||
-376 4 -405 12 -54 16 -128 90 -144 144 -33 111 13 225 110 273 43 21 49 21
|
||||
728 21 l685 0 53 -31z m-1710 14 c-2 -5 -10 -25 -18 -45 l-14 -38 -71 0 c-431
|
||||
0 -900 -215 -1189 -545 -251 -288 -405 -685 -406 -1050 l0 -70 -46 47 -45 47
|
||||
6 68 c33 368 135 643 345 928 127 172 254 289 435 402 219 137 487 227 746
|
||||
252 112 11 262 13 257 4z m1600 -1858 c7 -6 -19 -159 -45 -260 -79 -317 -276
|
||||
-646 -504 -843 -455 -394 -1055 -525 -1632 -357 -91 26 -257 93 -257 104 0 3
|
||||
16 19 35 34 l35 28 88 -34 c498 -197 1040 -138 1489 160 370 246 628 656 694
|
||||
1101 l13 84 40 -6 c22 -4 42 -9 44 -11z"/>
|
||||
<path d="M6990 3268 c0 -70 -16 -205 -41 -356 -87 -522 -308 -1043 -622 -1465
|
||||
-230 -310 -538 -611 -842 -824 -473 -332 -1054 -548 -1620 -603 -61 -5 -126
|
||||
-12 -145 -13 -19 -2 711 -5 1623 -5 l1657 -2 0 1660 c0 913 -2 1660 -5 1660
|
||||
-3 0 -5 -24 -5 -52z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "https://certusone.github.io/wormhole-dashboard/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "https://certusone.github.io/wormhole-dashboard/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { GitHub } from "@mui/icons-material";
|
||||
import {
|
||||
AppBar,
|
||||
Box,
|
||||
CssBaseline,
|
||||
IconButton,
|
||||
Toolbar,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import CustomThemeProvider from "./components/CustomThemeProvider";
|
||||
import Main from "./components/Main";
|
||||
import NetworkSelector from "./components/NetworkSelector";
|
||||
import Settings from "./components/Settings";
|
||||
import { NetworkContextProvider } from "./contexts/NetworkContext";
|
||||
import { SettingsContextProvider } from "./contexts/SettingsContext";
|
||||
import WormholeStatsIcon from "./icons/WormholeStatsIcon";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<SettingsContextProvider>
|
||||
<CustomThemeProvider>
|
||||
<CssBaseline />
|
||||
<NetworkContextProvider>
|
||||
<AppBar position="static">
|
||||
<Toolbar variant="dense">
|
||||
<Box pr={1} display="flex" alignItems="center">
|
||||
<WormholeStatsIcon />
|
||||
</Box>
|
||||
<Typography variant="h6">Explorer</Typography>
|
||||
<Box flexGrow={1} />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Main />
|
||||
</NetworkContextProvider>
|
||||
</CustomThemeProvider>
|
||||
</SettingsContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
import { GetLastHeartbeatsResponse_Entry } from "@certusone/wormhole-sdk-proto-web/lib/cjs/publicrpc/v1/publicrpc";
|
||||
import {
|
||||
ErrorOutline,
|
||||
InfoOutlined,
|
||||
WarningAmberOutlined,
|
||||
} from "@mui/icons-material";
|
||||
import {
|
||||
Alert,
|
||||
AlertColor,
|
||||
Box,
|
||||
Link,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { useMemo } from "react";
|
||||
import { ChainIdToHeartbeats } from "../hooks/useChainHeartbeats";
|
||||
import useLatestRelease from "../hooks/useLatestRelease";
|
||||
import chainIdToName from "../utils/chainIdToName";
|
||||
import CollapsibleSection from "./CollapsibleSection";
|
||||
|
||||
export const BEHIND_DIFF = 1000;
|
||||
|
||||
type AlertEntry = {
|
||||
severity: AlertColor;
|
||||
text: string;
|
||||
};
|
||||
|
||||
const alertSeverityOrder: AlertColor[] = [
|
||||
"error",
|
||||
"warning",
|
||||
"success",
|
||||
"info",
|
||||
];
|
||||
|
||||
function chainDownAlerts(
|
||||
heartbeats: GetLastHeartbeatsResponse_Entry[],
|
||||
chainIdsToHeartbeats: ChainIdToHeartbeats
|
||||
): AlertEntry[] {
|
||||
const downChains: { [chainId: string]: string[] } = {};
|
||||
Object.entries(chainIdsToHeartbeats).forEach(([chainId, chainHeartbeats]) => {
|
||||
// Search for known guardians without heartbeats
|
||||
const missingGuardians = heartbeats.filter(
|
||||
(guardianHeartbeat) =>
|
||||
chainHeartbeats.findIndex(
|
||||
(chainHeartbeat) =>
|
||||
chainHeartbeat.guardian === guardianHeartbeat.p2pNodeAddr
|
||||
) === -1
|
||||
);
|
||||
missingGuardians.forEach((guardianHeartbeat) => {
|
||||
if (!downChains[chainId]) {
|
||||
downChains[chainId] = [];
|
||||
}
|
||||
downChains[chainId].push(guardianHeartbeat.rawHeartbeat?.nodeName || "");
|
||||
});
|
||||
// Search for guardians with heartbeats but who are not picking up a height
|
||||
// Could be disconnected or erroring post initial checks
|
||||
// Track highest height to check for lagging guardians
|
||||
let highest = BigInt(0);
|
||||
chainHeartbeats.forEach((chainHeartbeat) => {
|
||||
const height = BigInt(chainHeartbeat.network.height);
|
||||
if (height > highest) {
|
||||
highest = height;
|
||||
}
|
||||
if (chainHeartbeat.network.height === "0") {
|
||||
if (!downChains[chainId]) {
|
||||
downChains[chainId] = [];
|
||||
}
|
||||
downChains[chainId].push(chainHeartbeat.name);
|
||||
}
|
||||
});
|
||||
// Search for guardians which are lagging significantly behind
|
||||
chainHeartbeats.forEach((chainHeartbeat) => {
|
||||
if (chainHeartbeat.network.height !== "0") {
|
||||
const height = BigInt(chainHeartbeat.network.height);
|
||||
const diff = highest - height;
|
||||
if (diff > BEHIND_DIFF) {
|
||||
if (!downChains[chainId]) {
|
||||
downChains[chainId] = [];
|
||||
}
|
||||
downChains[chainId].push(chainHeartbeat.name);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return Object.entries(downChains).map(([chainId, names]) => ({
|
||||
severity: names.length >= 7 ? "error" : "warning",
|
||||
text: `${names.length} guardian${names.length > 1 ? "s" : ""} [${names.join(
|
||||
", "
|
||||
)}] ${names.length > 1 ? "are" : "is"} down on ${chainIdToName(
|
||||
Number(chainId)
|
||||
)} (${chainId})!`,
|
||||
}));
|
||||
}
|
||||
|
||||
const releaseChecker = (
|
||||
release: string | null,
|
||||
heartbeats: GetLastHeartbeatsResponse_Entry[]
|
||||
): AlertEntry[] =>
|
||||
release === null
|
||||
? []
|
||||
: heartbeats
|
||||
.filter((heartbeat) => heartbeat.rawHeartbeat?.version !== release)
|
||||
.map((heartbeat) => ({
|
||||
severity: "info",
|
||||
text: `${heartbeat.rawHeartbeat?.nodeName} is not running the latest release (${heartbeat.rawHeartbeat?.version} !== ${release})`,
|
||||
}));
|
||||
|
||||
function Alerts({
|
||||
heartbeats,
|
||||
chainIdsToHeartbeats,
|
||||
}: {
|
||||
heartbeats: GetLastHeartbeatsResponse_Entry[];
|
||||
chainIdsToHeartbeats: ChainIdToHeartbeats;
|
||||
}) {
|
||||
const latestRelease = useLatestRelease();
|
||||
const alerts = useMemo(() => {
|
||||
const alerts: AlertEntry[] = [
|
||||
...chainDownAlerts(heartbeats, chainIdsToHeartbeats),
|
||||
...releaseChecker(latestRelease, heartbeats),
|
||||
];
|
||||
return alerts.sort((a, b) =>
|
||||
alertSeverityOrder.indexOf(a.severity) <
|
||||
alertSeverityOrder.indexOf(b.severity)
|
||||
? -1
|
||||
: alertSeverityOrder.indexOf(a.severity) >
|
||||
alertSeverityOrder.indexOf(b.severity)
|
||||
? 1
|
||||
: 0
|
||||
);
|
||||
}, [latestRelease, heartbeats, chainIdsToHeartbeats]);
|
||||
const numErrors = useMemo(
|
||||
() => alerts.filter((alert) => alert.severity === "error").length,
|
||||
[alerts]
|
||||
);
|
||||
const numInfos = useMemo(
|
||||
() => alerts.filter((alert) => alert.severity === "info").length,
|
||||
[alerts]
|
||||
);
|
||||
const numSuccess = useMemo(
|
||||
() => alerts.filter((alert) => alert.severity === "success").length,
|
||||
[alerts]
|
||||
);
|
||||
const numWarnings = useMemo(
|
||||
() => alerts.filter((alert) => alert.severity === "warning").length,
|
||||
[alerts]
|
||||
);
|
||||
return (
|
||||
<CollapsibleSection
|
||||
header={
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
paddingRight: 1,
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
title={
|
||||
<>
|
||||
<Typography variant="body1">
|
||||
This section shows alerts for the following conditions:
|
||||
</Typography>
|
||||
<List dense>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<ErrorOutline color="error" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Chains with a quorum of guardians down"
|
||||
secondary={`A guardian is considered down if it is
|
||||
reporting a height of 0, more than ${BEHIND_DIFF} behind the highest height, or missing from the list of
|
||||
heartbeats`}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<WarningAmberOutlined color="warning" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Chains with one or more guardians down"
|
||||
secondary={`A guardian is considered down if it is
|
||||
reporting a height of 0, more than ${BEHIND_DIFF} behind the highest height, or missing from the list of
|
||||
heartbeats`}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<InfoOutlined color="info" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Guardians not running the latest release"
|
||||
secondary={
|
||||
<>
|
||||
The guardian version is compared to the latest release
|
||||
from{" "}
|
||||
<Link
|
||||
href="https://github.com/wormhole-foundation/wormhole/releases"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
https://github.com/wormhole-foundation/wormhole/releases
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</>
|
||||
}
|
||||
componentsProps={{ tooltip: { sx: { maxWidth: "100%" } } }}
|
||||
>
|
||||
<Box>
|
||||
Alerts
|
||||
<InfoOutlined sx={{ fontSize: ".8em", ml: 0.5 }} />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Box flexGrow={1} />
|
||||
{numInfos > 0 ? (
|
||||
<>
|
||||
<InfoOutlined color="info" sx={{ ml: 2 }} />
|
||||
<Typography variant="h6" component="strong" sx={{ ml: 0.5 }}>
|
||||
{numInfos}
|
||||
</Typography>
|
||||
</>
|
||||
) : null}
|
||||
{numSuccess > 0 ? (
|
||||
<>
|
||||
<InfoOutlined color="success" sx={{ ml: 2 }} />
|
||||
<Typography variant="h6" component="strong" sx={{ ml: 0.5 }}>
|
||||
{numSuccess}
|
||||
</Typography>
|
||||
</>
|
||||
) : null}
|
||||
{numWarnings > 0 ? (
|
||||
<>
|
||||
<WarningAmberOutlined color="warning" sx={{ ml: 2 }} />
|
||||
<Typography variant="h6" component="strong" sx={{ ml: 0.5 }}>
|
||||
{numWarnings}
|
||||
</Typography>
|
||||
</>
|
||||
) : null}
|
||||
{numErrors > 0 ? (
|
||||
<>
|
||||
<ErrorOutline color="error" sx={{ ml: 2 }} />
|
||||
<Typography variant="h6" component="strong" sx={{ ml: 0.5 }}>
|
||||
{numErrors}
|
||||
</Typography>
|
||||
</>
|
||||
) : null}
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{alerts.map((alert) => (
|
||||
<Alert key={alert.text} severity={alert.severity}>
|
||||
{alert.text}
|
||||
</Alert>
|
||||
))}
|
||||
</CollapsibleSection>
|
||||
);
|
||||
}
|
||||
export default Alerts;
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import { Box, Card, Grid, Typography } from "@mui/material";
|
||||
import {
|
||||
createColumnHelper,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import {
|
||||
ChainIdToHeartbeats,
|
||||
HeartbeatInfo,
|
||||
} from "../hooks/useChainHeartbeats";
|
||||
import chainIdToName from "../utils/chainIdToName";
|
||||
import { BEHIND_DIFF } from "./Alerts";
|
||||
import Table from "./Table";
|
||||
|
||||
const columnHelper = createColumnHelper<HeartbeatInfo>();
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("name", {
|
||||
header: () => "Guardian",
|
||||
cell: (info) => (
|
||||
<Typography variant="body2" noWrap>
|
||||
{info.getValue()}
|
||||
</Typography>
|
||||
),
|
||||
sortingFn: `text`,
|
||||
}),
|
||||
columnHelper.accessor("network.height", {
|
||||
header: () => "Height",
|
||||
}),
|
||||
columnHelper.accessor("network.contractAddress", {
|
||||
header: () => "Contract",
|
||||
}),
|
||||
];
|
||||
|
||||
function Chain({
|
||||
chainId,
|
||||
heartbeats,
|
||||
}: {
|
||||
chainId: string;
|
||||
heartbeats: HeartbeatInfo[];
|
||||
}) {
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const table = useReactTable({
|
||||
columns,
|
||||
data: heartbeats,
|
||||
state: {
|
||||
sorting,
|
||||
},
|
||||
getRowId: (heartbeat) => heartbeat.guardian,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onSortingChange: setSorting,
|
||||
});
|
||||
const highest = useMemo(() => {
|
||||
let highest = BigInt(0);
|
||||
heartbeats.forEach((heartbeat) => {
|
||||
const height = BigInt(heartbeat.network.height);
|
||||
if (height > highest) {
|
||||
highest = height;
|
||||
}
|
||||
});
|
||||
return highest;
|
||||
}, [heartbeats]);
|
||||
const conditionalRowStyle = useCallback(
|
||||
(heartbeat: HeartbeatInfo) =>
|
||||
heartbeat.network.height === "0" ||
|
||||
highest - BigInt(heartbeat.network.height) > BEHIND_DIFF
|
||||
? { backgroundColor: "rgba(100,0,0,.2)" }
|
||||
: {},
|
||||
[highest]
|
||||
);
|
||||
return (
|
||||
<Grid key={chainId} item xs={12} lg={6}>
|
||||
<Card>
|
||||
<Box p={2}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
{chainIdToName(Number(chainId))} ({chainId})
|
||||
</Typography>
|
||||
<Typography>Guardians Listed: {heartbeats.length}</Typography>
|
||||
</Box>
|
||||
<Table<HeartbeatInfo>
|
||||
table={table}
|
||||
conditionalRowStyle={conditionalRowStyle}
|
||||
/>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
function Chains({
|
||||
chainIdsToHeartbeats,
|
||||
}: {
|
||||
chainIdsToHeartbeats: ChainIdToHeartbeats;
|
||||
}) {
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
{Object.keys(chainIdsToHeartbeats).map((chainId) => (
|
||||
<Chain
|
||||
key={chainId}
|
||||
chainId={chainId}
|
||||
heartbeats={chainIdsToHeartbeats[Number(chainId)]}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chains;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { ExpandMore } from "@mui/icons-material";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
function CollapsibleSection({
|
||||
header,
|
||||
children,
|
||||
}: {
|
||||
header: ReactNode;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Accordion
|
||||
defaultExpanded
|
||||
disableGutters
|
||||
sx={{
|
||||
background: "transparent",
|
||||
my: 0.5,
|
||||
"&.Mui-expanded:first-of-type": {
|
||||
marginTop: 0.5,
|
||||
},
|
||||
"&:not(:last-child)": {
|
||||
borderBottom: 0,
|
||||
},
|
||||
"&:before": {
|
||||
display: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||||
<Typography variant="h5" sx={{ width: "100%" }}>
|
||||
{header}
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>{children}</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
export default CollapsibleSection;
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import {
|
||||
Box,
|
||||
createTheme,
|
||||
responsiveFontSizes,
|
||||
ThemeProvider,
|
||||
} from "@mui/material";
|
||||
import { grey } from "@mui/material/colors";
|
||||
import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useSettingsContext } from "../contexts/SettingsContext";
|
||||
|
||||
const mediaQueryList =
|
||||
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
function CustomThemeProvider({ children }: { children: ReactNode }) {
|
||||
const {
|
||||
settings: { theme: themePreference, backgroundOpacity, backgroundUrl },
|
||||
} = useSettingsContext();
|
||||
const [userPrefersDark, setUserPrefersDark] = useState<boolean>(
|
||||
mediaQueryList && mediaQueryList.matches ? true : false
|
||||
);
|
||||
const handleUserPreferenceChange = useCallback(
|
||||
(event: MediaQueryListEvent) => {
|
||||
setUserPrefersDark(event.matches ? true : false);
|
||||
},
|
||||
[]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (themePreference === "auto") {
|
||||
mediaQueryList.addEventListener("change", handleUserPreferenceChange);
|
||||
return () => {
|
||||
mediaQueryList.removeEventListener(
|
||||
"change",
|
||||
handleUserPreferenceChange
|
||||
);
|
||||
};
|
||||
}
|
||||
}, [themePreference, handleUserPreferenceChange]);
|
||||
const mode = "light";
|
||||
// themePreference === "dark" ||
|
||||
// (themePreference === "auto" && userPrefersDark)
|
||||
// ? "dark"
|
||||
// : "light";
|
||||
const theme = useMemo(
|
||||
() =>
|
||||
responsiveFontSizes(
|
||||
createTheme({
|
||||
palette: {
|
||||
mode,
|
||||
},
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: {
|
||||
body: {
|
||||
overflowY: "scroll",
|
||||
},
|
||||
"*": {
|
||||
scrollbarWidth: "thin",
|
||||
scrollbarColor:
|
||||
// mode === "dark"
|
||||
// ? `${grey[700]} ${grey[900]}`
|
||||
// :
|
||||
`${grey[400]} rgb(255,255,255)`,
|
||||
},
|
||||
"*::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
backgroundColor:
|
||||
// mode === "dark" ? grey[900] :
|
||||
"rgb(255,255,255)",
|
||||
},
|
||||
"*::-webkit-scrollbar-thumb": {
|
||||
// mode === "dark" ? grey[700] :
|
||||
backgroundColor: grey[400],
|
||||
borderRadius: "4px",
|
||||
},
|
||||
"*::-webkit-scrollbar-corner": {
|
||||
// this hides an annoying white box which appears when both scrollbars are present
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
),
|
||||
[mode]
|
||||
);
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
{children}
|
||||
{backgroundUrl && (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundImage: `url(${backgroundUrl})`,
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
opacity: backgroundOpacity || 0.1,
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomThemeProvider;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { ChainId, getSignedVAA } from "@certusone/wormhole-sdk";
|
||||
import { GovernorGetEnqueuedVAAsResponse_Entry } from "@certusone/wormhole-sdk-proto-web/lib/cjs/publicrpc/v1/publicrpc";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNetworkContext } from "../contexts/NetworkContext";
|
||||
|
||||
const VAA_CHECK_TIMEOUT = 60000;
|
||||
|
||||
function EnqueuedVAAChecker({
|
||||
vaa: { emitterAddress, emitterChain, sequence },
|
||||
}: {
|
||||
vaa: GovernorGetEnqueuedVAAsResponse_Entry;
|
||||
}) {
|
||||
const {
|
||||
currentNetwork: { endpoint },
|
||||
} = useNetworkContext();
|
||||
const [vaaHasQuorum, setVaaHasQuorum] = useState<boolean | null>(null);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
while (!cancelled) {
|
||||
setVaaHasQuorum(null);
|
||||
let result = false;
|
||||
try {
|
||||
const response = await getSignedVAA(
|
||||
endpoint,
|
||||
emitterChain as ChainId,
|
||||
emitterAddress,
|
||||
sequence
|
||||
);
|
||||
if (!!response.vaaBytes) result = true;
|
||||
} catch (e) {}
|
||||
if (!cancelled) {
|
||||
setVaaHasQuorum(result);
|
||||
if (result) {
|
||||
cancelled = true;
|
||||
return;
|
||||
}
|
||||
await new Promise((resolve) =>
|
||||
setTimeout(resolve, VAA_CHECK_TIMEOUT)
|
||||
);
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [endpoint, emitterChain, emitterAddress, sequence]);
|
||||
return (
|
||||
<span role="img">
|
||||
{vaaHasQuorum === null ? "⏳" : vaaHasQuorum ? "✅" : "❌"}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnqueuedVAAChecker;
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
import {
|
||||
GovernorGetAvailableNotionalByChainResponse_Entry,
|
||||
GovernorGetEnqueuedVAAsResponse_Entry,
|
||||
GovernorGetTokenListResponse_Entry,
|
||||
} from "@certusone/wormhole-sdk-proto-web/lib/cjs/publicrpc/v1/publicrpc";
|
||||
import { ExpandMore } from "@mui/icons-material";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Box,
|
||||
Card,
|
||||
LinearProgress,
|
||||
Link,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
createColumnHelper,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { useMemo, useState } from "react";
|
||||
import useGovernorInfo from "../hooks/useGovernorInfo";
|
||||
import chainIdToName from "../utils/chainIdToName";
|
||||
import Table from "./Table";
|
||||
import numeral from "numeral";
|
||||
import EnqueuedVAAChecker from "./EnqueuedVAAChecker";
|
||||
import { CHAIN_INFO_MAP } from "../utils/consts";
|
||||
import {
|
||||
ChainId,
|
||||
CHAIN_ID_ALGORAND,
|
||||
CHAIN_ID_NEAR,
|
||||
CHAIN_ID_TERRA2,
|
||||
isEVMChain,
|
||||
tryHexToNativeAssetString,
|
||||
tryHexToNativeString,
|
||||
} from "@certusone/wormhole-sdk";
|
||||
import useSymbolInfo from "../hooks/useSymbolInfo";
|
||||
|
||||
const calculatePercent = (
|
||||
notional: GovernorGetAvailableNotionalByChainResponse_Entry
|
||||
): number => {
|
||||
try {
|
||||
return (
|
||||
((Number(notional.notionalLimit) -
|
||||
Number(notional.remainingAvailableNotional)) /
|
||||
Number(notional.notionalLimit)) *
|
||||
100
|
||||
);
|
||||
} catch (e) {
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
const notionalColumnHelper =
|
||||
createColumnHelper<GovernorGetAvailableNotionalByChainResponse_Entry>();
|
||||
|
||||
const notionalColumns = [
|
||||
notionalColumnHelper.accessor("chainId", {
|
||||
header: () => "Chain",
|
||||
cell: (info) => `${chainIdToName(info.getValue())} (${info.getValue()})`,
|
||||
sortingFn: `text`,
|
||||
}),
|
||||
notionalColumnHelper.accessor("notionalLimit", {
|
||||
header: () => <Box order="1">Limit</Box>,
|
||||
cell: (info) => (
|
||||
<Box textAlign="right">${numeral(info.getValue()).format("0,0")}</Box>
|
||||
),
|
||||
}),
|
||||
notionalColumnHelper.accessor("bigTransactionSize", {
|
||||
header: () => <Box order="1">Big Transaction</Box>,
|
||||
cell: (info) => (
|
||||
<Box textAlign="right">${numeral(info.getValue()).format("0,0")}</Box>
|
||||
),
|
||||
}),
|
||||
notionalColumnHelper.accessor("remainingAvailableNotional", {
|
||||
header: () => <Box order="1">Remaining</Box>,
|
||||
cell: (info) => (
|
||||
<Box textAlign="right">${numeral(info.getValue()).format("0,0")}</Box>
|
||||
),
|
||||
}),
|
||||
notionalColumnHelper.accessor(calculatePercent, {
|
||||
id: "progress",
|
||||
header: () => "Progress",
|
||||
cell: (info) => (
|
||||
<Tooltip title={info.getValue()} arrow>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={info.getValue()}
|
||||
color={
|
||||
info.getValue() > 80
|
||||
? "error"
|
||||
: info.getValue() > 50
|
||||
? "warning"
|
||||
: "success"
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
),
|
||||
}),
|
||||
];
|
||||
|
||||
const enqueuedColumnHelper =
|
||||
createColumnHelper<GovernorGetEnqueuedVAAsResponse_Entry>();
|
||||
|
||||
const enqueuedColumns = [
|
||||
enqueuedColumnHelper.accessor("emitterChain", {
|
||||
header: () => "Chain",
|
||||
cell: (info) => `${chainIdToName(info.getValue())} (${info.getValue()})`,
|
||||
sortingFn: `text`,
|
||||
}),
|
||||
enqueuedColumnHelper.accessor("emitterAddress", {
|
||||
header: () => "Emitter",
|
||||
}),
|
||||
enqueuedColumnHelper.accessor("sequence", {
|
||||
header: () => "Sequence",
|
||||
cell: (info) => (
|
||||
<Link
|
||||
href={`https://wormhole-v2-mainnet-api.certus.one/v1/signed_vaa/${info.row.original.emitterChain}/${info.row.original.emitterAddress}/${info.row.original.sequence}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{info.getValue()}
|
||||
</Link>
|
||||
),
|
||||
}),
|
||||
enqueuedColumnHelper.display({
|
||||
id: "hasQuorum",
|
||||
header: () => "Has Quorum?",
|
||||
cell: (info) => <EnqueuedVAAChecker vaa={info.row.original} />,
|
||||
}),
|
||||
enqueuedColumnHelper.accessor("txHash", {
|
||||
header: () => "Transaction Hash",
|
||||
cell: (info) => {
|
||||
const chain = info.row.original.emitterChain;
|
||||
const chainInfo = CHAIN_INFO_MAP[chain];
|
||||
var txHash: string = "";
|
||||
if (!isEVMChain(chainInfo.chainId)) {
|
||||
txHash = tryHexToNativeString(
|
||||
info.getValue().slice(2),
|
||||
CHAIN_INFO_MAP[chain].chainId
|
||||
);
|
||||
} else {
|
||||
txHash = info.getValue();
|
||||
}
|
||||
const explorerString = chainInfo.explorerStem;
|
||||
const url = `${explorerString}/tx/${txHash}`;
|
||||
return (
|
||||
<Link href={url} target="_blank" rel="noopener noreferrer">
|
||||
{txHash}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
}),
|
||||
enqueuedColumnHelper.accessor("releaseTime", {
|
||||
header: () => "Release Time",
|
||||
cell: (info) => new Date(info.getValue() * 1000).toLocaleString(),
|
||||
}),
|
||||
enqueuedColumnHelper.accessor("notionalValue", {
|
||||
header: () => <Box order="1">Notional Value</Box>,
|
||||
cell: (info) => (
|
||||
<Box textAlign="right">${numeral(info.getValue()).format("0,0")}</Box>
|
||||
),
|
||||
}),
|
||||
];
|
||||
|
||||
interface GovernorGetTokenListResponse_Entry_ext
|
||||
extends GovernorGetTokenListResponse_Entry {
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
const tokenColumnHelper =
|
||||
createColumnHelper<GovernorGetTokenListResponse_Entry_ext>();
|
||||
|
||||
const tokenColumns = [
|
||||
tokenColumnHelper.accessor("originChainId", {
|
||||
header: () => "Chain",
|
||||
cell: (info) => `${chainIdToName(info.getValue())} (${info.getValue()})`,
|
||||
sortingFn: `text`,
|
||||
}),
|
||||
tokenColumnHelper.accessor("originAddress", {
|
||||
header: () => "Token",
|
||||
cell: (info) => {
|
||||
const chain = info.row.original.originChainId;
|
||||
const chainInfo = CHAIN_INFO_MAP[chain];
|
||||
const chainId: ChainId = chainInfo.chainId;
|
||||
var tokenAddress: string = "";
|
||||
if (
|
||||
chainId === CHAIN_ID_ALGORAND ||
|
||||
chainId === CHAIN_ID_NEAR ||
|
||||
chainId === CHAIN_ID_TERRA2
|
||||
) {
|
||||
return info.getValue();
|
||||
}
|
||||
try {
|
||||
tokenAddress = tryHexToNativeAssetString(
|
||||
info.getValue().slice(2),
|
||||
CHAIN_INFO_MAP[chain]?.chainId
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
tokenAddress = info.getValue();
|
||||
}
|
||||
|
||||
const explorerString = chainInfo?.explorerStem;
|
||||
const url = `${explorerString}/address/${tokenAddress}`;
|
||||
return (
|
||||
<Link href={url} target="_blank" rel="noopener noreferrer">
|
||||
{tokenAddress}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
}),
|
||||
tokenColumnHelper.display({
|
||||
id: "Symbol",
|
||||
header: () => "Symbol",
|
||||
cell: (info) => `${info.row.original?.symbol}`,
|
||||
}),
|
||||
tokenColumnHelper.accessor("price", {
|
||||
header: () => <Box order="1">Price</Box>,
|
||||
cell: (info) => (
|
||||
<Box textAlign="right">
|
||||
${numeral(info.getValue()).format("0,0.0000")}
|
||||
</Box>
|
||||
),
|
||||
}),
|
||||
];
|
||||
|
||||
function Governor() {
|
||||
const governorInfo = useGovernorInfo();
|
||||
const tokenSymbols = useSymbolInfo(governorInfo.tokens);
|
||||
// TODO: governorInfo.tokens triggers updates to displayTokens, not tokenSymbols
|
||||
// Should fix this
|
||||
const displayTokens = useMemo(
|
||||
() =>
|
||||
governorInfo.tokens.map((tk) => ({
|
||||
...tk,
|
||||
symbol:
|
||||
tokenSymbols.get([tk.originChainId, tk.originAddress].join("_"))
|
||||
?.symbol || "",
|
||||
})),
|
||||
[governorInfo.tokens, tokenSymbols]
|
||||
);
|
||||
|
||||
const [notionalSorting, setNotionalSorting] = useState<SortingState>([]);
|
||||
const notionalTable = useReactTable({
|
||||
columns: notionalColumns,
|
||||
data: governorInfo.notionals,
|
||||
state: {
|
||||
sorting: notionalSorting,
|
||||
},
|
||||
getRowId: (notional) => notional.chainId.toString(),
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onSortingChange: setNotionalSorting,
|
||||
});
|
||||
const [enqueuedSorting, setEnqueuedSorting] = useState<SortingState>([]);
|
||||
const enqueuedTable = useReactTable({
|
||||
columns: enqueuedColumns,
|
||||
data: governorInfo.enqueued,
|
||||
state: {
|
||||
sorting: enqueuedSorting,
|
||||
},
|
||||
getRowId: (vaa) => JSON.stringify(vaa),
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onSortingChange: setEnqueuedSorting,
|
||||
});
|
||||
const [tokenSorting, setTokenSorting] = useState<SortingState>([]);
|
||||
const tokenTable = useReactTable({
|
||||
columns: tokenColumns,
|
||||
data: displayTokens,
|
||||
state: {
|
||||
sorting: tokenSorting,
|
||||
},
|
||||
getRowId: (token) => `${token.originChainId}_${token.originAddress}`,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onSortingChange: setTokenSorting,
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<Box mb={2}>
|
||||
<Card>
|
||||
<Table<GovernorGetAvailableNotionalByChainResponse_Entry>
|
||||
table={notionalTable}
|
||||
/>
|
||||
</Card>
|
||||
</Box>
|
||||
<Box my={2}>
|
||||
<Card>
|
||||
<Table<GovernorGetEnqueuedVAAsResponse_Entry> table={enqueuedTable} />
|
||||
{governorInfo.enqueued.length === 0 ? (
|
||||
<Typography variant="body2" sx={{ py: 1, textAlign: "center" }}>
|
||||
No enqueued VAAs
|
||||
</Typography>
|
||||
) : null}
|
||||
</Card>
|
||||
</Box>
|
||||
<Box mt={2}>
|
||||
<Card>
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||||
<Typography>Tokens ({governorInfo.tokens.length})</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Table<GovernorGetTokenListResponse_Entry_ext>
|
||||
table={tokenTable}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</Card>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Governor;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { Card } from "@mui/material";
|
||||
import {
|
||||
createColumnHelper,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { useState } from "react";
|
||||
import { HeartbeatResponse } from "../hooks/useHeartbeats";
|
||||
import longToDate from "../utils/longToDate";
|
||||
import Table from "./Table";
|
||||
|
||||
const columnHelper = createColumnHelper<HeartbeatResponse>();
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("nodename", {
|
||||
header: () => "Guardian",
|
||||
sortingFn: `text`,
|
||||
}),
|
||||
columnHelper.accessor("version", {
|
||||
header: () => "Version",
|
||||
}),
|
||||
columnHelper.accessor("features", {
|
||||
header: () => "Features",
|
||||
cell: (info) => {
|
||||
const value = info.getValue();
|
||||
return value && value.length > 0 ? value.join(", ") : "none";
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("counter", {
|
||||
header: () => "Counter",
|
||||
}),
|
||||
columnHelper.accessor("boottimestamp", {
|
||||
header: () => "Boot",
|
||||
cell: (info) =>
|
||||
info.getValue() ? longToDate(info.getValue()).toLocaleString() : null,
|
||||
}),
|
||||
columnHelper.accessor("timestamp", {
|
||||
header: () => "Timestamp",
|
||||
cell: (info) =>
|
||||
info.getValue() ? longToDate(info.getValue()).toLocaleString() : null,
|
||||
}),
|
||||
columnHelper.accessor("guardianaddr", {
|
||||
header: () => "Address",
|
||||
}),
|
||||
];
|
||||
|
||||
function Guardians({ heartbeats }: { heartbeats: HeartbeatResponse[] }) {
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const table = useReactTable({
|
||||
columns,
|
||||
data: heartbeats,
|
||||
state: {
|
||||
sorting,
|
||||
},
|
||||
getRowId: (heartbeat) => heartbeat.guardianaddr,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onSortingChange: setSorting,
|
||||
});
|
||||
return (
|
||||
<Card>
|
||||
<Table<HeartbeatResponse> table={table} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Guardians;
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import { Card } from "@mui/material";
|
||||
import {
|
||||
createColumnHelper,
|
||||
getCoreRowModel,
|
||||
getExpandedRowModel,
|
||||
getSortedRowModel,
|
||||
Row,
|
||||
SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { ReactNode, useState } from "react";
|
||||
import useLatestVAAs, { VAAsResponse } from "../hooks/useLatestVAAs";
|
||||
import Table from "./Table";
|
||||
import { _parseVAAAlgorand } from "@certusone/wormhole-sdk/lib/esm/algorand/Algorand";
|
||||
import { BigNumber } from "ethers";
|
||||
import { ChainId, tryHexToNativeString } from "@certusone/wormhole-sdk";
|
||||
|
||||
const columnHelper = createColumnHelper<VAAsResponse>();
|
||||
|
||||
const columns = [
|
||||
columnHelper.display({
|
||||
id: "_expand",
|
||||
cell: ({ row }) =>
|
||||
row.getCanExpand() ? (
|
||||
<button
|
||||
{...{
|
||||
onClick: row.getToggleExpandedHandler(),
|
||||
style: { cursor: "pointer" },
|
||||
}}
|
||||
>
|
||||
{row.getIsExpanded() ? "👇" : "👉"}
|
||||
</button>
|
||||
) : null,
|
||||
}),
|
||||
columnHelper.accessor("_id", {
|
||||
id: "chain",
|
||||
header: () => "Chain",
|
||||
cell: (info) => info.getValue().split("/")[0],
|
||||
}),
|
||||
columnHelper.accessor("_id", {
|
||||
id: "emitter",
|
||||
header: () => "Emitter",
|
||||
cell: (info) => info.getValue().split("/")[1],
|
||||
}),
|
||||
columnHelper.accessor("_id", {
|
||||
id: "sequence",
|
||||
header: () => "Sequence",
|
||||
cell: (info) => info.getValue().split("/")[2],
|
||||
}),
|
||||
];
|
||||
|
||||
function VAADetails({ row }: { row: Row<VAAsResponse> }): ReactNode {
|
||||
const parsedVaa = _parseVAAAlgorand(
|
||||
new Uint8Array(Buffer.from(row.original.vaa, "base64"))
|
||||
);
|
||||
let token = parsedVaa.Contract;
|
||||
// FromChain is a misnomer - actually OriginChain
|
||||
if (parsedVaa.Contract && parsedVaa.FromChain)
|
||||
try {
|
||||
token = tryHexToNativeString(
|
||||
parsedVaa.Contract,
|
||||
parsedVaa.FromChain as ChainId
|
||||
);
|
||||
} catch (e) {}
|
||||
return (
|
||||
<>
|
||||
Version: {parsedVaa.version}
|
||||
<br />
|
||||
Timestamp: {new Date(parsedVaa.timestamp * 1000).toLocaleString()}
|
||||
<br />
|
||||
Consistency: {parsedVaa.consistency}
|
||||
<br />
|
||||
Nonce: {parsedVaa.nonce}
|
||||
<br />
|
||||
Origin: {parsedVaa.FromChain}
|
||||
<br />
|
||||
Token: {token}
|
||||
<br />
|
||||
Amount: {BigNumber.from(parsedVaa.Amount).toString()}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function LatestVAAs() {
|
||||
const vaas = useLatestVAAs();
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const table = useReactTable({
|
||||
columns,
|
||||
data: vaas,
|
||||
state: {
|
||||
sorting,
|
||||
},
|
||||
getRowId: (vaa) => vaa._id,
|
||||
getRowCanExpand: () => true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getExpandedRowModel: getExpandedRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onSortingChange: setSorting,
|
||||
});
|
||||
return (
|
||||
<Card>
|
||||
<Table<VAAsResponse> table={table} renderSubComponent={VAADetails} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
export default LatestVAAs;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import useHeartbeats from "../hooks/useHeartbeats";
|
||||
import Guardians from "./Guardians";
|
||||
import LatestVAAs from "./LatestVAAs";
|
||||
|
||||
function Main() {
|
||||
const heartbeats = useHeartbeats();
|
||||
return (
|
||||
<>
|
||||
<Guardians heartbeats={heartbeats} />
|
||||
<LatestVAAs />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Main;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { MenuItem, Select, SelectChangeEvent, useTheme } from "@mui/material";
|
||||
import { useCallback } from "react";
|
||||
import { networkOptions, useNetworkContext } from "../contexts/NetworkContext";
|
||||
|
||||
function NetworkSelector() {
|
||||
const theme = useTheme();
|
||||
const { currentNetwork, setCurrentNetwork } = useNetworkContext();
|
||||
const handleChange = useCallback(
|
||||
(e: SelectChangeEvent) => {
|
||||
setCurrentNetwork(networkOptions[Number(e.target.value)]);
|
||||
},
|
||||
[setCurrentNetwork]
|
||||
);
|
||||
return (
|
||||
<Select
|
||||
onChange={handleChange}
|
||||
value={(networkOptions.indexOf(currentNetwork) || 0).toString()}
|
||||
margin="dense"
|
||||
size="small"
|
||||
sx={{
|
||||
minWidth: 130,
|
||||
// theme fixes
|
||||
"& img": { filter: "invert(0)!important" },
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor:
|
||||
theme.palette.mode === "light" ? "rgba(255,255,255,.6)" : null,
|
||||
},
|
||||
"&:hover .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor:
|
||||
theme.palette.mode === "light" ? "rgba(255,255,255,.8)" : null,
|
||||
},
|
||||
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor:
|
||||
theme.palette.mode === "light" ? "rgba(255,255,255,.8)" : null,
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
fill: theme.palette.mode === "light" ? "white" : null,
|
||||
},
|
||||
}}
|
||||
SelectDisplayProps={{
|
||||
style: { paddingTop: 4, paddingBottom: 4 },
|
||||
}}
|
||||
>
|
||||
{networkOptions.map((network, idx) => (
|
||||
<MenuItem key={network.endpoint} value={idx}>
|
||||
{network.logo !== "" ? (
|
||||
<img
|
||||
src={network.logo}
|
||||
alt={network.name}
|
||||
style={{
|
||||
height: 20,
|
||||
maxHeight: 20,
|
||||
verticalAlign: "middle",
|
||||
// theme fixes
|
||||
...(theme.palette.mode === "light"
|
||||
? { filter: "invert(1)" }
|
||||
: {}),
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
network.name
|
||||
)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
export default NetworkSelector;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import {
|
||||
ContrastOutlined,
|
||||
DarkModeOutlined,
|
||||
LightModeOutlined,
|
||||
SettingsOutlined,
|
||||
} from "@mui/icons-material";
|
||||
import {
|
||||
Box,
|
||||
Dialog,
|
||||
IconButton,
|
||||
Slider,
|
||||
TextField,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { useCallback, useState } from "react";
|
||||
import { Theme, useSettingsContext } from "../contexts/SettingsContext";
|
||||
|
||||
function SettingsContent() {
|
||||
const {
|
||||
settings,
|
||||
updateBackgroundOpacity,
|
||||
updateBackgroundUrl,
|
||||
updateTheme,
|
||||
} = useSettingsContext();
|
||||
const handleThemeChange = useCallback(
|
||||
(event: any, newTheme: Theme) => {
|
||||
updateTheme(newTheme);
|
||||
},
|
||||
[updateTheme]
|
||||
);
|
||||
const handleBackgroundOpacityChange = useCallback(
|
||||
(event: any) => {
|
||||
updateBackgroundOpacity(event.target.value);
|
||||
},
|
||||
[updateBackgroundOpacity]
|
||||
);
|
||||
const handleBackgroundUrlChange = useCallback(
|
||||
(event: any) => {
|
||||
updateBackgroundUrl(event.target.value);
|
||||
},
|
||||
[updateBackgroundUrl]
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Box mt={2} mx={2} textAlign="center">
|
||||
<ToggleButtonGroup
|
||||
value={settings.theme}
|
||||
exclusive
|
||||
onChange={handleThemeChange}
|
||||
>
|
||||
<ToggleButton value="light">
|
||||
<LightModeOutlined />
|
||||
</ToggleButton>
|
||||
<ToggleButton value="dark">
|
||||
<DarkModeOutlined />
|
||||
</ToggleButton>
|
||||
<ToggleButton value="auto">
|
||||
<ContrastOutlined />
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
<Box m={2}>
|
||||
<TextField
|
||||
value={settings.backgroundUrl || ""}
|
||||
onChange={handleBackgroundUrlChange}
|
||||
label="Background URL"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
</Box>
|
||||
<Box m={2}>
|
||||
<Typography variant="body2">Background Opacity</Typography>
|
||||
<Box pr={2} pt={2}>
|
||||
<Slider
|
||||
min={0.05}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={settings.backgroundOpacity || 0.1}
|
||||
onChange={handleBackgroundOpacityChange}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Settings() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = useCallback(() => {
|
||||
setOpen(true);
|
||||
}, []);
|
||||
const handleClose = useCallback(() => {
|
||||
setOpen(false);
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<IconButton color="inherit" onClick={handleOpen}>
|
||||
<SettingsOutlined />
|
||||
</IconButton>
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="xs" fullWidth>
|
||||
<SettingsContent />
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
|
||||
import {
|
||||
Box,
|
||||
SxProps,
|
||||
Table as MuiTable,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Theme,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { grey } from "@mui/material/colors";
|
||||
import { flexRender, Row, Table as TanTable } from "@tanstack/react-table";
|
||||
import { Fragment, ReactNode } from "react";
|
||||
|
||||
function Table<T>({
|
||||
table,
|
||||
conditionalRowStyle,
|
||||
renderSubComponent,
|
||||
}: {
|
||||
table: TanTable<T>;
|
||||
conditionalRowStyle?: (a: T) => SxProps<Theme> | undefined;
|
||||
renderSubComponent?: ({ row }: { row: Row<T> }) => ReactNode;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<TableContainer>
|
||||
<MuiTable size="small">
|
||||
<TableHead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableCell
|
||||
key={header.id}
|
||||
sx={
|
||||
header.column.getCanSort()
|
||||
? {
|
||||
cursor: "pointer",
|
||||
userSelect: "select-none",
|
||||
":hover": {
|
||||
background:
|
||||
theme.palette.mode === "dark"
|
||||
? grey[800]
|
||||
: grey[100],
|
||||
},
|
||||
}
|
||||
: {}
|
||||
}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
<Box display="flex" alignContent="center">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
<Box flexGrow={1} />
|
||||
<Box display="flex" alignItems="center">
|
||||
{{
|
||||
asc: <ArrowUpward fontSize="small" sx={{ ml: 0.5 }} />,
|
||||
desc: (
|
||||
<ArrowDownward fontSize="small" sx={{ ml: 0.5 }} />
|
||||
),
|
||||
}[header.column.getIsSorted() as string] ?? null}
|
||||
</Box>
|
||||
</Box>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<Fragment key={row.id}>
|
||||
<TableRow
|
||||
sx={
|
||||
conditionalRowStyle ? conditionalRowStyle(row.original) : {}
|
||||
}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
{renderSubComponent && row.getIsExpanded() && (
|
||||
<TableRow>
|
||||
{/* 2nd row is a custom 1 cell row */}
|
||||
<TableCell colSpan={row.getVisibleCells().length}>
|
||||
{renderSubComponent({ row })}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</TableBody>
|
||||
</MuiTable>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
export default Table;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,111 @@
|
|||
import React, {
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
const STORAGE_KEY = "settings";
|
||||
|
||||
export type Theme = "light" | "dark" | "auto";
|
||||
|
||||
type Settings = {
|
||||
backgroundUrl?: string;
|
||||
backgroundOpacity?: number;
|
||||
defaultEndpoint?: string;
|
||||
theme: Theme;
|
||||
};
|
||||
|
||||
type SettingsContextValue = {
|
||||
settings: Settings;
|
||||
updateBackgroundOpacity(value: number): void;
|
||||
updateBackgroundUrl(value: string): void;
|
||||
updateDefaultEndpoint(value: string): void;
|
||||
updateTheme(value: Theme): void;
|
||||
};
|
||||
|
||||
const isTheme = (arg: any): arg is Theme => {
|
||||
return arg && (arg === "light" || arg === "dark" || arg === "auto");
|
||||
};
|
||||
|
||||
const isSettings = (arg: any): arg is Settings => {
|
||||
return arg && arg.theme && isTheme(arg.theme);
|
||||
};
|
||||
|
||||
let localStorageSettings: Settings | null = null;
|
||||
try {
|
||||
const value = localStorage.getItem(STORAGE_KEY);
|
||||
if (value) {
|
||||
const parsedValue = JSON.parse(value);
|
||||
if (isSettings(parsedValue)) {
|
||||
localStorageSettings = parsedValue;
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
const initialSettings: Settings = localStorageSettings || { theme: "auto" };
|
||||
|
||||
const saveSettings = (settings: Settings) => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
const SettingsContext = React.createContext<SettingsContextValue>({
|
||||
settings: initialSettings,
|
||||
updateBackgroundOpacity: (value: number) => {},
|
||||
updateBackgroundUrl: (value: string) => {},
|
||||
updateDefaultEndpoint: (value: string) => {},
|
||||
updateTheme: (value: Theme) => {},
|
||||
});
|
||||
|
||||
export const SettingsContextProvider = ({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) => {
|
||||
const [settings, setSettings] = useState<Settings>(initialSettings);
|
||||
const updateBackgroundOpacity = useCallback((value: number) => {
|
||||
setSettings((settings) => ({ ...settings, backgroundOpacity: value }));
|
||||
}, []);
|
||||
const updateBackgroundUrl = useCallback((value: string) => {
|
||||
setSettings((settings) => ({ ...settings, backgroundUrl: value }));
|
||||
}, []);
|
||||
const updateDefaultEndpoint = useCallback((value: string) => {
|
||||
setSettings((settings) => ({ ...settings, defaultEndpoint: value }));
|
||||
}, []);
|
||||
const updateTheme = useCallback((value: Theme) => {
|
||||
setSettings((settings) => ({ ...settings, theme: value }));
|
||||
}, []);
|
||||
// sync settings to state
|
||||
useEffect(() => {
|
||||
saveSettings(settings);
|
||||
}, [settings]);
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
settings,
|
||||
updateBackgroundOpacity,
|
||||
updateBackgroundUrl,
|
||||
updateDefaultEndpoint,
|
||||
updateTheme,
|
||||
}),
|
||||
[
|
||||
settings,
|
||||
updateBackgroundOpacity,
|
||||
updateBackgroundUrl,
|
||||
updateDefaultEndpoint,
|
||||
updateTheme,
|
||||
]
|
||||
);
|
||||
return (
|
||||
<SettingsContext.Provider value={value}>
|
||||
{children}
|
||||
</SettingsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useSettingsContext = () => {
|
||||
return useContext(SettingsContext);
|
||||
};
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { Heartbeat_Network } from "@certusone/wormhole-sdk-proto-web/lib/cjs/gossip/v1/gossip";
|
||||
import { GetLastHeartbeatsResponse_Entry } from "@certusone/wormhole-sdk-proto-web/lib/cjs/publicrpc/v1/publicrpc";
|
||||
|
||||
export type HeartbeatInfo = {
|
||||
guardian: string;
|
||||
name: string;
|
||||
network: Heartbeat_Network;
|
||||
};
|
||||
|
||||
export type ChainIdToHeartbeats = {
|
||||
[chainId: number]: HeartbeatInfo[];
|
||||
};
|
||||
|
||||
function useChainHeartbeats(heartbeats: GetLastHeartbeatsResponse_Entry[]) {
|
||||
const chainIdsToHeartbeats: ChainIdToHeartbeats = {};
|
||||
heartbeats.forEach((heartbeat) => {
|
||||
heartbeat.rawHeartbeat?.networks.forEach((network) => {
|
||||
if (!chainIdsToHeartbeats[network.id]) {
|
||||
chainIdsToHeartbeats[network.id] = [];
|
||||
}
|
||||
chainIdsToHeartbeats[network.id].push({
|
||||
guardian: heartbeat.p2pNodeAddr,
|
||||
name: heartbeat.rawHeartbeat?.nodeName || "",
|
||||
network,
|
||||
});
|
||||
});
|
||||
});
|
||||
return chainIdsToHeartbeats;
|
||||
}
|
||||
export default useChainHeartbeats;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import {
|
||||
GovernorGetAvailableNotionalByChainResponse_Entry,
|
||||
GovernorGetEnqueuedVAAsResponse_Entry,
|
||||
GovernorGetTokenListResponse_Entry,
|
||||
} from "@certusone/wormhole-sdk-proto-web/lib/cjs/publicrpc/v1/publicrpc";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNetworkContext } from "../contexts/NetworkContext";
|
||||
import { getGovernorAvailableNotionalByChain } from "../utils/getGovernorAvailableNotionalByChain";
|
||||
import { getGovernorEnqueuedVAAs } from "../utils/getGovernorEnqueuedVAAs";
|
||||
import { getGovernorTokenList } from "../utils/getGovernorTokenList";
|
||||
|
||||
type GovernorInfo = {
|
||||
notionals: GovernorGetAvailableNotionalByChainResponse_Entry[];
|
||||
tokens: GovernorGetTokenListResponse_Entry[];
|
||||
enqueued: GovernorGetEnqueuedVAAsResponse_Entry[];
|
||||
};
|
||||
|
||||
const createEmptyInfo = (): GovernorInfo => ({
|
||||
notionals: [],
|
||||
tokens: [],
|
||||
enqueued: [],
|
||||
});
|
||||
|
||||
const TIMEOUT = 10 * 1000;
|
||||
|
||||
function useGovernorInfo(): GovernorInfo {
|
||||
const { currentNetwork } = useNetworkContext();
|
||||
const [governorInfo, setGovernorInfo] = useState<GovernorInfo>(
|
||||
createEmptyInfo()
|
||||
);
|
||||
useEffect(() => {
|
||||
setGovernorInfo(createEmptyInfo());
|
||||
}, [currentNetwork]);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
while (!cancelled) {
|
||||
const response = await getGovernorAvailableNotionalByChain(
|
||||
currentNetwork
|
||||
);
|
||||
if (!cancelled) {
|
||||
setGovernorInfo((info) => ({ ...info, notionals: response.entries }));
|
||||
await new Promise((resolve) => setTimeout(resolve, TIMEOUT));
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentNetwork]);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
// TODO: only update GovernorInfo with changes to token list, but that will cause displaySymbols to break
|
||||
while (!cancelled) {
|
||||
const response = await getGovernorTokenList(currentNetwork);
|
||||
if (!cancelled) {
|
||||
setGovernorInfo((info) => ({ ...info, tokens: response.entries }));
|
||||
await new Promise((resolve) => setTimeout(resolve, TIMEOUT));
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentNetwork]);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
while (!cancelled) {
|
||||
const response = await getGovernorEnqueuedVAAs(currentNetwork);
|
||||
if (!cancelled) {
|
||||
setGovernorInfo((info) => ({ ...info, enqueued: response.entries }));
|
||||
await new Promise((resolve) => setTimeout(resolve, TIMEOUT));
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentNetwork]);
|
||||
return governorInfo;
|
||||
}
|
||||
export default useGovernorInfo;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNetworkContext } from "../contexts/NetworkContext";
|
||||
import { NumberLong } from "../utils/longToDate";
|
||||
|
||||
export type HeartbeatResponse = {
|
||||
boottimestamp: NumberLong;
|
||||
counter: number;
|
||||
createdAt: string;
|
||||
features: string[] | null;
|
||||
guardianaddr: string;
|
||||
networks: {
|
||||
contractaddress: string;
|
||||
errorcount: number;
|
||||
height: number;
|
||||
id: number;
|
||||
}[];
|
||||
nodename: string;
|
||||
timestamp: NumberLong;
|
||||
updatedAt: string;
|
||||
version: string;
|
||||
_id: string;
|
||||
};
|
||||
|
||||
function useHeartbeats(): HeartbeatResponse[] {
|
||||
const { currentNetwork } = useNetworkContext();
|
||||
const [heartbeats, setHeartbeats] = useState<HeartbeatResponse[]>([]);
|
||||
useEffect(() => {
|
||||
setHeartbeats([]);
|
||||
}, [currentNetwork]);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
while (!cancelled) {
|
||||
const response = await axios.get<HeartbeatResponse[]>(
|
||||
"http://localhost:3000/api/heartbeats"
|
||||
);
|
||||
if (!cancelled) {
|
||||
setHeartbeats(
|
||||
response.data.sort(
|
||||
(a, b) => a.nodename.localeCompare(b.nodename || "") || -1
|
||||
)
|
||||
);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentNetwork]);
|
||||
return heartbeats;
|
||||
}
|
||||
export default useHeartbeats;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
// https://docs.github.com/en/rest/releases/releases#get-the-latest-release
|
||||
function useLatestRelease(): string | null {
|
||||
const [latestRelease, setLatestRelease] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
while (!cancelled) {
|
||||
const response = await axios.get(
|
||||
"https://api.github.com/repos/wormhole-foundation/wormhole/releases/latest"
|
||||
);
|
||||
if (!cancelled) {
|
||||
setLatestRelease(response.data?.tag_name || null);
|
||||
await new Promise((resolve) => setTimeout(resolve, 60000));
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
return latestRelease;
|
||||
}
|
||||
export default useLatestRelease;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNetworkContext } from "../contexts/NetworkContext";
|
||||
|
||||
export type VAAsResponse = {
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
vaa: string;
|
||||
_id: string;
|
||||
};
|
||||
|
||||
function useLatestVAAs(): VAAsResponse[] {
|
||||
const { currentNetwork } = useNetworkContext();
|
||||
const [vaas, setVAAs] = useState<VAAsResponse[]>([]);
|
||||
useEffect(() => {
|
||||
setVAAs([]);
|
||||
}, [currentNetwork]);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
while (!cancelled) {
|
||||
const response = await axios.get<VAAsResponse[]>(
|
||||
"http://localhost:3000/api/vaas/2"
|
||||
);
|
||||
if (!cancelled) {
|
||||
setVAAs(response.data);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentNetwork]);
|
||||
return vaas;
|
||||
}
|
||||
export default useLatestVAAs;
|
||||
|
|
@ -0,0 +1,418 @@
|
|||
import {
|
||||
ChainId,
|
||||
CHAIN_ID_SOLANA,
|
||||
CHAIN_ID_TERRA,
|
||||
isEVMChain,
|
||||
isHexNativeTerra,
|
||||
tryHexToNativeAssetString,
|
||||
tryNativeToHexString,
|
||||
} from "@certusone/wormhole-sdk";
|
||||
import { GovernorGetTokenListResponse_Entry } from "@certusone/wormhole-sdk-proto-web/lib/cjs/publicrpc/v1/publicrpc";
|
||||
import { LCDClient } from "@terra-money/terra.js";
|
||||
import axios from "axios";
|
||||
import { ethers } from "ethers";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { CHAIN_INFO_MAP } from "../utils/consts";
|
||||
|
||||
require("dotenv").config();
|
||||
|
||||
function newProvider(
|
||||
url: string,
|
||||
batch: boolean = false
|
||||
): ethers.providers.JsonRpcProvider | ethers.providers.JsonRpcBatchProvider {
|
||||
// only support http(s), not ws(s) as the websocket constructor can blow up the entire process
|
||||
// it uses a nasty setTimeout(()=>{},0) so we are unable to cleanly catch its errors
|
||||
if (url.startsWith("http")) {
|
||||
if (batch) {
|
||||
return new ethers.providers.JsonRpcBatchProvider(url);
|
||||
}
|
||||
return new ethers.providers.JsonRpcProvider(url);
|
||||
}
|
||||
throw new Error("url does not start with http/https!");
|
||||
}
|
||||
|
||||
const ERC20_BASIC_ABI = [
|
||||
"function name() view returns (string name)",
|
||||
"function symbol() view returns (string symbol)",
|
||||
"function decimals() view returns (uint8 decimals)",
|
||||
];
|
||||
|
||||
//for evm chains
|
||||
async function getTokenContract(
|
||||
address: string,
|
||||
provider:
|
||||
| ethers.providers.JsonRpcProvider
|
||||
| ethers.providers.JsonRpcBatchProvider
|
||||
) {
|
||||
const contract = new ethers.Contract(address, ERC20_BASIC_ABI, provider);
|
||||
return contract;
|
||||
}
|
||||
|
||||
type TokenInfo = {
|
||||
address: string;
|
||||
name: string;
|
||||
decimals: number;
|
||||
symbol: string;
|
||||
};
|
||||
|
||||
async function getEvmTokenMetaData(
|
||||
chain: ChainId,
|
||||
governorTokenList: GovernorGetTokenListResponse_Entry[]
|
||||
) {
|
||||
const chainInfo = CHAIN_INFO_MAP[chain];
|
||||
var formattedAddressMap: { [key: string]: string } = {};
|
||||
var formattedTokens: string[] = [];
|
||||
try {
|
||||
const tokenListByChain = governorTokenList
|
||||
.filter(
|
||||
(g) =>
|
||||
g.originChainId === chainInfo.chainId &&
|
||||
!TOKEN_CACHE.get([chain, g.originAddress].join("_"))
|
||||
)
|
||||
.map((tk) => tk.originAddress);
|
||||
tokenListByChain.forEach((tk) => {
|
||||
const tk_ = tryHexToNativeAssetString(tk.slice(2), chainInfo.chainId);
|
||||
formattedTokens.push(tk_);
|
||||
formattedAddressMap[tk_] = tk;
|
||||
});
|
||||
|
||||
let provider = newProvider(
|
||||
chainInfo.endpointUrl,
|
||||
true
|
||||
) as ethers.providers.JsonRpcBatchProvider;
|
||||
|
||||
const tokenContracts = await Promise.all(
|
||||
formattedTokens.map((tokenAddress) =>
|
||||
getTokenContract(tokenAddress, provider)
|
||||
)
|
||||
);
|
||||
const tokenInfos = await Promise.all(
|
||||
tokenContracts.map((tokenContract) =>
|
||||
Promise.all([
|
||||
tokenContract.address.toLowerCase(),
|
||||
tokenContract.name(),
|
||||
tokenContract.decimals(),
|
||||
// tokenContract.balanceOf(bridgeAddress),
|
||||
tokenContract.symbol(),
|
||||
])
|
||||
)
|
||||
);
|
||||
|
||||
tokenInfos.forEach((tk) => {
|
||||
TOKEN_CACHE.set([chain, formattedAddressMap[tk[0]]].join("_"), {
|
||||
address: tk[0],
|
||||
name: tk[1],
|
||||
decimals: tk[2],
|
||||
symbol: tk[3],
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(chain, chainInfo);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
async function loadTokenListSolana(
|
||||
url = "https://token-list.solana.com/solana.tokenlist.json"
|
||||
) {
|
||||
const response: any = await axios.get(url).catch(function (error) {
|
||||
if (error.response) {
|
||||
console.log("could not load token list", error.response.status);
|
||||
}
|
||||
});
|
||||
if (response["status"] === 200) {
|
||||
const data = response["data"];
|
||||
const token_list = data.tokens;
|
||||
return token_list;
|
||||
} else {
|
||||
console.log("bad response for token list");
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function getSolanaTokenMetaData(
|
||||
chain: ChainId,
|
||||
governorTokenList: GovernorGetTokenListResponse_Entry[]
|
||||
) {
|
||||
const chainInfo = CHAIN_INFO_MAP[chain];
|
||||
var formattedAddressMap: { [key: string]: string } = {};
|
||||
var formattedTokens: string[] = [];
|
||||
try {
|
||||
const tokenListByChain = governorTokenList
|
||||
.filter(
|
||||
(g) =>
|
||||
g.originChainId === chainInfo.chainId &&
|
||||
!TOKEN_CACHE.get([chain, g.originAddress].join("_"))
|
||||
)
|
||||
.map((tk) => tk.originAddress);
|
||||
|
||||
tokenListByChain.forEach((tk) => {
|
||||
const tk_ = tryHexToNativeAssetString(tk.slice(2), chainInfo.chainId);
|
||||
formattedTokens.push(tk_);
|
||||
formattedAddressMap[tk_] = tk;
|
||||
});
|
||||
|
||||
var metaDataArr: any[] = [];
|
||||
try {
|
||||
metaDataArr = await loadTokenListSolana();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
var tokenContracts: TokenInfo[] = [];
|
||||
formattedTokens.forEach((token) => {
|
||||
const metaData = metaDataArr.filter((x) => x.address === token);
|
||||
if (metaData.length > 0) {
|
||||
tokenContracts.push(metaData[0]);
|
||||
}
|
||||
});
|
||||
tokenContracts.forEach((tokenContract) => {
|
||||
TOKEN_CACHE.set(
|
||||
[chain, formattedAddressMap[tokenContract.address]].join("_"),
|
||||
{
|
||||
address: tokenContract.address,
|
||||
name: tokenContract.name,
|
||||
decimals: tokenContract.decimals,
|
||||
symbol: tokenContract.symbol,
|
||||
}
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(chain, chainInfo);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
type TerraMetadata = {
|
||||
address: string;
|
||||
symbol?: string;
|
||||
logo?: string;
|
||||
name?: string;
|
||||
decimals?: number;
|
||||
};
|
||||
|
||||
const fetchSingleTerraMetadata = async (address: string, lcd: LCDClient) =>
|
||||
lcd.wasm
|
||||
.contractQuery(address, {
|
||||
token_info: {},
|
||||
})
|
||||
.then(
|
||||
({ symbol, name, decimals }: any) =>
|
||||
({ address: address, symbol, name, decimals } as TerraMetadata)
|
||||
);
|
||||
|
||||
async function getSingleTerraMetaData(
|
||||
originAddress: string,
|
||||
originChain: ChainId
|
||||
) {
|
||||
const TERRA_HOST = {
|
||||
URL:
|
||||
originChain === CHAIN_ID_TERRA
|
||||
? "https://columbus-fcd.terra.dev"
|
||||
: "https://phoenix-fcd.terra.dev",
|
||||
chainID: originChain === CHAIN_ID_TERRA ? "columbus-5" : "phoenix-1",
|
||||
name: "mainnet",
|
||||
};
|
||||
const lcd = new LCDClient(TERRA_HOST);
|
||||
|
||||
if (isHexNativeTerra(tryNativeToHexString(originAddress, originChain))) {
|
||||
if (originAddress === "uusd") {
|
||||
return {
|
||||
address: originAddress,
|
||||
name: "UST Classic",
|
||||
symbol: "USTC",
|
||||
decimals: 6,
|
||||
};
|
||||
} else if (originAddress === "uluna") {
|
||||
return {
|
||||
address: originAddress,
|
||||
name: "Luna Classic",
|
||||
symbol: "LUNC",
|
||||
decimals: 6,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
address: originAddress,
|
||||
name: "",
|
||||
symbol: "",
|
||||
decimals: 8,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return await fetchSingleTerraMetadata(originAddress, lcd);
|
||||
}
|
||||
}
|
||||
|
||||
async function getTerraTokenMetaData(
|
||||
chain: ChainId,
|
||||
governorTokenList: GovernorGetTokenListResponse_Entry[]
|
||||
) {
|
||||
const chainInfo = CHAIN_INFO_MAP[chain];
|
||||
var formattedAddressMap: { [key: string]: string } = {};
|
||||
var formattedTokens: string[] = [];
|
||||
try {
|
||||
const tokenListByChain = governorTokenList
|
||||
.filter(
|
||||
(g) =>
|
||||
g.originChainId === chainInfo.chainId &&
|
||||
!TOKEN_CACHE.get([chain, g.originAddress].join("_"))
|
||||
)
|
||||
.map((tk) => tk.originAddress);
|
||||
|
||||
tokenListByChain.forEach((tk) => {
|
||||
const tk_ = tryHexToNativeAssetString(tk.slice(2), chainInfo.chainId);
|
||||
formattedTokens.push(tk_);
|
||||
formattedAddressMap[tk_] = tk;
|
||||
});
|
||||
|
||||
var tokenContracts: any[] = [];
|
||||
for (let i = 0; i < formattedTokens.length; i++) {
|
||||
const token = formattedTokens[i];
|
||||
const metaData = await getSingleTerraMetaData(token, chain);
|
||||
tokenContracts.push(metaData);
|
||||
}
|
||||
|
||||
tokenContracts.forEach((tokenContract) => {
|
||||
TOKEN_CACHE.set(
|
||||
[chain, formattedAddressMap[tokenContract.address]].join("_"),
|
||||
{
|
||||
address: tokenContract.address,
|
||||
name: tokenContract.name,
|
||||
decimals: tokenContract.decimals,
|
||||
symbol: tokenContract.symbol,
|
||||
}
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(chain, chainInfo);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const MISC_TOKEN_META_DATA: {
|
||||
[key: string]: {
|
||||
[key: string]: { name: string; symbol: string; decimals: number };
|
||||
};
|
||||
} = {
|
||||
"8": {
|
||||
"0x0000000000000000000000000000000000000000000000000000000000000000": {
|
||||
name: "ALGO",
|
||||
symbol: "ALGO",
|
||||
decimals: 6,
|
||||
},
|
||||
"0x000000000000000000000000000000000000000000000000000000000004c5c1": {
|
||||
name: "USDT",
|
||||
symbol: "USDT",
|
||||
decimals: 6,
|
||||
},
|
||||
"0x0000000000000000000000000000000000000000000000000000000001e1ab70": {
|
||||
name: "USDC",
|
||||
symbol: "USDC",
|
||||
decimals: 6,
|
||||
},
|
||||
},
|
||||
"15": {
|
||||
"0x0000000000000000000000000000000000000000000000000000000000000000": {
|
||||
name: "NEAR",
|
||||
symbol: "NEAR",
|
||||
decimals: 24,
|
||||
},
|
||||
},
|
||||
"18": {
|
||||
"0x01fa6c6fbc36d8c245b0a852a43eb5d644e8b4c477b27bfab9537c10945939da": {
|
||||
name: "LUNA",
|
||||
symbol: "LUNA",
|
||||
decimals: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
async function getMiscTokenMetaData(
|
||||
chain: ChainId,
|
||||
governorTokenList: GovernorGetTokenListResponse_Entry[]
|
||||
) {
|
||||
const chainInfo = CHAIN_INFO_MAP[chain];
|
||||
const tokenMetaDataByChain = MISC_TOKEN_META_DATA[chain.toString()];
|
||||
try {
|
||||
const tokenListByChain = governorTokenList
|
||||
.filter(
|
||||
(g) =>
|
||||
g.originChainId === chainInfo.chainId &&
|
||||
!TOKEN_CACHE.get([chain, g.originAddress].join("_"))
|
||||
)
|
||||
.map((tk) => tk.originAddress);
|
||||
|
||||
tokenListByChain.forEach((tk) => {
|
||||
const metaData = tokenMetaDataByChain[tk];
|
||||
TOKEN_CACHE.set([chain, tk].join("_"), {
|
||||
address: tk,
|
||||
name: metaData?.name,
|
||||
decimals: metaData?.decimals,
|
||||
symbol: metaData?.symbol,
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(chain, chainInfo);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const TOKEN_CACHE = new Map<string, TokenInfo>();
|
||||
|
||||
async function getTokenMetaData(
|
||||
governorTokenList: GovernorGetTokenListResponse_Entry[]
|
||||
) {
|
||||
const chains = Object.keys(CHAIN_INFO_MAP);
|
||||
for (let i = 0; i < chains.length; i++) {
|
||||
const chain = chains[i];
|
||||
|
||||
const chainInfo = CHAIN_INFO_MAP[chain];
|
||||
const chainId = chainInfo.chainId;
|
||||
try {
|
||||
//grab token info
|
||||
|
||||
if (isEVMChain(chainId)) {
|
||||
await getEvmTokenMetaData(chainId, governorTokenList);
|
||||
} else if (chainId === CHAIN_ID_SOLANA) {
|
||||
await getSolanaTokenMetaData(chainId, governorTokenList);
|
||||
} else if (chainId === CHAIN_ID_TERRA) {
|
||||
await getTerraTokenMetaData(chainId, governorTokenList);
|
||||
} else {
|
||||
// currently no support for ALGORAND, NEAR, TERRA2
|
||||
console.log(`the chain=${chain} is not supported`);
|
||||
await getMiscTokenMetaData(chainId, governorTokenList);
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 6000));
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(chain, chainInfo);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 3000000));
|
||||
return;
|
||||
}
|
||||
|
||||
const TIMEOUT = 60 * 1000;
|
||||
|
||||
function useSymbolInfo(tokens: GovernorGetTokenListResponse_Entry[]) {
|
||||
// TODO: GovernorInfo gets fetched repeatedly, but we don't need to refresh the list
|
||||
// So using string'd version of token list as a hack around when to update the token list
|
||||
const memoizedTokens = useMemo(() => JSON.stringify(tokens), [tokens]);
|
||||
|
||||
useEffect(() => {
|
||||
const tokens = JSON.parse(memoizedTokens);
|
||||
(async () => {
|
||||
// TODO: use a state setter to update instead of relying on TOKEN_CACHE.
|
||||
await getTokenMetaData(tokens);
|
||||
await new Promise((resolve) => setTimeout(resolve, TIMEOUT));
|
||||
})();
|
||||
}, [memoizedTokens]);
|
||||
return TOKEN_CACHE;
|
||||
}
|
||||
|
||||
export default useSymbolInfo;
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import { SvgIcon } from "@mui/material";
|
||||
|
||||
// paths taken from wormhole-symbol.inline.svg
|
||||
|
||||
function WormholeStatsIcon() {
|
||||
return (
|
||||
<SvgIcon viewBox="0 0 40 40">
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M20,40c-5.3,0-10.4-2.1-14.1-5.9C2.1,30.4,0,25.3,0,20C0,14.7,2.1,9.6,5.9,5.9C9.6,2.1,14.7,0,20,0
|
||||
c5.3,0,10.4,2.1,14.1,5.9C37.9,9.6,40,14.7,40,20c0,5.3-2.1,10.4-5.9,14.1C30.4,37.9,25.3,40,20,40z M20,1.5c-4.9,0-9.6,1.9-13,5.4
|
||||
s-5.4,8.1-5.4,13c0,4.9,2,9.6,5.4,13c3.5,3.5,8.2,5.4,13,5.4s9.6-1.9,13-5.4c3.5-3.5,5.4-8.1,5.4-13c0-4.9-2-9.6-5.4-13
|
||||
C29.6,3.5,24.9,1.5,20,1.5L20,1.5z"
|
||||
/>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M22.5,36.8c-4.4,0-8.6-1.7-11.7-4.9C7.7,28.8,6,24.6,6,20.2c0-4.4,1.8-8.6,4.9-11.7c3.1-3.1,7.3-4.8,11.7-4.9
|
||||
c4.4,0,8.6,1.7,11.7,4.9c3.1,3.1,4.9,7.3,4.9,11.7c0,4.4-1.8,8.6-4.9,11.7C31.1,35.1,26.9,36.8,22.5,36.8z M22.5,4.9
|
||||
c-4.1,0-8,1.6-10.9,4.5c-2.9,2.9-4.5,6.8-4.5,10.9c0,4.1,1.6,8,4.5,10.9c2.9,2.9,6.8,4.5,10.9,4.5c4.1,0,8-1.6,10.9-4.5
|
||||
c2.9-2.9,4.5-6.8,4.5-10.9c0-4.1-1.6-8-4.5-10.9C30.5,6.5,26.6,4.9,22.5,4.9L22.5,4.9z"
|
||||
/>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M25.1,33.6c-3.5,0-6.8-1.4-9.3-3.8c-2.5-2.5-3.8-5.8-3.9-9.3c0-3.5,1.4-6.8,3.9-9.3c2.5-2.5,5.8-3.8,9.3-3.8
|
||||
c3.5,0,6.8,1.4,9.3,3.8c2.5,2.5,3.8,5.8,3.9,9.3c0,3.5-1.4,6.8-3.9,9.3C31.9,32.3,28.5,33.6,25.1,33.6L25.1,33.6z M25.1,8.2
|
||||
c-3.3,0-6.4,1.3-8.7,3.6c-2.3,2.3-3.6,5.4-3.6,8.7c0,3.3,1.3,6.4,3.6,8.7c2.3,2.3,5.4,3.6,8.7,3.6c3.3,0,6.4-1.3,8.7-3.6
|
||||
c2.3-2.3,3.6-5.4,3.6-8.7c0-3.3-1.3-6.4-3.6-8.7C31.4,9.5,28.3,8.2,25.1,8.2L25.1,8.2z"
|
||||
/>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M27.6,30.5c-2.6,0-5-1-6.9-2.8c-1.8-1.8-2.8-4.3-2.8-6.9c0-2.6,1-5,2.8-6.9c1.8-1.8,4.3-2.8,6.9-2.8
|
||||
c2.6,0,5,1,6.9,2.8s2.8,4.3,2.8,6.9c0,2.6-1,5-2.8,6.9C32.6,29.5,30.2,30.5,27.6,30.5L27.6,30.5z M27.6,11.6c-2.4,0-4.8,1-6.5,2.7
|
||||
c-1.7,1.7-2.7,4.1-2.7,6.5c0,2.4,1,4.8,2.7,6.5c1.7,1.7,4.1,2.7,6.5,2.7c2.4,0,4.8-1,6.5-2.7c1.7-1.7,2.7-4.1,2.7-6.5
|
||||
c0-2.4-1-4.8-2.7-6.5C32.4,12.6,30,11.6,27.6,11.6z"
|
||||
/>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
stroke="#231f20"
|
||||
strokeMiterlimit="10"
|
||||
d="M37.2,10.5h-7.1c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8h2.8l-7.6,7.6l-1,1l-0.2,0.2l-2.3,2.3l-8.2-8.2
|
||||
c-0.3-0.3-0.8-0.5-1.3-0.5c-0.5,0-0.9,0.2-1.3,0.5l-9.5,9.5C1.2,26.8,1,27.2,1,27.7c0,1,0.8,1.8,1.8,1.8c0.5,0,0.9-0.2,1.3-0.5
|
||||
l8.2-8.2l8.2,8.2c0.3,0.3,0.8,0.5,1.3,0.5s0.9-0.2,1.3-0.5l3.5-3.5l0,0l8.9-8.9v2.8c0,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8v-7.1
|
||||
C39,11.3,38.2,10.5,37.2,10.5z"
|
||||
/>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
export default WormholeStatsIcon;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#231F20;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
.st2{fill:#FFFFFF;stroke:#231F20;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<rect class="st0" width="40" height="40"/>
|
||||
<path class="st1" d="M20,40c-5.3,0-10.4-2.1-14.1-5.9C2.1,30.4,0,25.3,0,20C0,14.7,2.1,9.6,5.9,5.9C9.6,2.1,14.7,0,20,0
|
||||
c5.3,0,10.4,2.1,14.1,5.9C37.9,9.6,40,14.7,40,20c0,5.3-2.1,10.4-5.9,14.1C30.4,37.9,25.3,40,20,40z M20,1.5c-4.9,0-9.6,1.9-13,5.4
|
||||
s-5.4,8.1-5.4,13c0,4.9,2,9.6,5.4,13c3.5,3.5,8.2,5.4,13,5.4s9.6-1.9,13-5.4c3.5-3.5,5.4-8.1,5.4-13c0-4.9-2-9.6-5.4-13
|
||||
C29.6,3.5,24.9,1.5,20,1.5L20,1.5z"/>
|
||||
<path class="st1" d="M22.5,36.8c-4.4,0-8.6-1.7-11.7-4.9C7.7,28.8,6,24.6,6,20.2c0-4.4,1.8-8.6,4.9-11.7c3.1-3.1,7.3-4.8,11.7-4.9
|
||||
c4.4,0,8.6,1.7,11.7,4.9c3.1,3.1,4.9,7.3,4.9,11.7c0,4.4-1.8,8.6-4.9,11.7C31.1,35.1,26.9,36.8,22.5,36.8z M22.5,4.9
|
||||
c-4.1,0-8,1.6-10.9,4.5c-2.9,2.9-4.5,6.8-4.5,10.9c0,4.1,1.6,8,4.5,10.9c2.9,2.9,6.8,4.5,10.9,4.5c4.1,0,8-1.6,10.9-4.5
|
||||
c2.9-2.9,4.5-6.8,4.5-10.9c0-4.1-1.6-8-4.5-10.9C30.5,6.5,26.6,4.9,22.5,4.9L22.5,4.9z"/>
|
||||
<path class="st1" d="M25.1,33.6c-3.5,0-6.8-1.4-9.3-3.8c-2.5-2.5-3.8-5.8-3.9-9.3c0-3.5,1.4-6.8,3.9-9.3c2.5-2.5,5.8-3.8,9.3-3.8
|
||||
c3.5,0,6.8,1.4,9.3,3.8c2.5,2.5,3.8,5.8,3.9,9.3c0,3.5-1.4,6.8-3.9,9.3C31.9,32.3,28.5,33.6,25.1,33.6L25.1,33.6z M25.1,8.2
|
||||
c-3.3,0-6.4,1.3-8.7,3.6c-2.3,2.3-3.6,5.4-3.6,8.7c0,3.3,1.3,6.4,3.6,8.7c2.3,2.3,5.4,3.6,8.7,3.6c3.3,0,6.4-1.3,8.7-3.6
|
||||
c2.3-2.3,3.6-5.4,3.6-8.7c0-3.3-1.3-6.4-3.6-8.7C31.4,9.5,28.3,8.2,25.1,8.2L25.1,8.2z"/>
|
||||
<path class="st1" d="M27.6,30.5c-2.6,0-5-1-6.9-2.8c-1.8-1.8-2.8-4.3-2.8-6.9c0-2.6,1-5,2.8-6.9c1.8-1.8,4.3-2.8,6.9-2.8
|
||||
c2.6,0,5,1,6.9,2.8s2.8,4.3,2.8,6.9c0,2.6-1,5-2.8,6.9C32.6,29.5,30.2,30.5,27.6,30.5L27.6,30.5z M27.6,11.6c-2.4,0-4.8,1-6.5,2.7
|
||||
c-1.7,1.7-2.7,4.1-2.7,6.5c0,2.4,1,4.8,2.7,6.5c1.7,1.7,4.1,2.7,6.5,2.7c2.4,0,4.8-1,6.5-2.7c1.7-1.7,2.7-4.1,2.7-6.5
|
||||
c0-2.4-1-4.8-2.7-6.5C32.4,12.6,30,11.6,27.6,11.6z"/>
|
||||
<path class="st2" d="M37.2,10.5h-7.1c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8h2.8l-7.6,7.6l-1,1l-0.2,0.2l-2.3,2.3l-8.2-8.2
|
||||
c-0.3-0.3-0.8-0.5-1.3-0.5c-0.5,0-0.9,0.2-1.3,0.5l-9.5,9.5C1.2,26.8,1,27.2,1,27.7c0,1,0.8,1.8,1.8,1.8c0.5,0,0.9-0.2,1.3-0.5
|
||||
l8.2-8.2l8.2,8.2c0.3,0.3,0.8,0.5,1.3,0.5s0.9-0.2,1.3-0.5l3.5-3.5l0,0l8.9-8.9v2.8c0,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8v-7.1
|
||||
C39,11.3,38.2,10.5,37.2,10.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root") as any);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { CHAINS } from "@certusone/wormhole-sdk";
|
||||
|
||||
const chainIdToNameMap = Object.fromEntries(
|
||||
Object.entries(CHAINS).map(([key, value]) => [value, key])
|
||||
);
|
||||
const chainIdToName = (chainId: number) =>
|
||||
chainIdToNameMap[chainId] || "Unknown";
|
||||
export default chainIdToName;
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
import {
|
||||
CHAIN_ID_SOLANA,
|
||||
CHAIN_ID_ETH,
|
||||
CHAIN_ID_TERRA,
|
||||
CHAIN_ID_BSC,
|
||||
CHAIN_ID_POLYGON,
|
||||
CHAIN_ID_AVAX,
|
||||
CHAIN_ID_OASIS,
|
||||
CHAIN_ID_ALGORAND,
|
||||
CHAIN_ID_AURORA,
|
||||
CHAIN_ID_FANTOM,
|
||||
CHAIN_ID_KARURA,
|
||||
CHAIN_ID_ACALA,
|
||||
CHAIN_ID_KLAYTN,
|
||||
CHAIN_ID_CELO,
|
||||
CHAIN_ID_TERRA2,
|
||||
ChainId,
|
||||
CHAIN_ID_NEAR,
|
||||
} from "@certusone/wormhole-sdk";
|
||||
|
||||
require("dotenv").config();
|
||||
|
||||
export type CHAIN_INFO = {
|
||||
name: string;
|
||||
evm: boolean;
|
||||
chainId: ChainId;
|
||||
endpointUrl: any;
|
||||
platform: string;
|
||||
covalentChain: number;
|
||||
explorerStem: string;
|
||||
apiKey: string;
|
||||
urlStem: string;
|
||||
};
|
||||
|
||||
export const CHAIN_INFO_MAP: { [key: string]: CHAIN_INFO } = {
|
||||
1: {
|
||||
name: "solana",
|
||||
evm: false,
|
||||
chainId: CHAIN_ID_SOLANA,
|
||||
urlStem: `https://public-api.solscan.io`,
|
||||
endpointUrl:
|
||||
process.env.REACT_APP_SOLANA_RPC || "https://api.mainnet-beta.solana.com",
|
||||
apiKey: "",
|
||||
platform: "solana",
|
||||
covalentChain: 1399811149,
|
||||
explorerStem: `https://solscan.io`,
|
||||
},
|
||||
2: {
|
||||
name: "eth",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_ETH,
|
||||
endpointUrl: process.env.REACT_APP_ETH_RPC || "https://rpc.ankr.com/eth",
|
||||
apiKey: "",
|
||||
urlStem: `https://api.etherscan.io`,
|
||||
platform: "ethereum",
|
||||
covalentChain: 1,
|
||||
explorerStem: `https://etherscan.io`,
|
||||
},
|
||||
3: {
|
||||
name: "terra",
|
||||
evm: false,
|
||||
chainId: CHAIN_ID_TERRA,
|
||||
endpointUrl: "",
|
||||
apiKey: "",
|
||||
urlStem: "https://columbus-fcd.terra.dev",
|
||||
platform: "terra",
|
||||
covalentChain: 3,
|
||||
explorerStem: `https://finder.terra.money/classic`,
|
||||
},
|
||||
4: {
|
||||
name: "bsc",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_BSC,
|
||||
endpointUrl:
|
||||
process.env.REACT_APP_BSC_RPC || "https://bsc-dataseed2.defibit.io",
|
||||
apiKey: "",
|
||||
urlStem: `https://api.bscscan.com`,
|
||||
platform: "binance-smart-chain",
|
||||
covalentChain: 56,
|
||||
explorerStem: `https://bscscan.com`,
|
||||
},
|
||||
5: {
|
||||
name: "polygon",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_POLYGON,
|
||||
endpointUrl: process.env.REACT_APP_POLYGON_RPC || "https://polygon-rpc.com",
|
||||
apiKey: "",
|
||||
urlStem: `https://api.polygonscan.com`,
|
||||
platform: "polygon-pos", //coingecko?,
|
||||
covalentChain: 137,
|
||||
explorerStem: `https://polygonscan.com`,
|
||||
},
|
||||
6: {
|
||||
name: "avalanche",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_AVAX,
|
||||
endpointUrl:
|
||||
process.env.REACT_APP_AVAX_RPC || "https://api.avax.network/ext/bc/C/rpc",
|
||||
apiKey: "",
|
||||
urlStem: `https://api.snowtrace.io`,
|
||||
platform: "avalanche", //coingecko?
|
||||
covalentChain: 43114,
|
||||
explorerStem: `https://snowtrace.io`,
|
||||
},
|
||||
7: {
|
||||
name: "oasis",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_OASIS,
|
||||
endpointUrl: "https://emerald.oasis.dev",
|
||||
apiKey: "",
|
||||
urlStem: `https://explorer.emerald.oasis.dev`,
|
||||
platform: "oasis", //coingecko?
|
||||
covalentChain: 0,
|
||||
explorerStem: `https://explorer.emerald.oasis.dev`,
|
||||
},
|
||||
8: {
|
||||
name: "algorand",
|
||||
evm: false,
|
||||
chainId: CHAIN_ID_ALGORAND,
|
||||
endpointUrl: "https://node.algoexplorerapi.io",
|
||||
apiKey: "",
|
||||
urlStem: `https://algoexplorer.io`,
|
||||
platform: "algorand", //coingecko?
|
||||
covalentChain: 0,
|
||||
explorerStem: `https://algoexplorer.io`,
|
||||
},
|
||||
9: {
|
||||
name: "aurora",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_AURORA,
|
||||
endpointUrl: "https://mainnet.aurora.dev",
|
||||
apiKey: "",
|
||||
urlStem: `https://api.aurorascan.dev`, //?module=account&action=txlist&address={addressHash}
|
||||
covalentChain: 1313161554,
|
||||
platform: "aurora", //coingecko?
|
||||
explorerStem: `https://aurorascan.dev`,
|
||||
},
|
||||
10: {
|
||||
name: "fantom",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_FANTOM,
|
||||
endpointUrl: "https://rpc.ftm.tools",
|
||||
apiKey: "",
|
||||
urlStem: `https://api.FtmScan.com`,
|
||||
platform: "fantom", //coingecko?
|
||||
covalentChain: 250,
|
||||
explorerStem: `https://ftmscan.com`,
|
||||
},
|
||||
11: {
|
||||
name: "karura",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_KARURA,
|
||||
endpointUrl: "https://eth-rpc-karura.aca-api.network",
|
||||
apiKey: "",
|
||||
urlStem: `https://blockscout.karura.network`,
|
||||
platform: "karura", //coingecko?
|
||||
covalentChain: 0,
|
||||
explorerStem: `https://blockscout.karura.network`,
|
||||
},
|
||||
12: {
|
||||
name: "acala",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_ACALA,
|
||||
endpointUrl: "https://eth-rpc-acala.aca-api.network",
|
||||
apiKey: "",
|
||||
urlStem: `https://blockscout.acala.network`,
|
||||
platform: "acala", //coingecko?
|
||||
covalentChain: 0,
|
||||
explorerStem: `https://blockscout.acala.network`,
|
||||
},
|
||||
13: {
|
||||
name: "klaytn",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_KLAYTN,
|
||||
endpointUrl: "https://klaytn-mainnet-rpc.allthatnode.com:8551",
|
||||
apiKey: "",
|
||||
urlStem: "https://api-cypress-v2.scope.klaytn.com/v2" || "",
|
||||
platform: "klay-token", //coingecko?
|
||||
covalentChain: 8217,
|
||||
explorerStem: `https://scope.klaytn.com`,
|
||||
},
|
||||
14: {
|
||||
name: "celo",
|
||||
evm: true,
|
||||
chainId: CHAIN_ID_CELO,
|
||||
endpointUrl: "https://forno.celo.org",
|
||||
apiKey: "",
|
||||
urlStem: `https://explorer.celo.org`,
|
||||
platform: "celo", //coingecko?
|
||||
covalentChain: 0,
|
||||
explorerStem: `https://explorer.celo.org`,
|
||||
},
|
||||
15: {
|
||||
name: "near",
|
||||
evm: false,
|
||||
chainId: CHAIN_ID_NEAR,
|
||||
endpointUrl: "",
|
||||
apiKey: "",
|
||||
urlStem: `https://explorer.near.org`,
|
||||
platform: "near", //coingecko?
|
||||
covalentChain: 0,
|
||||
explorerStem: `https://explorer.near.org`,
|
||||
},
|
||||
18: {
|
||||
name: "terra2",
|
||||
evm: false,
|
||||
chainId: CHAIN_ID_TERRA2,
|
||||
endpointUrl: "",
|
||||
apiKey: "",
|
||||
urlStem: "https://phoenix-fcd.terra.dev",
|
||||
platform: "terra",
|
||||
covalentChain: 3,
|
||||
explorerStem: `https://finder.terra.money/mainnet`,
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { publicrpc } from "@certusone/wormhole-sdk-proto-web";
|
||||
import { Network } from "../contexts/NetworkContext";
|
||||
const { GrpcWebImpl, PublicRPCServiceClientImpl } = publicrpc;
|
||||
|
||||
export async function getGovernorAvailableNotionalByChain(network: Network) {
|
||||
const rpc = new GrpcWebImpl(network.endpoint, {});
|
||||
const api = new PublicRPCServiceClientImpl(rpc);
|
||||
return await api.GovernorGetAvailableNotionalByChain({});
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { publicrpc } from "@certusone/wormhole-sdk-proto-web";
|
||||
import { Network } from "../contexts/NetworkContext";
|
||||
const { GrpcWebImpl, PublicRPCServiceClientImpl } = publicrpc;
|
||||
|
||||
export async function getGovernorEnqueuedVAAs(network: Network) {
|
||||
const rpc = new GrpcWebImpl(network.endpoint, {});
|
||||
const api = new PublicRPCServiceClientImpl(rpc);
|
||||
return await api.GovernorGetEnqueuedVAAs({});
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { publicrpc } from "@certusone/wormhole-sdk-proto-web";
|
||||
import { Network } from "../contexts/NetworkContext";
|
||||
const { GrpcWebImpl, PublicRPCServiceClientImpl } = publicrpc;
|
||||
|
||||
export async function getGovernorTokenList(network: Network) {
|
||||
const rpc = new GrpcWebImpl(network.endpoint, {});
|
||||
const api = new PublicRPCServiceClientImpl(rpc);
|
||||
return await api.GovernorGetTokenList({});
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { publicrpc } from "@certusone/wormhole-sdk-proto-web";
|
||||
import { Network } from "../contexts/NetworkContext";
|
||||
const { GrpcWebImpl, PublicRPCServiceClientImpl } = publicrpc;
|
||||
|
||||
export async function getLastHeartbeats(network: Network) {
|
||||
const rpc = new GrpcWebImpl(network.endpoint, {});
|
||||
const api = new PublicRPCServiceClientImpl(rpc);
|
||||
return await api.GetLastHeartbeats({});
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import Long from "long";
|
||||
|
||||
export type NumberLong = {
|
||||
low: number;
|
||||
high: number;
|
||||
unsigned: boolean;
|
||||
};
|
||||
|
||||
function longToDate(l: NumberLong): Date {
|
||||
const value = new Long(l.low, l.high, l.unsigned);
|
||||
return new Date(value.div(1000000).toNumber());
|
||||
}
|
||||
|
||||
export default longToDate;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"downlevelIteration": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
Loading…
Reference in New Issue